How we built the new responsive BBC News site

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