Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introduction toResponsive Web Design Clarissa Peterson @clarissa
a workshop for the DC Web Women Code(Her) Series August 14, 2012
Responsive Web Design:
Responsive Web Design:A collection of techniques that allow yourwebsite to respond to the device that it isbeing viewed on.
Responsive Web Design:A collection of techniques that allow yourwebsite to respond to the device that it isbeing viewed on...
http://www.bostonglobe.com/
http://www.bostonglobe.com/
http://www.bostonglobe.com/
http://www.bostonglobe.com/
1. A flexible, grid-based layout2. Flexible images and media3. Media queries
1. A flexible, grid-based layout2. Flexible images and media3. Media queries
1. A flexible, grid-based layout2. Flexible images and media3. Media queries
1. A flexible, grid-based layout2. Flexible images and media3. Media queries
HTML
The first website. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
<p>...</p> <h1>...</h1><a href=””>...</a>
<hp1>...</hp1> (highlighting)
<blink>...</blink>
Control:HTML tables spacer gifs
Cascading Style Sheets (CSS)
HTML Content CSS Presentation
John Kannenberg via Creative Commons http://flic.kr/p/9E7tqh
Brendan Gates via Creative Commons http://flic.kr/p/dvX1J
Curtis Palmer via Creative Commons http://flic.kr/p/wyPiC
Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
Paulo Fierro via Creative Commons http://flic.kr/p/ae8Nnr
Responsive web design offers us a wayforward, finally allowing us to “design forthe ebb and flow of things.” ...
Responsive Web Design, 2011 http://www.abookapart.com/products/responsive-web-design/
Responsive Architecture
Tristan Sterk via Creative Commons http://commons.wikimedia.org/wiki/File:ResponsiveEnvelope1.jpg
Fallingwater © Clarissa Peterson
Fallingwater © Clarissa Peterson
Fallingwater © Clarissa Peterson
A Few Example Sites
Andersson-Wise Architectshttp://www.anderssonwise.com People (mobile site) http://m.people.com Grey Goose ht...
Smashing Magazinehttp://www.smashingmagazine.com Tattly http://tattly.com AIDS.gov ...
Two Approaches
1. Start from scratch2. Make an existing design more responsive
1. Start from scratch2. Make an existing design more responsive
1. Start from scratch2. Make an existing design more responsive
download files for hands-on exercise here: http://clarissapeterson.com/files/dcww/open in your text editor: style.cssopen in...
If you’re doing this at home, please note that eachsection of code is marked at the bottom of the slide withan example num...
Older Browsers: You need to do some extra stuffto make all this work and we won’t have time to get to it today. (b...
Live site http://www.dcwebwomen.org
Demo site with streamlined code (so it’s easier to see what you’re doing)
1. A flexible, grid-based layout2. Flexible images and media3. Media queries
1. A flexible, grid-based layout2. Flexible images and media3. Media queries
Flexible Typesetting
html, body, div, span, applet, object, iframe, h1, h2, h3, h4,h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,c...
html, body, div, span, applet, object, iframe, h1, h2, h3, h4,h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,c...
target ÷ context = result
.nav li a:link {! color: #2b737a;! text-decoration:none;! font-size: 22px;! font-weight:100;}Example 1 in style.css
target ÷ context = result22px ÷ 16px = 1.375em
.nav li a:link {! color: #2b737a;! text-decoration:none;! font-size: 1.375em;! font-weight:100;}Example 1 in style.css
.nav li a:link {! color: #2b737a;! text-decoration:none;! font-size: 1.375em; !! ! ! ! ! ! ! /* 22px / 16px */! font-weigh...
h2 24px ÷ 16px = 1.5emh3 20px ÷ 16px = 1.25emp 14px ÷ 16px = .875emExample 2 in style.css
1. A flexible, grid-based layout2. Flexible images and media3. Media queries
target ÷ context = result___px ÷ 1280px = __%
<div class="site">! ...</div>Example 3 in style.css
.site {! width: 1280px;}Example 3 in style.css
.site {! width: 100%; /* 1280px / 1280px */}Example 3 in style.css
<div id="heading">! ...</div>Example 3 in style.css
#heading {! background-color: #fff;! width: 960px;! margin: 1.5em auto;! text-align:right;}Example 3 in style.css
#heading {! background-color: #fff;! width: 75%;! margin: 1.5em auto;! text-align:right;}Example 3 in style.css
<div id="promowrapper"> <img src="promoimage.jpg" alt="Attend seminars, networking events, and more." /></div>Example 4...
#promowrapper {! margin: 0 auto;! width: 960px;}Example 4 in style.css
#promowrapper {! margin: 0 auto;! width: 75%;}Example 4 in style.css
<div id="content"> ...</div>Example 4 in style.css
#content {! background-color: #fff;! width: 960px;! margin: auto;}Example 4 in style.css
#content {! background-color: #fff;! width: 75%;! margin: auto;}Example 4 in style.css
<div class="contentbox"> <h2>Who We Are</h2> ...</div>Example 4 in style.css
.contentbox {! width: 300px;! float:left;! padding: 2em 30px 2em 0;}Example 4 in style.css
.contentbox {! width: 31.25%;! float:left;! padding: 2em 30px 2em 0;}Example 4 in style.css
.contentbox {! width: 31.25%;! float:left;! padding: 2em 30px 2em 0;}Example 4 in style.css
.contentbox {! width: 31.25%;! float:left;! padding: 2em 3.125% 2em 0;}Example 4 in style.css
<div id="footercontent"> ...</div>Example 5 in style.css
#footercontent {! width: 960px;! margin: auto;! color: #fff;}Example 5 in style.css
#footercontent {! width: 75%;! margin: auto;! color: #fff;}Example 5 in style.css
1. A flexible, grid-based layout2. Flexible images and media3. Media queries
<div id="promowrapper"><img src="promoimage.jpg" alt="..." /></div>#promowrapper {! margin: 0 auto;! width: 75%;}Example 4...
#promo img {! margin: 2em 0;}Example 4 in style.css
#promo img {! margin: 2em 0;! max-width: 100%;}Example 4 in style.css
embedobjectvideo
1. A flexible, grid-based layout2. Flexible images and media3. Media queries
<link rel="stylesheet" href="style.css"media=”print” />
h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
@media screen {! ...}
@media screen and (min-width: 1024px) {! ...}
@media screen and (max-width: 1024px) {! ...}
@media screen and (min-width: 768px) and(max-width: 1024px) {! ...}
min-device-width: 1024pxmax-device-width: 1024px orientation: landscape orientation: portraitdevice-aspect-ratio: 16/9 mi...
@media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}Example 6 ...
@media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}Example 6 ...
@media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}Example 6 ...
@media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}Example 6 ...
@media screen and (max-width: 500px) {! ...}Example 7 on style.css
@media screen and (max-width: 500px) {! .nav li {! ! display: block;! ! margin-left: 0em;! ! padding-bottom: 5px;! }}Examp...
@media screen and (max-width: 500px) {! .nav li {! ! display: block;! ! margin-left: 0em;! ! padding-bottom: 5px;! }}Examp...
@media screen and (max-width: 500px) {! ...! .logo {! ! float: none;! ! text-align: center;! }}Example 7 on style....
@media screen and (max-width: 500px) {! ...! .contentbox {! ! width: 100%;! ! float: none;! ! padding: 1.5em 0 0 0...
@media screen and (max-width: 500px) {! ...! .contentbox {! ! width: 100%;! ! float: none;! ! padding: 1.5em 0 0 0...
Some Other Things You Should Know (very briefly)
Breakpoints
Standard Breakpoints Why to Use ThemWhy Not to Use Them
Commonly-Used Breakpoints Device Type WidthMobile phones (portrait) 320pxMobile phones (...
What’s a Device Lab?
Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
Device Lab DChttp://www.devicelabdc.com/
Mobile First
If you’re thinking about mobile: responsive design isn’t the only thing you need to think about.
A mobile app should not be the default choice.Only do it if it’s the best choice.
Responsive Workflow
Photoshop is for photosInDesign is for design & typography
We are free of the canvas
Content First
Q&A
Resources
BooksEthan MarcotteResponsive Web Design (2011)http://www.abookapart.com/products/responsive-web-design/
ArticlesResponsive Web Design - Ethan Marcotte (May 2010)http://www.alistapart.com/articles/responsive-web-design/How to A...
Websites@RWDlinks about responsive design (Ethan Marcotte)https://twitter.com/RWDFuture Friendlymaking things that are fut...
Other Things You Asked AboutResources mentioned during Q&A. Thanks for all the great questions!Kristina HalvorsonContent S...
Not RWDDC Web WomenA professional organization of more than 3000 members located in the Washington, DC, area.Members are p...
Mount Rainier National Park. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
Thank You Clarissa Petersonclarissapeterson.comcp@clarissapeterson.com @clarissa
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Upcoming SlideShare
Loading in …5
×

Introduction to Responsive Web Design

23,160 views

Published on

A hands-on workshop for DC Web Women on August 14, 2012.

Read more about the workshop and a summary of what we talked about on my blog: http://www.clarissapeterson.com/2012/08/responsive-web-design/

Published in: Design, Technology, Education
License: CC Attribution-NonCommercial License
no profile picture user
  • Hello there! Get Your Professional Job-Winning Resume Here! http://bit.ly/topresum
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Why still confused with the best web design team? Take a look at https://goo.gl/gC2Agw
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Really great responsive website design PPT 2016. http://www.slideshare.net/bestwebsitesreviews/web-ad-banner-design-bestwebsitesreviewscom
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Creator Shadow is the most professional and affordable web development & design company. World's best Intuitive web site interfaces and user-friendliness are the hallmark of our company.Responsive Web Design
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • too great always http://giaunhanh.mobi
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
Show More

Introduction to Responsive Web Design

  1. Introduction toResponsive Web Design Clarissa Peterson @clarissa
  2. a workshop for the DC Web Women Code(Her) Series August 14, 2012
  3. Responsive Web Design:
  4. Responsive Web Design:A collection of techniques that allow yourwebsite to respond to the device that it isbeing viewed on.
  5. Responsive Web Design:A collection of techniques that allow yourwebsite to respond to the device that it isbeing viewed on.This allows all users to have an optimal experiencewithout creating separate sites for different devices.
  6. http://www.bostonglobe.com/
  7. http://www.bostonglobe.com/
  8. http://www.bostonglobe.com/
  9. http://www.bostonglobe.com/
  10. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
  11. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
  12. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
  13. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
  14. HTML
  15. The first website. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  16. <p>...</p> <h1>...</h1><a href=””>...</a>
  17. <hp1>...</hp1> (highlighting)
  18. <blink>...</blink>
  19. Control:HTML tables spacer gifs
  20. Cascading Style Sheets (CSS)
  21. HTML Content CSS Presentation
  22. John Kannenberg via Creative Commons http://flic.kr/p/9E7tqh
  23. Brendan Gates via Creative Commons http://flic.kr/p/dvX1J
  24. Curtis Palmer via Creative Commons http://flic.kr/p/wyPiC
  25. Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
  26. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
  27. Paulo Fierro via Creative Commons http://flic.kr/p/ae8Nnr
  28. Responsive web design offers us a wayforward, finally allowing us to “design forthe ebb and flow of things.” - Ethan Marcottehttp://www.alistapart.com/articles/responsive-web-design/
  29. Responsive Web Design, 2011 http://www.abookapart.com/products/responsive-web-design/
  30. Responsive Architecture
  31. Tristan Sterk via Creative Commons http://commons.wikimedia.org/wiki/File:ResponsiveEnvelope1.jpg
  32. Fallingwater © Clarissa Peterson
  33. Fallingwater © Clarissa Peterson
  34. Fallingwater © Clarissa Peterson
  35. A Few Example Sites
  36. Andersson-Wise Architectshttp://www.anderssonwise.com People (mobile site) http://m.people.com Grey Goose http://www.greygoose.com
  37. Smashing Magazinehttp://www.smashingmagazine.com Tattly http://tattly.com AIDS.gov http://aids.gov
  38. Two Approaches
  39. 1. Start from scratch2. Make an existing design more responsive
  40. 1. Start from scratch2. Make an existing design more responsive
  41. 1. Start from scratch2. Make an existing design more responsive
  42. download files for hands-on exercise here: http://clarissapeterson.com/files/dcww/open in your text editor: style.cssopen in your browser: demo.html
  43. If you’re doing this at home, please note that eachsection of code is marked at the bottom of the slide withan example number that you can look for in yourstyle.css file.Example 1 in style.css like this
  44. 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)
  45. Live site http://www.dcwebwomen.org
  46. Demo site with streamlined code (so it’s easier to see what you’re doing)
  47. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
  48. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
  49. Flexible Typesetting
  50. 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;}http://meyerweb.com/eric/tools/css/reset/
  51. 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;}http://meyerweb.com/eric/tools/css/reset/
  52. target ÷ context = result
  53. .nav li a:link {! color: #2b737a;! text-decoration:none;! font-size: 22px;! font-weight:100;}Example 1 in style.css
  54. target ÷ context = result22px ÷ 16px = 1.375em
  55. .nav li a:link {! color: #2b737a;! text-decoration:none;! font-size: 1.375em;! font-weight:100;}Example 1 in style.css
  56. .nav li a:link {! color: #2b737a;! text-decoration:none;! font-size: 1.375em; !! ! ! ! ! ! ! /* 22px / 16px */! font-weight:100;}Example 1 in style.css
  57. h2 24px ÷ 16px = 1.5emh3 20px ÷ 16px = 1.25emp 14px ÷ 16px = .875emExample 2 in style.css
  58. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
  59. target ÷ context = result___px ÷ 1280px = __%
  60. <div class="site">! ...</div>Example 3 in style.css
  61. .site {! width: 1280px;}Example 3 in style.css
  62. .site {! width: 100%; /* 1280px / 1280px */}Example 3 in style.css
  63. <div id="heading">! ...</div>Example 3 in style.css
  64. #heading {! background-color: #fff;! width: 960px;! margin: 1.5em auto;! text-align:right;}Example 3 in style.css
  65. #heading {! background-color: #fff;! width: 75%;! margin: 1.5em auto;! text-align:right;}Example 3 in style.css
  66. <div id="promowrapper"> <img src="promoimage.jpg" alt="Attend seminars, networking events, and more." /></div>Example 4 in style.css
  67. #promowrapper {! margin: 0 auto;! width: 960px;}Example 4 in style.css
  68. #promowrapper {! margin: 0 auto;! width: 75%;}Example 4 in style.css
  69. <div id="content"> ...</div>Example 4 in style.css
  70. #content {! background-color: #fff;! width: 960px;! margin: auto;}Example 4 in style.css
  71. #content {! background-color: #fff;! width: 75%;! margin: auto;}Example 4 in style.css
  72. <div class="contentbox"> <h2>Who We Are</h2> ...</div>Example 4 in style.css
  73. .contentbox {! width: 300px;! float:left;! padding: 2em 30px 2em 0;}Example 4 in style.css
  74. .contentbox {! width: 31.25%;! float:left;! padding: 2em 30px 2em 0;}Example 4 in style.css
  75. .contentbox {! width: 31.25%;! float:left;! padding: 2em 30px 2em 0;}Example 4 in style.css
  76. .contentbox {! width: 31.25%;! float:left;! padding: 2em 3.125% 2em 0;}Example 4 in style.css
  77. <div id="footercontent"> ...</div>Example 5 in style.css
  78. #footercontent {! width: 960px;! margin: auto;! color: #fff;}Example 5 in style.css
  79. #footercontent {! width: 75%;! margin: auto;! color: #fff;}Example 5 in style.css
  80. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
  81. <div id="promowrapper"><img src="promoimage.jpg" alt="..." /></div>#promowrapper {! margin: 0 auto;! width: 75%;}Example 4 in style.css
  82. #promo img {! margin: 2em 0;}Example 4 in style.css
  83. #promo img {! margin: 2em 0;! max-width: 100%;}Example 4 in style.css
  84. embedobjectvideo
  85. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
  86. <link rel="stylesheet" href="style.css"media=”print” />
  87. h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
  88. h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
  89. h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
  90. h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
  91. h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
  92. h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
  93. @media screen {! ...}
  94. @media screen and (min-width: 1024px) {! ...}
  95. @media screen and (max-width: 1024px) {! ...}
  96. @media screen and (min-width: 768px) and(max-width: 1024px) {! ...}
  97. min-device-width: 1024pxmax-device-width: 1024px orientation: landscape orientation: portraitdevice-aspect-ratio: 16/9 min-color-index: 256 min-resolution: 300dpi
  98. @media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}Example 6 in style.css
  99. @media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}Example 6 in style.css
  100. @media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}Example 6 in style.css
  101. @media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}Example 6 in style.css
  102. @media screen and (max-width: 500px) {! ...}Example 7 on style.css
  103. @media screen and (max-width: 500px) {! .nav li {! ! display: block;! ! margin-left: 0em;! ! padding-bottom: 5px;! }}Example 7 on style.css
  104. @media screen and (max-width: 500px) {! .nav li {! ! display: block;! ! margin-left: 0em;! ! padding-bottom: 5px;! }}Example 7 on style.css
  105. @media screen and (max-width: 500px) {! ...! .logo {! ! float: none;! ! text-align: center;! }}Example 7 on style.css
  106. @media screen and (max-width: 500px) {! ...! .contentbox {! ! width: 100%;! ! float: none;! ! padding: 1.5em 0 0 0;! }}Example 7 on style.css
  107. @media screen and (max-width: 500px) {! ...! .contentbox {! ! width: 100%;! ! float: none;! ! padding: 1.5em 0 0 0;! }}Example 7 on style.css
  108. Some Other Things You Should Know (very briefly)
  109. Breakpoints
  110. Standard Breakpoints Why to Use ThemWhy Not to Use Them
  111. Commonly-Used Breakpoints Device Type WidthMobile phones (portrait) 320pxMobile phones (landscape) 480px7” tablets (portrait) 600px10” tablets (portrait) 768px10” tablets (landscape), Monitors 1024pxWider monitors 1280px
  112. What’s a Device Lab?
  113. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
  114. Device Lab DChttp://www.devicelabdc.com/
  115. Mobile First
  116. If you’re thinking about mobile: responsive design isn’t the only thing you need to think about.
  117. A mobile app should not be the default choice.Only do it if it’s the best choice.
  118. Responsive Workflow
  119. Photoshop is for photosInDesign is for design & typography
  120. We are free of the canvas
  121. Content First
  122. Q&A
  123. Resources
  124. BooksEthan MarcotteResponsive Web Design (2011)http://www.abookapart.com/products/responsive-web-design/
  125. 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-designDesign Process In The Responsive Age - Drew Clemens (May 2012)http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/Making of: People Magazines Responsive Mobile Website (July 2012)http://globalmoxie.com/blog/making-of-people-mobile.shtmlThe 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
  126. Websites@RWDlinks about responsive design (Ethan Marcotte)https://twitter.com/RWDFuture 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/
  127. Other Things You Asked AboutResources 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/
  128. Not RWDDC 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 oncreating presentations, getting ideas, writing proposals, and finding conferences with open CFPs.http://weareallaweso.me/
  129. Mount Rainier National Park. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
  130. Thank You Clarissa Petersonclarissapeterson.comcp@clarissapeterson.com @clarissa

×