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.

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