Tim Kadlec @tkadlec 2012 Web Peformance Summit 8/29/2012ResponsiveResponsive DesignBuilding sites that are flexible and fas...
— Ethan MarcotteNow more than ever, we’re designing workmeant to be viewed along a gradient ofdifferent experiences. Respon...
— John AllsoppThe control which designers know in theprint medium, and often desire in the webmedium, is simply a function...
More than layout
— Ethan MarcotteNow more than ever, we’re designing workmeant to be viewed along a gradient ofdifferent experiences. Respon...
— Ethan MarcotteNow more than ever, we’re designing workmeant to be viewed along a gradient ofdifferent experiences. Respon...
— Stephanie RiegerShoot me now…responsive design hasseemingly become confused with anopportunity to reduce performance rat...
74 requests, 1511kb114 requests, 1200kb99 requests, 1298kb105 requests, 5942kb
48.97s,55632.80kb
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Revenue
RevenueTrafficConversionsSatisfactionPage views
71%as quickly or fasterhttp://www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile
Performance is afundamental component ofthe user experience.
Blame the implementation,not the technique.
March 2012: 829kbhttp://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/
March 2012: 829kbMarch 2013: 1031kbhttp://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/
Performance needs to matter because it matters to usersA culture of performance
— A friendI doubt anyone really wants to release asite that doesnt perform well, its just aproduct of not being afforded th...
Set a performance budget
Must be usable in <= 10s65kB - 100kB
1. Optimize
1. Optimize2. Remove
1. Optimize2. Remove3. Don’t Add
Become a performance masochistEmbrace the pain
Get real, early
— Brad FrostYou can’t mock-up performance inPhotoshop.
Or: Why I cry myself to sleep at nightResponsive Images
display:none is useless
<div id="test1"><img src="images/test1.png" alt="" /></div>@media all and (max-width: 600px) {#test1 { display:none; }}
Except Opera Mobile and Opera MiniEverybody loads it anyway
http://blog.netvlies.nl/design-interactie/retina-revolution/
<picture width="500" height="500"><source media="(min-width: 45em)" src="large.jpg"><source media="(min-width: 18em)" src=...
<div data-picture data-alt="A giant stone face at TheBayon temple in Angkor Thom, Cambodia"><div data-src="small.jpg"></di...
<img src="fallback.jpg" alt="" srcset="small.jpg 640w1x, small-hd.jpg 640w 2x, med.jpg 1x, med-hd.jpg 2x ">
Actually, not so suckyBackground images
<div id="test3"><div></div></div>#test3 div {background-image:url(images/test3.png);width:200px;height:75px;}@media all an...
<div id="test5"></div>@media all and (min-width: 601px) {#test5 {background-image:url(images/test5-desktop.png);width:200p...
Load only what you need, when you need itConditional loading
1. Contenthttps://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
1. Contenthttps://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii2. Enhancements
1. Contenthttps://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii2. Enhancements3. Leftovers
Cutting the mustard
if (‘querySelector’ in document! && ‘localStorage’ in window! && ‘addEventListener’ in window) {}
http://bit.ly/RSrWVI
http://bit.ly/RSrWVI
http://bit.ly/RSrWVI
globe.enhanced = (! respond.mediaQueriesSupported! || globe.browser.ie6! || globe.browser.ie7! || globe.browser.ie8)
<h2><a data-target="reviews"href="reviews.html">Reviews</a></h2>
anchorInclude : function ( elem ) {var url = elem.getAttribute(href);var target =document.getElementById(elem.getAttribute...
<a href="..." data-replace="articles/latest/fragment">Latest Articles</a><a href="..." data-before="articles/latest/fragme...
$("[data-append],[data-replace],[data-after],[data-before]").ajaxInclude();
No AJAX, no problem
<div data-lazy-content="more_puppies" aria-live="polite"><!--<p>You clicked for more puppies! Here yougo:</p><img src="pup...
var toShow = document.querySelectorAll([data-lazy-content= + item.getAttribute([data-lazy-reveal]) +];for (var j = toShow....
Lazy-load images*maybe*
<div class="delayed-image-load"data-src="http://ichef.bbci.co.uk/news/200/media/images/64664000/jpg/_64664041_016703869.jp...
<div class="delayed-image-load"data-src="http://ichef.bbci.co.uk/news/200/media/images/64664000/jpg/_64664041_016703869.jp...
<div class="delayed-image-load"data-src="http://ichef.bbci.co.uk/news/200/media/images/64664000/jpg/_64664041_016703869.jp...
<img class="delayed"src="http://assets.aneventapart.com/_/img/lazy-holder.gif"data-original="http://assets.aneventapart.co...
<img class="delayed"src="http://assets.aneventapart.com/_/img/lazy-holder.gif"data-original="http://assets.aneventapart.co...
<img class="delayed"src="http://assets.aneventapart.com/_/img/lazy-holder.gif"data-original="http://assets.aneventapart.co...
Maybe?
http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=PuB6hItpCvS
What about CSS?
Embeddeda {! text-decoration: none;}@media screen and (min-width: 1300px) {! a {! ! text-decoration: underline;! }}
External<link href=”style.css” media=”only screen and(min-width: 1300px)” />
Embedded ExternalOne HTTP request Many HTTP requestsLarge file could be hard to maintain Organization can be easierExtra we...
http://scottjehl.github.com/CSS-Download-Tests/
Chrome 26Safari 6.0.2iOS Safari 6.1Android 4.2.1Android 4.2.1 Chrome 18Android 4.2.1 Chrome 18Android 4.2.1 Opera MiniYay!
Internet Explorer 10Internet Explorer 9Internet Explorer 8Firefox 20Opera 12.15Android 4.2.1 Opera MobileNooooo!
Go vanilla
https://twitter.com/ppk/status/249100988693241856
jQuery = 200-300msbased on 1.8.0http://jsperf.com/zepto-jq-eval
Up to 8s!
Custom jQuery builds
Everything hasa trade-off
What value does thisprovide?
Time to move beyondjust visual aesthetics
This may not be easy...
...but man is it fun!
thank you!@tkadlec timkadlec.comTIM KADLEC
implementingresponsivedesign.com
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Responsive Responsive Design
Upcoming SlideShare
Loading in...5
×

Responsive Responsive Design

6,610

Published on

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

Published in: Technology, Design

Responsive Responsive Design

  1. 1. Tim Kadlec @tkadlec 2012 Web Peformance Summit 8/29/2012ResponsiveResponsive DesignBuilding sites that are flexible and fastNY Web Perf Meetup | April 23, 2013
  2. 2. — Ethan MarcotteNow more than ever, we’re designing workmeant to be viewed along a gradient ofdifferent experiences. Responsive webdesign offers us a way forward, finallyallowing us to “design for the ebb and flowof things.http://alistapart.com/article/responsive-web-design
  3. 3. — John AllsoppThe control which designers know in theprint medium, and often desire in the webmedium, is simply a function of thelimitation of the printed page. We shouldembrace the fact that the web doesn’t havethe same constraints, and design for thisflexibility.http://alistapart.com/article/dao
  4. 4. More than layout
  5. 5. — Ethan MarcotteNow more than ever, we’re designing workmeant to be viewed along a gradient ofdifferent experiences. Responsive webdesign offers us a way forward, finallyallowing us to “design for the ebb and flowof things.gradient ofdifferent experienceshttp://alistapart.com/article/responsive-web-design
  6. 6. — Ethan MarcotteNow more than ever, we’re designing workmeant to be viewed along a gradient ofdifferent experiences. Responsive webdesign offers us a way forward, finallyallowing us to “design for the ebb and flowof things.gradient ofdifferent experienceshttp://alistapart.com/article/responsive-web-design
  7. 7. — Stephanie RiegerShoot me now…responsive design hasseemingly become confused with anopportunity to reduce performance ratherthan improve it.https://twitter.com/stephanierieger/status/245240465572642816
  8. 8. 74 requests, 1511kb114 requests, 1200kb99 requests, 1298kb105 requests, 5942kb
  9. 9. 48.97s,55632.80kb
  10. 10. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
  11. 11. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
  12. 12. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
  13. 13. Revenue
  14. 14. RevenueTrafficConversionsSatisfactionPage views
  15. 15. 71%as quickly or fasterhttp://www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile
  16. 16. Performance is afundamental component ofthe user experience.
  17. 17. Blame the implementation,not the technique.
  18. 18. March 2012: 829kbhttp://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/
  19. 19. March 2012: 829kbMarch 2013: 1031kbhttp://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/
  20. 20. Performance needs to matter because it matters to usersA culture of performance
  21. 21. — A friendI doubt anyone really wants to release asite that doesnt perform well, its just aproduct of not being afforded the luxury oftime and top-down pressure.
  22. 22. Set a performance budget
  23. 23. Must be usable in <= 10s65kB - 100kB
  24. 24. 1. Optimize
  25. 25. 1. Optimize2. Remove
  26. 26. 1. Optimize2. Remove3. Don’t Add
  27. 27. Become a performance masochistEmbrace the pain
  28. 28. Get real, early
  29. 29. — Brad FrostYou can’t mock-up performance inPhotoshop.
  30. 30. Or: Why I cry myself to sleep at nightResponsive Images
  31. 31. display:none is useless
  32. 32. <div id="test1"><img src="images/test1.png" alt="" /></div>@media all and (max-width: 600px) {#test1 { display:none; }}
  33. 33. Except Opera Mobile and Opera MiniEverybody loads it anyway
  34. 34. http://blog.netvlies.nl/design-interactie/retina-revolution/
  35. 35. <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>
  36. 36. <div data-picture data-alt="A giant stone face at TheBayon 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. Sameimg src as the initial, unqualified source element. --><noscript><img src="external/imgs/small.jpg" alt="Agiant stone face at The Bayon temple in Angkor Thom,Cambodia"></noscript></div>
  37. 37. <img src="fallback.jpg" alt="" srcset="small.jpg 640w1x, small-hd.jpg 640w 2x, med.jpg 1x, med-hd.jpg 2x ">
  38. 38. Actually, not so suckyBackground images
  39. 39. <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;}}
  40. 40. <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;}}
  41. 41. Load only what you need, when you need itConditional loading
  42. 42. 1. Contenthttps://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
  43. 43. 1. Contenthttps://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii2. Enhancements
  44. 44. 1. Contenthttps://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii2. Enhancements3. Leftovers
  45. 45. Cutting the mustard
  46. 46. if (‘querySelector’ in document! && ‘localStorage’ in window! && ‘addEventListener’ in window) {}
  47. 47. http://bit.ly/RSrWVI
  48. 48. http://bit.ly/RSrWVI
  49. 49. http://bit.ly/RSrWVI
  50. 50. globe.enhanced = (! respond.mediaQueriesSupported! || globe.browser.ie6! || globe.browser.ie7! || globe.browser.ie8)
  51. 51. <h2><a data-target="reviews"href="reviews.html">Reviews</a></h2>
  52. 52. anchorInclude : function ( elem ) {var url = elem.getAttribute(href);var target =document.getElementById(elem.getAttribute(data-target));reqwest(url, function (resp) {target.innerHTML = resp;});}
  53. 53. <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>
  54. 54. $("[data-append],[data-replace],[data-after],[data-before]").ajaxInclude();
  55. 55. No AJAX, no problem
  56. 56. <div data-lazy-content="more_puppies" aria-live="polite"><!--<p>You clicked for more puppies! Here yougo:</p><img src="puppy.jpg" alt="Lazy loadedpuppy image" />--></div>
  57. 57. 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) {! ! ! //its a comment! ! ! toShow[j].innerHTML = child.nodeValue;! ! ! break;! ! }! }}
  58. 58. Lazy-load images*maybe*
  59. 59. <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>
  60. 60. <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>
  61. 61. <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>
  62. 62. <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" />
  63. 63. <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" />
  64. 64. <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" />
  65. 65. Maybe?
  66. 66. http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=PuB6hItpCvS
  67. 67. What about CSS?
  68. 68. Embeddeda {! text-decoration: none;}@media screen and (min-width: 1300px) {! a {! ! text-decoration: underline;! }}
  69. 69. External<link href=”style.css” media=”only screen and(min-width: 1300px)” />
  70. 70. Embedded ExternalOne HTTP request Many HTTP requestsLarge file could be hard to maintain Organization can be easierExtra weight, regardless of if neededSmaller CSS for device not supportingmedia queriesAll styles downloadedAll styles downloaded (if media queriessupported)
  71. 71. http://scottjehl.github.com/CSS-Download-Tests/
  72. 72. Chrome 26Safari 6.0.2iOS Safari 6.1Android 4.2.1Android 4.2.1 Chrome 18Android 4.2.1 Chrome 18Android 4.2.1 Opera MiniYay!
  73. 73. Internet Explorer 10Internet Explorer 9Internet Explorer 8Firefox 20Opera 12.15Android 4.2.1 Opera MobileNooooo!
  74. 74. Go vanilla
  75. 75. https://twitter.com/ppk/status/249100988693241856
  76. 76. jQuery = 200-300msbased on 1.8.0http://jsperf.com/zepto-jq-eval
  77. 77. Up to 8s!
  78. 78. Custom jQuery builds
  79. 79. Everything hasa trade-off
  80. 80. What value does thisprovide?
  81. 81. Time to move beyondjust visual aesthetics
  82. 82. This may not be easy...
  83. 83. ...but man is it fun!
  84. 84. thank you!@tkadlec timkadlec.comTIM KADLEC
  85. 85. implementingresponsivedesign.com
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×