0
Building                   Responsive                      Layouts                   by Zoe Mickley Gillenwater           ...
hellonice to meet you                   2
I don’t use amobile phone
I have aprocess foreating these
          whyresponsive web design works                              5
          what      whyresponsive web design means                              6
                 ?what      why       howto do responsive web design                              7
fluid/liquid layoutuses percentage widths to adapt      to size of viewport                                  8
Look at this!This is so tough!Im in such peril  way up here!                    9
Oh, wait…            10
How dowe makethis fluid?              11
Start with fluid wrapper                           12
Add opposing floats inside                             13
3 cols with poor source order                                14
Nest 2-col layout in 2-col layout                                    15
Percentages are relative                           16
Determining nested widths width of columnyou want to match   ÷      width of                        parent column   =     ...
Determining nested widths width of columnyou want to match   ÷      width of                        parent column   =     ...
Determining nested widths width of columnyou want to match   ÷      width of                        parent column   =     ...
Thats more like it                      20
What about fluid grids?                          21
Width of this nested block?                              22
Well thats not right…                         23
To the laboratory! width of columnyou want to match   ÷      width of                        parent column   =      width ...
There we go              25
                   ?widths             spacingbetween and in fluid columns                               26
Leave a gap via widths                         27
Declaring fluid margin/padding• Adjust widths so everything adds to 100%  • For IE 6/7, make it 99%: avoids problems due  ...
Using box-sizing• Makes px & em margin/padding on fluid  layout easy• Standard box model  • box-sizing: content-box  • Pad...
Fluid grid, fixed-width spacing.column {  float: left;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box...
Use border as faux margin.column {  float: left;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizin...
Negate “margin” at start of row.column {  float: left;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box...
Fix box-sizing in IE 7 and 6• Feed different dimensions based on  content-box-model, or• Use Christian Schaefers box-sizin...
I recommend gridpak.com                          34
                    ? fluid              hybridone+ column flexible, one+ not                                 35
Hybrid layout options• Easy: sidebars first in HTML  • Float sidebars, main content moves up    between floats  • But usua...
Fixed-widthsidebarstarting point                 37
Add wrapperwith padding#content-wrapper {  padding-right: 290px;}                          38
Lay out maincontent div#content-main {  float: left;  width: 100%;}                  39
Float sidebar#content-secondary {  float: right;  width: 250px;}                       40
A positive right margin                   150px                           41
A negative right margin                      -150px                               42
Pull sidebar into gap#content-secondary {  float: right;  width: 250px;  margin-right: -290px;   Matches}                 ...
Success!           44
To make sidebar show in IE 6#content-wrapper {  zoom: 1;             Adds hasLayout}#content-main,#content-secondary {  di...
3-column hybrid layout• Nest one 2-column layout inside another• Components of each layout:  1. Wrapper with padding on on...
                 ?fluid layout    media queries feed different styles based on          viewport size                    ...
Choosing default styles•   Start "mobile," layer on wider styles?•   Start "desktop," layer on narrower styles?•   Start s...
Startingin themiddle           49
Wide-screen media query/*all the other styles up here*/@media screen and (min-width: 1200px) {    /*styles for larger scre...
Add third column@media screen and (min-width: 1200px) {    #nav-main {        position: fixed;        top: 136px;        w...
Style nav as vertical menu@media screen and (min-width: 1200px) {    ...    #nav-main li {        float: none;            ...
Wide-screen design                     53
Small-screen media query/*all the other styles up here*/@media screen and (max-width: 760px) {    /*styles for smaller scr...
Things to fixtoo few words per line,so make all one column   each too narrow, so stack instead and    put pic on left     ...
Narrow-screendesign          56
Mobile media query/*all the other styles up here*/@media screen and (max-width: 550px) {    /*styles for tiny screens in h...
Non-overlapping version@media screen and (min-width: 551px) and(max-width: 760px) {    /*styles for small screens in here*...
Changing to single column@media screen and (max-width: 550px) {    #content-main, #content-secondary,    #about, #credits ...
Changing feature images@media screen and (max-width: 550px) {    ...    .feature { padding-left: 70px; }    #feature-candy...
Mobiledesign         61
Viewport meta tagForces mobile devices to scale viewport toactual device width<meta name="viewport"   content="width=devic...
Fix iOS zoom problems<meta name="viewport"   content="width=device-width, initial-scale=1"><script src="ios-orientationcha...
Double-up inside the CSSAdd @viewport rule, upcoming standard,inside style sheet:@-moz-viewport{ width:device-width }@-ms-...
conditional comments      or   JavaScript  to deal with IE 8 and earlier                                  65
Conditional comments• Split styles into separate sheets and feed  applicable sheet to IE based on whether  its IE on deskt...
Conditional comment whendesktop styles are defaultFeed IE Mobile 7 media query sheet:<link rel="stylesheet" href="global.c...
Conditional comment whenmobile styles are defaultFeed older IE media query sheet, hide fromIE Mobile 7:<link rel="styleshe...
Pre-fab JavaScript for non-supporting browsers• Simply add one of these scripts:  • Respond: https://github.com/scottjehl/...
View it livehttp://stunningcss3.com/code/bakery/                                       70
Learn moreDownload slides and get links athttp://bit.ly/rwdlayoutZoe Mickley Gillenwater@zomigidesign@zomigi.comzomigi.com...
Upcoming SlideShare
Loading in...5
×

Building Responsive Layouts

18,409

Published on

The updated CSS Dev Conference version of my Building Responsive Layouts talk. Get links to lots of related resources at http://zomigi.com/blog/responsive-layouts-css-dev-conf.

Published in: Design
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
18,409
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
377
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Transcript of "Building Responsive Layouts"

  1. 1. Building Responsive Layouts by Zoe Mickley Gillenwater @zomigi zomigi.comDecember 5, 2012CSS Dev Conf
  2. 2. hellonice to meet you 2
  3. 3. I don’t use amobile phone
  4. 4. I have aprocess foreating these
  5. 5.  whyresponsive web design works 5
  6. 6.   what whyresponsive web design means 6
  7. 7.   ?what why howto do responsive web design 7
  8. 8. fluid/liquid layoutuses percentage widths to adapt to size of viewport 8
  9. 9. Look at this!This is so tough!Im in such peril way up here! 9
  10. 10. Oh, wait… 10
  11. 11. How dowe makethis fluid? 11
  12. 12. Start with fluid wrapper 12
  13. 13. Add opposing floats inside 13
  14. 14. 3 cols with poor source order 14
  15. 15. Nest 2-col layout in 2-col layout 15
  16. 16. Percentages are relative 16
  17. 17. Determining nested widths width of columnyou want to match ÷ width of parent column = width of nested column 17
  18. 18. Determining nested widths width of columnyou want to match ÷ width of parent column = width of nested column target ÷ context = result 18
  19. 19. Determining nested widths width of columnyou want to match ÷ width of parent column = width of nested column target ÷ context = result 20 ÷ 80 = .25 which means 25% 19
  20. 20. Thats more like it 20
  21. 21. What about fluid grids? 21
  22. 22. Width of this nested block? 22
  23. 23. Well thats not right… 23
  24. 24. To the laboratory! width of columnyou want to match ÷ width of parent column = width of nested column target ÷ context = result 25 ÷ 62.5 = .4 which means 40% 24
  25. 25. There we go 25
  26. 26.  ?widths spacingbetween and in fluid columns 26
  27. 27. Leave a gap via widths 27
  28. 28. Declaring fluid margin/padding• Adjust widths so everything adds to 100% • For IE 6/7, make it 99%: avoids problems due to rounding % to px• Nesting affects margin/padding values too • Use target÷context formula to match outer spacing with inner spacing 28
  29. 29. Using box-sizing• Makes px & em margin/padding on fluid layout easy• Standard box model • box-sizing: content-box • Padding & border added on to width/height• New box model • box-sizing: border-box • Padding & border subtracted from width/height 29
  30. 30. Fluid grid, fixed-width spacing.column { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; Subtracted} from width in border-box box model 30
  31. 31. Use border as faux margin.column { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; border-left: 10px solid rgba(0,0,0,0); -moz-background-clip: padding-box; -webkit-background-clip: padding-box; background-clip: padding-box;} Prevents background from displaying under border 31
  32. 32. Negate “margin” at start of row.column { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; border-left: 10px solid rgba(0,0,0,0); -moz-background-clip: padding-box; -webkit-background-clip: padding-box; background-clip: padding-box;}.row { margin-left: -10px; Removes gap to} left of first column 32
  33. 33. Fix box-sizing in IE 7 and 6• Feed different dimensions based on content-box-model, or• Use Christian Schaefers box-sizing polyfill https://github.com/Schepp/box-sizing-polyfill .column { box-sizing: border-box; *behavior: url(boxsizing.htc); } 33
  34. 34. I recommend gridpak.com 34
  35. 35.  ? fluid hybridone+ column flexible, one+ not 35
  36. 36. Hybrid layout options• Easy: sidebars first in HTML • Float sidebars, main content moves up between floats • But usually not option in responsive design• Tricky: main content first in HTML • Need to float it, but with what width? • One solution: negative margins 36
  37. 37. Fixed-widthsidebarstarting point 37
  38. 38. Add wrapperwith padding#content-wrapper { padding-right: 290px;} 38
  39. 39. Lay out maincontent div#content-main { float: left; width: 100%;} 39
  40. 40. Float sidebar#content-secondary { float: right; width: 250px;} 40
  41. 41. A positive right margin 150px 41
  42. 42. A negative right margin -150px 42
  43. 43. Pull sidebar into gap#content-secondary { float: right; width: 250px; margin-right: -290px; Matches} wrapper’s right padding, just negative 43
  44. 44. Success! 44
  45. 45. To make sidebar show in IE 6#content-wrapper { zoom: 1; Adds hasLayout}#content-main,#content-secondary { display: inline; Hell if I know,} it just works 45
  46. 46. 3-column hybrid layout• Nest one 2-column layout inside another• Components of each layout: 1. Wrapper with padding on one side 2. Fixed-width sidebar • Same width as padding (or smaller) • Floated same direction as padding • Negative margin matching padding on same side 3. Fluid column • Floated opposite direction • Width 100% 46
  47. 47.  ?fluid layout media queries feed different styles based on viewport size 47
  48. 48. Choosing default styles• Start "mobile," layer on wider styles?• Start "desktop," layer on narrower styles?• Start somewhere in between, layer on both?• Learn full pros/cons: www.zomigi.com/blog/essential-considerations- crafting-quality-media-queries 48
  49. 49. Startingin themiddle 49
  50. 50. Wide-screen media query/*all the other styles up here*/@media screen and (min-width: 1200px) { /*styles for larger screens in here*/} 50
  51. 51. Add third column@media screen and (min-width: 1200px) { #nav-main { position: fixed; top: 136px; width: 13%; margin: 0; } #content-main { width: 58%; margin-left: 18%; } #content-secondary { width: 20%; }} 51
  52. 52. Style nav as vertical menu@media screen and (min-width: 1200px) { ... #nav-main li { float: none; Stack links margin: 0; } #nav-main a { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; Less tab-like }} 52
  53. 53. Wide-screen design 53
  54. 54. Small-screen media query/*all the other styles up here*/@media screen and (max-width: 760px) { /*styles for smaller screens in here*/} 54
  55. 55. Things to fixtoo few words per line,so make all one column each too narrow, so stack instead and put pic on left 55
  56. 56. Narrow-screendesign 56
  57. 57. Mobile media query/*all the other styles up here*/@media screen and (max-width: 550px) { /*styles for tiny screens in here*/} 57
  58. 58. Non-overlapping version@media screen and (min-width: 551px) and(max-width: 760px) { /*styles for small screens in here*/}@media screen and (max-width: 550px) { /*styles for tiny screens in here*/} 58
  59. 59. Changing to single column@media screen and (max-width: 550px) { #content-main, #content-secondary, #about, #credits { float: none; width: 100%; }} 59
  60. 60. Changing feature images@media screen and (max-width: 550px) { ... .feature { padding-left: 70px; } #feature-candy { background-image: url(icon_candy_64.png); } #feature-pastry { background-image: url(icon_pastry_64.png); } #feature-dessert { background-image: url(icon_dessert_64.png); }} 60
  61. 61. Mobiledesign 61
  62. 62. Viewport meta tagForces mobile devices to scale viewport toactual device width<meta name="viewport" content="width=device-width"> 62
  63. 63. Fix iOS zoom problems<meta name="viewport" content="width=device-width, initial-scale=1"><script src="ios-orientationchange-fix.js">• Add initial-scale=1 to make page reflow when you switch to landscape• Add script to fix over-zoom bug that crops right side of page when you switch • See http://filamentgroup.com/lab/a_fix_for_ the_ios_orientationchange_zoom_bug/ 63
  64. 64. Double-up inside the CSSAdd @viewport rule, upcoming standard,inside style sheet:@-moz-viewport{ width:device-width }@-ms-viewport{ width:device-width }@-o-viewport{ width:device-width }@-webkit-viewport{ width:device-width }@viewport{ width:device-width } 64
  65. 65. conditional comments or JavaScript to deal with IE 8 and earlier 65
  66. 66. Conditional comments• Split styles into separate sheets and feed applicable sheet to IE based on whether its IE on desktop or mobile• Approach varies based on which set of styles are your default 66
  67. 67. Conditional comment whendesktop styles are defaultFeed IE Mobile 7 media query sheet:<link rel="stylesheet" href="global.css" media="all"><link rel="stylesheet" href="mobile.css" media="alland (max-width: 700px)"><!--[if IEMobile 7]><link rel="stylesheet" href="mobile.css" media="all"><![endif]-->Source: http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx 67
  68. 68. Conditional comment whenmobile styles are defaultFeed older IE media query sheet, hide fromIE Mobile 7:<link rel="stylesheet" href="global.css" media="all"><link rel="stylesheet" href="desktop.css" media="alland (min-width: 700px)"><!--[if (lt IE 9)&(!IEMobile 7)]><link rel="stylesheet" href="desktop.css" media="all"><![endif]-->Source: http://adactio.com/journal/4494/ 68
  69. 69. Pre-fab JavaScript for non-supporting browsers• Simply add one of these scripts: • Respond: https://github.com/scottjehl/Respond • css3-mediaqueries.js: http://code.google.com/p/css3-mediaqueries-js/• Avoid extra HTTP request for non-old-IE browsers using conditional comments: <!--[if (lt IE 9)&(!IEMobile 7)]> <script src="respond.min.js"></script> <![endif]--> 69
  70. 70. View it livehttp://stunningcss3.com/code/bakery/ 70
  71. 71. Learn moreDownload slides and get links athttp://bit.ly/rwdlayoutZoe Mickley Gillenwater@zomigidesign@zomigi.comzomigi.com | stunningcss3.com | flexiblewebbook.comPhoto credits:“023 Tape measure 006” by Steve James (http://www.flickr.com/photos/steeljam/3350481764/)“Phone Booths” by Kristin Nador (http://www.flickr.com/photos/kristinnador/7744274382/)“Reese’s Pieces” by Dave Brown (http://www.flickr.com/photos/taids/2143865543/)“Frank on the main wall” by Justin Johnson (http://www.flickr.com/photos/justinjohnsen/4512815628/) 71
  1. A particular slide catching your eye?

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

×