Websites built with responsive design come with the added testing challenge of having a single web application working across all screen sizes and many devices. So, how can you ensure your application will render correctly without testing on a huge number of smartphones, tablets, and desktops? Join Adam Rosenberg as he shares how to make intelligent test design choices for the best selection of devices to test on. For example, which is more important—the screen size or the pixel density? How do these affect how a page renders and what breakpoint is hit? When do you care about specific hardware versus the operating system? Adam helps you understand how responsive design works and how to use that knowledge to develop a sound test strategy, make informed test design decisions, and argue intelligently for the most efficient selections for device testing.

1. 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/

2. 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.

3. 9/22/2016
1
Test Design forTest Design for
Responsive
Websites
STAR Canada
Adam Rosenberg
Associate 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
g
their users.

4. 9/22/2016
2
Context —
Context —
No single product
Many varying code bases
Varying amounts of maintenancey g

5. 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 risk
perspective
Happy product, happy
developers, happy testers,
happy client

6. 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!”

7. 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.

8. 9/22/2016
6
Understanding Responsive Design
Understanding Responsive Design —
A site that displays properly
and changes its layout
depending on the size of the
browser on the device that is
being used.

9. 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.

10. 9/22/2016
8
Breakpoints
Understanding Responsive Design —
Layout
Breakpoint
Language is important!

11. 9/22/2016
9
Understanding Responsive Design — Language is important!
Small
Medium
Large
Mobile
Tablet
Desktop
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?

12. 9/22/2016
10
Understanding Responsive Design — Viewport Width
Viewport width is how wide the
CSS media queries sees the page
Small
Medium
Large
Mobile
Tablet
Desktop
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 i
Mobile
Tablet
Desktop
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

13. 9/22/2016
11
Understanding Responsive Design—viewport width
Resources to for viewport widths
viewportsizes.com – list of viewport widths on common devices
viewportsize.com – go to site on testing device find viewport width
Windowsize – Chrome plug is that shows viewport width on browser resize
Chrome developer tools – viewport simulator
You want to cover the most ground while
avoiding redundancy in test device
choices.

14. 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.

15. 9/22/2016
13
Determining what to test on —
Galaxy Note 4 | Android 6 0 Galaxy S6 | Android 6 0Galaxy Note 4 | Android 6.0
Galaxy S6 | Android 6.0 V.S.
Galaxy S6 | Android 6.0
LG 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

16. 9/22/2016
14
Questions?
Thoughts?
Experiences?
Thank you.

17. 9/22/2016
15
San Francisco
New York
Los Angeles
STAR Canada
Adam Rosenberg
Associate Director of Quality Assurance |
Elephant
@testloro