Responsive web design at BBC News

John Cleveley and Julian Kirby on the challenges of using responsive design to deliver the BBC News website

Over the last five years there has been a massive increase in the number of devices on which audiences are viewing BBC web content, and BBC News needs a single site that can serve all these different users. The Responsive News team’s tech lead John Cleveley, and lead designer Julian Kirby describe how they ensure that visitors to the News website receive the optimum experience, whether using a basic mobile phone or the latest cutting-edge tablet.

The core experience
To ensure that all users receive the same content, the Responsive News team stripped the site down to its core elements. Low-end devices receive this basic core site experience, and for high-end devices, a JavaScript application is layered on top of the basic site to provide an enhanced experience. The Lazy Load plugin is used to add additional elements, such as extra tabs and drop-down menus, when the site is being viewed on larger devices. 

“From a basic Nokia to a tablet on 4G, we want all users to have an enhanced experience”

Although the W3C are working to develop a responsive image specification, at present there is no method for creating images that can be sized according to device. Responsive News’ current solution is to add dummy images, which hold space for a real image to be inserted into the page later. These placeholders calculate the width of the container being used, and grab an appropriately-sized image from the server. This saves users time spent downloading bulky images, and, if they are on pay-as-you-go or limited data plans, also saves them money.

Smart phones vary wildly in size, so the News site structure needs to be both simple and flexible. The team decided to use a 12-column fluid grid with fixed gutters, whereby columns can contract on a small device, or expand to fit a larger screen. There are two major breakpoints – 640 (mobile and tablet) and 1050 (tablet to desktop) - which inform the grid size used, plus many minor content breaks where needed.

The Responsive News team use various Behaviour Driven Development (BDD) tests, such as Phantom JS, a fake browser where testers can resize the browser window to make sure responsive components are working, and Snappy Snaps, which allows testers to take screenshots of the site as it appears live and examine these in a sandbox. The team also uses Remote Preview, which allows testers to drive multiple devices from one browser, so they can check the whole site looks right across all devices. 

The main challenge for the Responsive News team is balancing the need to make the site’s codebase future proof, with the need to support older browsers. The team decided to provide the basic ‘mobile-first’ experience to popular older browsers like Internet Explorer 6, and to use specific style sheets and JavaScript for old browsers with a smaller market share. When those smaller user bases disappear, this specific code can be discarded, leaving a clean base underneath.

The future
The team’s next objective is to develop a method of real-time user monitoring, allowing them to check how the different components of the site are performing, and capture errors on devices as they occur live. This will also help determine if there is a problem with a particular device rather than the site itself, making troubleshooting much more focused.