Responsive Responsive Design Tutorial at Velocity NY

Presented at Velocity NY on October 14, 2013.

Transcript

1. Tim Kadlec @tkadlec 2012 Web Peformance Summit 8/29/2012
   Responsive
   Responsive Design
   Building sites that are flexible and fast
   Velocity NY | October 14, 2013
   

   View Slide

2. — Ethan Marcotte
   Now more than ever, we’re designing work meant to be
   viewed along a gradient of different experiences.
   Responsive web design offers us a way forward, finally
   allowing us to “design for the ebb and flow of things.
   http://alistapart.com/article/responsive-web-design
   

   View Slide

3. View Slide

4. — John Allsopp
   The control which designers know in the print medium, and
   often desire in the web medium, is simply a function of the
   limitation of the printed page. We should embrace the fact
   that the web doesn’t have the same constraints, and design
   for this flexibility.
   http://alistapart.com/article/dao
   

   View Slide

5. More than layout
   

   View Slide

6. — Ethan Marcotte
   Now more than ever, we’re designing work meant to be
   viewed along a gradient of different experiences.
   Responsive web design offers us a way forward, finally
   allowing us to “design for the ebb and flow of things.
   gradient of different experiences
   http://alistapart.com/article/responsive-web-design
   

   View Slide

7. — Ethan Marcotte
   Now more than ever, we’re designing work meant to be
   viewed along a gradient of different experiences.
   Responsive web design offers us a way forward, finally
   allowing us to “design for the ebb and flow of things.
   gradient of different experiences
   http://alistapart.com/article/responsive-web-design
   

   View Slide

8. — Stephanie Rieger
   Shoot me now…responsive design has seemingly become
   confused with an opportunity to reduce performance rather
   than improve it.
   https://twitter.com/stephanierieger/status/245240465572642816
   

   View Slide

9. 74 requests, 1511kb
   114 requests, 1200kb
   99 requests, 1298kb
   105 requests, 5942kb
   

   View Slide

10. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
    

    View Slide

11. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
    

    View Slide

12. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
    

    View Slide

13. Revenue
    

    View Slide

14. Revenue
    Traffic
    Conversions
    Satisfaction
    Page views
    

    View Slide

15. 71%
    as quickly or faster
    http://www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile
    

    View Slide

16. Performance is a fundamental
    component of the user experience.
    

    View Slide

17. RWD is bad for performance!!!
    

    View Slide

18. View Slide

19. Blame the implementation, not the
    technique.
    http://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/
    

    View Slide

20. View Slide

21. March 2012: 829kb
    http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/
    

    View Slide

22. March 2012: 829kb
    March 2013: 1031kb
    http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/
    

    View Slide

23. Performance needs to matter because it matters to users
    A culture of performance
    

    View Slide

24. — A friend
    I doubt anyone really wants to release a site that doesn't
    perform well, it's just a product of not being afforded the
    luxury of time and top-down pressure.
    

    View Slide

25. Set a performance budget
    

    View Slide

26. Must be usable in <= 10s
    65kB - 100kB
    

    View Slide

27. 1. Optimize
    

    View Slide

28. 1. Optimize
    2. Remove
    

    View Slide

29. 1. Optimize
    2. Remove
    3. Don’t Add
    

    View Slide

30. Become a performance masochist
    Embrace the pain
    

    View Slide

31. Get real, early
    

    View Slide

32. — Brad Frost
    You can’t mock-up performance in Photoshop.
    

    View Slide

33. — Brad Frost
    You can’t mock-up performance in Photoshop.
    

    View Slide

34. View Slide

35. Or: Why I cry myself to sleep at night
    Responsive Images
    

    View Slide

36. View Slide

37. 61%
    

    View Slide

38. View Slide

39. 66%
    

    View Slide

40. Trim the fat
    Compress any and all images
    

    View Slide

41. View Slide

42. 23 images = 633.0 KB
    Before Compression
    

    View Slide

43. 23 images = 597.4 KB
    After Compression
    

    View Slide

44. 35.6 KB
    After Compression
    

    View Slide

45. 11 CSS background images = 525.9 KB
    Before Compression
    

    View Slide

46. 11 CSS background images = 317.1 KB
    After Compression
    

    View Slide

