Slide 1

Slide 1 text

BBC News & World Service Federico Cargnelutti / BBC World Service

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

Desktop User Experience

Slide 6

Slide 6 text

Iterative and Incremental Development

Slide 7

Slide 7 text

Minimum Viable Product

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Mobile OS Market Share

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Progressive Enhancement

Slide 14

Slide 14 text

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/

Slide 15

Slide 15 text

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/

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Flexible Box 3 1 2 1 3 2

Slide 18

Slide 18 text

Page Load Sequence

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Continuous Integration

Slide 21

Slide 21 text

Automated Behaviour Testing

Slide 22

Slide 22 text

● 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