The document discusses the significance of responsive design in web development, emphasizing that it is essential for delivering a good user experience across various devices. It outlines the current statistics regarding mobile searches, challenges faced in testing, and provides guidance on necessary tools and device combinations for effective testing. Additionally, it highlights common issues encountered in responsive design implementation.

1. Improving Responsive Design Testing

2. 2
What is Responsive Design

3. 3
Build ONE
site &
Displayed
well on ALL
devices
Andrew Kucharski’s Slide
http://www.slideshare.net/
akucharski/prometsource-
mobile-development-
capabilities

4. 4
Importance of
Responsive Design

5. 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. 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. 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. 8
https://www.thinkwithgoogle.com/research-studies/creating-moments-that-matter.html

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

10. 10

11. 11
“responsive design is a requirement, not a bonus”
https://www.prometsource.com/service/drupal-theming

12. Responsive enough?
12

13. 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. 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. 15
Let’s Tool Up

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

17. OS Platform
17
Top 3
1 - Win 7
2 - OS X
3 - Win 8.1

18. Browser
Statistics
18
Top 4
1 - Chrome
2 - IE
3 - Firefox
4- Safari
Latest
2 versions
Chrome - 44, 43
Firefox - 39, 38
I.E. - 11, 10
Safari - 7, 8

19. 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. 20
Mobile Device
1. OS Version - Top 2
2. Browser Type - Default
3. Devices (Smartphone & Tablet)

21. 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. 22
Mobile Browser
Safari (latest version)
Chrome (latest version)

23. 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. 24
Viewport Width + Device
Reference
• http://viewportsizes.com/
• http://www.canbike.org/
CSSpixels/
Released iPads have the same Viewport
Widths

25. 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. 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. 27
Common Responsive Design Issues

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

29. 29
Content
Overlap

30. 30
Content will Exceed Margin

31. 31
Alignment

32. 32
No Background

33. Thank You!
33
www.prometsource.com