Your SlideShare is downloading. ×
0
Responsive Web DesignBen MacNeillben.macneill@extension.orgTwitter:@chillncPresentation at:slideshare.net/chillnc/Demo file...
This presentation pulls from this excellent book:Responsive Web Design       by Ethan Marcotte
What is Responsive  Web Design?
Flexible, Device-Independent Design
Single Source of Content
Why Responsive Design?• Designing for specific devices — too many• Siloed pages: /mobile/page.html	  — trapped
Three Components• A flexible grid-based layout• Flexible images and media• Media queries (CSS3)
The Grid     http://grids.heroku.com/
960px page, 60px column, 12 wide with 20px gutter
960px page940px620px                 300px 600px                 280px
Traditional Fixed Grid#page	  {	   margin:	  36px	  auto;	   width:	  960px;}
Flexible Grid#page	  {	   margin:	  36px	  auto;	   width:	  90%;}(90% is somewhat arbitrary)
960px page940px620px                     300px 600px                     280px How does 940px translate to a flexible width...
Pixels to Percentagestarget	  ÷	  context	  =	  result#title         #page 940px         960px           %
940px	  ÷	  960px	  =	  0.979166666666667        97.9166666666667%      target	  ÷	  context	  =	  result
#page	  {	   margin:	  36px	  auto;	   width:	  90%;}#title	  {	   width:	  97.9166666666667%;	   //	  940px	  ÷	  960px}
960px page 940px 620px                               300px   600px                              280px620px	  ÷	  960px	  =...
End Result: Fluid Grid
Fluid toa Fault (well come back to this  problem)
We also need  Fluid Typography body	  {font-­‐size:	  100%}    24px	  ÷	  16px	  =	  1.5em  h1	  {font-­‐size:	  1.5em}tar...
Three Components• A flexible grid-based layout• Flexible images and media• Media queries (CSS3)
Flexible Images
Basic Markup.image	  {  float:	  right;  margin-­‐bottom:	  0.5em;  margin-­‐left:	  01.6666666666667%;  /*	  10px	  ÷	  6...
img	  {max-­‐width:	  100%;}
Flexible
Caveats• max-width doesnt work in IE6• Image scaling hiccups in IE7 & FF2
We don’t care about IE6.
Is it okay to stop         caring about IE7?• IE7 user base (2.3% - 3.5% May 2012)• Google stopped supporting in Aug 2011•...
Three Components• A flexible grid-based layout• Flexible images and media• Media queries (CSS3)
In the Beginning...               Media Types<link	  rel="stylesheet"	  href="main.css"	  media="screen"	  /><link	  rel="...
Media Query@media	  screen	  and	  (min-­‐width:	  1024px)	  {  body	  {font-­‐size:	  100%;}}  • Contains two components:...
Short Detour:Reseting the Viewport• Modern mobile browsers pretend that web  pages are desktop-browser size (~900px)• They...
Override the Default    	  <meta	  name="viewport"	   content="initial-­‐scale=1.0,	      width=device-­‐width"	  />• Make...
Default Viewport   Reset Viewport     980px             320px
Fluid toa Fault (Remember?  I said wed  come back     to this   problem.)Answer:Linearize
Need to remove Flexible Widths#main	  {  float:left;  margin:	  10px	  1.041666666666667%;// 10px ÷ 960px  width:	  64.583...
Target Tablets and Smaller@media	  screen	  and	  (max-­‐width:	  768px)	  {   //	  css	  goes	  here}    • This rule tell...
#main	  {  float:left;  margin:	  10px	  1.041666666666667%;  width:	  64.5833333333333%;	  }#other	  {  float:right;  mar...
Layout Responds to Resizing   769px           768px
More Linearization            for Smaller Devices.image	  {  width:	  50%;}@media	  screen	  and	  (max-­‐width:	  480px)	...
481px   400px
Going LargerDesign for larger page@media	  screen	  and	  (min-­‐width:	  1200px)	  {...}Or limit your page size#page	  {m...
Media Query Support   3.5+                               3+   9.5+                               9+          *can fill in s...
Three Components• A flexible grid-based layout• Flexible images and media• Media queries (CSS3)
The Strategy So Far/*	  desktop	  styles	  for	  flexible	  grid	  and	  media	  */#page	  {...}/*	  media	  queries	  tar...
Potential Problems     • Some devices will not understand        media queries     • Some mobile devices will not        h...
Mobile First• Have your design default to a simple,  small-screen layout (very linear)• Progressively enhance the design u...
The Revised Strategy/*	  default,	  linear	  layout	  */#page	  { width:	  auto; max-­‐width:	  700px; }/*	  media	  queri...
Final Result:Mobile First Responsive Design     example: http://ethanmarcotte.com/
Common Breakpoints320 pixels    For small screen devices, like phones, held in portrait mode.480 pixels    For small scree...
Awesome RWD Examples•       http://responsivewebdesign.com/robot/•       http://letsembark.com/•       http://cognition.ha...
Thanks!Ben MacNeillben.macneill@extension.orgTwitter:@chillncPresentation at:slideshare.net/chillnc/Demo files:extension.or...
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Upcoming SlideShare
Loading in...5
×

Responsive web design

4,418

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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,418
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
44
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Responsive web design"

  1. 1. Responsive Web DesignBen MacNeillben.macneill@extension.orgTwitter:@chillncPresentation at:slideshare.net/chillnc/Demo files:extension.org/share/netc/rwd/
  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 http://grids.heroku.com/
  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: http://ethanmarcotte.com/
  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• 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. 52. Thanks!Ben MacNeillben.macneill@extension.orgTwitter:@chillncPresentation at:slideshare.net/chillnc/Demo files:extension.org/share/netc/rwd/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×