BBC - Responsive Web Design

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