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.

In addition to width, responsive sites look for browser capabilities. The latest smartphones can handle a programming language known as JavaScript which enables sophisticated animation and interaction. More basic phones that are more common in developing countries, which we refer to as feature phones, can only manage simpler code languages like HTML and CSS.

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.

Jargon buster

A few of these I have mentioned already but here are some terms anyone new to this area is likely to encounter:

  • Feature phone: This type of phone has internet capabilities but usually cannot handle JavaScript. Though often smaller, more recent ones look and feel like smartphones. Older BlackBerrys fall into this category.
  • Smartphone: These phones can handle JavaScript and the most recent ones, including the iPhone5, Samsung Galaxy S3 and Nokia Lumia 925, have gorgeous high pixel density screens. There is a huge range of device sizes, and phones with the latest browsers are more advanced (we affectionately refer to smartphones using older browsers as ‘not so smartphones’)
  • Breakpoints: If the site just scaled from a small device all the way up, it would feel massively oversized (next time you look on a mobile site imagine it simply enlarged to the size of a desktop screen). Breakpoints are used to roughly group device sizes and allow layout adjustments that best suit each range. BBC News works to four groups which approximate to mobile portrait, mobile landscape, tablet and desktop.
  • Progressive enhancement: This strategy means building a rock solid foundation of content and functionality that all users can access, then adding enhancements to devices with more advanced browsers and bandwidths.
  • Pixels versus percentages: This new way of working involves using percentages rather than exact pixels as content needs to scale proportionally. For example, something that is 70 pixels wide on a 100-pixel wide canvas becomes 70% of the width. For designers - or anyone who is picky about layout - it’s the hardest area to cope with as it means that things like rags, orphans and widows (all poor typography layouts) and awkward spaces are inevitable.

Takeaway

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

More on responsive web design at BBC News

Comments

Be the first to comment.

All posts are reactively-moderated and must obey the house rules.

with your BBC iD, or Register to comment and rate comments

More Posts

Previous