Have you ever visited a website on your mobile device and the page isn’t laid out right or the text is too small to read? You’re not alone. 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 – and many consumers are left frustrated by the experience. One of the primary problems with mobile browsing is around responsive web (or a lack of).
Simply put, 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 (or should) move dynamically to arrange itself 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.
A responsive web design can make or break your business. It provides trust, authority and brand awareness – and helps firms meet that elusive goal; an engaging and seamless mobile experience.
What’s Driving the Shift to RWD? In today’s world, there’s no longer a difference between website usability and the platform used to consume data and services. According to Criteo’s ‘State of Mobile Commerce’ report, 4 out of 10 transactions today take place on multiple devices. In that context, 48% of users today complain that the websites they use are not optimised for their smartphones and tablets.
So, 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 continuous testing of new features, and guaranteeing your website is working optimally on all browsers, devices, operating systems (OSes) and carrier networks, responsive web design (RWD) can be daunting. Any glitch can significantly affect the user experience and negatively impact a brand.
Meeting the challenge
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 – as 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.
The key for success in DevOps for RWD projects, is to automate what’s right, and continuously execute it upon any code commit. In my experience, the following pillars are key to drive great RWD UX (user experience).
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.
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 8.1, 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.
Step three – test navigation across platforms
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
Great testing runs on environments that 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.
Responsive web design on mobiles: the vital UX
So, RWD is clearly a challenge. But in a hyper competitive market – where user experience so often wins the day – it’s vital. Making sure the visitor experience is great, regardless of the platform they’re using, can be make or break for brands.
Have an opinion on this article? Please join in the discussion: the GMA is a community of data driven marketers and YOUR opinion counts.