Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Responsive Design

Responsive Responsive Design

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

Tim Kadlec

April 23, 2013
Tweet

More Decks by Tim Kadlec

Other Decks in Programming

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