Design for responsive – can you, really?

Here at the STAR Digital HQ in Northampton, the marketing and design teams have been having a big debate about responsive web design. The creative team has been up to now ‘designing’ responsive views on paper as part of the creative process, but the marketers and the account handlers are beginning to feed back some real life observations from their clients on the challenges of a responsive web ‘design’ process. Setting a client expectation on responsive tied to a creative design has left some clients expecting pixel perfect representation on all mobile devices. This is just not practical. Also, involving the client in a ‘design’ process for mobile also leads to design over function, ergo you end up forgetting the principles of usability and get a compromised mobile experience. In a recent ‘Funky Friday’ strategy meeting the STAR Digital team looked at what a user actually wants to do on an e-commerce site when browsing across desktop, tablet and smartphone. Talking at length about our typical client expectations we surmised that the desktop user expects to have a complete set of functionality, and importantly, uses a mouse to browse the web site. As a user they expect to have top and side navigation, which may be layered, an easy to use search bar, they like light box overlays, pop out forms, sliders, banners, reviews etc. Rich media and multiple imagery is a big yes, and the richer the experience the better overall. They like the site to be fast, and the journey to checkout to be clear and straightforward. The majority of our sites are built on a grid layout at 960 pixels wide, so there is a lot of room to add in cross sell and upsell alongside tabbed product data and merchandising messaging. In essence it’s a complete and immersive experience. Marketers have been working in this medium for 15 years, and they got good at it… However, the designers were then ‘resizing’ this experience for the tablet and mobile. Fail! The marketers didn’t know what to do. No more bombarding the senses with every conceivable gadget and widget that HTML5 has to offer! So we started to debate the user. For tablet we had to understand that the user makes a paradigm shift from a mouse to their fingers. The use of gestures is inherent to the operation of any mobile device, and because the average adult finger is 15mm in width, you don’t have the pinpoint accuracy of a mouse, especially if you have club fingers like me! So the question it raises is…  Is a creative team right to want to continue with an experience that is a subset or copy of the desktop experience? Our verdict. No. It must include richness of content and media focused on a user in a tablet environment, and that experience needs to employ the correct coding to fully support gestures. And because of the huge variety of tablet based devices the scaling of the resultant design should modify itself gracefully. Our analytical data shows that users still want to go into depth when researching a product on tablets. They like to interact with rich media such as an HTML5 360 image or a video. Reviews are still important. Other functionality such as cart and checkout need to be coded to give a better experience for finger control form completion, and care is always needed when passing users out to a third party payment processing page to ensure it is also responsive. Then we have the smartphone view. The user here is looking for a different experience again. They can’t read microscopic type, and the experience doesn’t need to serve up all of the content, all of the time. With a typical smartphone screen being 50mm across, and the finger being approx.. 15mm you can see that any controls need to be easy to see, and to use. Concertinas are often employed to show and hide content, or keep users in a single page view for the process of a search or transaction and users are used to them. But they need to be graceful. Category listings need thought, as does the option to refine based on attributes. At we had to apply a lot of thought to the best way of delivering a smartphone experience, allowing for category list refinement, and a lightweight method for delivering all of the product information using concertinas. Adding to cart and checking out are important areas that need restyling to make it easy to fill out forms and payment information. Our mobile site for works hard to make the payment process on a smartphone very straightforward. The result of our meeting on the responsive web design debate is that we need to have function at the front of mind when embarking on a project with a client. The scope needs to be written with function and usability trumping the design. Creativity is a key requirement, but that creativity needs to be in the form of solving user problems and delivering an excellent experience on the users chosen platform. The form should follow the function and be graceful across multiple devices. Responsive web design is set to explode through 2014, and customers are pushing hard to get their web sites ready to take advantage of the new mediums. And that begs the strategic question, where is it all headed? Look at Pebble, the smart watch operating system. The SDK is in its infancy, but already we can see practical uses where it connects to a mobile app in your pocket, that is controlling your house lighting. Its all going to be responsive… Will digital agencies be creating responsive designs for interactive tube posters, the sides of buses and trains, even traditional outdoor advertising? Will one master set of code be used to serve across all media? Will that media become more interactive, pulling viewers into the product messaging, even letting them transact at the point of advertising, there and then, or linking to a mobile device? It would make sense, and allow marketers to be far more dynamic. Let’s see what 2014 brings… Commentary by Roger Martin F IDM, based on opinion and information gathered during meetings with the team at STAR Digital, January 2014.  

Leave a Reply

Your email address will not be published. Required fields are marked *