The Guardian's website is to transition to a responsive layout. Client-side web developer Matt Andrews outlined in an article how the publication aims to make use of responsive design, following in the footsteps of the Boston Globe and BBC News. An early beta version is already online, initially primarily optimised for small-screen mobile devices, because that’s the publication’s starting point.
Andrews explained in the article that the Guardian has had to restructure almost its entire technology stack for this project, and it aims to use the redesign as a means to modularise systems, ensuring that should one part fail, the rest would carry on as normal. We spoke to Andrews about the reasoning behind the design, the benefits RWD and clean design brings to news sites, and the concept of ‘swimlaning’.
.net: Were you inspired by RWD redesigns such as those of the Boston Globe and BBC News?
Matt Andrews: Speaking for myself, I was massively impressed by the Boston Globe project when it was released, because it was the first time I'd seen anybody take the techniques originally suggested by Ethan Marcotte and apply them to something enormous and complex. While I wouldn't say I was a responsive design sceptic beforehand, I certainly had the opinion that it worked well for small, design-led sites – as most of the original demos had been. But seeing it applied to a website with a large amount of content, links, modules and navigation opened my eyes to the possibilities. The way their navigation module expands as the device resolution increases is a really well-engineered and well-designed piece of UI. Many news sites – and sites in general – could benefit from that kind of progressive enhancement.
The BBC's recent work has been an inspiration to us too. They're doing some clever things around ‘cutting the mustard’, where the site determines the browser's level of feature support and serves it with the appropriate JavaScript experience. They use some new techniques around measuring the user's connection speed in order to aid their responsive images strategy, which we've explored a little in our beta site.
.net: RWD benefits you from a production standpoint, but do you think it also benefits users of news sites?
MA: Definitely, and that's the primary driver behind this work. Our current mobile site doesn't offer the range and breadth of content that we currently offer uses of guardian.co.uk, and it also has the unfortunate side effect of using different URLs from our ‘desktop’ content, which makes it tricky to route users to the correct place. It's also fixed at a 320-pixel width, which isn't quite so ‘standard’ any more for mobile devices!
All of these things mean that the new responsive version gives users a more tailored experience: if they're on a low-bandwidth device they'll get faster, lower-resolution images. If they have a large screen then they'll see a layout that scales to their device. Eventually, when we complete the project, if they visit a ‘canonical’ Guardian URL, they'll see the page in context automatically without the confusion of sharing the 'right' URL for a given device.
Finally, the production benefits to use are measured and evaluated by how they benefit our users. An example benefit is when we add new features to the responsive site, by default we're adding them to all the platforms we support. In a non-responsive context you have to implement these features multiple times, so sometimes mobile users can be the last to benefit from new stuff. In this context, they're treated equally – as they should be. This makes life easier for us in terms of writing code, but our users are the winners, too.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
.net: When it comes to a site like yours, how does working from mobile-first principles help? Does it make things more focused and keep design tight?
MA: Definitely. It's allowed us to begin again and question things that previously were assumed to be unchangeable. For example, on guardian.co.uk we use jQuery to manage our JavaScript. While this is really common and most big sites use it, for the new project we haven't included it. jQuery is over 30 kB to download and this is more than our target page weight for the entire site – or at least, for the initial ‘hit’ before we fetch anything else depending on the user's context. Also, most of jQuery's code is there to work around old versions of Internet Explorer, which we've already decided don't ‘cut the mustard’, as the BBC term it, so they won't get the enhanced JavaScript experience anyway.
Working mobile-first forces you to optimise and really examine every aspect of the page. Do we really need this feature? Does this extra 80 kB of JavaScript really add anything to the experience? What parts of this page are absolutely crucial? These are all questions we've asked – and answered.
.net: You talk in your article about 'swimlaning'. What does this mean, and how modular do you think you can make a news site?
MA: Well, there are multiple ways of viewing that modularity. Our ‘swimlaning’ means separate areas of our codebase are independent. If, say, image galleries break, it won't bring down articles. This is a physical solution – they're running on different servers and deployed independently – but we're also making the code itself as modular as possible. A complex site like that of the Guardian is full of repeated modules, and part of our work is identifying these common modules and working out the shared factors.
Being able to start from scratch means we've been able to refactor and combine lots of things which on the current guardian.co.uk have evolved over years of design and development and can sometimes be inconsistent. Hopefully our new work will unify those concepts and, again, force us in future to think more about how reusable our code is and how easy it is to build new things, quickly.
.net: The beta showcases a big emphasis on clean design and white space, rather than cramming everything into a smaller area. Do you think mobile users are increasingly demanding content that breathes, and does this make them more like to stay on the site?
MA: This is what we're aiming for. Traditionally, mobile versions of large websites have offered cut-down, minimal experiences. We think that as more and more people use their mobiles as their primary browsing device, this approach is going to perform worse and worse. Lots of research indicates that mobile users don't want to be punished for using a small screen – this is why some sites offer a ‘desktop version’ link on their mobile sites.
We're aiming to make readability particularly strong, especially now we're using the Guardian's typeface as a custom web font, and we're hoping as other websites adapt to these techniques, more and more mobile users will take it as read that a mobile website will display as much interesting content as a ‘desktop’ version. We're keeping a close eye on the key metrics as a result of these changes and we're interested to see the results.
Follow developments of the new site on the Guardian Developer Blog and the official Twitter account, @gdndevelopers.
