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. 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. 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. 3.
  4. 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. 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
  6. 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
  7. 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
  8. 10.
  9. 12.
  10. 13.
  11. 14.
  12. 15.
  13. 16.
  14. 17.
  15. 18.
  16. 19.
  17. 20.
  18. 24.
  19. 29.
  20. 32.
  21. 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.
  22. 43.
  23. 46.
  24. 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>
  25. 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>
  26. 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; } }
  27. 65.
  28. 66.
  29. 68.

    anchorInclude : function ( elem ) { var url =

    elem.getAttribute('href'); var target = document.getElementById(elem.getAttribute ('data-target')); reqwest(url, function (resp) { target.innerHTML = resp; }); }
  30. 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>
  31. 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>
  32. 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; ! ! } ! } }
  33. 75.
  34. 79.
  35. 83.
  36. 86.

    Embedded a { ! text-decoration: none; } @media screen and

    (min-width: 1300px) { ! a { ! ! text-decoration: underline; ! } }
  37. 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)
  38. 90.
  39. 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!
  40. 92.

    Internet Explorer 10 Internet Explorer 9 Internet Explorer 8 Firefox

    20 Opera 12.15 Android 4.2.1 Opera Mobile Nooooo!
  41. 96.
  42. 99.