47. 208.8KB
    After Compression
    

    View Slide

48. 244.4 KB
    After Compression
    

    View Slide

49. Show Not, Waste Not
    Don’t download things you don’t need
    

    View Slide

50. display:none is useless
    

    View Slide

51. 
    
    
    @media all and (max-width: 600px) {
    #test1 { display:none; }
    }
    

    View Slide

52. Everybody loads it anyway
    

    View Slide

53. View Slide

54. View Slide

55. data-src="http://ichef.bbci.co.uk/news/200/
    media/images/64664000/jpg/
    64664041_016703869.jpg"
    data-width="521"
    data-height="293">
    

    View Slide

56. data-src="http://ichef.bbci.co.uk/news/200/
    media/images/64664000/jpg/
    64664041_016703869.jpg"
    data-width="521"
    data-height="293">
    

    View Slide

57. data-src="http://ichef.bbci.co.uk/news/200/
    media/images/64664000/jpg/
    64664041_016703869.jpg"
    data-width="521"
    data-height="293">
    

    View Slide

58. data-src="http://ichef.bbci.co.uk/news/200/
    media/images/64664000/jpg/
    64664041_016703869.jpg"
    data-width="521"
    data-height="293">
    

    View Slide

59. The preloader
    

    View Slide

60. Decorative vs. content
    

    View Slide

61. Appropriate images
    Make sure things are the right size and resolution
    

    View Slide

62. 72%
    

    View Slide

63. 255 values for red
    255 values for green
    255 values for blue
    255 values for alpha
    

    View Slide

64. 600px
    600px
    

    View Slide

65. 550px
    550px
    

    View Slide

66. (600 x 600) - (550 x 550)
    57,500 pixels
    

    View Slide

67. View Slide

68. View Slide

69. 
    
    
    
    
    Accessible text
    
    

    View Slide

70. 
    
    data-media="(min-width: 400px)">
    data-media="(min-width: 800px)">
    data-media="(min-width: 1000px)">
    
    
    
    
    
    

    View Slide

71. src="fallback.jpg"
    alt=""
    srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x,
    med.jpg 1x, med-hd.jpg 2x "
    />
    

    View Slide

72. 
    

    View Slide

73. LQIP
    http://www.guypo.com/feo/introducing-lqip-low-quality-image-placeholders/
    

    View Slide

74. src="dummy.400x300.jpg"
    alt="Responsive Image"
    data-fullsrc="dummy.800x600.jpg"
    />
    

    View Slide

75. Compressive
    

    View Slide

76. http://blog.netvlies.nl/design-interactie/retina-revolution/
    

    View Slide

77. SVG
    

    View Slide

78. src="image.svg"
    onerror="this.onerror=null; this.src='image.png'">
    

    View Slide

79. .main-header {
    background: url(logo.svg) no-repeat top left;
    background-size: contain;
    }
    .no-svg .main-header {
    background-image: url(logo.png);
    }
    

    View Slide

80. 1. Analyze
    

    View Slide

81. 1. Analyze
    2. Big images first
    

    View Slide

82. (600 x 600) - (550 x 550)
    57,500 pixels
    

    View Slide

83. (200 x 200) - (150 x 150)
    17,500 pixels
    

    View Slide

84. 57,500 / 17,500 = 3.2x
    

    View Slide

85. 1. Analyze
    2. Big images first
    3. Know the trade-offs
    

    View Slide

86. Actually, not so sucky
    Background images
    

    View Slide

87. 
    
    
    #test3 div {
    background-image:url('images/test3.png');
    width:200px;
    height:75px;
    }
    @media all and (max-width: 600px) {
    #test3 {
    display:none;
    }
    }
    

    View Slide

88. 
    @media all and (min-width: 601px) {
    #test5 {
    background-image:url('images/test5-desktop.png');
    width:200px;
    height:75px;
    }
    }
    @media all and (max-width: 600px) {
    #test5 {
    background-image:url('images/test5-mobile.png');
    width:200px;
    height:75px;
    }
    }
    

    View Slide

89. Load only what you need, when you need it
    Conditional loading
    

    View Slide

90. 1. Content
    https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
    

    View Slide

