Advertisement
Advertisement

More Related Content

Advertisement

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

  1. 1Monday, 20 May 13
  2. how we built the responsive site 2Monday, 20 May 13
  3. 3Monday, 20 May 13
  4. Screen Size Capability mobiles desktop small big It used to be simple .. 4Monday, 20 May 13
  5. we built www. & m. desktop =rich UX mobile =fast UX 5Monday, 20 May 13
  6. device EXPLOSION EXPLOSION EXPLOSION 6Monday, 20 May 13
  7. 7Monday, 20 May 13
  8. 8Monday, 20 May 13
  9. 9Monday, 20 May 13
  10. Screen Size Capability mobiles desktop small big b okEr N 10Monday, 20 May 13
  11. Screen Size Capability Smart phones desktop small big tablets Net books TVse-readers feature phones it’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  Google 12Monday, 20 May 13
  13. THe web 13Monday, 20 May 13
  14. client side detection server side client server WURFL User  agent   sniffing client server XHR Feature detecGon 14Monday, 20 May 13
  15. responsive DESIGN 15Monday, 20 May 13
  16. 16Monday, 20 May 13
  17. “Users don’t give a s**t if your site is responsive” Brad  Frost 17Monday, 20 May 13
  18. responsive’s dirty secrets 18Monday, 20 May 13
  19. * Browser support 19Monday, 20 May 13
  20. 20Monday, 20 May 13
  21. 21Monday, 20 May 13
  22. Build a simpleweb page 22Monday, 20 May 13
  23. speedthe 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   30kb~ 23Monday, 20 May 13
  24. trash rubbish filler content nonsense crap poppycock garbage baloney twaddletomfoolery 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- 24Monday, 20 May 13
  25. content 25Monday, 20 May 13
  26. Mobile first + progressive enhancement Crappy 26Monday, 20 May 13
  27. 27Monday, 20 May 13
  28. We split devices into good and bad core experience enhanced experience 28Monday, 20 May 13
  29. good browser?it cuts the mustardtm 29Monday, 20 May 13
  30. good browser?it cuts the mustardtm if( 'querySelector' in document && 'localStorage' in window && 'addEventListener' in window ){ // party time! } 30Monday, 20 May 13
  31. good browser?it cuts the mustardtm Avoids  downloading  large  DOM  libraries Most  browsers  will  sGll  pass Reduces  dev  Gme  on  new  features 31Monday, 20 May 13
  32. /news Link to weather site CORE EXPERIENCE 32Monday, 20 May 13
  33. ENHANCED EXPERIENCE 33Monday, 20 May 13
  34. YESTERDAY 7 8 BB OS5 (MANGO) 1.6 TOMORROW 11 29 69 iOS 8 TODAY 10 BB OS6+ (WEBKIT) 2.1+ iOS 6 9 34Monday, 20 May 13
  35. 35Monday, 20 May 13
  36. * Performance 36Monday, 20 May 13
  37. 287  requests 2.5MB  transferred 37Monday, 20 May 13
  38.          requests                          transferred  ? 287 2.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  feature 41Monday, 20 May 13
  42. 10SECONDS ON GPRS 100KB ~ 42Monday, 20 May 13
  43. * images 43Monday, 20 May 13
  44. imagesare big JS & CSS 362 IMAGES 492 HTML 35 44Monday, 20 May 13
  45. <img src="big-elephant.jpg"> img { max-width: 100%; } 100kb 100kb 45Monday, 20 May 13
  46. Core  image Hidden  divs 46Monday, 20 May 13
  47. imagesDynamic resizing <!-- Core image which will be replaced --> <img src="http://domain.com/200/foo.jpg" class="image-replace"> 47Monday, 20 May 13
  48. imagesDynamic resizing <!-- Placeholder image for variable size --> <div data-src="http://domain.com/200/bar.jpg" class="delayed-image-load"> </div> 48Monday, 20 May 13
  49. 16k 49Monday, 20 May 13
  50. * media queries 50Monday, 20 May 13
  51. Mediaqueries View  port  size  rather  than  content  element Browsers  download  all  style  sheets* 51Monday, 20 May 13
  52. wide.css cssLoad what you need core.css tablet.css compact .css stylesheetLoader.init({ 'compact': '(max-width: 640px)', 'tablet' : '(min-width: 641px)', 'wide' : '(min-width: 1056px)' }); JS Stylesheet loader 52Monday, 20 May 13
  53. * complexity 53Monday, 20 May 13
  54. Simplify Simplify Simplify 54Monday, 20 May 13
  55. Render on serverkeep it simple. Non-­‐JS  devices  can  view  content Keep  templates  in  one  place JS  rendering  engines  are  slooooooow TranslaGons  are  much  easier  on  the  server 55Monday, 20 May 13
  56. Tool up!a helping hand Curl.js 56Monday, 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  dependencies Asynchronous  calls Swap  out  implementaGons AMD 58Monday, 20 May 13
  59. 59Monday, 20 May 13
  60. * Hiding 60Monday, 20 May 13
  61. Hidden content 61Monday, 20 May 13
  62. Loaded content 62Monday, 20 May 13
  63. 63Monday, 20 May 13
  64. 64Monday, 20 May 13
  65. Loadingstrategies Include Post Batch 65Monday, 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
Advertisement