responsive design testing the promet way
TRANSCRIPT
![Page 1: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/1.jpg)
Improving Responsive Design Testing
![Page 2: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/2.jpg)
2
What is Responsive Design
![Page 3: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/3.jpg)
3
Build ONE site &
Displayed well on ALL
devices
Andrew Kucharski’s Slide http://www.slideshare.net/akucharski/prometsource-mobile-development-capabilities
![Page 4: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/4.jpg)
4
Importance of Responsive Design
![Page 5: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/5.jpg)
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?
![Page 6: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/6.jpg)
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.”
![Page 7: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/7.jpg)
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
![Page 8: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/8.jpg)
8
https://www.thinkwithgoogle.com/research-studies/creating-moments-that-matter.html
![Page 9: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/9.jpg)
9
https://www.thinkwithgoogle.com/research-studies/creating-moments-that-matter.html
![Page 10: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/10.jpg)
10
![Page 11: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/11.jpg)
11
“responsive design is a requirement, not a bonus”
https://www.prometsource.com/service/drupal-theming
![Page 12: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/12.jpg)
Responsive enough?
12
![Page 13: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/13.jpg)
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
![Page 14: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/14.jpg)
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
![Page 15: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/15.jpg)
15
Let’s Tool Up
![Page 16: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/16.jpg)
16
Desktop
1. OS - Top 3 2. Browser Type - Top 4 3. Browser Version - Latest 2
![Page 17: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/17.jpg)
OS Platform
17
Top 3
1 - Win 7
2 - OS X
3 - Win 8.1
![Page 18: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/18.jpg)
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
![Page 19: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/19.jpg)
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
![Page 20: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/20.jpg)
20
Mobile Device
1. OS Version - Top 2 2. Browser Type - Default 3. Devices (Smartphone & Tablet)
![Page 21: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/21.jpg)
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
![Page 22: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/22.jpg)
22
Mobile Browser
Safari (latest version)
Chrome (latest version)
![Page 23: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/23.jpg)
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
![Page 24: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/24.jpg)
24
Viewport Width + Device
Reference • http://viewportsizes.com/ • http://www.canbike.org/
CSSpixels/
Released iPads have the same Viewport Widths
![Page 25: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/25.jpg)
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
![Page 26: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/26.jpg)
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
![Page 27: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/27.jpg)
27
Common Responsive Design Issues
![Page 28: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/28.jpg)
28
Responsive Design did not work during Minimize then Maximize in Desktop browser
![Page 29: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/29.jpg)
29
Content Overlap
![Page 30: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/30.jpg)
30
Content will Exceed Margin
![Page 31: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/31.jpg)
31
Alignment
![Page 32: Responsive Design Testing the Promet Way](https://reader036.vdocuments.net/reader036/viewer/2022062523/58f1259d1a28abfa728b458b/html5/thumbnails/32.jpg)
32
No Background