By Mo Syed
Responsive web design is an approach that seeks to create a site that adapts to the specific screen size of the device it is being viewed on. It aims to provide a better user experience on mobile and tablet devices within a single flexible design. A responsive design will typically use a fluid grid to change layout size, interface elements, and even page content across devices.
This approach is being seen as a viable way to deliver high levels of user experience to different channels, from one code base. The approach promises lower cost, increased brand consistency and simpler maintainability. All whilst addressing the unique demands of mobile and tablet accessibility, both of which are gaining incremental share against the desktop.
However, responsive design is not a magic bullet to the complexity in delivering a high quality experience in the omni-channel landscape. The pitfall of a responsive approach is that, if executed badly, you could end up with a design that produces a satisfactory fit to screen but fails to address how consumers use that particular platform.
Web design for each channel does not begin and end at the screen size; there are a multitude of use cases that must be considered. For example, mobile users spend less time on the site during each visit, and may find it particularly onerous to input data. However if a design is built to work well on mobile and tablet it may not exploit the opportunity for rich, high quality imagery and video on a high-speed desktop device. These challenges around high definition and quality imagery will become more pronounced with the widespread adoption of connected TV.
So, brands have a number of options. They could build a responsive design that works well on any device, they could revise the website to eliminate any real road blocks for tablets and mobile, build mobile or tablet specific sites or build a native application. Regardless of which route they take, one thing’s for certain: delivering a below par experience on mobile and tablet will have a negative impact on the brand’s sales.
But what does a good experience look like? The high-resolution screens of mobile devices lets customers get up close and personal with products, so exploiting this graphic capability with bigger and better product and lifestyle media is a must. The bar is constantly rising with better screens and faster connections which retailers can take advantage of, allowing richer media to grab more attention. Similalry, fat fingers are the ever-present complaint of the mobile screen. Buttons must be easy to touch and placed in natural places on the screen. Scrolling and gesture shouldn’t confuse or break your customer’s mental model of how they think a screen works.
Customers do different things with different devices so designing for this purpose is key to a good customer experience. Mobile interactions are less sustained than tablets, and patience is thinner because the experience fits into smaller slots in the day, such as during a commute or walking between stores. Tablets will hold your customers’ attention in a more sustained way, whilst mobiles users graze – dipping in and out in short bursts. Addressing these patterns through design is vital for customer engagement.
Despite these different engagement methods, a brand should feel consistent across channels, particularly if it is rapidly creating fresh content and campaigns. If one channel lags behind this change, or feels like the odd one out, customers will disengage with it, reducing the channels value.
Ultimately the focus should be on fewer steps for everything. Reducing the number of clicks, scrolls and reads required to accomplish a goal pays dividends on any device, but this is particularly acute on mobile and tablet. Data input is particularly costly on touch devices so keeping interaction friction down is a good rule of thumb.
Responsive is a new way to think about the mechanics of designing a screen, and the variables in place for mobile and tablet. As such it requires a new set of design skills. This means that in order to get a good responsive design, you need talented designers who know how to get the most out of this approach.
A designer will usually have to re-conceive the modules that a site is made up of whilst ‘flexing’ the design around these components as screen size changes. This will usually mean changes to page grids and content types.
This can be as simple as a single product grid adding and removing products based on screen size, or as complex as a design that fundamentally changes the content composition across devices. For example, you may see promotional slots on the desktop, but you don’t see them at all on the mobile.
As always design strategy is about understanding trade-offs, then picking and executing on a set that meet your business needs in the best way. To do that you need a set of measurements to see if a particular route – like responsive design – measures up. Engagement and conversion are two excellent measures of effective design. When a site is designed well we see better engagement, and this drives up conversion rates and improves sales. A phased approach of introducing responsive elements will allow you to measure its true ROI.
In the hands of a skilled designer, the responsive approach is exciting but it is by no means a one size fits all approach. Responsive helps retailers to improve the quality and reach of their site and ensure that frequent campaign updates need not be a burden. A responsive approach helps give customers what they are readily expecting in the current media landscape – a usable, rich and engaging experience, whenever they want to engage.
About the author
Mo Syed is head of user experience at Amplience. Mo is an expert in user experience design. He works with Amplience’s delivery teams and customers to create inspirational content and digital experiences. Mo is completing a PhD in social software design – using social and social-psychological theories of cognition, decision-making and motivation.
Amplience is a Rich Adaptive Media Platform (RAMP) that simplifies the production of interactive lifestyle, campaign and product media. The result is an agency quality multi-screen experience at 10% of the cost. Amplience enables merchandising, brand and product marketing teams to create compelling digital campaign and product media that increases customer engagement and drives campaign and channel conversion and AOV.
Amplience media is Adaptive – so supports responsively designed websites and works beautifully across screens and devices, delivering true multi-channel campaigns from one integrated platform.
Leading brands like Shell, Marks and Spencer, Mothercare, Superdry, LK Bennett, Halfords, Viking Direct and Thomas Pink produce their digital media using Amplience RAMP. Across all categories, customers report clear business benefits delivered by the platform – campaign and product media production cost savings of up to 90% and conversion rate increases of up to 200%.
Amplience – the Rich Adaptive Media Platform