test design for responsive websites
TRANSCRIPT
![Page 1: Test Design for Responsive Websites](https://reader033.vdocuments.net/reader033/viewer/2022052514/5a64aa747f8b9a31568b5eed/html5/thumbnails/1.jpg)
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 - [email protected] - http://www.starcanada.techwell.com/
![Page 2: Test Design for Responsive Websites](https://reader033.vdocuments.net/reader033/viewer/2022052514/5a64aa747f8b9a31568b5eed/html5/thumbnails/2.jpg)
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.
![Page 3: Test Design for Responsive Websites](https://reader033.vdocuments.net/reader033/viewer/2022052514/5a64aa747f8b9a31568b5eed/html5/thumbnails/3.jpg)
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.
![Page 4: Test Design for Responsive Websites](https://reader033.vdocuments.net/reader033/viewer/2022052514/5a64aa747f8b9a31568b5eed/html5/thumbnails/4.jpg)
9/22/2016
2
Context —
Context —
No single productMany varying code basesVarying amounts of maintenancey g
![Page 5: Test Design for Responsive Websites](https://reader033.vdocuments.net/reader033/viewer/2022052514/5a64aa747f8b9a31568b5eed/html5/thumbnails/5.jpg)
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
![Page 6: Test Design for Responsive Websites](https://reader033.vdocuments.net/reader033/viewer/2022052514/5a64aa747f8b9a31568b5eed/html5/thumbnails/6.jpg)
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!”
![Page 7: Test Design for Responsive Websites](https://reader033.vdocuments.net/reader033/viewer/2022052514/5a64aa747f8b9a31568b5eed/html5/thumbnails/7.jpg)
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.
![Page 8: Test Design for Responsive Websites](https://reader033.vdocuments.net/reader033/viewer/2022052514/5a64aa747f8b9a31568b5eed/html5/thumbnails/8.jpg)
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.
![Page 9: Test Design for Responsive Websites](https://reader033.vdocuments.net/reader033/viewer/2022052514/5a64aa747f8b9a31568b5eed/html5/thumbnails/9.jpg)
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.
![Page 10: Test Design for Responsive Websites](https://reader033.vdocuments.net/reader033/viewer/2022052514/5a64aa747f8b9a31568b5eed/html5/thumbnails/10.jpg)
9/22/2016
8
Breakpoints
Understanding Responsive Design —
Layout
Breakpoint
Language is important!
![Page 11: Test Design for Responsive Websites](https://reader033.vdocuments.net/reader033/viewer/2022052514/5a64aa747f8b9a31568b5eed/html5/thumbnails/11.jpg)
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?
![Page 12: Test Design for Responsive Websites](https://reader033.vdocuments.net/reader033/viewer/2022052514/5a64aa747f8b9a31568b5eed/html5/thumbnails/12.jpg)
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
![Page 13: Test Design for Responsive Websites](https://reader033.vdocuments.net/reader033/viewer/2022052514/5a64aa747f8b9a31568b5eed/html5/thumbnails/13.jpg)
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.
![Page 14: Test Design for Responsive Websites](https://reader033.vdocuments.net/reader033/viewer/2022052514/5a64aa747f8b9a31568b5eed/html5/thumbnails/14.jpg)
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.
![Page 15: Test Design for Responsive Websites](https://reader033.vdocuments.net/reader033/viewer/2022052514/5a64aa747f8b9a31568b5eed/html5/thumbnails/15.jpg)
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
![Page 16: Test Design for Responsive Websites](https://reader033.vdocuments.net/reader033/viewer/2022052514/5a64aa747f8b9a31568b5eed/html5/thumbnails/16.jpg)
9/22/2016
14
Questions?
Thoughts?
Experiences?
Thank you.
![Page 17: Test Design for Responsive Websites](https://reader033.vdocuments.net/reader033/viewer/2022052514/5a64aa747f8b9a31568b5eed/html5/thumbnails/17.jpg)
9/22/2016
15
San FranciscoNew YorkLos Angeles
STAR CanadaAdam RosenbergAssociate Director of Quality Assurance | Elephant@testloro