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

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
  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. — 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
  4. — 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
  5. — 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. — 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
  7. — 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.
  8. 61%

  9. 66%

  10. 72%

  11. <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>
  12. <span data-picture data-alt="A giant stone face at The Bayon temple

    in Angkor Thom, Cambodia"> <span data-src="small.jpg"></span> <span data-src="medium.jpg" data-media="(min-width: 400px)"></span> <span data-src="large.jpg" data-media="(min-width: 800px)"></span> <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span> <!-- 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> </span>
  13. SVG

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

    .no-svg .main-header { background-image: url(logo.png); }
  15. <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; } }
  16. anchorInclude : function ( elem ) { var url =

    elem.getAttribute('href'); var target = document.getElementById( elem.getAttribute('data-target') ); reqwest(url, function (resp) { target.innerHTML = resp; }); }
  17. <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
  18. <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>
  19. 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; ! ! } ! } }
  20. Embedded a { ! text-decoration: none; } @media screen and

    (min-width: 1300px) { ! a { ! ! text-decoration: underline; ! } }
  21. Embedded External One HTTP request Many HTTP requests Large file

    could be hard to maintain Organization can be easier
  22. 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
  23. 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)
  24. 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!
  25. Internet Explorer 10 Internet Explorer 9 Internet Explorer 8 Firefox

    20 Opera 12.15 Android 4.2.1 Opera Mobile Nooooo!
  26. 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
  27. 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
  28. <?php // 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/
  29. // 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/
  30. $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/
  31. <?php 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; } ?>
  32. 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)); }
  33. <?php if (isset($_COOKIE['features'])) { ! $feature = json_decode($_COOKIE['features']); } if

    ($feature->width) { ! $width = $feature->width; } else { ! $width = $device->getCapability('resolution_width'); } ?>