On browsing habits and responsive design

What do you use to browse the web? A desktop computer? A laptop? Tablet? Smartphone? Perhaps all or any one of them, depending on when and where you are. In building Mosaic, a platform for reading long in-depth articles, this is something we’ve been keenly aware of and are designing our website accordingly.

It used to be that a website was built once and designed specifically for the most common shape of monitor on a desktop. A tablet or smartphone user just had to make do with a tiny version of the same. Inevitably, this led to a lot of stretching, pinching and swiping with finger and thumb as you tried to find a phone number on a website and then zoom in sufficiently to read it. Often at night, in the rain, wondering why such a simple thing should be so difficult…

As smartphones and tablets really took off, design progressed to building an alternative “mobile” layout optimised to work for a specifically sized smartphone screen (almost inevitably an iPhone). A bit of nifty code would check what type of device you were browsing on and if it was a smartphone, then the mobile layout rather than the traditional desktop one was served. That worked great if you had an iPhone, but what if it was an Android phone with a slightly different screen dimensions, or a type of tablet? In the first case the mobile template would just be made to fit. In the second, you’d still be left pinching and zooming around the desktop version, getting annoyed at why certain menus and other functions didn’t work on your touchscreen device.

I was guilty of this approach myself and can remember a cringe-inducing conversation with a client a few years back when I sagely advised them not to worry about tablets. The screen was big enough, users will still be able to use the desktop version, no problem! Of course, users could indeed do that — they just did not want to, for the reasons listed above. One of the inescapable trends in digital is that user expectations grow every bit as vertiginously as – thanks to the famous Moore’s Law – did the capacity and power of their devices.

This is where “responsive design” comes in. This simply means giving users what they want: regardless of device, the website you are looking at reflows and reshapes itself to fit the screen just so, with all the functionality you would expect and need to browse it (take a look at the Wellcome Library website for an example - try it on different devices or just changing the size of your browser window). The idea is nothing more complicated or techy than the observation that users want to read content online that works well regardless of what device they might be using – at a desk with a massive monitor, on a laptop, sitting in bed with a tablet, or standing in a queue holding any of the various shapes and sizes of smartphones currently dominating the market.

To me, this is really something quite profound. Through responsive design, today’s developers and designers are opening up their content and empowering the user to decide how and when they can consume it. This has the added bonus of removing another impeding layer between the content creators and their audience. At the end of the day, we write stories, take photographs, make videos and music because we want others to read, watch and listen to them. If the digital world is about anything, it is about sharing, and with openness and sharing at the core of Mosaic’s ethos, it was a no brainer to make sure our web design works just the way you want it to.

Danil Mikhailov

Danil is Head of Digital Development at the Wellcome Trust and leads the technical build for Mosaic.