What is responsive design - and what does it mean for journalists?

Monday 2 September 2013, 17:32

Helene Sears Helene Sears is senior editorial designer for BBC News visual journalism

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 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. Affordable housing with phone 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. 

Elections 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

Share this page

More Posts

Previous
Quadcopter is Russian activists' new anti-corruption weapon

Thursday 29 August 2013, 10:06

Next
Where did you say you were? The perils of place name pronunciation

Wednesday 4 September 2013, 16:25

About this Blog

A blog for the College of Journalism at the BBC Academy, discussing current technical, ethical, production and craft issues in journalism.

Blog Updates

Stay updated with the latest posts from the blog.

Subscribe using:

What are feeds?

Follow us on Twitter

New twitter image News and comment about journalism and interaction with the College:

@BBCCollege

Also from the College

 

Expert tips for finding people online by Paul Myers

Searching for people online

 

 

 

 

 

 

 

How to shoot video on a smartphone by Marc Settle

Marc Settle

 

 

 

 

 

 

 

Finding original stories locally by Hayley Brewer

Hayley Brewer

 

 

 

 

 

 

 

Work in a multimedia newsroom at BBC London

Multimedia newsroom

Blogroll

Other great places to follow debates about journalism and media:

George Brock: thoughts on journalism past, present and future from City University's head of journalism

The Media Blog: lively and often funny topical detail about UK media output

British Journalism Review: selected pieces from the authoritative quarterly journal

MediaShift: PBS monitoring of the changing media world from a US perspective

Arts & Letters Daily: more interesting ideas and good writing than you will ever have time to read

Alltop Journalism: links to the most recent posts on many journalism blogs

About the BBC: varied BBC blog about all things BBC-ish

Columbia Journalism Review: US academic perspectives

Facebook + Journalists: Facebook's own guide to its use by journalists

Jon Slattery: UK media news from the former deputy editor of Press Gazette

Meeja Law: Judith Townend's guide to media and legal issues 

Roy Greenslade: Guardian blog by the former Mirror editor now journalism prof

Wannabee Hacks: information and experiences from aspiring journalists.