91. 1. Content
    https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
    2. Enhancements
    

    View Slide

92. 1. Content
    https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
    2. Enhancements
    3. Leftovers
    

    View Slide

93. Cutting the mustard
    

    View Slide

94. if ('querySelector' in document
    ! && 'localStorage' in window
    ! && 'addEventListener' in window) {
    }
    

    View Slide

95. http://bit.ly/RSrWVI
    

    View Slide

96. http://bit.ly/RSrWVI
    

    View Slide

97. http://bit.ly/RSrWVI
    

    View Slide

98. globe.enhanced = (
    ! respond.mediaQueriesSupported
    ! || globe.browser.ie6
    ! || globe.browser.ie7
    ! || globe.browser.ie8
    )
    

    View Slide

99. View Slide

100. View Slide

101. View Slide

102. 
     Reviews
     
     

     View Slide

103. anchorInclude : function ( elem ) {
     var url = elem.getAttribute('href');
     var target =
     document.getElementById(
     elem.getAttribute('data-target')
     );
     reqwest(url, function (resp) {
     target.innerHTML = resp;
     });
     }
     

     View Slide

104. Latest
     Articles
     Latest
     Articles
     Latest
     Articles
     Latest
     

     View Slide

105. $("[data-append],[data-replace],[data-after],
     [data-before]").ajaxInclude();
     

     View Slide

106. No AJAX, no problem
     

     View Slide

107. live="polite">
     
     
     

     View Slide

108. var toShow = document.querySelectorAll('[data-lazy-content=' +
     item.getAttribute('[data-lazy-reveal]') + ']';
     for (var j = toShow.length - 1; j >= 0; j--) {
     ! var children = toShow[j].childNodes;
     ! for (var k = children.length - 1; k >= 0; k--) {
     ! ! var child = children[k];
     ! ! if (child.nodeType === 8) {
     ! ! ! //it's a comment
     ! ! ! toShow[j].innerHTML = child.nodeValue;
     ! ! ! break;
     ! ! }
     ! }
     }
     

     View Slide

109. What about CSS?
     

     View Slide

110. Embedded
     a {
     ! text-decoration: none;
     }
     @media screen and (min-width: 1300px) {
     ! a {
     ! ! text-decoration: underline;
     ! }
     }
     

     View Slide

111. External
     

     View Slide

112. Embedded External
     One HTTP request Many HTTP requests
     

     View Slide

113. Embedded External
     One HTTP request Many HTTP requests
     Large file could be hard to maintain Organization can be easier
     

     View Slide

114. Embedded External
     One HTTP request Many HTTP requests
     Large file could be hard to maintain Organization can be easier
     Extra weight, regardless of if needed Smaller CSS for device not supporting media queries
     

     View Slide

115. Embedded External
     One HTTP request Many HTTP requests
     Large file could be hard to maintain Organization can be easier
     Extra weight, regardless of if needed Smaller CSS for device not supporting media queries
     All styles downloaded All styles downloaded (if media queries supported)
     

     View Slide

116. http://scottjehl.github.com/CSS-Download-Tests/
     

     View Slide

117. media="seriously please do not download this what is the matter
     with you why won’t you listen" />
     

     View Slide

118. View Slide

119. Chrome 26
     Safari 6.0.2
     iOS Safari 6.1
     Android 4.2.1
     Android 4.2.1 Chrome 18
     Android 4.2.1 Chrome 18
     Android 4.2.1 Opera Mini
     Yay!
     

     View Slide

120. Internet Explorer 10
     Internet Explorer 9
     Internet Explorer 8
     Firefox 20
     Opera 12.15
     Android 4.2.1 Opera Mobile
     Nooooo!
     

     View Slide

121. Embedded External
     One HTTP request Many HTTP requests
     Large file could be hard to maintain Organization can be easier
     Extra weight, regardless of if needed Smaller CSS for device not supporting media queries
     All styles downloaded All styles downloaded (if media queries supported)
     Everything is in the critical path Browsers can optimize for the critical path
     

     View Slide

122. Go vanilla
     

     View Slide

123. https://twitter.com/ppk/status/249100988693241856
     

     View Slide

124. https://twitter.com/ppk/status/249100988693241856
     

     View Slide

125. jQuery = 200-300ms
     based on 1.8.0
     http://jsperf.com/zepto-jq-eval
     

     View Slide

126. Up to 8s!
     

     View Slide

127. Custom jQuery builds
     

     View Slide

128. Everything has
     a trade-off
     

     View Slide

129. View Slide

130. What value does this provide?
     

     View Slide

131. Don’t worry about JS library size?
     Just include one less image?
     

     View Slide

132. Worry about JS library size and
     include one less image.
     

     View Slide

133. Smart defaults
     

     View Slide

134. RESS
     

     View Slide

135. If you only knew the power of the Dark Side!
     RESS
     

     View Slide

136. This @#$% ain’t easy
     

     View Slide

137. UA detection
     is evil!
     

     View Slide

138. Browsers are like
     fishermen
     

     View Slide

139. View Slide

140. View Slide

141. View Slide

142. Blame the implementation,
     not the technique.
     

     View Slide

143. View Slide

144. 82% of Alexa top 100 sites use
     some form of server-side
     detection
     http://mobiforge.com/designing/blog/server-side-device-detection-used-82-alexa-top-100-sites
     

     View Slide

145. // instantiate client
     include 'DeviceAtlasCloud/Client.php';
     // fetch props
     $results = DeviceAtlasCloudClient::getDeviceData();
     // store result
     $props = $results['properties'];
     // set $width to correct width or "" if unknown
     $width = (isset($props['displayWidth'])) ? $props['displayWidth'] :"";
     ?>
     http://mobile.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/
     

     View Slide

146. src="slide-01.jpg"
     width=""
     alt="image description"
     />
     http://mobile.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/
     

     View Slide

147. // check network performance
     require_once 'DeviceAtlasNPC.php';
     session_start();
     // instantiate NPC
     $deviceAtlasNPC = new DeviceAtlasNPC();
     // test network performance
     $quality = $deviceAtlasNPC->getQuality();
     http://mobile.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/
     

     View Slide

148. $path = $_SERVER['SCRIPT_NAME'];
     switch($quality) {
     case DeviceAtlasNPC::HIGH_QUALITY:
     if ($_SERVER['HTTP_HOST'] == 'lo.site.com') {
     header("Location: http://site.com".$path );
     }
     break;
     case DeviceAtlasNPC::MEDIUM_QUALITY:
     if ($_SERVER['HTTP_HOST'] == 'lo.site.com') {
     header("Location: http://site.com".$path );
     }
     break;
     case DeviceAtlasNPC::LOW_QUALITY:
     if ($_SERVER['HTTP_HOST'] == 'site.com') {
     header("Location: http://lo.site.com".$path );
     }
     break;
     default:
     }
     http://mobile.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/
     

     View Slide

149. if ($device->getCapability('has_cellular_radio') === 'true') {
     ! if ($device->getCapability('xhtml_make_phone_call_string') !== 'none') {
     ! ! $wireless = true;
     ! ! $method = $device->getCapability('xhtml_make_phone_call_string');
     ! } else {
     ! ! $wireless = false;
     ! }
     } else {
     ! $wireless = false;
     }
     ?>
     

     View Slide

150. var features = {};
     if (Utils.readCookie('features')) {
     ! features = Utils.readCookie('features');
     ! features = JSON.parse(features);
     } else {
     ! features['width'] = Utils.tests.getWidth();
     ! Utils.createCookie('features', JSON.stringify(features));
     }
     

     View Slide

151. if (isset($_COOKIE['features'])) {
     ! $feature = json_decode($_COOKIE['features']);
     }
     if ($feature->width) {
     ! $width = $feature->width;
     } else {
     ! $width = $device->getCapability('resolution_width');
     }
     ?>
     

     View Slide

152. Client Hints
     https://github.com/igrigorik/http-client-hints
     

     View Slide

153. CH-DPR: 2.00
     

     View Slide

154. Time to move beyond
     just visual aesthetics
     

     View Slide

155. Talk about it
     

     View Slide

156. This may not be easy...
     

     View Slide

157. ...but man is it fun!
     

     View Slide

158. thank you!
     @tkadlec timkadlec.com
     TIM KADLEC
     

     View Slide

159. implementingresponsivedesign.com
     

     View Slide