Responsive Responsive Design

Presented at the New York Web Performance Meetup in NYC on April 23, 2013

Transcript

1. Tim Kadlec @tkadlec 2012 Web Peformance Summit 8/29/2012
   Responsive
   Responsive Design
   Building sites that are flexible and fast
   NY Web Perf Meetup | April 23, 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. View Slide

11. 48.97s,
    55632.80kb
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. Revenue
    

    View Slide

25. Revenue
    Traffic
    Conversions
    Satisfaction
    Page views
    

    View Slide

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

    View Slide

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

    View Slide

28. Blame the implementation,
    not the technique.
    

    View Slide

29. View Slide

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

    View Slide

31. 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

32. View Slide

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

    View Slide

34. — 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

35. Set a performance budget
    

    View Slide

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

    View Slide

37. 1. Optimize
    

    View Slide

38. 1. Optimize
    2. Remove
    

    View Slide

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

    View Slide

40. Become a performance masochist
    Embrace the pain
    

    View Slide

41. Get real, early
    

    View Slide

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

    View Slide

43. View Slide

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

    View Slide

45. display:none is useless
    

    View Slide

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

    View Slide

47. Except Opera Mobile and Opera Mini
    Everybody loads it anyway
    

    View Slide

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

    View Slide

49. 
    
    
    
    
    Accessible text
    
    

    View Slide

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

    View Slide

51. 
    

    View Slide

52. Actually, not so sucky
    Background images
    

    View Slide

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

    View Slide

54. 
    @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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

59. Cutting the mustard
    

    View Slide

60. if (‘querySelector’ in document
    ! && ‘localStorage’ in window
    ! && ‘addEventListener’ in window) {
    }
    

    View Slide

61. http://bit.ly/RSrWVI
    

    View Slide

62. http://bit.ly/RSrWVI
    

    View Slide

63. http://bit.ly/RSrWVI
    

    View Slide

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

    View Slide

65. View Slide

66. View Slide

67. 
    href="reviews.html">Reviews
    
    

    View Slide

68. 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

69. Latest Articles
    Latest Articles
    Latest Articles
    Latest Articles
    

    View Slide

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

    View Slide

71. No AJAX, no problem
    

    View Slide

72. live="polite">
    
    
    

    View Slide

73. 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

74. Lazy-load images*
    maybe*
    

    View Slide

75. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

79. View Slide

80. src="http://assets.aneventapart.com/_/img/
    lazy-holder.gif"
    data-original="http://
    assets.aneventapart.com/images/made/images/
    uploads/action-shots/
    aea_zeldman_300x_96_96_c1.jpg" width="96"
    height="96" />
    

    View Slide

81. src="http://assets.aneventapart.com/_/img/
    lazy-holder.gif"
    data-original="http://
    assets.aneventapart.com/images/made/images/
    uploads/action-shots/
    aea_zeldman_300x_96_96_c1.jpg" width="96"
    height="96" />
    

    View Slide

82. src="http://assets.aneventapart.com/_/img/
    lazy-holder.gif"
    data-original="http://
    assets.aneventapart.com/images/made/images/
    uploads/action-shots/
    aea_zeldman_300x_96_96_c1.jpg" width="96"
    height="96" />
    

    View Slide

83. Maybe?
    

    View Slide

84. http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=PuB6hItpCvS
    

    View Slide

85. What about CSS?
    

    View Slide

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

    View Slide

87. External
    (min-width: 1300px)” />
    

    View Slide

88. 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

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

    View Slide

90. View Slide

91. 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

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

    View Slide

93. Go vanilla
    

    View Slide

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

    View Slide

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

    View Slide

96. Up to 8s!
    

    View Slide

97. Custom jQuery builds
    

    View Slide

98. Everything has
    a trade-off
    

    View Slide

99. View Slide

100. What value does this
     provide?
     

     View Slide

101. Time to move beyond
     just visual aesthetics
     

     View Slide

102. This may not be easy...
     

     View Slide

103. ...but man is it fun!
     

     View Slide

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

     View Slide

105. implementingresponsivedesign.com
     

     View Slide