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 Slide

  2. View Slide

  3. 20% in 5 days

    View Slide

  4. 15% in 24 hours

    View Slide

  5. 18% in 24 hours

    View Slide

  6. Most popular in 3 days

    View Slide

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

    View Slide

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

    View Slide

  9. View Slide

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

    View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

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

    View Slide

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

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. — 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

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. — 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

  27. More than layout

    View Slide

  28. Too good a job?

    View Slide

  29. — 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

  30. — 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

  31. — 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

  32. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  37. Revenue

    View Slide

  38. Revenue
    Traffic
    Conversions
    Satisfaction
    Page views

    View Slide

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

    View Slide

  40. Performance
    is a fundamental
    component of
    User Experience

    View Slide

  41. RWD is bad for
    performance!

    View Slide

  42. View Slide

  43. Blame the implementation,
    not the technique.

    View Slide

  44. 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 Slide

  45. 30%

    View Slide

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

    View Slide

  47. — 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

  48. Set a performance budget

    View Slide

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

    View Slide

  50. 1. Optimize

    View Slide

  51. 1. Optimize
    2. Remove

    View Slide

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

    View Slide

  53. Channel your inner performance masochist
    Embrace the pain

    View Slide

  54. Get real, early

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  58. Compress any and all images
    Trim the fat

    View Slide

  59. View Slide

  60. Savings after
    compression
    244.4 KB

    View Slide

  61. View Slide

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

    View Slide

  63. display:none is useless

    View Slide




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

    View Slide

  65. Everybody loads it anyway

    View Slide

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

    View Slide

  67. 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 Slide

  68. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  74. 72%

    View Slide

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

    View Slide

  76. 600px

    View Slide

  77. 550px

    View Slide

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

    View Slide

  79. View Slide



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





    View Slide

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

    View Slide

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

    View Slide

  83. Compressive Images
    AKA Black Magic

    View Slide

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

    View Slide

  85. SVG

    View Slide

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

    View Slide

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

    View Slide

  88. 1. Analyze

    View Slide

  89. 1. Analyze
    2. Big images first

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  94. Actually, not so sucky
    Background images

    View Slide




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

    View Slide


  96. @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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  101. Cutting the mustard

    View Slide

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

    View Slide

  103. http://bit.ly/RSrWVI

    View Slide

  104. http://bit.ly/RSrWVI

    View Slide

  105. http://bit.ly/RSrWVI

    View Slide

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

    View Slide

  107. View Slide

  108. View Slide

  109. View Slide


  110. href="reviews.html">Reviews

    View Slide

  111. 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

  112. Latest
    Articles
    Latest
    Articles
    Latest
    Articles
    Latest
    Articles

    View Slide

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

    View Slide

  114. No AJAX, no problem

    View Slide

  115. live="polite">


    View Slide

  116. 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

  117. What about CSS?

    View Slide

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

    View Slide

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

    View Slide

  120. All styles downloaded

    View Slide

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

    View Slide

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

    View Slide

  123. View Slide

  124. 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

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

    View Slide

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

    View Slide

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

    View Slide

  128. Up to 8s!

    View Slide

  129. Custom jQuery builds

    View Slide

  130. Everything has
    a trade-off

    View Slide

  131. View Slide

  132. What value does this
    provide?

    View Slide

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

    View Slide

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

    View Slide

  135. Time to move beyond
    visual aesthetics

    View Slide

  136. This may not be easy...

    View Slide

  137. ...but man is it fun!

    View Slide

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

    View Slide

  139. implementingresponsivedesign.com
    peachpit.com/deals

    View Slide