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
   

   View Slide

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

   View Slide

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
   

   View Slide

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.
   

   View Slide

5. Desktop User Experience
   

   View Slide

6. Iterative and Incremental Development
   

   View Slide

7. Minimum Viable Product
   

   View Slide

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
   

   View Slide

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
   

   View Slide

10. Mobile OS Market Share
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

13. Progressive Enhancement
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

17. Flexible Box
    3
    1
    2
    1
    3
    2
    

    View Slide

18. Page Load Sequence
    

    View Slide

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
    

    View Slide

20. Continuous Integration
    

    View Slide

21. Automated Behaviour Testing
    

    View Slide

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
    

    View Slide