$30 off During Our Annual Pro Sale. View Details »

Responsive Responsive Design Tutorial at Velocity NY

Tim Kadlec
October 14, 2013

Responsive Responsive Design Tutorial at Velocity NY

Presented at Velocity NY on October 14, 2013.

Tim Kadlec

October 14, 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
    Velocity NY | October 14, 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. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

    View Slide

  11. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

    View Slide

  12. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

    View Slide

  13. Revenue

    View Slide

  14. Revenue
    Traffic
    Conversions
    Satisfaction
    Page views

    View Slide

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

    View Slide

  16. Performance is a fundamental
    component of the user experience.

    View Slide

  17. RWD is bad for performance!!!

    View Slide

  18. View Slide

  19. Blame the implementation, not the
    technique.
    http://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/

    View Slide

  20. View Slide

  21. March 2012: 829kb
    http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/

    View Slide

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

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

    View Slide

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

  25. Set a performance budget

    View Slide

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

    View Slide

  27. 1. Optimize

    View Slide

  28. 1. Optimize
    2. Remove

    View Slide

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

    View Slide

  30. Become a performance masochist
    Embrace the pain

    View Slide

  31. Get real, early

    View Slide

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

    View Slide

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

    View Slide

  34. View Slide

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

    View Slide

  36. View Slide

  37. 61%

    View Slide

  38. View Slide

  39. 66%

    View Slide

  40. Trim the fat
    Compress any and all images

    View Slide

  41. View Slide

  42. 23 images = 633.0 KB
    Before Compression

    View Slide

  43. 23 images = 597.4 KB
    After Compression

    View Slide

  44. 35.6 KB
    After Compression

    View Slide

  45. 11 CSS background images = 525.9 KB
    Before Compression

    View Slide

  46. 11 CSS background images = 317.1 KB
    After Compression

    View Slide

  47. 208.8KB
    After Compression

    View Slide

  48. 244.4 KB
    After Compression

    View Slide

  49. Show Not, Waste Not
    Don’t download things you don’t need

    View Slide

  50. display:none is useless

    View Slide




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

    View Slide

  52. Everybody loads it anyway

    View Slide

  53. View Slide

  54. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  59. The preloader

    View Slide

  60. Decorative vs. content

    View Slide

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

    View Slide

  62. 72%

    View Slide

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

    View Slide

  64. 600px
    600px

    View Slide

  65. 550px
    550px

    View Slide

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

    View Slide

  67. View Slide

  68. View Slide






  69. Accessible text

    View Slide



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





    View Slide

  71. src="fallback.jpg"
    alt=""
    srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x,
    med.jpg 1x, med-hd.jpg 2x "
    />

    View Slide


  72. View Slide

  73. LQIP
    http://www.guypo.com/feo/introducing-lqip-low-quality-image-placeholders/

    View Slide

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

    View Slide

  75. Compressive

    View Slide

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

    View Slide

  77. SVG

    View Slide

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

    View Slide

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

    View Slide

  80. 1. Analyze

    View Slide

  81. 1. Analyze
    2. Big images first

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  86. Actually, not so sucky
    Background images

    View Slide




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

    View Slide


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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  93. Cutting the mustard

    View Slide

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

    View Slide

  95. http://bit.ly/RSrWVI

    View Slide

  96. http://bit.ly/RSrWVI

    View Slide

  97. http://bit.ly/RSrWVI

    View Slide

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

    View Slide

  99. View Slide

  100. View Slide

  101. View Slide


  102. Reviews

    View Slide

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

  104. Latest
    Articles
    Latest
    Articles
    Latest
    Articles
    Latest

    View Slide

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

    View Slide

  106. No AJAX, no problem

    View Slide

  107. live="polite">


    View Slide

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

  109. What about CSS?

    View Slide

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

    View Slide

  111. External

    View Slide

  112. Embedded External
    One HTTP request Many HTTP requests

    View Slide

  113. Embedded External
    One HTTP request Many HTTP requests
    Large file could be hard to maintain Organization can be easier

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

  118. View Slide

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

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

    View Slide

  121. 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)
    Everything is in the critical path Browsers can optimize for the critical path

    View Slide

  122. Go vanilla

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  126. Up to 8s!

    View Slide

  127. Custom jQuery builds

    View Slide

  128. Everything has
    a trade-off

    View Slide

  129. View Slide

  130. What value does this provide?

    View Slide

  131. Don’t worry about JS library size?
    Just include one less image?

    View Slide

  132. Worry about JS library size and
    include one less image.

    View Slide

  133. Smart defaults

    View Slide

  134. RESS

    View Slide

  135. If you only knew the power of the Dark Side!
    RESS

    View Slide

  136. This @#$% ain’t easy

    View Slide

  137. UA detection
    is evil!

    View Slide

  138. Browsers are like
    fishermen

    View Slide

  139. View Slide

  140. View Slide

  141. View Slide

  142. Blame the implementation,
    not the technique.

    View Slide

  143. View Slide

  144. 82% of Alexa top 100 sites use
    some form of server-side
    detection
    http://mobiforge.com/designing/blog/server-side-device-detection-used-82-alexa-top-100-sites

    View Slide

  145. // instantiate client
    include 'DeviceAtlasCloud/Client.php';
    // fetch props
    $results = DeviceAtlasCloudClient::getDeviceData();
    // store result
    $props = $results['properties'];
    // set $width to correct width or "" if unknown
    $width = (isset($props['displayWidth'])) ? $props['displayWidth'] :"";
    ?>
    http://mobile.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/

    View Slide

  146. src="slide-01.jpg"
    width=""
    alt="image description"
    />
    http://mobile.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/

    View Slide

  147. // check network performance
    require_once 'DeviceAtlasNPC.php';
    session_start();
    // instantiate NPC
    $deviceAtlasNPC = new DeviceAtlasNPC();
    // test network performance
    $quality = $deviceAtlasNPC->getQuality();
    http://mobile.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/

    View Slide

  148. $path = $_SERVER['SCRIPT_NAME'];
    switch($quality) {
    case DeviceAtlasNPC::HIGH_QUALITY:
    if ($_SERVER['HTTP_HOST'] == 'lo.site.com') {
    header("Location: http://site.com".$path );
    }
    break;
    case DeviceAtlasNPC::MEDIUM_QUALITY:
    if ($_SERVER['HTTP_HOST'] == 'lo.site.com') {
    header("Location: http://site.com".$path );
    }
    break;
    case DeviceAtlasNPC::LOW_QUALITY:
    if ($_SERVER['HTTP_HOST'] == 'site.com') {
    header("Location: http://lo.site.com".$path );
    }
    break;
    default:
    }
    http://mobile.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/

    View Slide

  149. if ($device->getCapability('has_cellular_radio') === 'true') {
    ! if ($device->getCapability('xhtml_make_phone_call_string') !== 'none') {
    ! ! $wireless = true;
    ! ! $method = $device->getCapability('xhtml_make_phone_call_string');
    ! } else {
    ! ! $wireless = false;
    ! }
    } else {
    ! $wireless = false;
    }
    ?>

    View Slide

  150. var features = {};
    if (Utils.readCookie('features')) {
    ! features = Utils.readCookie('features');
    ! features = JSON.parse(features);
    } else {
    ! features['width'] = Utils.tests.getWidth();
    ! Utils.createCookie('features', JSON.stringify(features));
    }

    View Slide

  151. if (isset($_COOKIE['features'])) {
    ! $feature = json_decode($_COOKIE['features']);
    }
    if ($feature->width) {
    ! $width = $feature->width;
    } else {
    ! $width = $device->getCapability('resolution_width');
    }
    ?>

    View Slide

  152. Client Hints
    https://github.com/igrigorik/http-client-hints

    View Slide

  153. CH-DPR: 2.00

    View Slide

  154. Time to move beyond
    just visual aesthetics

    View Slide

  155. Talk about it

    View Slide

  156. This may not be easy...

    View Slide

  157. ...but man is it fun!

    View Slide

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

    View Slide

  159. implementingresponsivedesign.com

    View Slide