Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How we built the new responsive BBC News site

How we built the new responsive BBC News site

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 the BBC met this challenge.

- How we support as many devices as possible using responsive design.
- How we're using a sprinkle of Symfony2 components in our Zend world.
- How we scale to serve BBC News to the masses.
- What tools we use to help us along the way.

85a9fce93e576e9e99eed5a61a7e5c4a?s=128

jcleveley

June 10, 2012
Tweet

Transcript

  1. Sunday, 10 June 2012

  2. @jcleveley Sunday, 10 June 2012

  3. how we built the responsive site why Sunday, 10 June

    2012
  4. velocity + mod_include Sunday, 10 June 2012

  5. 2012 2010 2008 2009 2006 2007 2011 Sunday, 10 June

    2012
  6. Screen Size Capability mobiles desktop small big It used to

    be simple .. Sunday, 10 June 2012
  7. we built www. & m. desktop =Great UX mobile =poor

    UX Sunday, 10 June 2012
  8. device EXPLOSION EXPLOSION EXPLOSION Sunday, 10 June 2012

  9. Sunday, 10 June 2012

  10. not mutually exclusive Sunday, 10 June 2012

  11. thin - rotate - wide fast - tunnel - slow

    Sunday, 10 June 2012
  12. Screen Size Capability mobiles desktop small big b okE r

    N Sunday, 10 June 2012
  13. Screen Size Capability Smart phones desktop small big tablets Net

    books TVs e-readers feature phones it’s complicated .. Connection speed? Resolution? input method? Sunday, 10 June 2012
  14. Mobile will overtake desktop Sunday, 10 June 2012

  15. Sunday, 10 June 2012

  16. need to adapt we Sunday, 10 June 2012

  17. low bandwidth users Don’t alienate Sunday, 10 June 2012

  18. why? Sunday, 10 June 2012

  19. Even  Google  [is]  not  rich  enough   to  support  all

     of  the  different   mobile  pla:orms... “ ” Vic  Gundotra,  VP  of  engineering  at  Google Sunday, 10 June 2012
  20. Sunday, 10 June 2012

  21. how? Sunday, 10 June 2012

  22. Device detection client side client server wurfl set  cookie client

    server 1. Detect 2. Scale 3. Enhance XHR server side Sunday, 10 June 2012
  23. initial markup Everyone gets the same Sunday, 10 June 2012

  24. responsive DESIGN Sunday, 10 June 2012

  25. responsive design Features  built  once  -­‐  release   simultaneously  all

     pla:orms Quickly  adapt  when  a  new  device  arrives One  code  base Hosted  on  a  single  URL  space Sunday, 10 June 2012
  26. Mobile first + progressive enhancement Sunday, 10 June 2012

  27. trash rubbish filler content nonsense crap poppycock garbage baloney twaddle

    tomfoolery tripe jQuery.js jQueryUI.js Uniform.js jTextTranslate.js TopUp.js TipTip.js FullCalendar.js grid.js Uploadify.js Elastic.js Contactable.js MarkItUp.js Autotab.js jExpand.js jBreadCrumb.js Vertical-Scroll-Menu.js Compact- News-Previewer.js Pull-Out-Content- Panel.js Mega-Drop-Down-Menu.js Apple-like-Retina-Effect.js Simple- Accordion.js gMap.js Stylish-Content- Sunday, 10 June 2012
  28. content Sunday, 10 June 2012

  29. It’s  a  myth  that  mobile  users   don’t  want  to

     do  everything   that  desktop  users  do. Sunday, 10 June 2012
  30. Text un  problème Sunday, 10 June 2012

  31. We split devices into good and bad core experience enhanced

    experience Sunday, 10 June 2012
  32. Sunday, 10 June 2012

  33. speed the 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   21kb ~ Sunday, 10 June 2012
  34. good browser? it cuts the mustardtm if( 'querySelector' in document

    && 'localStorage' in window && 'addEventListener' in window ){ // party time! } Sunday, 10 June 2012
  35. good browser? it cuts the mustardtm Avoids  downloading  large  DOM

     libraries Make  use  of  naVve  features  in  the  browser Most  browsers  will  sVll  pass Reduces  dev  Vme  on  new  features Sunday, 10 June 2012
  36. images whilst w3c talk about it ... img { max-width:

    100%; } Sunday, 10 June 2012
  37. images Dynamic resizing <!-- Core image which will be replaced

    --> <img src="http://domain.com/200/foo.jpg" class="image-replace"> <!-- Placeholder image for variable size --> <div data-src="http://domain.com/200/bar.jpg" class="delayed-image-load"> </div> Sunday, 10 June 2012
  38. LAZY Load The illusion of speed Sunday, 10 June 2012

  39. ADAPT interface Sunday, 10 June 2012

  40. things can get out of hand Sunday, 10 June 2012

  41. Gzip  responses  from  your  server Concatenate  your  CSS  /  JS

    Use  CSS  sprites Monitor  3rd  party  plugins OPtimise fewer requests smaller responses Sunday, 10 June 2012
  42. render on server keep it simple. Non-­‐JS  devices  can  view

     content Keep  templates  in  one  place JS  rendering  engines  are  slooooooow TranslaVons  are  much  easier  on  the  server Sunday, 10 June 2012
  43. Sunday, 10 June 2012

  44. tools rock Sunday, 10 June 2012

  45. anmo capybara cucumber selenium symfony components zend wally pimple varnish

    vagrant AMD ender event  emi]er QUnit less  css rake github xhprof jshint tsung phpunit Sunday, 10 June 2012
  46. varnish protect your back end Front-­‐end annotations ZTM Service Varnish

    X-Cache-Control: max-age=120 Sunday, 10 June 2012
  47. Sunday, 10 June 2012

  48. A sprinkle of magic Sunday, 10 June 2012

  49. Pimple small and fearsome Light  weight  Dependency  InjecVon  Container Easy

     for  developers  to  understand Promotes  good  pracVce  without  a  heavy  lib Easy  to  start  using  within  Zend  Framework Sunday, 10 June 2012
  50. <?php class Application extends Pimple { ... // Register service

    providers $this->register( new HttpClientProvider() ); $this->register( new CandyProvider() ); // Make container available to Zend controllers $this['zend_front']->setParam( 'container', $this ); } Sunday, 10 June 2012
  51. class BaseController extends Zend_Controller_Action { public function init() { $this->container

    = $this->getInvokeArg('container'); } } Sunday, 10 June 2012
  52. Event dispatcher Promotes  nice  decoupled  components Add  logic  throughout  app

     without  hard  coding   method  calls. SomeVmes  difficult  to  keep  track  of  calls Sunday, 10 June 2012
  53. class Zend_Events extends Zend_Controller_Plugin_Abstract { ... public function dispatchLoopStartup($request) {

    $this->dispatcher->dispatch( 'zf.request', $this->createEvent($request) ); } public function preDispatch($request) { $this->dispatcher->dispatch( 'zf.controller', $this->createEvent($request) ); } public function dispatchLoopShutdown() { $this->dispatcher->dispatch( 'zf.response', $this->createEvent() ); } ... Sunday, 10 June 2012
  54. JS Micro libraries we don’t need the kitchen sink Small

     single  purpose  components   Send  code  to  the  client  that  you  actually  use Interchange  with  other  micro  libs Remove  the  dependency  on  a  framework   Sunday, 10 June 2012
  55.  Reqwest  -­‐  AJAX  requests  Qwery  -­‐  Selector  wrapper  for  

    naVve  funcVons  Bonzo  -­‐  DOM  uVlity  methods  Event  EmiIer  -­‐  PubSub  Curl  -­‐  AMD  Javascript  loader Sunday, 10 June 2012
  56. AMD Makes JS Maintainable Manages  your  dependencies 1 6 5

    2 4 3 B A COMPILE Sunday, 10 June 2012
  57. AMD Makes JS Maintainable define( ['vendor/reqwest', 'vendor/pubsub'], function(reqwest, pubsub){ return

    { name: 'fred' }; } ); Dependencies Local  vars The  thing Sunday, 10 June 2012
  58. Sunday, 10 June 2012

  59. Sunday, 10 June 2012

  60. Final thoughts Speed  is  the  key Back  to  basics Responsive

     design What’s  next?  ...   Sunday, 10 June 2012
  61. Thanks for listening! @jcleveley Sunday, 10 June 2012

  62. Sunday, 10 June 2012