Responsive Web Design

You may have heard about this this 'Responsive Web Design' thing that's taking the web by storm. Fluid grids and media queries are helping websites adapt their layouts to better suit screen widths, but there's also a host of performance optimization techniques that, when used in conjunction with content- and mobile-first design, allow responsive web design to help us create truly universal yet mobile-optimized web experiences. In this talk, Matt will blitz through an overview of basic responsive web development, before diving a little deeper into some of the trickier techniques that will help you develop outstanding, mobile-performant universal web products.

Transcript

1. RESPONSIVE Matt Menzer @menzer DESIGN WEB
2. ABOUT ME Sr. Web Developer at Deloitte Digital
5. optimize ALL the devices?
7. http://www. ickr.com/photos/adactio/5818096043
8. This is our way forward. Rather than tailoring disconnected designs to each of an ever- increasing number of web devices, we can treat them as facets of the same experience... In short, we need to practice responsive web design. ETHAN MARCOTTE
9. 3. Media Queries 2. Fluid Media 1. Fluid Grids
10. FLUID GRID width: 960px;
11. FLUID GRID width: 960px; width: 96em;
12. FLUID GRID width: 960px; width: 96em; width: 100%;
13. TARGET / CONTEXT = RESULT Don’t round off the decimals
14. FLUID MEDIA <div class=”image”> <img src=”file.jpg”> </div> .image img { max-width: 100%; }
15. FLUID MEDIA <div class=”embed”> <object> </div> Embedded
16. .embed { position: relative; padding-bottom: 56.25%; height: 0; } .embed object { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } WORKS FOR ALL INTRINSIC RATIO!
17. MEDIA QUERIES @media only screen and (min-width: 768px) { /* styles */ }
18. WHAT ABOUT IE? http://github.com/scottjehl/respond Respond.js
19. WHAT ABOUT IE? <link rel="stylesheet" href="/css/global.css" media="all"> <link rel="stylesheet" href="/css/layout.css" media="all and (min-width: 30em)"> <!--[if lt IE 9]> <link rel="stylesheet" href="/css/layout.css" media="all"> <![endif]--> Bypass Media Queries
20. MOBILE FIRST .row { overflow: hidden; } Mobile = Default = No media query
21. MOBILE FIRST @media only screen and (min-width: 50em) { .a-row { overflow: hidden; } .a-1of2 { width: 50% } .a-1of3 { width: 33.3333% } } Breakpoints != Devices
22. MOBILE FIRST @media only screen and (min-width: 75em) { .a-row { overflow: visible; } .b-row { overflow: hidden; } .b-1of4 { width: 25% } } Breakpoints != Devices
23. BUT WHAT ABOUT THE IMAGES?
24. RESPONSIVE IMAGES Hello, JavaScript! 1. Mobile default 2. Don’t download unnecessary extras 3. Robust query parameters 4. Individual asset control
25. RESPONSIVE IMAGES Current options 1. Adaptive Images 2. Responsive Images 3. <noscript> 4. Picture ll
26. RESPONSIVE IMAGES Adaptive Images http://adaptive-images.com
27. RESPONSIVE IMAGES Responsive Images (Filament Group) http://github.com/scottjehl/responsive-images
28. RESPONSIVE IMAGES <noscript> <noscript data-src="template.jpg"> <img src="template-smallest" alt="Montage of iPhones with Deloitte Digital branding." /> </noscript>
29. RESPONSIVE IMAGES Picture ll http://github.com/scottjehl/picturefill
30. RESPONSIVE IMAGES <picture> element http://www.alistapart.com/articles/ responsive-images-how-they-almost- worked-and-what-we-need/
31. <picture alt=”Alt text”> <source src=”small.jpg”> <source src="medium.jpg" media="(min- width: 400px)"> <source src="large.jpg" media="(min- width: 800px)"> <img src="small.jpg" alt="Alt text"> </picture>
32. RESPONSIVE IMAGES <img srcset> <img alt="alt text" src="image.jpg" srcset="image-HD.jpg 2x, image- small.jpeg 100w, banner-small-HD.jpeg 100w 2x">
33. RESPONSIVE IMAGES Not quite... 1. Mobile default 2. Don’t download unnecessary extras 3. Robust query parameters (meh?) 4. Individual asset control
34. RESPONSIVE IMAGES User Choice < your solution here >
35. Um. That sounds like a *lot* of work.
36. YES.
37. Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device. GOOGLE https://developers.google.com/webmasters/ smartphone-sites/
38. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more exible, but more adaptive to the media that renders them. ETHAN MARCOTTE
39. THANK YOU @menzer