BBC - Responsive Web Design

The aim of the News responsive site is to present the best user experience possible in any context. Keywords: mobile first, progressive enhancement, flexible box, fluid and adaptable grids, media queries, breakpoints, dynamic and flexible images.

Transcript

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. 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. Responsive Web Design
9. 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 Responsive Web Design
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 It does this by adding a CSS class of "ctm" to the HTML element for styling hooks. This technique improves the user experience by making it easy to enhance the core experience of a site with device-specific styles and behavior. 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 3 1 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. • 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 Testing Tools Another important aspect of the responsive workflow is testing