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

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/