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
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
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
5. More than layout
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
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
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
9. 74 requests, 1511kb 114 requests, 1200kb 99 requests, 1298kb 105 requests, 5942kb
11. 48.97s, 55632.80kb
21. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
22. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
23. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
24. Revenue
25. Revenue Traffic Conversions Satisfaction Page views
26. 71% as quickly or faster http://www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile
27. Performance is a fundamental component of the user experience.
28. Blame the implementation, not the technique.
30. March 2012: 829kb http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/
31. March 2012: 829kb March 2013: 1031kb http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/
33. Performance needs to matter because it matters to users A culture of performance
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.
35. Set a performance budget
36. Must be usable in <= 10s 65kB - 100kB
37. 1. Optimize
38. 1. Optimize 2. Remove
39. 1. Optimize 2. Remove 3. Don’t Add
40. Become a performance masochist Embrace the pain
41. Get real, early
42. — Brad Frost You can’t mock-up performance in Photoshop.
44. Or: Why I cry myself to sleep at night Responsive Images
45. display:none is useless
46. <div id="test1"> <img src="images/test1.png" alt="" /> </div> @media all and (max-width: 600px) { #test1 { display:none; } }
47. Except Opera Mobile and Opera Mini Everybody loads it anyway
48. http://blog.netvlies.nl/design-interactie/retina-revolution/
49. <picture width="500" height="500"> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg" alt=""> <p>Accessible text</p> </picture>
50. <div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <div data-src="small.jpg"></div> <div data-src="medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="large.jpg" data-media="(min-width: 800px)"></div> <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript> <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> </noscript> </div>
51. <img src="fallback.jpg" alt="" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, med.jpg 1x, med-hd.jpg 2x ">
52. Actually, not so sucky Background images
53. <div id="test3"> <div></div> </div> #test3 div { background-image:url('images/test3.png'); width:200px; height:75px; } @media all and (max-width: 600px) { #test3 { display:none; } }
54. <div id="test5"></div> @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; } }
55. Load only what you need, when you need it Conditional loading
56. 1. Content https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
57. 1. Content https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii 2. Enhancements
58. 1. Content https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii 2. Enhancements 3. Leftovers
59. Cutting the mustard
60. if (‘querySelector’ in document ! && ‘localStorage’ in window ! && ‘addEventListener’ in window) { }
61. http://bit.ly/RSrWVI
62. http://bit.ly/RSrWVI
63. http://bit.ly/RSrWVI
64. globe.enhanced = ( ! respond.mediaQueriesSupported ! || globe.browser.ie6 ! || globe.browser.ie7 ! || globe.browser.ie8 )
67. <h2> <a data-target="reviews" href="reviews.html">Reviews</a> </h2>
68. anchorInclude : function ( elem ) { var url = elem.getAttribute('href'); var target = document.getElementById(elem.getAttribute ('data-target')); reqwest(url, function (resp) { target.innerHTML = resp; }); }
69. <a href="..." data-replace="articles/latest/ fragment">Latest Articles</a> <a href="..." data-before="articles/latest/ fragment">Latest Articles</a> <a href="..." data-after="articles/latest/ fragment">Latest Articles</a> <a href="..." data-append="articles/latest/ fragment">Latest Articles</a>
70. $("[data-append],[data-replace],[data-after], [data-before]").ajaxInclude();
71. No AJAX, no problem
72. <div data-lazy-content="more_puppies" aria- live="polite"> <!-- <p>You clicked for more puppies! Here you go:</p> <img src="puppy.jpg" alt="Lazy loaded puppy image" /> --> </div>
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; ! ! } ! } }
74. Lazy-load images* maybe*
76. <div class="delayed-image-load" data-src="http://ichef.bbci.co.uk/news/200/ media/images/64664000/jpg/ _64664041_016703869.jpg" data-width="521" data-height="293"></div>
77. <div class="delayed-image-load" data-src="http://ichef.bbci.co.uk/news/200/ media/images/64664000/jpg/ _64664041_016703869.jpg" data-width="521" data-height="293"></div>
78. <div class="delayed-image-load" data-src="http://ichef.bbci.co.uk/news/200/ media/images/64664000/jpg/ _64664041_016703869.jpg" data-width="521" data-height="293"></div>
80. <img class="delayed" 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" />
81. <img class="delayed" 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" />
82. <img class="delayed" 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" />
83. Maybe?
84. http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=PuB6hItpCvS
85. What about CSS?
86. Embedded a { ! text-decoration: none; } @media screen and (min-width: 1300px) { ! a { ! ! text-decoration: underline; ! } }
87. External <link href=”style.css” media=”only screen and (min-width: 1300px)” />
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)
89. http://scottjehl.github.com/CSS-Download-Tests/
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!
92. Internet Explorer 10 Internet Explorer 9 Internet Explorer 8 Firefox 20 Opera 12.15 Android 4.2.1 Opera Mobile Nooooo!
93. Go vanilla
94. https://twitter.com/ppk/status/249100988693241856
95. jQuery = 200-300ms based on 1.8.0 http://jsperf.com/zepto-jq-eval
96. Up to 8s!
97. Custom jQuery builds
98. Everything has a trade-off
100. What value does this provide?
101. Time to move beyond just visual aesthetics
102. This may not be easy...
103. ...but man is it fun!
104. thank you! @tkadlec timkadlec.com TIM KADLEC
105. implementingresponsivedesign.com