Responsive Design

Practical approaches to building responsive websites

Transcript

1. @andyhume Multipack Presents • 12th November 2011 DESIGN RESPONSIVE
2. @andyhume Multipack Presents • 12th November 2011 DESIGN RESPONSIVE
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