Responsive web design


Published on

Visitors to your site are increasingly less likely to have a traditional desktop experience. There’s a widening diversity of browsers and devices as the mobile, netbook and tablet market explodes. Can your designs handle this new world? Learn how CSS3 can be used to create a responsive design that adapts well to your visitors regardless of how large or small their screen sizes are. We’ll cover why you need to design your sites to work on a widening array of devices and screen sizes. There will be examples and coding. In particular, we’ll look at implementing a fluid grid and flexible images and using media queries to create a great experience for all visitors.

Published in: Technology, Design
  • Be the first to comment

Responsive web design

  1. 1. Responsive Web DesignBen MacNeillben.macneill@extension.orgTwitter:@chillncPresentation
  2. 2. This presentation pulls from this excellent book:Responsive Web Design by Ethan Marcotte
  3. 3. What is Responsive Web Design?
  4. 4. Flexible, Device-Independent Design
  5. 5. Single Source of Content
  6. 6. Why Responsive Design?• Designing for specific devices — too many• Siloed pages: /mobile/page.html  — trapped
  7. 7. Three Components• A flexible grid-based layout• Flexible images and media• Media queries (CSS3)
  8. 8. The Grid
  9. 9. 960px page, 60px column, 12 wide with 20px gutter
  10. 10. 960px page940px620px 300px 600px 280px
  11. 11. Traditional Fixed Grid#page  {   margin:  36px  auto;   width:  960px;}
  12. 12. Flexible Grid#page  {   margin:  36px  auto;   width:  90%;}(90% is somewhat arbitrary)
  13. 13. 960px page940px620px 300px 600px 280px How does 940px translate to a flexible width? It depends on its container.
  14. 14. Pixels to Percentagestarget  ÷  context  =  result#title #page 940px 960px %
  15. 15. 940px  ÷  960px  =  0.979166666666667 97.9166666666667% target  ÷  context  =  result
  16. 16. #page  {   margin:  36px  auto;   width:  90%;}#title  {   width:  97.9166666666667%;   //  940px  ÷  960px}
  17. 17. 960px page 940px 620px 300px 600px 280px620px  ÷  960px  =  0.645833333333333300px  ÷  960px  =  0.3125600px  ÷  620px  =  0.967741935483871280px  ÷  300px  =  0.933333333333333
  18. 18. End Result: Fluid Grid
  19. 19. Fluid toa Fault (well come back to this problem)
  20. 20. We also need Fluid Typography body  {font-­‐size:  100%} 24px  ÷  16px  =  1.5em h1  {font-­‐size:  1.5em}target  ÷  context  =  result
  21. 21. Three Components• A flexible grid-based layout• Flexible images and media• Media queries (CSS3)
  22. 22. Flexible Images
  23. 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. 24. img  {max-­‐width:  100%;}
  25. 25. Flexible
  26. 26. Caveats• max-width doesnt work in IE6• Image scaling hiccups in IE7 & FF2
  27. 27. We don’t care about IE6.
  28. 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
  29. 29. Three Components• A flexible grid-based layout• Flexible images and media• Media queries (CSS3)
  30. 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. 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. 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 fit in the device window
  33. 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. 34. Default Viewport Reset Viewport 980px 320px
  35. 35. Fluid toa Fault (Remember? I said wed come back to this problem.)Answer:Linearize
  36. 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. 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. 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. 39. Layout Responds to Resizing 769px 768px
  40. 40. More Linearization for Smaller Devices.image  { width:  50%;}@media  screen  and  (max-­‐width:  480px)  {   .image  {     width:  auto;   }}
  41. 41. 481px 400px
  42. 42. Going LargerDesign for larger page@media  screen  and  (min-­‐width:  1200px)  {...}Or limit your page size#page  {max-­‐width:1024px}
  43. 43. Media Query Support 3.5+ 3+ 9.5+ 9+ *can fill in some gaps with respond.js
  44. 44. Three Components• A flexible grid-based layout• Flexible images and media• Media queries (CSS3)
  45. 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. 46. Potential Problems • Some devices will not understand media queries • Some mobile devices will not have javascriptHowever, a flexible layout provides a good fallback
  47. 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 fix), they get the attractive, single-column layout
  48. 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. 49. Final Result:Mobile First Responsive Design example:
  50. 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. 51. Awesome RWD Examples••• More Reading • Responsive Web Design – Ideas, Technology, and Examples • Ethan Marcottes original article • Responsive design – harnessing the power of media queries • Responsive Web Design (The book)
  52. 52. Thanks!Ben MacNeillben.macneill@extension.orgTwitter:@chillncPresentation