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. 6 months. 681,900 Android devices. . . . . .

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . source: http://opensignal.com/reports/fragmentation.php
  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. 30%

  8. — 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.
  9. 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; ! } }
  10. 72%

  11. <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>
  12. SVG

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

    .no-svg .main-header { background-image: url(logo.png); }
  14. <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; } }
  15. if ('querySelector' in document ! && 'localStorage' in window !

    && 'addEventListener' in window) { ... }
  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 Articles</a>
  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. 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!
  22. Internet Explorer 10 Internet Explorer 9 Internet Explorer 8 Firefox

    20 Opera 12.15 Android 4.2.1 Opera Mobile Nooooo!