Responsive Design

Practical approaches to building responsive websites

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