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
“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 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.