Our Blog

5 ways to implement a continuous testing plan for responsive web design

When was the last time you visited a website on your mobile device and it didn’t render correctly? Maybe the page wasn’t laid out right or the text was too small to read. Probably recently, right? You are not alone. According to Criteo’s State of Mobile Commerce report, today four out of ten transactions take place on multiple devices—but nearly half of internet users complain that the websites they use aren’t optimized for mobile.

One of the primary problems with mobile browsing is around the lack of a responsive web design (RWD), a phrase coined by Ethan Marcotte in his book Responsive Web Design. For organizations, RWD can make or break their business. It provides trust, authority, and brand awareness—and helps firms meet that elusive goal; an engaging and seamless mobile experience.

In RWD, the best websites respond to changes in browser width by adjusting the placement of design elements to fit in the available space. For example, if you open a responsive site on a desktop and then change the size of the browser window, the content will (or should) move dynamically to arrange itself optimally for the screen.

Unfortunately, this process is not as easy as you may think, and it's web developers who are tasked with making this process seamless. It’s their responsibility to ensure that the performance, functionality, and visual layout of websites are consistent across all digital platforms and various user conditions. When you factor in the continuous testing of new features, and guaranteeing your website is working optimally on all browsers, devices, operating systems, and carrier networks, RWD can be a daunting task. Any glitch can significantly affect the user experience and negatively impact a brand.

The key to tackling the challenge

Devops teams should start their journey towards good RWD by embarking on a fact-finding mission. Obtaining the most recent mobile and web traffic analysis provides devops teams with data about popular locations, browsers, and mobile OSes/devices that were used to access their website. Once you have an understanding of traffic patterns across your browsers and mobile platforms, you can start to consider a coverage plan.

This is a good start however it does not factor in the larger market, your competitors or the newest platforms and configurations. Instead, a more comprehensive program is needed which prioritizes continuous testing across multiple platforms.

devops is a key enabler for continuous delivery (CD) of innovative features and products to end users. To make it work continuously, teams must automate their entire process as much as possible—from development, through build acceptance testing, functional and non-functional testing and deployment to production. In this context, RWD projects should apply the same rule of maximum automation coverage.

To succeed, devops should automate what’s right, and continuously execute it on any code commit. Here are five steps devops teams can take to ensure their sites are optimized.

1. Execute client-side performance testing

Web performance is a key aspect of an RWD test plan that will ensure a great user experience. Remember RWD is targeting a variety of combinations such as Safari on specific MacOS versions, IE on Windows 8.1, etc. As such, devops teams should continuously test the time it takes content and images to load on the various viewports. Teams should also look carefully at the overall website performance and how it varies on different platforms and under specific network conditions.

2. Add visual testing to your test automation code

A responsive website will display content differently when screens resize, and user conditions change. To account for this extra layer of complexity, app development and testing teams should combine various validations to ensure that when context changes, the viewports also change. Doing this will also make sure that the content being displayed is accurate, not condensed, and that it does not cause usability glitches.

In addition, add relevant UI checkpoint validations that can compare the visual display on the screens when events occur. This will quickly highlight issues and shorten the feedback loop to the developers, resulting in faster resolution.

3. Perform navigation testing across platforms

The ability to track the journey a user takes when they interact with a brand online is paramount. They will either start from a smartphone, move to a tablet and then to a desktop browser, or sometimes even reach your RWD site from a nonresponsive site. From a testing perspective, these kinds of user paths need to be covered.

Navigation testing ensures that a user can successfully complete a full end-to-end run through your site. Testing screen orientations and other navigation elements such as shortcuts, menus and other web elements can improve the user experience when users access the site from a smaller screen. Remember, you need to make sure that the screen orientations in mobile and desktops work well so that nothing breaks when moving from portrait to landscape and vice versa.

4. Integrate real world conditions into testing

Perform testing runs on environments that mimic your users’ daily, real world conditions. Start collaborating with your organization’s marketing and business groups on target user data, including insight into who your target user is, where they live and what are their network conditions.

5. Determine the right platforms for testing

The mobile landscape currently includes an eight-device long list of the leading smartphones. What’s more, with the extensive use of tablets that have a unique screen sizes that impact the content layout as well as site load and performance, teams need to incorporate relevant iPads and Android tablets to the mix maximizes the mobile coverage. As a result, determining the right platforms to test on can be challenging.

Posted Feb 26, 2018