Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28,...
Transcript of Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28,...
![Page 1: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/1.jpg)
Building Responsive
Layouts
August 28, 2012 Responsive Web Design Summit
by Zoe Mickley Gillenwater @zomigi
![Page 2: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/2.jpg)
2
What I do
Books Stunning CSS3: A Project-based Guide to the Latest in CSS www.stunningcss3.com Flexible Web Design: Creating Liquid and Elastic Layouts with CSS www.flexiblewebbook.com
Web Accessibility specialist at AT&T Visual designer CSS developer and consultant
![Page 3: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/3.jpg)
3
why
responsive web design works
![Page 4: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/4.jpg)
4
why
responsive web design means
what
![Page 5: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/5.jpg)
5
why
to do responsive web design
what
how ?
![Page 6: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/6.jpg)
6
uses percentage widths to adapt to size of viewport
fluid/liquid layout
![Page 7: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/7.jpg)
7
one+ column flexible, one+ not
hybrid layout
![Page 8: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/8.jpg)
8
fluid layout and flexible images adapted with media queries
responsive web design
www.alistapart.com/articles/responsive-web-design/
![Page 9: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/9.jpg)
9
multiple fixed-width layouts swapped with media queries
adaptive layouts
www.netmagazine.com/tutorials/adaptive-layouts-media-queries
![Page 10: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/10.jpg)
10
Look at this! This is so tough! I'm in such peril way up here!
![Page 11: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/11.jpg)
11
Oh, wait…
![Page 12: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/12.jpg)
12
How do we make this fluid?
![Page 13: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/13.jpg)
13
Start with fluid wrapper
![Page 14: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/14.jpg)
14
Add opposing floats inside
![Page 15: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/15.jpg)
15
3-column layout: nest 2-column layout inside 2-column layout
![Page 16: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/16.jpg)
16
Percentages are relative
![Page 17: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/17.jpg)
17
Determining nested widths
width of column you want to match ÷ width of
parent column = width of nested column
![Page 18: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/18.jpg)
18
Determining nested widths
width of column you want to match ÷ width of
parent column = width of nested column
target ÷ context = result
![Page 19: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/19.jpg)
19
Determining nested widths
width of column you want to match ÷ width of
parent column = width of nested column
target ÷ context = result
20 ÷ 80 = .25
25% which means
![Page 20: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/20.jpg)
20
That's more like it
![Page 21: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/21.jpg)
21
What about fluid grids?
![Page 22: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/22.jpg)
22
Width of this nested block?
![Page 23: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/23.jpg)
23
Well that's not right…
![Page 24: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/24.jpg)
24
To the laboratory!
width of column you want to match ÷ width of
parent column = width of nested column
target ÷ context = result
25 ÷ 62.5 = .4
40% which means
![Page 25: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/25.jpg)
25
There we go
![Page 26: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/26.jpg)
26
widths
between and in fluid columns
spacing ?
![Page 27: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/27.jpg)
27
Leave a gap via widths
![Page 28: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/28.jpg)
28
Declaring fluid margin/padding
• Adjust widths so everything adds up to just under 100% • Avoids problems due to rounding % to px
• Nesting affects margin/padding values too • Use target/context formula to match outer
spacing with inner spacing
![Page 29: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/29.jpg)
29
Using box-sizing
• Makes fixed-width 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
![Page 30: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/30.jpg)
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; }
![Page 31: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/31.jpg)
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; } .row { margin-left: -10px; }
![Page 32: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/32.jpg)
32
Fix box-sizing in IE 7 and 6
• Feed different dimensions based on content-box-model, or
• Use Christian Schaefer's box-sizing polyfill https://github.com/Schepp/box-sizing-polyfill .column { box-sizing: border-box; *behavior: url(boxsizing.htc); }
![Page 33: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/33.jpg)
33
I recommend gridpak.com
![Page 34: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/34.jpg)
34
fluid
main column fluid, sidebar fixed
hybrid ?
![Page 35: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/35.jpg)
35
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
![Page 36: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/36.jpg)
36
Fixed-width sidebar starting point
![Page 37: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/37.jpg)
37
Add wrapper with padding #content-wrapper {
padding-right: 290px;
}
![Page 38: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/38.jpg)
38
Lay out main content div #content-main { float: left; width: 100%; }
![Page 39: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/39.jpg)
39
Float sidebar #content-secondary { float: right; width: 250px; }
![Page 40: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/40.jpg)
40
A positive right margin
150px
![Page 41: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/41.jpg)
41
A negative right margin
-150px
![Page 42: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/42.jpg)
42
Add negative right margin matching wrapper's right padding #content-secondary { float: right; width: 250px; margin-right: -290px; }
![Page 43: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/43.jpg)
43
Success!
![Page 44: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/44.jpg)
44
To make sidebar show in IE 6 #content-wrapper { zoom: 1; } #content-main, #content-secondary { display: inline; }
![Page 45: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/45.jpg)
45
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%
![Page 46: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/46.jpg)
46
fluid layout
feed different styles based on viewport size
media queries ?
![Page 47: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/47.jpg)
47
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
![Page 48: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/48.jpg)
48
Starting in the middle
![Page 49: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/49.jpg)
49
Wide-screen media query /*all the other styles up here*/ @media screen and (min-width: 1200px) { /*styles for larger screens in here*/ }
![Page 50: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/50.jpg)
50
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%; }
}
![Page 51: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/51.jpg)
51
Style nav as vertical menu @media screen and (min-width: 1200px) {
...
#nav-main li {
float: none;
margin: 0;
}
#nav-main a {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
}
![Page 52: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/52.jpg)
52
Wide-screen design
![Page 53: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/53.jpg)
53
Small-screen media query /*all the other styles up here*/ @media screen and (max-width: 760px) { /*styles for smaller screens in here*/ }
![Page 54: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/54.jpg)
54
Things to fix
too few words per line, so make all one column
each too narrow, so stack instead and
put pic on left
![Page 55: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/55.jpg)
55
Narrow-screen design
![Page 56: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/56.jpg)
56
Mobile media query /*all the other styles up here*/ @media screen and (max-width: 550px) { /*styles for tiny screens in here*/ }
![Page 57: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/57.jpg)
57
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*/ }
![Page 58: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/58.jpg)
58
Changing to single column @media screen and (max-width: 550px) { #content-main, #content-secondary, #about, #credits { float: none; width: 100%; } }
![Page 59: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/59.jpg)
59
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);
}
}
![Page 60: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/60.jpg)
60
Mobile design
![Page 61: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/61.jpg)
61
Viewport meta tag
Forces mobile devices to scale viewport to actual device width <meta name="viewport" content="width=device-width">
![Page 62: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/62.jpg)
62
Zoom problem in iOS
• The device-width on iOS devices always matches portrait width
• This means design doesn't reflow when you switch to landscape, but instead just zooms
![Page 63: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/63.jpg)
63
Fixing (and adding) zoom issues
• Option 1: add maximum-scale=1 • But disables user scaling
<meta name="viewport" content="width=device-width, maximum-scale=1">
• Option 2: add initial-scale=1 • Allows user scaling • But triggers over-zoom/crop bug when
changing from portrait to landscape <meta name="viewport"
content="width=device-width, initial-scale=1">
![Page 64: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/64.jpg)
64
The best way to fix zoom issues
• Option 3: add initial-scale=1 plus script to fix over-zoom bug • See http://filamentgroup.com/lab/a_fix_for_
the_ios_orientationchange_zoom_bug/
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="ios-orientationchange-fix.js">
...
</head>
![Page 65: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/65.jpg)
65
conditional comments or JavaScript
to deal with IE 8 and earlier
![Page 66: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/66.jpg)
66
Conditional comments
• Split styles into separate sheets and feed applicable sheet to IE based on whether it's IE on desktop or mobile
• Approach varies based on which set of styles are your default
![Page 67: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/67.jpg)
67
Conditional comment when desktop styles are default Feed IE Mobile 7 media query sheet:
<link rel="stylesheet" href="global.css" media="all">
<link rel="stylesheet" href="mobile.css" media="all and (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
![Page 68: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/68.jpg)
68
Conditional comment when mobile styles are default Feed older IE media query sheet, hide from IE Mobile 7:
<link rel="stylesheet" href="global.css" media="all">
<link rel="stylesheet" href="desktop.css" media="all and (min-width: 700px)">
<!--[if (lt IE 9)&(!IEMobile 7)]>
<link rel="stylesheet" href="desktop.css" media="all">
<![endif]-->
Source: http://adactio.com/journal/4494/
![Page 69: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/69.jpg)
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]-->
![Page 70: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/70.jpg)
70
View it live http://stunningcss3.com/code/bakery/
![Page 71: Building Responsive Layouts - Zoe Mickley Gillenwater · Building Responsive Layouts . August 28, 2012 Responsive Web Design Summit . by . Zoe Mickley Gillenwater . @zomigi](https://reader034.fdocuments.net/reader034/viewer/2022042322/5f0c9cb17e708231d43644c1/html5/thumbnails/71.jpg)
71
Learn more
Download slides and get links at http://zomigi.com/blog/responsive-layouts-presentation
Zoe Mickley Gillenwater @zomigi [email protected] zomigi.com | stunningcss3.com | flexiblewebbook.com
Title photo by Steve James (http://www.flickr.com/photos/steeljam/3350481764/) Rock climbing photo by Justin Johnson (http://www.flickr.com/photos/justinjohnsen/4512815628/)