Mobilism 2013: A story of how we built Responsive BBC News

20,564 views

Published on

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.

Published in: Technology

Mobilism 2013: A story of how we built Responsive BBC News

  1. 1Monday, 20 May 13
  2. how we built theresponsive site2Monday, 20 May 13
  3. 3Monday, 20 May 13
  4. Screen SizeCapabilitymobiles desktopsmall bigIt used to be simple ..4Monday, 20 May 13
  5. we built www. & m.desktop =rich UXmobile =fast UX5Monday, 20 May 13
  6. deviceEXPLOSIONEXPLOSIONEXPLOSION6Monday, 20 May 13
  7. 7Monday, 20 May 13
  8. 8Monday, 20 May 13
  9. 9Monday, 20 May 13
  10. Screen SizeCapabilitymobiles desktopsmall bigb okEr N10Monday, 20 May 13
  11. Screen SizeCapabilitySmartphonesdesktopsmall bigtabletsNet booksTVse-readersfeaturephonesit’s complicated ..Connection speed? Resolution? input method?11Monday, 20 May 13
  12. Even  Google  [is]  not  rich  enough  to  support  all  of  the  different  mobile  pla:orms...“”Vic  Gundotra,  VP  of  engineering  at  Google12Monday, 20 May 13
  13. THeweb 13Monday, 20 May 13
  14. client sidedetectionserver sideclientserver WURFLUser  agent  sniffingclientserverXHRFeaturedetecGon14Monday, 20 May 13
  15. responsiveDESIGN15Monday, 20 May 13
  16. 16Monday, 20 May 13
  17. “Users don’t give a s**tif your site is responsive”Brad  Frost17Monday, 20 May 13
  18. responsive’sdirtysecrets18Monday, 20 May 13
  19. *Browser support19Monday, 20 May 13
  20. 20Monday, 20 May 13
  21. 21Monday, 20 May 13
  22. Build a simpleweb page22Monday, 20 May 13
  23. speedthe core experience is fast1  HTML  document1  image  for  the  first  story2  CSS  requests2  branding  images1  stats  web  bug7  requests   30kb~23Monday, 20 May 13
  24. trashrubbishfillercontentnonsensecrappoppycockgarbage baloneytwaddletomfoolerytripejQuery.js jQueryUI.js Uniform.jsjTextTranslate.js TopUp.js TipTip.jsFullCalendar.js grid.js Uploadify.jsElastic.js Contactable.js MarkItUp.jsAutotab.js jExpand.js jBreadCrumb.jsVertical-Scroll-Menu.js Compact-News-Previewer.js Pull-Out-Content-Panel.js Mega-Drop-Down-Menu.jsApple-like-Retina-Effect.js Simple-Accordion.js gMap.js Stylish-Content- 24Monday, 20 May 13
  25. content25Monday, 20 May 13
  26. Mobile first+progressive enhancementCrappy26Monday, 20 May 13
  27. 27Monday, 20 May 13
  28. We split devices intogood and badcoreexperienceenhancedexperience28Monday, 20 May 13
  29. good browser?it cuts the mustardtm29Monday, 20 May 13
  30. good browser?it cuts the mustardtmif(querySelector in document &&localStorage in window &&addEventListener in window){// party time!}30Monday, 20 May 13
  31. good browser?it cuts the mustardtmAvoids  downloading  large  DOM  librariesMost  browsers  will  sGll  passReduces  dev  Gme  on  new  features31Monday, 20 May 13
  32. /newsLink toweathersiteCORE EXPERIENCE32Monday, 20 May 13
  33. ENHANCED EXPERIENCE33Monday, 20 May 13
  34. YESTERDAY7 8BB OS5(MANGO)1.6TOMORROW112969iOS 8TODAY10BB OS6+(WEBKIT)2.1+iOS 6934Monday, 20 May 13
  35. 35Monday, 20 May 13
  36. *Performance36Monday, 20 May 13
  37. 287  requests2.5MB  transferred37Monday, 20 May 13
  38.          requests                          transferred  ?2872.5MB“86%  sites  same  or  larger  than  desktop”Guy  Podjarny  38Monday, 20 May 13
  39. 39Monday, 20 May 13
  40. how did it get to this ?40Monday, 20 May 13
  41. Performance  is  a  feature41Monday, 20 May 13
  42. 10SECONDSON GPRS100KB~42Monday, 20 May 13
  43. *images 43Monday, 20 May 13
  44. imagesare bigJS & CSS362IMAGES492HTML3544Monday, 20 May 13
  45. <img src="big-elephant.jpg">img {max-width: 100%;}100kb100kb45Monday, 20 May 13
  46. Core  imageHidden  divs46Monday, 20 May 13
  47. imagesDynamic resizing<!-- Core image which will be replaced --><imgsrc="http://domain.com/200/foo.jpg"class="image-replace">47Monday, 20 May 13
  48. imagesDynamic resizing<!-- Placeholder image for variable size --><divdata-src="http://domain.com/200/bar.jpg"class="delayed-image-load"></div>48Monday, 20 May 13
  49. 16k49Monday, 20 May 13
  50. *media queries50Monday, 20 May 13
  51. MediaqueriesView  port  size  rather  than  content  elementBrowsers  download  all  style  sheets*51Monday, 20 May 13
  52. wide.csscssLoad what you needcore.csstablet.csscompact.cssstylesheetLoader.init({compact: (max-width: 640px),tablet : (min-width: 641px),wide : (min-width: 1056px)});JSStylesheetloader52Monday, 20 May 13
  53. *complexity53Monday, 20 May 13
  54. SimplifySimplifySimplify54Monday, 20 May 13
  55. Render on serverkeep it simple.Non-­‐JS  devices  can  view  contentKeep  templates  in  one  placeJS  rendering  engines  are  slooooooowTranslaGons  are  much  easier  on  the  server55Monday, 20 May 13
  56. Tool up!a helping handCurl.js56Monday, 20 May 13
  57. $rtl: true;// Flipped Sass - flip.class {float: flip(left, right);}// Flipped Sass.class {#{$padding-left}: 8px;}57Monday, 20 May 13
  58. define([domLibrary,deviceInspector],function($,deviceInspector){// module code});Define  modules  and  dependenciesAsynchronous  callsSwap  out  implementaGonsAMD58Monday, 20 May 13
  59. 59Monday, 20 May 13
  60. *Hiding 60Monday, 20 May 13
  61. Hidden content61Monday, 20 May 13
  62. Loadedcontent62Monday, 20 May 13
  63. 63Monday, 20 May 13
  64. 64Monday, 20 May 13
  65. LoadingstrategiesInclude Post Batch65Monday, 20 May 13
  66. 66Monday, 20 May 13
  67. <a href="/news/component/top-stories-promo"id="js-top-stories-promo"></a><script>require([loader], function(cl) {cl.register({});});</script>"selector":"#js-top-stories-promo","loadingStrategy":"batch","deviceGroups":["tablet","desktop"]67Monday, 20 May 13
  68. 68Monday, 20 May 13
  69. LAZY LoadFalse economy?69Monday, 20 May 13
  70. Avoid
  71.  waking
  72.  the
  73.  radio!70Monday, 20 May 13
  74. *testing71Monday, 20 May 13
  75. Manual  tesng72Monday, 20 May 13
  76. Automated  testsPhantomJS  -­‐  fastWebDriver  -­‐  real73Monday, 20 May 13
  77. UI  regression  tests74Monday, 20 May 13
  78. page.viewportSize = {width: 320, height: 5000};compare -fuzz 20%-highlight-color blue#{base} #{compare} #{output}page.open(url, function() {page.render(image_name);});75Monday, 20 May 13
  79. Perf testsHttp Archive (HAR)phantomjs netsniff.jshttp://foo.com foo.harhttps://code.google.com/p/harstorage/76Monday, 20 May 13
  80. Perf testsHttp Archive (HAR)DOH!77Monday, 20 May 13
  81. Protecng  the  servers78Monday, 20 May 13
  82. We Cache nearlyeverything79Monday, 20 May 13
  83. Front-­‐endcontextannotationsLoadBalancerServiceVarnishCache-Control:max-age=12080Monday, 20 May 13
  84. varnishcontext awareSome  personalisaGonsCountry  of  userWhat  device  they  are  on81Monday, 20 May 13
  85. varnishhit / miss ratiosdoh! 82Monday, 20 May 13
  86. 100m80m60m40m20m0mJan 2011AD Apr 2011ADCDNFTW!losecontext83Monday, 20 May 13
  87. 84Monday, 20 May 13
  88. rememberthe little guy85Monday, 20 May 13
  89. we’re alwayslooking for greattalent to join us,get in touch!@jcleveley86Monday, 20 May 13

×