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