We last wrote about our responsive design approach back in May 2013 and I thought it would be a good idea to give an update on our current thinking when when we design for multiple screen sizes and devices.
A cursory Google search for responsive web design techniques would seem to imply that the solution for serving up web content across a range of screen sizes falls into two camps – Responsive and Adaptive.
A quick summary of both techniques:
Responsive Web Design (RWD) uses one template and one content set – a template that reacts fluidly to the size of a user’s browser. Content that would be served up on a desktop or laptop would be also loaded to a mobile device. A user’s browser will download files that won’t necessarily be displayed on smaller screens.
Adaptive Web Design (AWD) is a technique that identifies the user’s browser and operating system to serve up different templates and content depending on the device or screen size – so, for example, users on a mobile would only be served up images designed and optimised for their smaller screen rather than an image designed for a desktop experience. Designing for specific ‘breakpoints’ (detecting a screensize and providing an appropriate layout) is often termed ‘Adaptive’ even though one code base can still be used.
The key difference between the two, then, is that under certain conditions AWD can achieve faster loading times and a tailored experience for specific devices but can potentially mean a high development overhead and a little dissonance when switching platforms and devices. RWD offers one code set for all devices, so a potentially consistent brand experience, but with no strategy for specific device usage.
It’s never black and white but shades of grey
To polarise front end development into these two camps is simplistic. Both techniques have their positives and negatives and for a while now it has been standard practise to mix the two techniques; it is not a matter of choosing which of the two techniques to employ, rather it is a matter of getting the correct blend of the two techniques – a blend that best supports the type of content served to your users, and a blend that supports the behaviour of those same users when interacting with your content on a particular device.
Understanding the differences in user behaviour between platforms and devices is key to developing the appropriate experience.
It’s not all about code, it’s about brand too
Users expect a seamless experience across platforms and devices, but maintaining these consistent experiences is always a challenge for designers and developers. With the high development overhead of AWD, native and unstyled interface elements are often used in mobile and tablet experiences: positive in one way – users understand the interface because they are familiar with it – but brand and design consistency suffer. Users do not use just one device: they flip; between desktop, mobile and tablet. Design needs to be consistent across these experiences to avoid any dissonance.
A theme at Apple’s most recent conference in June was one of ‘interface convergence’ – aesthetically and functionally bringing the interfaces of mobile, tablet and desktop closer together in the way they look, and as much as possible, in how they work. This is not to say that Apple plans a wholly convergent UI for all its products (currently impossible, until ‘mouse and click’ become obsolete). Rather, as Apple’s Phil Schiller describes, their aim is, “… to make their product lineup varied enough to be considered different, but converged enough in software and services to make it easier to switch from one platform to the other”.
In the last few weeks Google has launched ‘Material Design’, an extended digital style guide available to developers and designers, which aims to bring design and interface consistency to the Android platform and to Google’s web-based tools. The aim is the same as Apple’s. Google wants its products to have the same ‘look and feel’, whichever device or platform is being used – so that when users switch, they find it easy and effortless.
So both Apple and Google, two of the biggest players in the development of digital products, are aligned to a design strategy of consistency and convergence. This strategy includes identifying the correct technical solution, but also encompasses visual design, product design and user experience methodology. The aim is for user experiences across mobile, to tablet, to desktop or laptop to be as seamless and as consistent as possible.
Identifying the appropriate solution
So how does HighWire approach designing these consistent experiences?
As I mentioned above, it’s not all about code, but when it comes to front end technology it is simplistic to polarise the two techniques of RWD and AWD. AWD does not necessarily mean the huge overhead of developing and maintaining separate websites – it could be as simple as one line of code that detects a user’s operating system in order to present optimised content. Similarly RWD does not necessarily mean that mobile users have a degraded experience or suffer longer load times.
As with all our design decisions we put the user first. RWD is effective when serving up content-heavy sites where user goals are straightforward and shared between desktop users and mobile users, and the site’s functionality is limited to a concise set of features. When mobile use is high and we see particular behaviour mapped to a particular device (which we determine by user research and requirements gathering) then AWD offers a solution that gives an optimum experience for a specific device.
Our design philosophy
With each project we embark on, it is the end-user who dictates the techniques we employ. Our front-end strategy is under continual review; our mobile and tablet layouts are under constant scrutiny, and the insight we gain from our analytical reviews and user research dictates the requirement for designing to specific devices.
Our front-end development is tied to our visual design philosophy. We do not subscribe to complex layouts, ‘feature bloat’ or superfluous decoration. We design to simple, modular grid systems – we value clear hierarchy and clean, uncluttered layouts.
Designing successful user experiences takes a combination of skills. At HighWire our developers, interface designers, business analysts and user experience practitioners all work together to produce our digital products – but the most significant presence in the room is always that of the user.