$30 off During Our Annual Pro Sale. View Details »

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.

jcleveley

June 10, 2012
Tweet

More Decks by jcleveley

Other Decks in Technology

Transcript

  1. Sunday, 10 June 2012

    View Slide

  2. @jcleveley
    Sunday, 10 June 2012

    View Slide

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

    View Slide

  4. velocity + mod_include
    Sunday, 10 June 2012

    View Slide

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

    View Slide

  6. Screen Size
    Capability
    mobiles desktop
    small big
    It used to be simple ..
    Sunday, 10 June 2012

    View Slide

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

    View Slide

  8. device EXPLOSION
    EXPLOSION
    EXPLOSION
    Sunday, 10 June 2012

    View Slide

  9. Sunday, 10 June 2012

    View Slide

  10. not
    mutually
    exclusive
    Sunday, 10 June 2012

    View Slide

  11. thin - rotate - wide
    fast - tunnel - slow
    Sunday, 10 June 2012

    View Slide

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

    View Slide

  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

    View Slide

  14. Mobile will overtake desktop
    Sunday, 10 June 2012

    View Slide

  15. Sunday, 10 June 2012

    View Slide

  16. need to
    adapt
    we
    Sunday, 10 June 2012

    View Slide

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

    View Slide

  18. why?
    Sunday, 10 June 2012

    View Slide

  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

    View Slide

  20. Sunday, 10 June 2012

    View Slide

  21. how?
    Sunday, 10 June 2012

    View Slide

  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

    View Slide

  23. initial markup
    Everyone gets
    the same
    Sunday, 10 June 2012

    View Slide

  24. responsive
    DESIGN
    Sunday, 10 June 2012

    View Slide

  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

    View Slide

  26. Mobile first
    +
    progressive enhancement
    Sunday, 10 June 2012

    View Slide

  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

    View Slide

  28. content
    Sunday, 10 June 2012

    View Slide

  29. It’s  a  myth  that  mobile  users  
    don’t  want  to  do  everything  
    that  desktop  users  do.
    Sunday, 10 June 2012

    View Slide

  30. Text
    un  problème
    Sunday, 10 June 2012

    View Slide

  31. We split devices into
    good and bad
    core
    experience
    enhanced
    experience
    Sunday, 10 June 2012

    View Slide

  32. Sunday, 10 June 2012

    View Slide

  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

    View Slide

  34. good browser?
    it cuts the mustardtm
    if(
    'querySelector' in document &&
    'localStorage' in window &&
    'addEventListener' in window
    ){
    // party time!
    }
    Sunday, 10 June 2012

    View Slide

  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

    View Slide

  36. images
    whilst w3c talk about it ...
    img {
    max-width: 100%;
    }
    Sunday, 10 June 2012

    View Slide

  37. images
    Dynamic resizing

    src="http://domain.com/200/foo.jpg"
    class="image-replace">

    data-src="http://domain.com/200/bar.jpg"
    class="delayed-image-load">

    Sunday, 10 June 2012

    View Slide

  38. LAZY Load
    The illusion of speed
    Sunday, 10 June 2012

    View Slide

  39. ADAPT interface
    Sunday, 10 June 2012

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  43. Sunday, 10 June 2012

    View Slide

  44. tools
    rock
    Sunday, 10 June 2012

    View Slide

  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

    View Slide

  46. varnish
    protect your back end
    Front-­‐end
    annotations
    ZTM
    Service
    Varnish
    X-Cache-Control:
    max-age=120
    Sunday, 10 June 2012

    View Slide

  47. Sunday, 10 June 2012

    View Slide

  48. A sprinkle of
    magic
    Sunday, 10 June 2012

    View Slide

  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

    View Slide

  50. 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

    View Slide

  51. class BaseController
    extends Zend_Controller_Action
    {
    public function init()
    {
    $this->container
    = $this->getInvokeArg('container');
    }
    }
    Sunday, 10 June 2012

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  56. AMD
    Makes JS Maintainable
    Manages  your  dependencies
    1
    6
    5
    2
    4
    3
    B
    A
    COMPILE
    Sunday, 10 June 2012

    View Slide

  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

    View Slide

  58. Sunday, 10 June 2012

    View Slide

  59. Sunday, 10 June 2012

    View Slide

  60. Final
    thoughts
    Speed  is  the  key
    Back  to  basics
    Responsive  design
    What’s  next?  ...  
    Sunday, 10 June 2012

    View Slide

  61. Thanks for
    listening!
    @jcleveley
    Sunday, 10 June 2012

    View Slide

  62. Sunday, 10 June 2012

    View Slide