Responsive Design – the hardest no brainer in web development

A quick test. Think of a topic you’re interested in, search for it in Google and click on a link that looks like it will have the information you need. On that website, how long does it take to find the information you’re looking for?  Is it easy or is it difficult?  Is it obvious how to navigate the site and move from section to section? If you can find what you’re looking for quickly and easily, it means the website has been designed well, with usability in mind.

But now hop to your mobile phone or tablet. Is the same website just as easy to use on that device? Is the experience across desktop and mobile consistently good? If the answer is yes, it means the website has been designed to be responsive. 

Responsive websites adapt to their environment. It’s as simple as that. All users have a seamless digital experience no matter what device, browser, screen size or orientation they use. For web developers, this means ensuring that the functionality, performance and visual layout of websites are consistent across all digital platforms and various user conditions. Do that, and potential customers will be able to find what they need, regardless of the interface they’re using, and you will be one step closer to making a sale or getting in touch. 

A daunting challenge 

Prioritising Responsive Web Design (RWD) – where the experience is equally good across platforms, and addresses the specific needs of users at that time, seems like a no brainer. However, when you factor in the importance of user experience (UX), the continuous testing of new features, and guaranteeing your website is working optimally on all browsers, devices, OSes and carrier networks, RWD is actually daunting and time consuming. 

According to Criteo’s State of Mobile Commerce report, 4 out of 10 transactions today take place on multiple devices – but nearly half of internet users complain that the websites they use aren’t optimised for mobile. Conversely, native mobile apps often aren’t optimised for desktop browsers. So, it should be remembered that success isn’t making the experience the same, rigid and fixed, regardless of device, but adapting it to best fit the platform that’s being used. 

Off the starting blocks – understanding your customer interactions

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 will give DevOps teams data about popular locations, browsers, and mobile OS/devices that were used to access their website. Solid traffic analysis provides an understanding of all the browsers and mobile platforms to consider for a coverage plan. 

But while this is a great start, it’s not enough to build a test coverage plan because it does not factor in the larger market, your competitors or the newest platforms and configurations. And so a more comprehensive programme is needed – which prioritises continuous testing across multiple platforms

Step one – add visual testing to your test automation code 

A responsive website will display content differently when screens resize and user conditions change. With this layer of complexity, app development and testing teams must combine various validations to make sure that when context changes, the viewports also change and the content being displayed is accurate, not truncated, and does not cause usability glitches. 

The way to achieve this is to build in a cross-platform test automation strategy that can identify all DOM objects on desktop and mobile web browsers. Teams must also add relevant UI checkpoint validations that can compare the visual display on the screens when events occur. These validations will quickly highlight issues and shorten the feedback loop to the developers, resulting in faster resolution.   

Step two – client-side performance testing 

One key aspect of an RWD test plan that will assure a great user experience is web performance. Because RWD is targeting a large variety of combinations (Safari on specific Mac OS versions, IE on Windows XP, etc.), DevOps teams should test the time it takes content and images to load on the various viewports. Teams also need to look carefully at the overall website performance and how it varies on different platforms and under specific network conditions. 

Step three – test navigation across platforms 

It’s obvious, isn’t it? But it’s more than just checking that a site works on multiple platforms- it’s tracking the journey a user takes when they interact online with a brand. 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 non- responsive site. From a testing perspective, these kinds of user paths need to be covered. 

Navigation testing ensures that a user can comfortably complete a full end-to- end run through your site. As part of the process, 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. 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. 

Step four - integrate real user conditions into your testing 

Now that you’re testing for mobile and desktop combinations, you need to guarantee that these environments also mimic your users’ daily, real world conditions. We recommend you start by collaborating with 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. 

And here are some advanced tips for RWD testing: 

  • Include mobile and web accessibility testing to assure compliance as well as great UX for end-users’ with disabilities  
  • Blend API testing in addition to the UI tests as the automation pyramid advises to shorten test execution cycles, and environment setup constraints  
  • Consider as part of desktop testing the growing trend of headless browser tests that can speed up execution time, provide fast feedback for specific features, and is not dependent on complex grid setup. Examples for tools that help in such testing are google Lighthouse and google Puppetteer projects, PhantomJS headless browser 

So, RWD – and testing for RWD – is a complex task. But, in today’s world, where there’s no longer a difference between website usability and the platform used to consume data and services, it’s vital.   

Eran Kinsbruner Director and Evangelist at Perfecto Mobile 

Image Credit: ProStockStudio / Shutterstock