Embed Size (px)
Citation preview
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
