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

Responsive Responsive Design at Peachpit Presents

Tim Kadlec
January 16, 2014

Responsive Responsive Design at Peachpit Presents

Presented for Peachpit Presents on January 16, 2014

Tim Kadlec

January 16, 2014
Tweet

More Decks by Tim Kadlec

Other Decks in Programming

Transcript

  1. Responsive
    Responsive Design
    Building sites that are flexible and fast
    Peachpit Presents | January 16, 2014

    View full-size slide

  2. 20% in 5 days

    View full-size slide

  3. 15% in 24 hours

    View full-size slide

  4. 18% in 24 hours

    View full-size slide

  5. Most popular in 3 days

    View full-size slide

  6. 6 months. 681,900 Android devices.
    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
    source: http://opensignal.com/reports/fragmentation.php

    View full-size slide

  7. Source: http://stephanierieger.com/the-trouble-with-android/

    View full-size slide

  8. “I want the entire
    smartphone, the entire
    internet, on my wrist.”

    View full-size slide

  9. @media [not|only] type [and] (expression)
    {
    ...
    }

    View full-size slide

  10. @media only screen and (min-width: 400px)
    {
    ...
    }

    View full-size slide

  11. — 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 full-size slide

  12. — 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 full-size slide

  13. More than layout

    View full-size slide

  14. Too good a job?

    View full-size slide

  15. — 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 full-size slide

  16. — 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 full-size slide

  17. — 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 full-size slide

  18. 74 requests, 1511kb
    114 requests, 1200kb
    99 requests, 1298kb
    105 requests, 5942kb

    View full-size slide

  19. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
    72%
    22%
    6% Much Smaller
    Slightly Smaller
    Same Size

    View full-size slide

  20. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
    320x480 640x960 1024x768 1600x1200
    0
    200000
    400000
    600000
    800000
    1000000
    1200000
    1400000

    View full-size slide

  21. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
    320x480 640x960 1024x768 1600x1200
    0
    200000
    400000
    600000
    800000
    1000000
    1200000
    1400000

    View full-size slide

  22. Revenue
    Traffic
    Conversions
    Satisfaction
    Page views

    View full-size slide

  23. 71%
    as quickly or faster
    http://www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile

    View full-size slide

  24. Performance
    is a fundamental
    component of
    User Experience

    View full-size slide

  25. RWD is bad for
    performance!

    View full-size slide

  26. Blame the implementation,
    not the technique.

    View full-size slide

  27. January 2012: 814.68kb
    January 2013: 1062.63kb
    http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/

    View full-size slide

  28. Performance needs to matter because it matters to users
    A culture of performance

    View full-size slide

  29. — 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 full-size slide

  30. Set a performance budget

    View full-size slide

  31. Must be usable in <= 10s
    65kB - 100kB

    View full-size slide

  32. 1. Optimize
    2. Remove

    View full-size slide

  33. 1. Optimize
    2. Remove
    3. Don’t Add

    View full-size slide

  34. Channel your inner performance masochist
    Embrace the pain

    View full-size slide

  35. Get real, early

    View full-size slide

  36. — Brad Frost
    You can’t mock-up performance in
    Photoshop.

    View full-size slide

  37. — Brad Frost
    You can’t mock-up performance in
    Photoshop.

    View full-size slide

  38. Or: Why I cry myself to sleep at night
    Responsive Images

    View full-size slide

  39. Compress any and all images
    Trim the fat

    View full-size slide

  40. Savings after
    compression
    244.4 KB

    View full-size slide

  41. Don’t download things you don’t need
    Show not, waste note

    View full-size slide

  42. display:none is useless

    View full-size slide




  43. @media all and (max-width: 600px) {
    #test1 { display:none; }
    }

    View full-size slide

  44. Everybody loads it anyway

    View full-size slide

  45. data-include-size="medium"
    data-replace-src="/img/cat-in-hat.jpg"
    src="/img/4x3.png"
    />

    View full-size slide

  46. for (var i = lazy.length - 1; i >= 0; i--) {
    ! var includeSize = lazy[i].getAttribute('data-include-size');
    ! ! ! !
    ! if (!includeSize) {
    ! ! return;
    ! }
    ! if (includeSize[j].trim() == MQ) {
    ! ! lazy.length[i].src = lazy.length[i].getAttribute('data-
    replace-src');
    ! ! return;
    ! }
    }

    View full-size slide

  47. data-src="http://ichef.bbci.co.uk/news/200/
    media/images/64664000/jpg/
    64664041_016703869.jpg"
    data-width="521"
    data-height="293">

    View full-size slide

  48. data-src="http://ichef.bbci.co.uk/news/200/
    media/images/64664000/jpg/
    64664041_016703869.jpg"
    data-width="521"
    data-height="293">

    View full-size slide

  49. data-src="http://ichef.bbci.co.uk/news/200/
    media/images/64664000/jpg/
    64664041_016703869.jpg"
    data-width="521"
    data-height="293">

    View full-size slide

  50. data-src="http://ichef.bbci.co.uk/news/200/
    media/images/64664000/jpg/
    64664041_016703869.jpg"
    data-width="521"
    data-height="293">

    View full-size slide

  51. Make sure things are the right size and resolution
    Appropriate images

    View full-size slide

  52. 255 values for red
    255 values for green
    255 values for blue
    255 values for alpha

    View full-size slide

  53. (600 x 600) - (550 x 550)
    57,500 pixels

    View full-size slide



  54. data-media="(min-width: 400px)">
    data-media="(min-width: 800px)">
    data-media="(min-width: 1000px)">





    View full-size slide

  55. L.Q.I.P
    Low Quality Image Placeholders

    View full-size slide

  56. src="dummy.400x300.jpg"
    alt="Responsive Image"
    data-fullsrc="dummy.800x600.jpg"
    />

    View full-size slide

  57. Compressive Images
    AKA Black Magic

    View full-size slide

  58. http://blog.netvlies.nl/design-interactie/retina-revolution/

    View full-size slide

  59. src="image.svg"
    onerror="this.onerror=null; this.src='image.png'">

    View full-size slide

  60. .main-header {
    background: url(logo.svg) no-repeat top left;
    background-size: contain;
    }
    .no-svg .main-header {
    background-image: url(logo.png);
    }

    View full-size slide

  61. 1. Analyze
    2. Big images first

    View full-size slide

  62. (600 x 600) - (550 x 550)
    57,500 pixels

    View full-size slide

  63. (200 x 200) - (150 x 150)
    17,500 pixels

    View full-size slide

  64. 57,500 / 17,500 = 3.2x

    View full-size slide

  65. 1. Analyze
    2. Big images first
    3. Know the trade-offs

    View full-size slide

  66. Actually, not so sucky
    Background images

    View full-size slide




  67. #test3 div {
    background-image:url('images/test3.png');
    width:200px;
    height:75px;
    }
    @media all and (max-width: 600px) {
    #test3 {
    display:none;
    }
    }

    View full-size slide


  68. @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 full-size slide

  69. Load only what you need, when you need it
    Conditional loading

    View full-size slide

  70. 1. Content
    https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii

    View full-size slide

  71. 1. Content
    https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
    2. Enhancements

    View full-size slide

  72. 1. Content
    https://speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-ii
    2. Enhancements
    3. Leftovers

    View full-size slide

  73. Cutting the mustard

    View full-size slide

  74. if ('querySelector' in document
    ! && 'localStorage' in window
    ! && 'addEventListener' in window) {
    ...
    }

    View full-size slide

  75. http://bit.ly/RSrWVI

    View full-size slide

  76. http://bit.ly/RSrWVI

    View full-size slide

  77. http://bit.ly/RSrWVI

    View full-size slide

  78. globe.enhanced = (
    ! respond.mediaQueriesSupported
    ! || globe.browser.ie6
    ! || globe.browser.ie7
    ! || globe.browser.ie8
    )

    View full-size slide


  79. href="reviews.html">Reviews

    View full-size slide

  80. anchorInclude : function ( elem ) {
    var url = elem.getAttribute('href');
    var target =
    document.getElementById(
    elem.getAttribute('data-target')
    );
    reqwest(url, function (resp) {
    target.innerHTML = resp;
    });
    }

    View full-size slide

  81. Latest
    Articles
    Latest
    Articles
    Latest
    Articles
    Latest
    Articles

    View full-size slide

  82. $("[data-append],[data-replace],[data-after],
    [data-before]").ajaxInclude();

    View full-size slide

  83. No AJAX, no problem

    View full-size slide

  84. live="polite">


    View full-size slide

  85. 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 full-size slide

  86. What about CSS?

    View full-size slide

  87. Embedded
    a {
    ! text-decoration: none;
    }
    @media screen and (min-width: 1300px) {
    ! a {
    ! ! text-decoration: underline;
    ! }
    }

    View full-size slide

  88. External
    media="only screen and (min-width: 1300px)" />

    View full-size slide

  89. All styles downloaded

    View full-size slide

  90. http://scottjehl.github.com/CSS-Download-Tests/

    View full-size slide

  91. media="seriously please do not download this
    what is the matter with you why won’t
    you listen" />

    View full-size slide

  92. 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 full-size slide

  93. Internet Explorer 10
    Internet Explorer 9
    Internet Explorer 8
    Firefox 20
    Opera 12.15
    Android 4.2.1 Opera Mobile
    Nooooo!

    View full-size slide

  94. https://twitter.com/ppk/status/249100988693241856

    View full-size slide

  95. jQuery = 200-300ms
    based on 1.8.0
    http://jsperf.com/zepto-jq-eval

    View full-size slide

  96. Custom jQuery builds

    View full-size slide

  97. Everything has
    a trade-off

    View full-size slide

  98. What value does this
    provide?

    View full-size slide

  99. Don’t worry about JS size.
    Just include one less image.

    View full-size slide

  100. Don’t worry about JS size and
    Just include one less image.

    View full-size slide

  101. Time to move beyond
    visual aesthetics

    View full-size slide

  102. This may not be easy...

    View full-size slide

  103. ...but man is it fun!

    View full-size slide

  104. thank you!
    @tkadlec timkadlec.com
    TIM KADLEC

    View full-size slide

  105. implementingresponsivedesign.com
    peachpit.com/deals

    View full-size slide