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.
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
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
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
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/
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
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
• 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