I’m pretty certain that almost all of us have visited a website on our mobile device(s) only to find that the page isn’t laid out correctly or the text is too small to read. Worryingly, a recent report told us that nearly three in ten people say they can’t complete even the most simple task on a mobile website, citing poor navigation, too much/or too little information and usability concerns as the primary barriers – leaving many consumers frustrated by the experience.
And, 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.
It’s no secret that a good (or bad) website has the power to significantly impact a brand’s reputation, sales and profits. There have been enough studies on online shopping, the ‘browsing journey’ and the importance of good design for even the most traditional organisation to know that the formula is simple: an engaging and user-friendly online presence equals happy customers. If they can find what they are looking for quickly and easily, it means the website has been designed well, with usability in mind and the website has been designed to be “responsive”.
Responsive Web Design
One of the primary problems with mobile browsing is around responsive web design (or a lack of). The term ‘Responsive Design’ was first used five years ago by the web developer Ethan Marcotte in his book, Responsive Web Design. Marcott told us that the best websites respond to changes in browser width by adjusting the placement of design elements to fit in the available space.
A responsive website displays content based on the available browser space. If you open a responsive site on the desktop and then change the size of the browser window, the content will move dynamically to arrange itself (in theory) optimally for the screen. On a mobile device, this process should be automatic; the site checks for the available space and then presents itself in the best arrangement for the user.
So, responsive websites adapt to their environment. Because it is fluid, it means that users can access your online world and enjoy as much of it on their handheld device as they would on a large monitor. For this to be true though, responsive design requires great site design and a deep knowledge of the needs and wants of the end users.
A daunting challenge
But even with this widespread recognition, many brands are still failing to do the job. Surely, it’s a no brainer, right? Everyone must be doing it? Well no – because it’s not as easy as you may think. And it’s the web developers who are bearing the brunt of this tricky task. It’s down to them to ensure that the functionality, performance and visual layout of websites are consistent across all digital platforms and various user conditions – and it’s no easy feat. When you factor in the user experience (UX), continuous testing of new features, and guaranteeing your website is working optimally on all browsers, devices, OSes and carrier networks, RWD can be daunting. Even the (seemingly) smallest glitch can significantly affect the user experience and negatively impact a brand: for instance, the failure to take into consideration download times between desktop and mobile devices, and the flexibility of images to support this.
Understanding your customer interactions
In a world where mobile devices are ubiquitous, and user experience is paramount, of course, companies are all looking to RWD to ensure user satisfaction. SEO is another big argument for using a responsive design. Sites that use responsive design (i.e., ones with a URL that serve all devices) are currently more search engine friendly, and – as we all know – searchability is everything in a competitive consumer environment.
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.
DevOps is a key enabler for continuous delivery of innovative features and products to end users. To make it work continuously, teams are required to automate – much as possible – their entire process 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.
With a well designed, well tested, responsive website, the content and pages are automatically flexible, fluid across all screen resolutions and various devices. In other words, no matter what device you are viewing a website on, the user will have optimal viewing experience including ease of navigation with a minimum amount of resizing and scrolling.
So how can DevOps make sure that their sites are optimised? For us, there are several crucial steps to success.
1.Visual testing
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.
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.
2.Test navigation across platforms
Tracking the journey a user takes when they interact online with a brand 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 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.
3.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 continuously 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.
Of course, developers also need to guarantee that the environments they’re testing mimic users’ daily, real-world conditions. We recommend that organisations 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 of tools that help in such testing are google Lighthouse and google Puppetteer projects, PhantomJS headless browser
So, RWD – and testing for RWD – isn’t easy. But in a fast-paced, hyper-competitive, market – where there’s no longer a difference between website usability and the platform used to consume data and services – it’s vital. “Mobile First” is the rallying call of some web designers, meaning that they design first for mobile, then for other platforms. But for us, the truth is that we should be designing for ‘users first’ – and that’s where responsive web design comes in. Making sure the visitor experience is great, regardless of the platform they’re using, can make or break for brands,
You can read more about how to ensure your DevTest team can plan for RWD by downloading our full guide. And we’ll leave you with our quick tips to kick-start your own journey to RWD success:
- Create breakpoints based on content, not devices
- Design for the smallest device first, then design for bigger screens.
- Keep lines of text to a maximum of 70-80 characters
- Make list of browsers and mobile devices/OSes used to access your site – and revise your device/browser mix every quarter
