Responsive Design Testing the Promet Way

Improving Responsive Design Testing

2

What is Responsive Design

3

Build ONE site &

Displayed well on ALL

devices

Andrew Kucharski’s Slide http://www.slideshare.net/akucharski/prometsource-mobile-development-capabilities

4

Importance of Responsive Design

5

Andrew Kucharski’s Slide http://www.slideshare.net/akucharski/prometsource-mobile-development-capabilities

● Flexibility

● User Experience

● Cost Effective

● Recommended by Google

● Easy to manage

WHY?

6

On May 5, 2015, Google says …

“more Google searches take place on mobile devices than on computers in 10 countries including the US and Japan.”

7

http://www.comscore.com/Insights/Market-Rankings/comScore-Releases-January-2015-US-Desktop-Search-Engine-Rankings

On the month of January 2015

Google sites have 12.1 billion explicit core searches in the US

For Desktop Only

8

https://www.thinkwithgoogle.com/research-studies/creating-moments-that-matter.html

9

https://www.thinkwithgoogle.com/research-studies/creating-moments-that-matter.html

10

11

“responsive design is a requirement, not a bonus”

https://www.prometsource.com/service/drupal-theming

Responsive enough?

12

Challenges

13

● So many combinations, so little time

● Scope

● Team Size / Bandwidth of Team

screen grab from http://www.slideshare.net/ggeoffre/preparing-your-qa-team-for-mobile-testing

14

i. Desktop 1. Chrome 39 and 40 2. Firefox 30 and 31 3. IE 10 and 11 4. Safari 7 and 8

ii. Mobile 1. Safari on iOS 8.3 and

7.1.2 2. Chrome on Android 39

and 40

15

Let’s Tool Up

16

Desktop

1. OS - Top 3 2. Browser Type - Top 4 3. Browser Version - Latest 2

OS Platform

17

Top 3

1 - Win 7

2 - OS X

3 - Win 8.1

Browser Statistics

18

Top 4

1 - Chrome 2 - IE 3 - Firefox 4- Safari

Latest 2 versionsChrome - 44, 43 Firefox - 39, 38 I.E. - 11, 10 Safari - 7, 8

19

Top 3

1 - Win 7 2 - OS X 3 - Win 8.1

Browser Statistics

Top 4

1 - Chrome 2 - IE 3 - Firefox 4- Safari

Latest 2 versions

Chrome - 44, 43 I.E. - 11, 10 Firefox - 39, 38 Safari - 8, 7

Test Combinations

● Win 7 + Chrome 44

● OS X + Firefox 39

● Win 8.1 + IE 11

● OS X + Safari 8

● Win 7 + IE 10

● OS X + Chrome 43

● Win 8.1 + Firefox 38

● OS X + Safari 7

20

Mobile Device

1. OS Version - Top 2 2. Browser Type - Default 3. Devices (Smartphone & Tablet)

21

OS Version - Top 2

1. iOS - (https://developer.apple.com/support/app-store/) a. iOS 8.3 b. iOS 7.1.2

1. Android - (http://developer.android.com/intl/zh-CN/about/dashboards/index.html) a. Kitkat 4.4.4 b. Jelly Bean 4.2.2

22

Mobile Browser

Safari (latest version)

Chrome (latest version)

23

layout format is determined by device detection

Viewport width is often confused with resolution and screen size but they are not the same thing.

Correct The layout is determined only by the viewport width of the browser.

Resolution and screen size are only part of what determines the viewport width. The viewport width is how wide the CSS sees the page. The viewport width for a website is actually affected by a mix of resolution, screen size, pixel density, dppx (dots per pixel unit), on-screen UI elements, and the rendering software of the device.

Misconception

24

Viewport Width + Device

Reference • http://viewportsizes.com/ • http://www.canbike.org/

CSSpixels/

Released iPads have the same Viewport Widths

25

375

iPhone 6

768

iPad Mini 3 iPad Mini 2 iPad Air 3 iPad Air 2 iPad 3 iPad 2 iPad

360

Samsung Galaxy S6 Samsung Galaxy S5 Samsung Galaxy Note 4 Samsung Galaxy Note 3 Nexus 5 HTC One HTC One Mini HTC One X Motorola Moto G

320

iPhone 5S iPhone 4 Nokia Lumia 928 Nokia Lumia 925 Sony Xperia X10

800

Galaxy Tab 2 10.1 Galaxy Note Pro 12.2 Amazon Fire HDX 8.9” MacBook Pro 13” Google Nexus 10

iPhone 5S iOS 7.1.2

Samsung Galaxy S5 KitKat 4.4.4

iPhone 6 iOS 8.3

iPad Mini 2 iOS 8.3

Galaxy Tab 2 10.1 Jelly Bean 4.2.2

26

iPhone 5S iOS 7.1.2

OS X Firefox 39

Win 8.1 IE 11

OS X Safari 8

Win 7 IE 10

Win 8.1 Firefox 38

OS X Chrome 43

OS X Safari 7

Win 7 Chrome 44

Samsung Galaxy S5 KitKat 4.4.4

iPhone 6 iOS 8.3

iPad Mini 2 iOS 8.3

Galaxy Tab 2 10.1 Jelly Bean 4.2.2

DESKTOP MOBILE

27

Common Responsive Design Issues

28

Responsive Design did not work during Minimize then Maximize in Desktop browser

29

Content Overlap

30

Content will Exceed Margin

31

Alignment

32

No Background

Thank You!

33

www.prometsource.com