Post on 21-Jan-2018
T2 Session 10/27/2016 10:15:00 AM
Test Design for Responsive Websites Presented by:
Adam Rosenberg
Elephant Inc.
Brought to you by:
350 Corporate Way, Suite 400, Orange Park, FL 32073 888---268---8770 ·· 904---278---0524 - info@techwell.com - http://www.starcanada.techwell.com/
Adam Rosenberg Elephant Inc. Adam Rosenberg is the associate director of quality assurance at Elephant Inc., where he leads the testing of large-scale enterprise systems. A strong believer in context-driven exploratory testing, Adam is always looking for ways to improve work quality during all stages of a project's development. Since 2007, he has worked as a tester and QA analyst for clients across varied industries. Prior to Elephant Inc., Adam managed the QA team at FoxNews.com and served as a principal quality assurance analyst at Huge Inc.
9/22/2016
1
Test Design forTest Design forResponsive Websites
STAR CanadaAdam RosenbergAssociate Director of Quality Assurance | Elephant@testloro
We work with clients to create digital experiences with a shared desire to make things that matter to
Text
gtheir users.
9/22/2016
2
Context —
Context —
No single productMany varying code basesVarying amounts of maintenancey g
9/22/2016
3
Context —
Testers lead the scope and support planning.
Help the project reduce testing scope and testing creep
Goals —
Giving you arguments and talking points to reduce the amount of devices that need testing , from a riskperspective
Happy product, happy developers, happy testers,happy client
9/22/2016
4
Disclaimer—
This only applies to websites.The rules are different for native applications.
“We have a responsive site now, which means it works on all devices, and we should test all the Project manger asking for test plan —
,things!”
9/22/2016
5
Client Requests
We can’t test everything.So how do we choose?
Global Browser Stats
Site Analytics
Device Inventory
Educated risk assessment
Based on maximizing the test coverage f th i b k i tof the responsive breakpoints.
9/22/2016
6
Understanding Responsive Design
Understanding Responsive Design —
A site that displays properly and changes its layoutdepending on the size of the browser on the device that is being used.
9/22/2016
7
Understanding Responsive Design —
How is layout determined?
False:
How is layout determined? —
The layout is determined by device detection.
True:The layout is determined by browser viewport width.
9/22/2016
8
Breakpoints
Understanding Responsive Design —
Layout
Breakpoint
Language is important!
9/22/2016
9
Understanding Responsive Design — Language is important!
SmallMediumLarge
MobileTabletDesktop
Some phones will display medium layout.
Some tablets will display small or large layout.
Desktop browsers can display anything
Understanding Responsive Design —
It’s all about the viewport width.
So what is the viewport width?
9/22/2016
10
Understanding Responsive Design — Viewport Width
Viewport width is how wide the CSS media queries sees the page
SmallMediumLarge
MobileTabletDesktop
The screen resolution Physical screen size
Pixel density Dots per pixel unit (dppx)
On screen UI elements
Understanding Responsive Design — Viewport Width
Example :iPhone 3g
R l ti
iPhone 4
R l iMobileTabletDesktop
Resolution: 320x480
Pixel density: 163ppi
Dots per pixel
Resolution: 640x960
Pixel density: 336ppi
Dots per pixel unit: 1
Viewport width: 320
unit: 2
Viewport width: 320
9/22/2016
11
Understanding Responsive Design—viewport width
Resources to for viewport widthsviewportsizes.com – list of viewport widths on common devicesviewportsize.com – go to site on testing device find viewport widthWindowsize – Chrome plug is that shows viewport width on browser resizeChrome developer tools – viewport simulator
You want to cover the most ground while avoiding redundancy in test device
choices.
9/22/2016
12
Determining what to test on —
You want to cover the most ground with these two factor combinations:
Viewport Width OS/Browser version
That’s it!
Determining what to test on —
Steps:
1. Determine the number of devices you can actually test on given your time frame.
1. Avoid redundancy by not focusing on specific hardware. Find devices with varying viewport sizes and a range of OS/browser versions.
9/22/2016
13
Determining what to test on —
Galaxy Note 4 | Android 6 0 Galaxy S6 | Android 6 0Galaxy Note 4 | Android 6.0Galaxy S6 | Android 6.0 V.S.
Galaxy S6 | Android 6.0LG Nexus 4 | Android 5.1
• Both have the same viewport width of 360
• Both have the same OS
• Different viewport widths: 360 and 384 –could potentially hit different layouts
• Different OS which could render differently
Scenarios tested: 1
differently
Scenarios tested: 4
Determining what to test on —
Hardware still matters sometimes :
1. Native Applications
2. JS heavy sites
3 Visually heavy sites with lots of animation/video3. Visually heavy sites with lots of animation/video
4. 3d or VR
9/22/2016
14
Questions?
Thoughts?
Experiences?
Thank you.
9/22/2016
15
San FranciscoNew YorkLos Angeles
STAR CanadaAdam RosenbergAssociate Director of Quality Assurance | Elephant@testloro