Scale and adapt: A story of how we built Responsive BBC News
Life used to be easy. We created sites to work on a few browsers and when we had time we asked the new guy to build a half baked mobile version. Then the device explosion ruined our cozy happy dev life.
My talk will discuss how BBC News met this challenge at scale.
How we support as many devices as possible using responsive design
Why performance is key to our success and how we managed to keep the site lean
How we scale to serve BBC News to the masses
What tools we use to help us along the way
John Cleveley
John is Tech Lead at BBC News and currently migrating the News site to a dynamic platform. Concentrating on building features mobile first using responsive web design all the way up to desktop.
BBC News has a truly global audience, delivering some of the only unbiased journalism available in some parts of the world. This has reinforced his passion for device support and producing sites that absolutely fly.
Loves canoeing, ale and Radiohead - preferably all at the same time :) Find me here @jcleveley.
12. Even Google [is] not rich enough
to support all of the different
mobile pla:orms...
“
”Vic Gundotra, VP of engineering at Google
12Monday, 20 May 13
23. speedthe core experience is fast
1 HTML document
1 image for the first story
2 CSS requests
2 branding images
1 stats web bug
7 requests 30kb~
23Monday, 20 May 13
30. good browser?it cuts the mustardtm
if(
'querySelector' in document &&
'localStorage' in window &&
'addEventListener' in window
){
// party time!
}
30Monday, 20 May 13
31. good browser?it cuts the mustardtm
Avoids downloading large DOM libraries
Most browsers will sGll pass
Reduces dev Gme on new features
31Monday, 20 May 13
47. imagesDynamic resizing
<!-- Core image which will be replaced -->
<img
src="http://domain.com/200/foo.jpg"
class="image-replace">
47Monday, 20 May 13
48. imagesDynamic resizing
<!-- Placeholder image for variable size -->
<div
data-src="http://domain.com/200/bar.jpg"
class="delayed-image-load">
</div>
48Monday, 20 May 13
55. Render on serverkeep it simple.
Non-‐JS devices can view content
Keep templates in one place
JS rendering engines are slooooooow
TranslaGons are much easier on the server
55Monday, 20 May 13