Responsive web design (RWD) is becoming the preferred method for developing websites that look and work consistently on all devices. The idea is to give all users a seamless digital experience no matter what device, browser, screen size or orientation (portrait vs. landscape) they use. These slides contain practical lessons on how to develop, test and maintain responsive websites.

1. A Complete Guide to Testing
Responsive Websites

2. Introduction
Percentage of responsive websites in key markets (source: Forrester )
Responsive web design (RWD) is becoming the
preferred method for developing websites that look
and work consistently on all devices. The idea is to
give all users a seamless digital experience no
matter what device, browser, screen size or
orientation (portrait vs. landscape) they use.
Responsive Web Design
These slides contain practical
lessons on how to develop,
test and maintain responsive
websites to enable:
• Delivery of better user
experiences (UX)
• Shorter time to market
• An enhanced software
development life cycle
(SDLC)
• Closing the gap between
marketing and IT
• Meeting business goals

3. What’s Driving the Shift to RWD?
“Context” in RWD
According to Criteo’s State of Mobile Commerce report:
• Four out of 10 transactions today take place on multiple devices
• 48% of users today complain that websites they use are not
optimized for their smartphones and tablets
“Context” is a key success factor for RWD adoption. What device is
your website primarily used on? Do people switch between
devices often?
Consumers using more than one device

4. RWD Test Plan Building Blocks

5. Development and testing teams must validate that
when context changes, the viewports also change and
the content being displayed is accurate and doesn’t
cause usability glitches.
Build a cross-platform test automation strategy that can
identify all DOM objects on desktop and mobile web
browsers.
1. Add Visual Testing to Your Test Automation Code
Visual truncation when switching to landscape mode
Recommendation
The Goal

6. 2. Do Website Performance Testing
Because RWD encompasses many combinations (Safari on
Mac OS versions, IE onWindows XP, etc.), teams should test
how long it takes content and images to load on the various
viewports.Teams should also look carefully at how the
overall website performance varies on different platforms
and under specific network conditions.
Average number of web objects per website.
• The lack of large content compression in the
website, which causes slow page load times.
• Failure to measure the object sizes and make sure
they’re customized to screen sizes.
Common RWD Site Issues
• Determining test coverage and keeping up with
market changes
• Testing client-side RWD performance
• Creating an efficient feedback loop from QA to Dev
• Testing your site against various user conditions
• Assessing the site’s visual representation across all
digital platforms
Key RWD Challenges

7. 8/9/2016 7© 2016, Perfecto Mobile Ltd. All Rights Reserved.
Navigation
Testing
Navigation testing assures that a user can
comfortably complete a full end-to-end run through
your site across devices.
For this, you need to make sure that the screen
orientations on mobile and desktops work well so
that nothing breaks when moving from portrait to
landscape and vice versa.
Google
Recommendations
Google recommends the following best practices
for breakpoints (the points at which your site is
not displaying information correctly):
• Create breakpoints based on content, not on
devices, products or brands.
• Design for the smallest mobile device first, then
enhance the experience as more screen real
estate becomes available.
• Keep lines of text to a maximum of 70–80
characters
3. Test Your Navigation Across Platforms

8. 4. Integrate Real User Conditions into Your Testing
Test responsive websites against user
conditions, including:
• Location
• Preferred device(s)
• Network coverage
• Web add-ons and pop-ups
• Apps running in the background
Mimic popups and add-ons as well as
incoming calls and security alerts. Assess
their impact on the user experience and
make sure they don’t cover up critical
web content.
Recommendation
User Conditions
Ad blockers should be part of user condition
testing

9. Web and mobile traffic
Analyzing traffic will alert DevTest teams about which locations,
browsers and mobile OS/devices customers used to access their
website. They can then test accordingly.
Competitor data
Keep tabs on competitors by scanning app stores to see which devices,
OS versions and browsers they’re supporting.
The Mobile Market
Watch the market to see when new devices, browsers and iOS and
Android versions are available for testing. Continually review market
trends and fine-tune your test coverage.
5. Use Analytics to Establish Your Digital Test Coverage Plan
The optimal data mix for test coverage
Responsive web design relies on delivering great user experiences across
thousands of desktop and mobile combinations. The key to defining the right
test coverage plan lies in leveraging the following data sources:

10. Create Actionable Test Reports for RWD
• A side-by-side synchronized view of test results
across all the platforms you’re testing against
• The ability to filter only the failed combinations
• Actionable information from the failed test with:
• Screenshots
• Platform debug logs
• Network logs
• Video
When adding new platforms and beta versions, teams should be
able to easily examine the results of new platforms against
previous tests.
What should a RWD test report
include?
Error by Platform

11. Summary: Answering the RWD Challenge
A successful RWD release begins
with a test plan that covers the
right platforms. Once a digital
quality test plan is in place and
teams are managing it, they
should adopt a continuous quality
strategy that relies on robust test
automation.
We guarantee that if you have
the right test environment, your
responsive web design journey
will be rewarding for both you
and your users.
For more information, read the full Guide to
Responsive WebTesting