Download - Introduction to Responsive Web Design
![Page 1: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/1.jpg)
Introduction to
Responsive Web Design
Clarissa Peterson@clarissa
![Page 2: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/2.jpg)
a workshop for theDC Web WomenCode(Her) Series
August 14, 2012
![Page 3: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/3.jpg)
Responsive Web Design:
![Page 4: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/4.jpg)
Responsive Web Design:
A collection of techniques that allow your website to respond to the device that it is being viewed on.
![Page 5: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/5.jpg)
Responsive Web Design:
A collection of techniques that allow your website to respond to the device that it is being viewed on.
This allows all users to have an optimal experience without creating separate sites for different devices.
![Page 10: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/10.jpg)
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
![Page 11: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/11.jpg)
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
![Page 12: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/12.jpg)
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
![Page 13: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/13.jpg)
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
![Page 14: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/14.jpg)
HTML
![Page 15: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/15.jpg)
The first website. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
![Page 16: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/16.jpg)
<p>...</p>
<h1>...</h1>
<a href=””>...</a>
![Page 17: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/17.jpg)
<hp1>...</hp1>
(highlighting)
![Page 18: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/18.jpg)
<blink>...</blink>
![Page 19: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/19.jpg)
Control:
HTML tablesspacer gifs
![Page 20: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/20.jpg)
Cascading Style Sheets (CSS)
![Page 21: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/21.jpg)
HTML
CSS
Content
Presentation
![Page 22: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/22.jpg)
John Kannenberg via Creative Commons http://flic.kr/p/9E7tqh
![Page 23: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/23.jpg)
Brendan Gates via Creative Commons http://flic.kr/p/dvX1J
![Page 24: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/24.jpg)
Curtis Palmer via Creative Commons http://flic.kr/p/wyPiC
![Page 25: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/25.jpg)
Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
![Page 26: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/26.jpg)
Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
![Page 27: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/27.jpg)
Paulo Fierro via Creative Commons http://flic.kr/p/ae8Nnr
![Page 28: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/28.jpg)
http://www.alistapart.com/articles/responsive-web-design/
Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.”
- Ethan Marcotte
![Page 29: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/29.jpg)
Responsive Web Design, 2011 http://www.abookapart.com/products/responsive-web-design/
![Page 30: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/30.jpg)
Responsive Architecture
![Page 31: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/31.jpg)
Tristan Sterk via Creative Commons http://commons.wikimedia.org/wiki/File:ResponsiveEnvelope1.jpg
![Page 32: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/32.jpg)
Fallingwater © Clarissa Peterson
![Page 33: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/33.jpg)
Fallingwater © Clarissa Peterson
![Page 34: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/34.jpg)
Fallingwater © Clarissa Peterson
![Page 35: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/35.jpg)
A Few Example Sites
![Page 36: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/36.jpg)
Andersson-Wise Architectshttp://www.anderssonwise.com
People (mobile site)http://m.people.com
Grey Goosehttp://www.greygoose.com
![Page 37: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/37.jpg)
Smashing Magazinehttp://www.smashingmagazine.com
Tattlyhttp://tattly.com
AIDS.govhttp://aids.gov
![Page 38: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/38.jpg)
Two Approaches
![Page 39: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/39.jpg)
1. Start from scratch
2. Make an existing designmore responsive
![Page 40: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/40.jpg)
1. Start from scratch
2. Make an existing designmore responsive
![Page 41: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/41.jpg)
1. Start from scratch
2. Make an existing designmore responsive
![Page 42: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/42.jpg)
download files for hands-on exercise here: http://clarissapeterson.com/files/dcww/
open in your text editor: style.css
open in your browser: demo.html
![Page 43: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/43.jpg)
Example 1 in style.css like this
If you’re doing this at home, please note that each section of code is marked at the bottom of the slide with an example number that you can look for in your style.css file.
![Page 44: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/44.jpg)
Older Browsers:
You need to do some extra stuffto make all this work and we won’t
have time to get to it today.
(but make sure you learn it later)
![Page 46: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/46.jpg)
Demo site with streamlined code (so it’s easier to see what you’re doing)
![Page 47: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/47.jpg)
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
![Page 48: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/48.jpg)
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
![Page 49: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/49.jpg)
![Page 50: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/50.jpg)
Flexible Typesetting
![Page 51: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/51.jpg)
http://meyerweb.com/eric/tools/css/reset/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {! margin: 0;! padding: 0;! border: 0;! font-size: 100%;! font: inherit;! vertical-align: baseline;}
![Page 52: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/52.jpg)
http://meyerweb.com/eric/tools/css/reset/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {! margin: 0;! padding: 0;! border: 0;! font-size: 100%;! font: inherit;! vertical-align: baseline;}
![Page 53: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/53.jpg)
target ÷ context = result
![Page 54: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/54.jpg)
Example 1 in style.css
.nav li a:link { ! color: #2b737a; ! text-decoration:none; ! font-size: 22px;! font-weight:100; }
![Page 55: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/55.jpg)
target ÷ context = result
22px ÷ 16px = 1.375em
![Page 56: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/56.jpg)
Example 1 in style.css
.nav li a:link { ! color: #2b737a; ! text-decoration:none; ! font-size: 1.375em;! font-weight:100; }
![Page 57: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/57.jpg)
Example 1 in style.css
.nav li a:link { ! color: #2b737a; ! text-decoration:none; ! font-size: 1.375em; !! ! ! ! ! ! ! /* 22px / 16px */! font-weight:100; }
![Page 58: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/58.jpg)
Example 2 in style.css
h2 24px ÷ 16px = 1.5emh3 20px ÷ 16px = 1.25emp 14px ÷ 16px = .875em
![Page 59: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/59.jpg)
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
![Page 60: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/60.jpg)
target ÷ context = result
___px ÷ 1280px = __%
![Page 61: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/61.jpg)
Example 3 in style.css
<div class="site">! ...</div>
![Page 62: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/62.jpg)
![Page 63: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/63.jpg)
Example 3 in style.css
.site { ! width: 1280px;}
![Page 64: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/64.jpg)
Example 3 in style.css
.site { ! width: 100%; /* 1280px / 1280px */}
![Page 65: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/65.jpg)
Example 3 in style.css
<div id="heading">! ...</div>
![Page 66: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/66.jpg)
![Page 67: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/67.jpg)
Example 3 in style.css
#heading { ! background-color: #fff; ! width: 960px;! margin: 1.5em auto;! text-align:right;}
![Page 68: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/68.jpg)
Example 3 in style.css
#heading { ! background-color: #fff; ! width: 75%;! margin: 1.5em auto;! text-align:right;}
![Page 69: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/69.jpg)
Example 4 in style.css
<div id="promowrapper"><img src="promoimage.jpg" alt="Attend seminars, networking events, and more." />
</div>
![Page 70: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/70.jpg)
![Page 71: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/71.jpg)
Example 4 in style.css
#promowrapper {! margin: 0 auto;! width: 960px;}
![Page 72: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/72.jpg)
Example 4 in style.css
#promowrapper {! margin: 0 auto;! width: 75%;}
![Page 73: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/73.jpg)
Example 4 in style.css
<div id="content"> ...</div>
![Page 74: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/74.jpg)
![Page 75: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/75.jpg)
Example 4 in style.css
#content { ! background-color: #fff; ! width: 960px; ! margin: auto; }
![Page 76: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/76.jpg)
Example 4 in style.css
#content { ! background-color: #fff; ! width: 75%; ! margin: auto; }
![Page 77: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/77.jpg)
Example 4 in style.css
<div class="contentbox"> <h2>Who We Are</h2>
...
</div>
![Page 78: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/78.jpg)
![Page 79: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/79.jpg)
Example 4 in style.css
.contentbox { ! width: 300px;! float:left; ! padding: 2em 30px 2em 0; }
![Page 80: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/80.jpg)
Example 4 in style.css
.contentbox { ! width: 31.25%;! float:left; ! padding: 2em 30px 2em 0; }
![Page 81: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/81.jpg)
Example 4 in style.css
.contentbox { ! width: 31.25%;! float:left; ! padding: 2em 30px 2em 0; }
![Page 82: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/82.jpg)
Example 4 in style.css
.contentbox { ! width: 31.25%;! float:left; ! padding: 2em 3.125% 2em 0; }
![Page 83: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/83.jpg)
Example 5 in style.css
<div id="footercontent"> ...</div>
![Page 84: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/84.jpg)
![Page 85: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/85.jpg)
Example 5 in style.css
#footercontent { ! width: 960px; ! margin: auto; ! color: #fff; }
![Page 86: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/86.jpg)
Example 5 in style.css
#footercontent { ! width: 75%; ! margin: auto; ! color: #fff; }
![Page 87: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/87.jpg)
![Page 88: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/88.jpg)
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
![Page 89: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/89.jpg)
![Page 90: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/90.jpg)
Example 4 in style.css
<div id="promowrapper"><img src="promoimage.jpg" alt="..." /></div>
#promowrapper {! margin: 0 auto;! width: 75%;}
![Page 91: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/91.jpg)
Example 4 in style.css
#promo img { ! margin: 2em 0;}
![Page 92: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/92.jpg)
Example 4 in style.css
#promo img { ! margin: 2em 0;! max-width: 100%;}
![Page 93: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/93.jpg)
![Page 94: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/94.jpg)
embed
object
video
![Page 95: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/95.jpg)
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
![Page 96: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/96.jpg)
<link rel="stylesheet" href="style.css" media=”print” />
![Page 97: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/97.jpg)
h1 { color: #f00; }p { color: #333; }
@media print {! h1 { color: #0f0; }! p { color: #099; }}
![Page 98: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/98.jpg)
h1 { color: #f00; }p { color: #333; }
@media print {! h1 { color: #0f0; }! p { color: #099; }}
![Page 99: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/99.jpg)
h1 { color: #f00; }p { color: #333; }
@media print {! h1 { color: #0f0; }! p { color: #099; }}
![Page 100: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/100.jpg)
h1 { color: #f00; }p { color: #333; }
@media print {! h1 { color: #0f0; }! p { color: #099; }}
![Page 101: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/101.jpg)
h1 { color: #f00; }p { color: #333; }
@media print {! h1 { color: #0f0; }! p { color: #099; }}
![Page 102: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/102.jpg)
h1 { color: #f00; }p { color: #333; }
@media print {! h1 { color: #0f0; }! p { color: #099; }}
![Page 103: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/103.jpg)
@media screen {! ...}
![Page 104: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/104.jpg)
@media screen and (min-width: 1024px) {! ...}
![Page 105: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/105.jpg)
@media screen and (max-width: 1024px) {! ...}
![Page 106: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/106.jpg)
@media screen and (min-width: 768px) and (max-width: 1024px) {! ...}
![Page 107: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/107.jpg)
min-device-width: 1024pxmax-device-width: 1024px
orientation: landscapeorientation: portrait
device-aspect-ratio: 16/9
min-color-index: 256
min-resolution: 300dpi
![Page 108: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/108.jpg)
![Page 109: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/109.jpg)
Example 6 in style.css
@media screen and (max-width: 1100px) { ! #navbox { ! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}
![Page 110: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/110.jpg)
Example 6 in style.css
@media screen and (max-width: 1100px) { ! #navbox { ! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}
![Page 111: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/111.jpg)
![Page 112: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/112.jpg)
Example 6 in style.css
@media screen and (max-width: 1100px) { ! #navbox { ! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}
![Page 113: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/113.jpg)
![Page 114: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/114.jpg)
Example 6 in style.css
@media screen and (max-width: 1100px) { ! #navbox { ! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}
![Page 115: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/115.jpg)
![Page 116: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/116.jpg)
![Page 117: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/117.jpg)
![Page 118: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/118.jpg)
Example 7 on style.css
@media screen and (max-width: 500px) {
! ...
}
![Page 119: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/119.jpg)
Example 7 on style.css
@media screen and (max-width: 500px) { ! .nav li { ! ! display: block; ! ! margin-left: 0em; ! ! padding-bottom: 5px;! }}
![Page 120: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/120.jpg)
![Page 121: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/121.jpg)
Example 7 on style.css
@media screen and (max-width: 500px) { ! .nav li { ! ! display: block; ! ! margin-left: 0em; ! ! padding-bottom: 5px;! }}
![Page 122: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/122.jpg)
![Page 123: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/123.jpg)
Example 7 on style.css
@media screen and (max-width: 500px) {
! ...
! .logo { ! ! float: none;! ! text-align: center;! }}
![Page 124: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/124.jpg)
![Page 125: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/125.jpg)
![Page 126: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/126.jpg)
Example 7 on style.css
@media screen and (max-width: 500px) {
! ...
! .contentbox { ! ! width: 100%; ! ! float: none; ! ! padding: 1.5em 0 0 0; ! }}
![Page 127: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/127.jpg)
![Page 128: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/128.jpg)
Example 7 on style.css
@media screen and (max-width: 500px) {
! ...
! .contentbox { ! ! width: 100%; ! ! float: none; ! ! padding: 1.5em 0 0 0; ! }}
![Page 129: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/129.jpg)
![Page 130: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/130.jpg)
Some Other Things You Should Know(very briefly)
![Page 131: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/131.jpg)
Breakpoints
![Page 132: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/132.jpg)
Standard Breakpoints
Why to Use Them
Why Not to Use Them
![Page 133: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/133.jpg)
Commonly-Used Breakpoints
Device Type Width
Mobile phones (portrait) 320px
Mobile phones (landscape) 480px
7” tablets (portrait) 600px
10” tablets (portrait) 768px
10” tablets (landscape), Monitors 1024px
Wider monitors 1280px
![Page 134: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/134.jpg)
What’s a Device Lab?
![Page 135: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/135.jpg)
Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
![Page 137: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/137.jpg)
Mobile First
![Page 138: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/138.jpg)
If you’re thinking about mobile:
responsive designisn’t the only thing
you need to think about.
![Page 139: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/139.jpg)
A mobile app should notbe the default choice.
Only do it if it’s the best choice.
![Page 140: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/140.jpg)
Responsive Workflow
![Page 141: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/141.jpg)
Photoshop is for photos
InDesign is for design & typography
![Page 142: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/142.jpg)
We are free of the canvas
![Page 143: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/143.jpg)
Content First
![Page 144: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/144.jpg)
Q & A
![Page 145: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/145.jpg)
Resources
![Page 146: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/146.jpg)
Books
Ethan MarcotteResponsive Web Design (2011)http://www.abookapart.com/products/responsive-web-design/
![Page 147: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/147.jpg)
ArticlesResponsive Web Design - Ethan Marcotte (May 2010)http://www.alistapart.com/articles/responsive-web-design/
How to Approach a Responsive Design (The Boston Globe) - Tito Bottitta (Jan. 2012)http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
50 Fantastic Tools for Responsive Web Design - Denise Jacobs, Peter Gasston (Apr. 2012)http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design
Design Process In The Responsive Age - Drew Clemens (May 2012)http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
Making of: People Magazine's Responsive Mobile Website (July 2012)http://globalmoxie.com/blog/making-of-people-mobile.shtml
The Top Responsive Web Design Problems and How to Avoid Them - James Young (Aug. 2012)http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them
![Page 148: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/148.jpg)
Websites@RWDlinks about responsive design (Ethan Marcotte)https://twitter.com/RWD
Future Friendlymaking things that are future-friendlyhttp://futurefriend.ly/
Brad Frostblog that covers responsive designhttp://bradfrostweb.com/blog/
Mediaqueri.esinspirational websites using media queries and responsive web designhttp://mediaqueri.es/
Responsive Design Bookmarkleta handy tool for responsive design testinghttp://responsive.victorcoulon.fr/
![Page 149: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/149.jpg)
Other Things You Asked About
Resources mentioned during Q&A. Thanks for all the great questions!
Kristina HalvorsonContent Strategy for the Web, Second Edition (2012)http://contentstrategy.com/
A List Aparthttp://www.alistapart.com/
PX to EM Conversion Made Simplehttp://pxtoem.com/
![Page 150: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/150.jpg)
Not RWD
DC Web WomenA professional organization of more than 3000 members located in the Washington, DC, area. Members are professional women, students and enthusiasts who specialize in web-related fields.http://www.dcwebwomen.org/
We Are All AwesomeBe a role model: why there should be more female speakers at tech conferences. Resources on creating presentations, getting ideas, writing proposals, and finding conferences with open CFPs.http://weareallaweso.me/
![Page 151: Introduction to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022051314/54c7495d4a795993598b4571/html5/thumbnails/151.jpg)
Mount Rainier National Park. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)