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

Responsive Design

Ded01cdab114abe4ec13511e4c25b9bb?s=47 Andy Hume
November 13, 2011

Responsive Design

Practical approaches to building responsive websites

Ded01cdab114abe4ec13511e4c25b9bb?s=128

Andy Hume

November 13, 2011
Tweet

More Decks by Andy Hume

Other Decks in Technology

Transcript

  1. @andyhume Multipack Presents • 12th November 2011 DESIGN RESPONSIVE

  2. @andyhume Multipack Presents • 12th November 2011 DESIGN RESPONSIVE

  3. None
  4. From now on, instead of talking about making a site

    accessible, I'm going to talk about keeping it accessible. “ Jeremy Keith
  5. TRY NOT TO BREAK IT? THE WEB WORKS

  6. RESPONSIVENESS? WHAT BROKE .container { width: 960px; }

  7. SEMANTIC HTML STEPS[0]

  8. OOCSS STEPS[1] Loosely couple content styling from layout styling <link

    rel="stylesheet" href="core.css">
  9. CORE.CSS STEPS[4] .product .title { font-size: 1em; } @media screen

    and (min-width: 60em) { .product .title { font-size: 1.4em; } } Keep modules together
  10. SELECTOR QUERIES? STEPS[4] <div class="product" data-squery="min-width: 400px=wide max-width:10em=small"> <p>Content here</p>

    </div> Adapt content based on container width https://github.com/ahume/selector-queries
  11. SELECTOR QUERIES? STEPS[4] .product img { max-width: 100%; } .product.wide

    img { // greater than 400px float: left; margin-right: 1em; max-width: auto; } Adapt content based on container width https://github.com/ahume/selector-queries
  12. NAVIGATION STEPS[2]

  13. NAVIGATION STEPS[2]

  14. ADDING LAYOUT STEPS[3] <link rel="stylesheet" href="core.css"> <link rel="stylesheet" href="layout.css" media="screen

    and (min-width:40em)"> Loosely couple content styling from layout styling
  15. IE <9 STEPS[5] Send full ‘desktop’ layout <link rel="stylesheet" href="core.css">

    <link rel="stylesheet" href="layout.css" media="screen and (min-width:40em)"> <!--[if lt IE 9]> <link rel="stylesheet" href="layout.css" media="screen"> <![endif]-->
  16. IE <9 STEPS[5] Send full ‘desktop’ layout - but not

    to mobile <link rel="stylesheet" href="core.css"> <link rel="stylesheet" href="layout.css" media="screen and (min-width:40em)"> <!--[if lt IE 9] & !(IEMobile)]> <link rel="stylesheet" href="layout.css" media="screen"> <![endif]-->
  17. IE <9 STEPS[5] Send full ‘desktop’ layout - or not

    <link rel="stylesheet" href="core.css"> <link rel="stylesheet" href="layout.css" media="screen and (min-width:40em)"> <!--[if lt IE 9] & !(IEMobile) & (gt IE6)]> <link rel="stylesheet" href="layout.css" media="screen"> <![endif]-->
  18. IE <9 STEPS[5] Polyfill media queries <script rel="respond.js"></script> https://github.com/scottjehl/Respond

  19. VIEWPORT STEPS[6] Set layout viewport width to the device width

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  20. VIEWPORT STEPS[6] W3C Syntax: coming soon http://dev.w3.org/csswg/css-device-adapt/ @viewport { width:

    device-width; zoom: 1.0; }
  21. IMAGES STEPS[7] Shrinking img { max-width: 100%; }

  22. RESPONSIVE IMAGES STEPS[7] Small image by default Don’t download both

  23. RESPONSIVE IMAGES STEPS[7] Client-side solutions https://github.com/filamentgroup/Responsive-Images https://github.com/ahume/Responsive-Images https://github.com/allmarkedup/responsive-images-alt

  24. RESPONSIVE IMAGES STEPS[7] Here and now? src.sencha.io <img src="http://src.sencha.io/http://andyhume.net/ u.jpg">

  25. RESPONSIVE IMAGES STEPS[7] Here and now? Image replacement <div class="logo">

    <img src="logo.png" alt="Company name"> </div> .logo { background-image: url(logo-large.png); } .logo img { position: absolute; left: -9999px; }
  26. SVG STEPS[8] Same approaches to support as responsive images

  27. ENHANCING CONTENT STEPS[9] What’s core content?

  28. ENHANCING CONTENT STEPS[9]

  29. ENHANCING CONTENT STEPS[9]

  30. ENHANCING CONTENT STEPS[9] if ($(document).width() > 640) { ! $.get('path/to/html',

    function(data) { ! ! $('[role="complementary"]').append(data); ! }); } What’s core content?
  31. WHAT ELSE? Bandwidth Touch Individual user behaviour

  32. THE END @andyhume Multipack Presents • 12th November 2011