Moving Swiftly: The story of how BBC News fell in love with Responsive Web Design

2b3837af1d68d0b71639e693c780386f?s=47 Tom Maslen
September 25, 2012

Moving Swiftly: The story of how BBC News fell in love with Responsive Web Design

An in-depth presentation about the reasons for moving a global news website to a responsive codebase with examples of the development concepts that were followed.

2b3837af1d68d0b71639e693c780386f?s=128

Tom Maslen

September 25, 2012
Tweet

Transcript

  1. TOM MASLEN

  2. PART 1 1997: A TERRIBLE YEAR FOR HUMANITY

  3. HTML 48KB 9 IMAGES 46KB HOWEVER: BBC NEWS WAS RELEASED

    IN 1997
  4. THIS IS VERY DIFFERENT TO NOW

  5. JS & CSS 362 IMAGES 492 HTML 35 153 HTTP

    REQUESTS 889kb DOWNLOADED
  6. 1997 SOLUTION: 94KB DOWNLOAD < 10 HTTP REQUESTS 2012 PROBLEM:

    SLOW INTERNET CONNECTION PROBLEM: MANY BROWSERS TO SUPPORT SOLUTION: 889KB DOWNLOAD 153 HTTP REQUESTS
  7. Chrome Safari Opera IE9 IE10 IE8 IE7 IE6 Firefox CAPABILITIES

    LEGACY MODERN W3C STANDARDS COMPLIANT LESS BUGGY FASTER RENDERING ENGINES HTML5 & CSS3 TODAY WE HAVE TO SUPPORT MANY BROWSERS
  8. MAKING WEBPAGES IS LIKE HAVING A PARTY IE7 FIREFOX OPERA

    IE9 SAFARI IE8 CHROME GOOD GUESTS BAD GUESTS
  9. MAKING WEBPAGES IS LIKE HAVING A PARTY IE7 FIREFOX OPERA

    IE9 SAFARI IE8 JQUERY MASK CHROME JQUERY MASK WE MAKE THEM BEHAVE USING MANY PLUGINS, E.G. JQUERY
  10. WE SUPPORT MANY DEVICES USING MANY PRODUCTS OTHER ISSUES IN

    2012:
  11. DESKTOP WEBSITE

  12. MOBILE WEBSITE

  13. IPHONE APP

  14. IPAD APP

  15. ANDROID PHONE APP

  16. ANDROID TABLET APP

  17. BBC NEWS ALSO HAS FOREIGN LANGUAGE SITES: RUSSIAN

  18. LEFT TO RIGHT LANGUAGE SUPPORT: ARABIC

  19. MANY, MANY SITES

  20. EVEN KLINGON (JOKE)

  21. BROADBAND GPRS EDGE 3G 4G DEVICE EXPLOSION OTHER ISSUES IN

    2012: DIVERSE CONNECTION SPEEDS
  22. SCREEN SIZE CAPABILITY MOBILE DESKTOP SCREEN SIZE EQUALS CAPABILITY THE

    OLD MODEL:
  23. SCREEN SIZE CAPABILITY MOBILE DESKTOP BROKEN SCREEN SIZE EQUALS CAPABILITY

    THE OLD MODEL:
  24. 100m 80m 60m 40m 20m 0m Jan 2011AD Apr 2011AD

    OTHER ISSUES IN 2012: AVG TRAFFIC: 20M USERS PER DAY 80M USERS IN ONE DAY
  25. BBC NEWS MOVED TO C.D.N. DURING JAPANESE TSUNAMI

  26. INTERNET PROVIDER ALL RESPONSES ARE THE SAME CACHED CDN THE

    C.D.N. PROBLEM
  27. 1997 SOLUTION: 94KB DOWNLOAD < 10 HTTP REQUESTS 2012 PROBLEM:

    SLOW INTERNET CONNECTION PROBLEM: MANY BROWSERS TO SUPPORT SOLUTION: 889KB DOWNLOAD 153 HTTP REQUESTS NOT ACTUALLY TRUE:
  28. IMPOSSIBLE SITUATION MANY BROWSERS TO SUPPORT UNLIMITED NUMBER OF DEVICES

    VARIABLE DOWNLOAD SPEEDS HUGE RANDOM SPIKES OF TRAFFIC
  29. PART 2 SOLVING YOUR GIANT MONKEY PROBLEM

  30. SCREEN SIZE CAPABILITY MOBILE DESKTOP SCREEN SIZE EQUALS CAPABILITY BROKEN

  31. WHAT IS MOBILE?

  32. THIS IS MOBILE

  33. THIS IS MOBILE

  34. THIS IS NOT MOBILE!

  35. MOBILE IS THE JOURNEY

  36. 2012 MOBILE & TABLET ONLY RESPONSIVE WEBSITE

  37. PROGRESSIVE ENHANCEMENT FLUID LAYOUTS #rwd TAKING PERFORMANCE SERIOUSLY + +

    =
  38. PROGRESSIVE ENHANCEMENT ELEMENTS OF #rwd

  39. CORE EXPERIENCE All browsers Simple layout XHTML + CSS2-ish Fast

    Modern browsers only Complex layout HTML5, CSS3 & JS Functional JAVASCRIPT EXPERIENCE PROGRESSIVE ENHANCEMENT
  40. if ( ) { JAVASCRIPT 'querySelector' in document && 'localStorage'

    in window && 'addEventListener' in window WE CHECK FOR THESE CAPABILITIES TO DETERMINE IF BROWSER IS WORTH GIVING JAVASCRIPT TO
  41. if ( ) { JAVASCRIPT 'querySelector' in document && 'localStorage'

    in window && 'addEventListener' in window WE GAVE IT A NAME:
  42. MAKING WEBPAGES IS LIKE HAVING A PARTY JS EXPERIENCE CHROME

    IE9 SAFARI OPERA FIREFOX IE7 IE8 EVERYONE IS INVITED...
  43. MAKING WEBPAGES IS LIKE HAVING A PARTY JS EXPERIENCE CHROME

    IE9 SAFARI OPERA FIREFOX IE7 IE8 BUT ONLY NICE GUESTS CAN TALK TO NATALIE
  44. Link to nav at bottom of page CORE EXPERIENCE

  45. JAVASCRIPT EXPERIENCE

  46. JAVASCRIPT EXPERIENCE

  47. CORE EXPERIENCE JAVASCRIPT EXPERIENCE DEVELOPMENT CONCEPT:

  48. Doesn’t cut the mustard Cuts the mustard IE6, IE7, IE8

    IE9, IE10 Firefox 3.5 and up Opera 10.5 and up Chrome 4 and up Safari 4 and up BBOS4, BBOS5 Opera Mini Mobile IE9 and below BBOS 6 and up Mobile Firefox Opera Mobile Mobile Safari Mobile IE9.5 Android 2.1 and up
  49. #rwd REQUIREMENT: SUPPORT BROAD RANGE OF DEVICES

  50. QUESTION: HOW DO YOU GIVE THE SAME CONTENT TO DEVICES

    WITH MASSIVELY DIFFERENT CAPABILITIES? ANSWER: YOU DON’T
  51. DEVELOPMENT CONCEPT: AJAX CONTENT IN TO ENHANCE PAGE

  52. /news Link to weather site CORE EXPERIENCE

  53. JAVASCRIPT EXPERIENCE ENTER ZIP CODE OR (IF SUPPORT) USE GEOLOCATION

    WEATHER LINK REPLACED WITH WEATHER WIDGET BY JAVASCRIPT
  54. JAVASCRIPT EXPERIENCE WEATHER LINK REPLACED WITH WEATHER WIDGET BY JAVASCRIPT

    PERSONALISED DATA PERSISTS WHEN YOU COME BACK
  55. /news Link to /news/popular/read /news/popular/read CORE EXPERIENCE

  56. JAVASCRIPT EXPERIENCE

  57. JAVASCRIPT EXPERIENCE

  58. TAKING PERFORMANCE SERIOUSLY ELEMENTS OF #rwd

  59. IE8 MAKING WEBPAGES IS LIKE HAVING A PARTY WE WANT

    GUESTS TO HAVE A GOOD TIME
  60. IE8 MAKING WEBPAGES IS LIKE HAVING A PARTY BUT GIVE

    THEM TOO MUCH AND IT GETS OUT OF HAND...
  61. IE8 MAKING WEBPAGES IS LIKE HAVING A PARTY YOU NEVER

    KNOW WHAT MIGHT HAPPEN
  62. DO NOT TRUST WEB BROWSERS IE6, 7, 8 & 9

    ONLY LOADS THE FIRST 31 CSS FILES IN THE PAGE. 2.3MB PAGE SIZE LIMIT BBOS iOS 3 SAFARI 26KB LIMIT ON FILES IN CACHE
  63. DEVELOPMENT CONCEPT: MAKE THE PAGE USABLE WITHIN 10 SECONDS

  64. 10 SECONDS ON GPRS SOMEWHERE BETWEEN 65KB AND 100KB ==

  65. CORE EXPERIENCE CORE EXPERIENCE REQUESTS 8 DOWNLOAD 67KB JS EXPERIENCE

    JS EXPERIENCE REQUESTS 18 DOWNLOAD 124KB IMAGES NOT INCLUDED
  66. DEVELOPMENT CONCEPT: DO NOT BLOCK THE RENDERING OF THE PAGE

  67. 1 <html> 2 <head> 3 <link href=”styles.css” /> 4 <script

    src=”script1.js”></script> 5 <script src=”script2.js”></script> 6 </head> 7 <!-- CONTENT --> 8 </html> DO NOT ADD JS FILES DIRECTLY INTO THE HEAD PRO TIP: html styles.css script1.js script2.js SECONDS 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 DOM READY SCRIPTS RUN NOTE: LATENCY NOT SHOWN IN EXAMPLES
  68. SECONDS 0 1 2 3 4 5 6 7 8

    9 10 11 12 13 14 15 16 17 18 19 20 21 ADDING FILES AT BOTTOM OF BODY IS BETTER html 1 <html> 2 <head> 3 <link href=”styles.css” /> 4 </head> 5 <body> 6 <!-- CONTENT --> 7 <script src=”script1.js”></script> 8 <script src=”script2.js”></script> 9 </body> 10 </html> styles.css DOM READY TO USE script1.js script2.js SCRIPTS RUN
  69. USE AN AMD LIBRARY TO ASYNCHRONOUSLY LOAD YOUR JS FILES

    PRO TIP: 1 <html> 2 <head> 3 <link href=”styles.css” /> 4 <script> 5 if(cutsTheMustard()) { 6 var s = document.createElement(‘script’); 7 s.src = ‘curl.js’; 8 s.onload = function() { 9 require(‘script1.js’); 10 require(‘script2.js’); 11 }; 12 document.head.insertBefore(s, document.head.childNodes[0]); 13 } 14 </script> 15 </head> 16 <!-- CONTENT --> 17 </html>
  70. DOWNLOAD INCLUDES IN PARALLEL html curl.js SECONDS 0 1 2

    3 4 5 6 7 8 9 10 11 12 13 14 15 style.css DOM READY TO USE script1.js script2.js SCRIPTS READY TO RUN
  71. LOAD YOUR AMD LIBRARY ASYNCHRONOUSLY TOO! PRO TIP: 1 <html>

    2 <head> 3 <link href=”styles.css” /> 4 <script> 5 if(cutsTheMustard()) { 6 var s = document.createElement(‘script’); 7 s.src = ‘curl.js’; 8 s.onload = function() { 9 require(‘script1.js’); 10 require(‘script2.js’); 11 }; 12 s.async = true; 13 document.head.insertBefore(s, document.head.childNodes[0]); 14 } 15 </script> 16 </head> 17 <!-- CONTENT --> 18 </html>
  72. DOWNLOAD INCLUDES IN PARALLEL SECONDS 0 1 2 3 4

    5 6 7 8 9 10 11 12 13 14 15 html curl.js style.css DOM READY TO USE script1.js script2.js SCRIPTS RUN
  73. DEVELOPMENT CONCEPT: ONLY DOWNLOAD WHAT YOU ARE GOING TO USE

  74. DO NOT DOWNLOAD AN IMAGE... PRO TIP:

  75. DO NOT DOWNLOAD AN IMAGE THEN REPLACE IT WITH ANOTHER

    ONE PRO TIP: INCREASES RENDERING TIME WASTES BANDWIDTH WASTES USER’S MONEY
  76. <article> <div class=”article”> <a href=”story.html”> <div class=”delayed-image-load” data-src=”/images/204/picture.jpg” /> <span>Roth

    rebukes Wikipedia over edit</ span> </a> <p>Renowned author Philip Roth...</p> </div> </article> CORE EXPERIENCE
  77. JAVASCRIPT EXPERIENCE

  78. JAVASCRIPT EXPERIENCE

  79. window.addEventListener('orientationchange', function() { news.pubsub.emit('imageEnhancer:resize'); }, false);  FOR ORIENTATION CHANGES,

    USE RESIZE EVENT INSTEAD OF ORIENTATION EVENT PRO TIP: window.addEventListener('resize', function() { news.pubsub.emit('imageEnhancer:resize'); }, false); 
  80. TASK DESKTOP #rwd DOM Selection jQuery 30KB Micro JS lib

    “Qwery-mobile” 4KB Events jQuery 30KB Native JS 0KB Animations jQuery 30KB Native CSS Transitions 0KB ALL REQUESTS GZIPPED & MINIFIED
  81. DEVELOPMENT CONCEPT: AVOID DOM REDRAWS AS MUCH AS POSSIBLE

  82. USE FADE IN/OUT EFFECT INSTEAD OF GROW UP/DOWN EFFECT PRO

    TIP: BATCH PROCESS ELEMENT INSERTIONS PRO TIP:
  83. FLUID LAYOUTS ELEMENTS OF #rwd

  84. MAKING WEBPAGES IS LIKE HAVING A PARTY IE7 MOBILE WEB

    BROWSERS IE8 MOBILE IE IE9 SAFARI OPERA FIREFOX CHROME
  85. EVERY PHONE IS DIFFERENT

  86. iOS 4x3 aspect ratio

  87. Android 16x9 aspect ratio

  88. SIXTH DEVELOPMENT CONCEPT: DESIGN FOR INTERACTION BEHAVIOURS, NOT DEVICES

  89. USE CSS MEDIA QUERIES TO DEFINE YOUR INTERACTION BEHAVIOURS... WIDE

    1056px + COMPACT 320px - 640px TABLET 641px - 1055px
  90. IMAGE 50% TEXT 50% COLUMN 100% ... THEN SCALE YOUR

    INTERFACE TO FIT INDIVIDUAL FORM FACTORS TABLET 641px - 1055px
  91. ABC HOWEVER... TEXT IN HTML DOES NOT SCALE SET TO

    50% OF BODY WITH 20px FONT-SIZE, THIS TEXT WILL BE 10px HIGH 10px HIGH
  92. WHITE SPACE ISSUES APPEAR WITH OUR SCALING INTERFACE WHITE SPACE

  93. 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%

    @media (max-width: 912px) { html { font-size: 11px; } } @media (max-width: 836px) { html { font-size: 10px; } } @media (max-width: 760px) { html { font-size: 9px; } } USE MEDIA QUERIES TO SCALE ROOT HTML FONT-SIZE FOR EACH INTERACTION BEHAVIOUR @media (min-width: 641px) and (max-width: 1055px) { html { font-size: 12px; } }
  94. EQUAL WHITE SPACE

  95. ELEMENTS OF #rwd: PROGRESSIVE ENHANCEMENT TAKE PERFORMANCE SERIOUSLY FLUID LAYOUTS

    DEVELOPMENT CONCEPTS: CUTTING THE MUSTARD AJAX CONTENT IN TO ENHANCE PAGE MAKE THE PAGE USABLE WITHIN 10 SECONDS AJAX CONTENT IN TO ENHANCE PAGE ONLY DOWNLOAD WHAT YOU ARE GOING TO USE AVOID DOM REDRAWS AS MUCH AS POSSIBLE DESIGN FOR INTERACTION BEHAVIOURS, NOT DEVICES
  96. PART 3 AN INCONVENIENT TRUTH

  97. "Good mobile user experience requires a different design than what's

    needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work." JAKOB NIELSEN
  98. JACKOB NIELSEN IS NOT A GREAT DESIGNER, BUT...

  99. "Good mobile user experience requires a different design than what's

    needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work." JAKOB NIELSEN INCONVENIENT TRUTH: GREAT USABILITY ADVICE
  100. "Good mobile user experience requires a different design than what's

    needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work." JAKOB NIELSEN INCONVENIENT TRUTH: BAD DESIGN ADVICE
  101. “Good mobile user experience requires a different design than what's

    needed to satisfy desktop users.” WE AGREE:
  102. MANY BROWSERS TO SUPPORT UNLIMITED NUMBER OF DEVICES VARIABLE DOWNLOAD

    SPEEDS HUGE RANDOM SPIKES OF TRAFFIC IMPOSSIBLE SITUATION
  103. MOBILE FIRST WEBPAGE JAVASCRIPT APPLICATION TAKE PERFORMANCE SERIOUSLY AJAX SECONDARY

    CONTENT MANY BROWSERS TO SUPPORT UNLIMITED NUMBER OF DEVICES VARIABLE DOWNLOAD SPEEDS HUGE RANDOM SPIKES OF TRAFFIC THIS IS RESPONSIVE WEB DESIGN IMPOSSIBLE SITUATION FLUID LAYOUTS
  104. 320KB 1092KB 2008 2012 AVERAGE TOTAL DOWNLOAD SIZES 3306KB 2016?

    WE CANNOT LET THIS HAPPEN
  105. MOVE SWIFTLY

  106. BBC NEWS TEAM Kate Milner @kmilnr John Cleveley @jcleveley Julian

    Kirby David Blooman @dblooman Adrian Hall @ade_hall Dan Scotton @danscotton Kaelig @kaelig John Horth @orfy Matt Chadburn @commuterjoy Mark Hurrell @markhurrell Andrew Vos @AndrewVos Tom Maslen @tmaslen http://mobiletestingfordummies.tumblr.com/ http://blog.responsivenews.co.uk/