It’s no secret that a good (or bad) website has the power to significantly impact on 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.
Some put this down to the pervasiveness of mobile technology – website views are coming from more places than ever – tablets, smartphones, even smartwatches – and, so far, many companies have struggled to create a consistent user experience across platforms.
For many, the answer to this is Responsive Web Design (RWD). 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 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.
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. RWD has already won the battle of assuring consistent UX, and now organisations are aiming higher with newer designs such as Adaptive and Progressive led by Google who aims to add more native capabilities to websites to make the user experience richer, e.g. through locations, push notifications. Doing this will mean that 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 the holy grail – a positive and engaging online experience.
What Does This Mean For DevOps?
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.
However, it’s not an easy thing to achieve. When you factor in the continuous testing of new features, and guaranteeing your website is working optimally on all browsers, devices, OSes and carrier networks, RWD can be daunting. Any glitch can significantly affect the user experience and negatively impact on a brand.
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 to 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.
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.
Test Navigation Across Platforms
Tracking the journey a user takes when they interact online with a brand is paramount. They will either start on 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.
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, as a developer you also need to guarantee that the environments you’re testing mimic users’ daily, real-world conditions. I 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.
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 me, 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 be make-or-break for brands.