Monday 2 September 2013, 17:32
The BBC has seen a huge rise in its audience accessing content on mobile devices. Like most digital sectors, we are using responsive design to keep up. As part of the team responsible for all graphics on the BBC News site, the challenge is to design graphics that scale to any screen size - in as many as 27 languages (including Arabic where text reads left to right).
So where to start? Voyager’s epic journey was one of our most complex responsive infographics on mobile devices
What is responsive design?
Coined in a groundbreaking article by developer/designer Ethan Marcotte, “responsive web design” is an attempt to cope with an ever-growing number of devices. (To be precise, we use a combination of responsive web design and adaptive web design. A handy explanation of the difference can be found here.)
iPhones and iPads are relatively manageable as new ones are only released around once a year. But Android devices have flooded the market with hundreds of releases in the past few years. Imagine having to create a new site to fit every new device!
Instead, designing and building responsively means creating a single website with a fluid layout that detects a device's width and arranges content accordingly.
Key to responsive design is working ‘mobile first’, which means starting with the smallest and least complex device and then progressively enhancing the site. Our developers’ favourite analogy is that when an escalator stops working it doesn’t break - it just turns into stairs. So at its most basic a web page should offer core information that loads quickly and can be counted on to work (stairs). Then as device width increases, along with a stronger internet connection, more complex interaction and animation is possible (escalator).
How does this affect editorial?
Working closely with journalists, I’ve found designing mobile first to be incredibly helpful for cutting the fat. Demonstrating what a page looks like by actually loading it onto a phone enables journalists to see just how precious every word is.
For instance, an overly wordy introduction could mean the user would miss our carefully crafted interactive feature unless they scroll down. These responsive designs for affordable housing illustrate the importance of thoughtful editing
What does the user want?
We regularly check in with our audience to ensure we are meeting their needs. Responsive design has its limits; because it is a single site, as opposed to separate mobile and desktop sites, it is difficult to accommodate very different user requirements.
It comes back to that essential editorial message and working mobile first. So for the 2012 US presidential elections it was crucial for us to give a great mobile offering since a large part of our UK audience would want to check the results on mobile after waking up (the elections happened overnight). The feature phone version was simply the results - the most important information - then for smartphones we introduced tabs with additional content that became progressively more complex.
2012 US elections were designed responsively
The most important feature was always the scoreboard, and establishing that on feature phones kept us focused on a clear hierarchy of information. Of the 16 million visits we had to the site on the day, a massive 30% were on mobile.
A few of these I have mentioned already but here are some terms anyone new to this area is likely to encounter:
Responsive design is becoming ever more prominent. For journalists, I believe it offers a great opportunity to establish a clear editorial hierarchy.
Thinking about content on mobile, especially graphics on mobile, forces one to get to the point. After that, progressively enhancing the content enables you to have more fun with your content, while still knowing your key message.
Special thanks to John Walton and Steven Atherton
Thursday 29 August 2013, 10:06
Wednesday 4 September 2013, 16:25