computer data concept illustration
October 25, 2017

The Essentials of a Responsive Web Test Plan

Digital Experience

Key Pillars for Mobile and Web Platform Testing as Part of a RWD Project

Various industry segments, are investing more and more engineering efforts to better engage with their audiences, regardless of their platform, environment or geography.

Mobile native apps are great and are still a key digital enabler for these organizations, however, having a seamless digital platform that works seamlessly on any device, OS version and screen size and resolution is becoming de-facto in the industry. According to Forrester research, various organizations in key markets, that used to have an or regular web site, are now shifting their sites towards a responsive one.

Graph web plan


Fig 1: Perfecto’s guide to responsive testing (Link)

With this growing trend, organizations need to have a well-defined DevOps ready quality objectives to assure they meet the goals of a RWD site – seamless UX, performance and functionality across all mobile and web platforms.

The key pillars for success in delivering a RWD site are as follows:

1. Assure that visually the RWD site looks “right” on all platforms

  • In any screen size/resolution and viewport
  • When changing orientation from landscape to portrait

2. Perform client-side performance testing that assure load time and responsiveness is well-optimized across all platforms – sites are extremely heavy on objects and resources, loading them on various devices and browsers needs to account for these resources size and load time.

Graph web plan 2

Fig 2: Average number of objects per website (source: Perfecto RWD guide ebook)

 3. Navigation testing is a key component for site adoption, engagement and UX. Make sure that all transactions can be easily performed and navigated to across all screen sizes, platforms and in the different viewports.

4. Testing for real user conditions is another key for success. The end-users are consistently transitioning between platforms and screens, and their working conditions that include network, alerts and popups on mobile and other “noises” may impact the RWD quality – make sure to test for these real-life environment conditions. Google chrome developer tools can provide network HAR file, performance metrics and other insights that can help address these kinds of tests in addition to other load testing solutions.

5. Accessibility testing is not just a “nice to have” requirement. It is a compliance requirement that needs to be well tested and addressed for both mobile and desktop web. There are tools like Wave, as well as built-in browsers tools in Google Chrome browsers that can audit your site and offer recommendations for fixing non-compliance issues related to accessibility.

6. Acing the test coverage in the Lab for mobile and web.

Summary web plan

Fig 3: Recommended coverage for all app types (source: Perfecto Factors Magazine)

Complementing the above guidelines, should be done through use of advanced reports and analytics that can over time and through CI processes, indicate how the RWD site looks like across platforms and through the functional testing progress. Lastly, considering use of headless browser tools like google puppeteer and phantomJS, can offer additional test automation productivity capabilities.

Heatmap web plan

Fig 4: Cross platform mobile and desktop web heatmap report (Source: Perfecto DigitalZoom™ Analytics)Happy RWD Testing!