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

Responsive Design

Andy Hume
November 13, 2011

Responsive Design

Practical approaches to building responsive websites

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

    View Slide

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

    View Slide

  3. View Slide

  4. From now on, instead of talking about
    making a site accessible, I'm going to
    talk about keeping it accessible.

    Jeremy Keith

    View Slide

  5. TRY NOT TO BREAK IT?
    THE WEB WORKS

    View Slide

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

    View Slide

  7. SEMANTIC HTML
    STEPS[0]

    View Slide

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

    View Slide

  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

    View Slide

  10. SELECTOR QUERIES?
    STEPS[4]

    Content here

    Adapt content based on container width
    https://github.com/ahume/selector-queries

    View Slide

  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

    View Slide

  12. NAVIGATION
    STEPS[2]

    View Slide

  13. NAVIGATION
    STEPS[2]

    View Slide

  14. ADDING LAYOUT
    STEPS[3]

    media="screen and (min-width:40em)">
    Loosely couple content styling from layout styling

    View Slide

  15. IE <9
    STEPS[5]
    Send full ‘desktop’ layout

    media="screen and (min-width:40em)">

    View Slide

  16. IE <9
    STEPS[5]
    Send full ‘desktop’ layout - but not to mobile

    media="screen and (min-width:40em)">

    View Slide

  17. IE <9
    STEPS[5]
    Send full ‘desktop’ layout - or not

    media="screen and (min-width:40em)">

    View Slide

  18. IE <9
    STEPS[5]
    Polyfill media queries

    https://github.com/scottjehl/Respond

    View Slide

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

    View Slide

  20. VIEWPORT
    STEPS[6]
    W3C Syntax: coming soon
    http://dev.w3.org/csswg/css-device-adapt/
    @viewport {
    width: device-width;
    zoom: 1.0;
    }

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  24. RESPONSIVE IMAGES
    STEPS[7]
    Here and now? src.sencha.io

    View Slide

  25. RESPONSIVE IMAGES
    STEPS[7]
    Here and now? Image replacement



    .logo {
    background-image: url(logo-large.png);
    }
    .logo img {
    position: absolute; left: -9999px;
    }

    View Slide

  26. SVG
    STEPS[8]
    Same approaches to support as responsive images

    View Slide

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

    View Slide

  28. ENHANCING CONTENT
    STEPS[9]

    View Slide

  29. ENHANCING CONTENT
    STEPS[9]

    View Slide

  30. ENHANCING CONTENT
    STEPS[9]
    if ($(document).width() > 640) {
    ! $.get('path/to/html', function(data) {
    ! ! $('[role="complementary"]').append(data);
    ! });
    }
    What’s core content?

    View Slide

  31. WHAT ELSE?
    Bandwidth
    Touch
    Individual user behaviour

    View Slide

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

    View Slide