On responsive web design
I recently got involved in a discussion on Twitter about responsive web design (RWD) and I thought I’d put some thoughts about it in writing. I recently redesigned this blog to be responsive (more about that in a future post) and it’s an exciting and fairly recent development in the world of the web.
The discussion was started with a complaint someone made about the bad experience the Independent Voices website gives on a smartphone. Looked at on a desktop, it presents a very well-designed inviting way to interact with the community, but the mobile version is very much cut-down and looks like it provides a second-rate version of the desktop version. This is not what mobile users want.
Responsive web design is a new paradigm of displaying information on a website which is accessible to viewers using any device be it mobile, tablet or a desktop machine using the exact same code for all displays which is designed so that it is optimised for all different sizes. Modern smartphones will indeed display a desktop site, but you will have to zoom in to read it and it’s sometimes very difficult to navigate around the page to find what you’re looking for. I’ve had experiences of using a full desktop site on a phone where I physically can’t click on a link because the clickable area is somehow hidden when used on a touchscreen. Also, you will be downloading large images intended for looking at on large screens which can use up your monthly bandwidth allowance fast.
Obviously, the technical details of this are of real interest only to someone working in web design. As a user, it doesn't matter to you whether or not a site is responsive, mobile-only or held together with yellow string. If you can’t find the information you’re looking for, you are frustrated and that’s not a good user experience!
So what are the advantages of a responsive site? Because it uses the same code for whatever size of device you’re using, there is no mis-match between content on different devices (although with database-driven content this is possibly less of an issue). It's important to understand that this isn’t predicated on what device you’re using: new devices come out all the time and the range of sizes is growing, so ‘device sniffing’ as it is called would need new models added to a list as the range of devices increases.
On the plus side for mobile-only sites: a good design will give you the ability to link to the desktop version. But do you make this a once-only choice for someone, held in a cookie? They may want to use it in certain circumstances and not in others. The size of images can also be optimised for mobile: this is currently a problem with RWD which is being explored using a couple of different approaches in the responsive web design community.
In some cases RWD may not be appropriate, for instance a site based solely around large eye-catching images. My own site is a very simple blog with just a few links on it: a more complex site like the Guardian or the BBC would take a great deal more planning to make it work responsively, but that’s not to say it shouldn’t be done.
This may seem like a lot of work, but it is a lot more flexible and future-proof compared to keeping up a separate mobile site. The introduction of tablets did a lot to drive it: what would you display, a desktop site or a mobile site, when you have a bigger screen but no mouse? What about a display on a household appliance, like a DVD recorder or a fridge? It is a real possibility that our homes will become networked in this way in the future: who knows what the displays they will use will look like?
What RWD does need is a shift in thought to the centralisation of the information and the user interface needed to find it. This requires a move away from making the web ‘pretty’ (the days of Flash intros are, in my opinion luckily, long gone) and towards an ‘information first’ response. There is currently no one answer at the moment, just that there is a middle way between desktop and mobile, and bad design on either will prove a problem. As ever, good well-thought-out design is the one thing that is vital to good user experience, whatever you’re using to browse the web.