Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 ....
Transcript of Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 ....
![Page 1: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/1.jpg)
Building Responsive
Layouts
December 5, 2012 CSS Dev Conf
by Zoe Mickley Gillenwater @zomigi
zomigi.com
![Page 2: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/2.jpg)
2
hello
nice to meet you
![Page 3: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/3.jpg)
I don’t use a mobile phone
![Page 4: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/4.jpg)
I have a process for eating these
![Page 5: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/5.jpg)
5
why
responsive web design works
![Page 6: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/6.jpg)
6
why
responsive web design means
what
![Page 7: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/7.jpg)
7
why
to do responsive web design
what
how ?
![Page 8: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/8.jpg)
8
uses percentage widths to adapt to size of viewport
fluid/liquid layout
![Page 9: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/9.jpg)
9
Look at this! This is so tough! I'm in such peril way up here!
![Page 10: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/10.jpg)
10
Oh, wait…
![Page 11: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/11.jpg)
11
How do we make this fluid?
![Page 12: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/12.jpg)
12
Start with fluid wrapper
![Page 13: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/13.jpg)
13
Add opposing floats inside
![Page 14: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/14.jpg)
14
3 cols with poor source order
![Page 15: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/15.jpg)
15
Nest 2-col layout in 2-col layout
![Page 16: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/16.jpg)
16
Percentages are relative
![Page 17: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/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...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/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...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/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...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/20.jpg)
20
That's more like it
![Page 21: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/21.jpg)
21
What about fluid grids?
![Page 22: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/22.jpg)
22
Width of this nested block?
![Page 23: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/23.jpg)
23
Well that's not right…
![Page 24: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/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...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/25.jpg)
25
There we go
![Page 26: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/26.jpg)
26
widths
between and in fluid columns
spacing ?
![Page 27: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/27.jpg)
27
Leave a gap via widths
![Page 28: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/28.jpg)
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
![Page 29: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/29.jpg)
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
![Page 30: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/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;
}
Subtracted from width in border-box box model
![Page 31: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/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;
}
Prevents background from displaying under border
![Page 32: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/32.jpg)
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
![Page 33: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/33.jpg)
33
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 34: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/34.jpg)
34
I recommend gridpak.com
![Page 35: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/35.jpg)
35
fluid
one+ column flexible, one+ not
hybrid ?
![Page 36: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/36.jpg)
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
![Page 37: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/37.jpg)
37
Fixed-width sidebar starting point
![Page 38: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/38.jpg)
38
Add wrapper with padding #content-wrapper {
padding-right: 290px;
}
![Page 39: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/39.jpg)
39
Lay out main content div #content-main {
float: left;
width: 100%;
}
![Page 40: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/40.jpg)
40
Float sidebar #content-secondary {
float: right;
width: 250px;
}
![Page 41: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/41.jpg)
41
A positive right margin
150px
![Page 42: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/42.jpg)
42
A negative right margin
-150px
![Page 43: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/43.jpg)
43
Pull sidebar into gap #content-secondary {
float: right;
width: 250px;
margin-right: -290px;
}
Matches wrapper’s right padding, just negative
![Page 44: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/44.jpg)
44
Success!
![Page 45: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/45.jpg)
45
To make sidebar show in IE 6 #content-wrapper {
zoom: 1;
}
#content-main,
#content-secondary {
display: inline;
}
Adds hasLayout
Hell if I know, it just works
![Page 46: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/46.jpg)
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%
![Page 47: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/47.jpg)
47
fluid layout
feed different styles based on viewport size
media queries ?
![Page 48: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/48.jpg)
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
![Page 49: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/49.jpg)
49
Starting in the middle
![Page 50: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/50.jpg)
50
Wide-screen media query /*all the other styles up here*/
@media screen and (min-width: 1200px) {
/*styles for larger screens in here*/
}
![Page 51: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/51.jpg)
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%; }
}
![Page 52: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/52.jpg)
52
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;
}
}
Stack links
Less tab-like
![Page 53: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/53.jpg)
53
Wide-screen design
![Page 54: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/54.jpg)
54
Small-screen media query /*all the other styles up here*/
@media screen and (max-width: 760px) {
/*styles for smaller screens in here*/
}
![Page 55: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/55.jpg)
55
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 56: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/56.jpg)
56
Narrow-screen design
![Page 57: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/57.jpg)
57
Mobile media query /*all the other styles up here*/
@media screen and (max-width: 550px) {
/*styles for tiny screens in here*/
}
![Page 58: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/58.jpg)
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*/
}
![Page 59: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/59.jpg)
59
Changing to single column @media screen and (max-width: 550px) {
#content-main, #content-secondary,
#about, #credits {
float: none;
width: 100%;
}
}
![Page 60: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/60.jpg)
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);
}
}
![Page 61: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/61.jpg)
61
Mobile design
![Page 62: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/62.jpg)
62
Viewport meta tag
Forces mobile devices to scale viewport to actual device width <meta name="viewport"
content="width=device-width">
![Page 63: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/63.jpg)
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/
![Page 64: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/64.jpg)
64
Double-up inside the CSS
Add @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 }
![Page 65: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/65.jpg)
65
conditional comments or JavaScript
to deal with IE 8 and earlier
![Page 66: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/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...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/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...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/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...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/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...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/70.jpg)
70
View it live http://stunningcss3.com/code/bakery/
![Page 71: Building Responsive Layouts...process for eating these . 5 . why responsive web design works. 6 . why responsive web design means. what 7 . why to do responsive web design. what how?](https://reader036.fdocuments.in/reader036/viewer/2022081601/612886f0fe6cf4173d3bb81a/html5/thumbnails/71.jpg)
71
Learn more
Download slides and get links at http://bit.ly/rwdlayout
Zoe Mickley Gillenwater @zomigi [email protected] zomigi.com | stunningcss3.com | flexiblewebbook.com Photo 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/)