Responsive Design

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