The document summarizes the development of responsive BBC News sites in 28 languages for desktop, mobile, and tablet. Key aspects discussed include developing a mobile-first approach using responsive web design, flexible grids, and progressive enhancement. Browser and device support were tested across different mobile platforms. Traffic volumes were high, with the top 5 languages receiving over 350 million monthly page requests on average. Continuous integration and automated testing helped ensure quality and performance.

1. BBC News & World Service
Federico Cargnelutti / BBC World Service

2. BBC News & World Service
Developed the BBC News responsive site in 28 languages and improved
existing products across mobile, tablet and desktop.

3. 28 BBC News sites fully
responsive to desktop
bbc.co.uk/arabic
bbc.co.uk/zhongwen
bbc.co.uk/russian
bbc.co.uk/persian
bbc.co.uk/hausa
bbc.co.uk/hindi
bbc.co.uk/mundo
bbc.co.uk/burmese
(and 20 more...)
BBC News Responsive Sites

4. Mobile User Experience
BBC News responsive sites
are extremely effective on
desktops, tablets and
smartphones.
From a basic Nokia to a
tablet on 4G, we want all
users to have an enhanced
experience.

5. Desktop User Experience

6. Iterative and Incremental Development

7. Minimum Viable Product

8. Responsive Web Design
Content strategy
The aim of the News responsive site is to present the best user experience
possible in any context.
Layout structure
Flexible box layout. Fluid and adaptable grids. Media queries and
breakpoints. Dynamic and flexible images.
Progressive enhancement
Mobile first. Browser capabilities. From core experience to best possible
experience.

9. Responsive Web Design
We support mobile browsers, rather than mobile devices. At BBC News &
World Service, we test the responsive site on these mobile devices:
● Chrome
● Safari
● Android Browser
● Opera Mobile and Mini
● Nokia Ovi
● Symbian
● UC Browser (huge user base in China)
● Blackberry

10. Mobile OS Market Share

11. The BBC News responsive site
checks for specific properties or
methods in a browser's DOM to
detect the browser type and
whether it supports a given
operation.
Browser Feature Detection
If the browser passes this test it means that it cuts the mustard and loads the
JavaScript files asynchronously.

12. Browser Feature Detection
This technique improves the user experience by making it easy to enhance
the core experience of a site with device-specific styles and behavior.
It does this by adding a CSS
class of "ctm" to the HTML
element for styling hooks.
DOM support: http://goo.gl/qR2BTP

13. Progressive Enhancement

14. JavaScript Loader
● One of the strengths of AMD (Asynchronous Module Definition) is
modularity.
● Modules and its dependencies are asynchronously loaded.
● Using a modular script loader improves the speed and quality of the code.
http://requirejs.org/

15. CSS Preprocessor
● Sass allows us to author powerful styles and streamline our CSS workflow.
● Sass ability to nest media queries makes it a powerful tool for authoring
responsive CSS.
● With Sass we can store our breakpoint, font-size and spacing values as
variables.
http://sass-lang.com/

16. Responsive Image Loading
Imager.js allows us to dynamically swap out image assets based on the image
container width.
Workflow:
● Lookup placeholder elements
● Replace placeholders with transparent images
● Update src attribute for each image and assign the best quality/size ratio URL
● Lazy load images to speed up page load time
https://github.com/bbc-news/Imager.js

17. Flexible Box
1 3
2
1
3
2

18. Page Load Sequence

19. Hausa
70.000.000 requests per month
Persian
65.000.000 requests per month
Urdu
45.000.000 requests per month
Vietnamese
35.000.000 requests per month
Russian
23.000.000 requests per month
Mundo
22.000.000 requests per month
Volumetrics
Total monthly page requests: 350.000.000
Average requests per second: 135

20. Continuous Integration

21. Automated Behaviour Testing

22. Testing Tools
Another important aspect of the responsive workflow is testing
● Emulators
Android Browser, iOS Safari and Opera Mobile Emulators
● Remote Debugging
Android with Chrome http://goo.gl/slo1Yz
Browser Stack http://goo.gl/vCO8Va
Remote Preview http://goo.gl/k7Vsi8
● Performance
Mobitest http://goo.gl/IgceGJ