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.

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/