Responsive Responsive Design

Responsive Responsive Design

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

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

April 23, 2013
Tweet

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
  3. None
  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
  10. None
  11. 48.97s, 55632.80kb

  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  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.

  29. None
  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/

  32. None
  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.

  43. None
  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 )
  65. None
  66. None
  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*

  75. None
  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>

  79. None
  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/

  90. None
  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

  99. None
  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