Responsive web design

1. Responsive Web DesignBen MacNeillben.macneill@extension.orgTwitter:@chillncPresentation at:slideshare.net/chillnc/Demo ﬁles:extension.org/share/netc/rwd/

2. This presentation pulls from this excellent book:Responsive Web Design by Ethan Marcotte

3. What is Responsive Web Design?

4. Flexible, Device-Independent Design

5. Single Source of Content

6. Why Responsive Design?• Designing for speciﬁc devices — too many• Siloed pages: /mobile/page.html — trapped

7. Three Components• A ﬂexible grid-based layout• Flexible images and media• Media queries (CSS3)

8. The Grid http://grids.heroku.com/

9. 960px page, 60px column, 12 wide with 20px gutter

10. 960px page940px620px 300px 600px 280px

11. Traditional Fixed Grid#page { margin: 36px auto; width: 960px;}

12. Flexible Grid#page { margin: 36px auto; width: 90%;}(90% is somewhat arbitrary)

13. 960px page940px620px 300px 600px 280px How does 940px translate to a ﬂexible width? It depends on its container.

14. Pixels to Percentagestarget ÷ context = result#title #page 940px 960px %

15. 940px ÷ 960px = 0.979166666666667 97.9166666666667% target ÷ context = result

16. #page { margin: 36px auto; width: 90%;}#title { width: 97.9166666666667%; // 940px ÷ 960px}

17. 960px page 940px 620px 300px 600px 280px620px ÷ 960px = 0.645833333333333300px ÷ 960px = 0.3125600px ÷ 620px = 0.967741935483871280px ÷ 300px = 0.933333333333333

18. End Result: Fluid Grid

19. Fluid toa Fault (well come back to this problem)

20. We also need Fluid Typography body {font-‐size: 100%} 24px ÷ 16px = 1.5em h1 {font-‐size: 1.5em}target ÷ context = result

22. Flexible Images

23. Basic Markup.image { float: right; margin-‐bottom: 0.5em; margin-‐left: 01.6666666666667%; /* 10px ÷ 600px */ width: 50%; /* 300px ÷ 600px */}<p class="image"> <img src="turtle.jpg" /></p>

24. img {max-‐width: 100%;}

25. Flexible

26. Caveats• max-width doesnt work in IE6• Image scaling hiccups in IE7 & FF2

27. We don’t care about IE6.

28. Is it okay to stop caring about IE7?• IE7 user base (2.3% - 3.5% May 2012)• Google stopped supporting in Aug 2011• Facebook began phasing out support in Dec 2011• Microsoft is discontinuing support in July 2013• Flexible images work, just somewhat degraded

30. In the Beginning... Media Types<link rel="stylesheet" href="main.css" media="screen" /><link rel="stylesheet" href="paper.css" media="print" /><link rel="stylesheet" href="tiny.css" media="handheld"/> • Early phones had poor browsers • Media Types proved too broad

31. Media Query@media screen and (min-‐width: 1024px) { body {font-‐size: 100%;}} • Contains two components: media type and (query) • The query contains a feature and a value • Can be placed right in your stylesheet

32. Short Detour:Reseting the Viewport• Modern mobile browsers pretend that web pages are desktop-browser size (~900px)• They render them at that size• Then shrink the resulting page to ﬁt in the device window

33. Override the Default <meta name="viewport" content="initial-‐scale=1.0, width=device-‐width" />• Makes width of the browser’s viewport equal to the width of the device’s screen

34. Default Viewport Reset Viewport 980px 320px

35. Fluid toa Fault (Remember? I said wed come back to this problem.)Answer:Linearize

36. Need to remove Flexible Widths#main { float:left; margin: 10px 1.041666666666667%;// 10px ÷ 960px width: 64.5833333333333%; // 620px ÷ 960px}#other { float:right; margin: 10px 1.041666666666667%;// 10px ÷ 960px width: 29.1666666666667%; // 280px ÷ 960px}

37. Target Tablets and Smaller@media screen and (max-‐width: 768px) { // css goes here} • This rule tells the browser to render the enclosed CSS if the viewport is smaller than 768px *The iPad is 768px in portrait orientation

38. #main { float:left; margin: 10px 1.041666666666667%; width: 64.5833333333333%; }#other { float:right; margin: 10px 1.041666666666667%; width: 29.1666666666667%; } @media screen and (max-‐width: 768px) { #main, #other { margin: 10px; width: auto; } }

39. Layout Responds to Resizing 769px 768px

40. More Linearization for Smaller Devices.image { width: 50%;}@media screen and (max-‐width: 480px) { .image { width: auto; }}

41. 481px 400px

42. Going LargerDesign for larger page@media screen and (min-‐width: 1200px) {...}Or limit your page size#page {max-‐width:1024px}

43. Media Query Support 3.5+ 3+ 9.5+ 9+ *can ﬁll in some gaps with respond.js

45. The Strategy So Far/* desktop styles for flexible grid and media */#page {...}/* media queries targeting different breakpoints */@media screen and (max-‐width: 768px) {...}@media screen and (max-‐width: 480px) {...}

46. Potential Problems • Some devices will not understand media queries • Some mobile devices will not have javascriptHowever, a ﬂexible layout provides a good fallback

47. Mobile First• Have your design default to a simple, small-screen layout (very linear)• Progressively enhance the design using media queries as the viewport resolution increases• If a browser lacks media query support (and javascript isnt available as a ﬁx), they get the attractive, single-column layout

48. The Revised Strategy/* default, linear layout */#page { width: auto; max-‐width: 700px; }/* media queries build a flexible layout and enhance at different breakpoints */@media screen and (min-‐width: 600px) {...}@media screen and (min-‐width: 860px) {...}@media screen and (min-‐width: 1024px) {...}

49. Final Result:Mobile First Responsive Design example: http://ethanmarcotte.com/

50. Common Breakpoints320 pixels For small screen devices, like phones, held in portrait mode.480 pixels For small screen devices, like phones, held in landscape mode. Smaller tablets, like the Amazon Kindle (600×800) and Barnes &600 pixels Noble Nook (600×1024), held in portrait mode.768 pixels Ten-inch tablets like the iPad (768×1024) held in portrait mode. Tablets like the iPad (1024×768) held in landscape mode, as well as1024 pixels certain laptop, netbook, and desktop displays.1200 pixels For widescreen displays, primarily laptop and desktop browsers.

51. Awesome RWD Examples• http://responsivewebdesign.com/robot/• http://letsembark.com/• http://cognition.happycog.com/ More Reading • Responsive Web Design – Ideas, Technology, and Examples http://www.onextrapixel.com/2012/05/17/responsive-web-design-ideas-technology-and-examples/ • Ethan Marcottes original article http://www.alistapart.com/articles/responsive-web-design/ • Responsive design – harnessing the power of media queries http://googlewebmastercentral.blogspot.co.uk/2012/04/responsive-design-harnessing-power-of.html • Responsive Web Design (The book) http://www.abookapart.com/products/responsive-web-design

52. Thanks!Ben MacNeillben.macneill@extension.orgTwitter:@chillncPresentation at:slideshare.net/chillnc/Demo ﬁles:extension.org/share/netc/rwd/