Your SlideShare is downloading. ×
0
Introduction toResponsive Web Design      version 2.0               Clarissa Peterson                        @clarissa
a workshop for the DC Web Women Code(Her) SeriesSeptember 11, 2012
1. What is responsive web design2. Where it came from3. Example sites4. Hands-on demonstration5. Other things you should k...
Responsive Web Design
Responsive Web Design
Responsive Web Design A collection of techniques that allowyour website to respond to the device      that it is being vie...
Responsive Web Design A collection of techniques that allowyour website to respond to the device      that it is being vie...
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
HTML
Markup Language
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
Designing for one canvas.
Brendan Gates via Creative Commons http://flic.kr/p/dvX1J
Curtis Palmer via Creative Commons http://flic.kr/p/wyPiC
Designing for unlimited canvases?
Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
The web is free from the physical    restraints of the canvas
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 http://www.abookapart.com/products/responsive-web-design/
Responsive Architecture
Tristan Sterk via Creative Commons http://commons.wikimedia.org/wiki/File:ResponsiveEnvelope1.jpg
It’s easy to build a houseon flat land with four walls.
© Clarissa Peterson
Work around the environment.
© Clarissa Peterson
Think about design differently.
© Clarissa Peterson
A website with a responsive design is no longer just a   picture on a canvas.
A Few Examplesof Responsive Design
Smashing Magazinehttp://www.smashingmagazine.com       People (mobile site)       http://m.people.com        United Pixelw...
World Wildlife Fund     http://worldwildlife.org/         Stuff & Nonsensehttp://www.stuffandnonsense.co.uk/        Emeril...
Andersson-Wise Architects   http://www.anderssonwise.com   Federal Government: AIDS.gov           http://aids.gov  WordPre...
Two Approaches
1. Start from scratch2. Make an existing design    more responsive
download files for hands-on exercise here:clarissapeterson.com/files/dcww/open in your text editor: style.cssopen in your br...
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:  Some of this won’t work in olderbrowsers, so you’ll need to do some    extra stuff to make it work.      ...
1. A flexible, grid-based layout2. Flexible images and media3. Media queries
Columns provide structure.
http://www.bostonglobe.com/
target ÷ context = result
target ÷ context = result___px ÷ 1280px = __%
(but you don’t actually need to remember the formula)
<div class="site">! ...</div>Example 1 in style.css
.site {! width: 1280px;}Example 1 in style.css
.site {! width: 100%;}Example 1 in style.css
<div id="heading">! ...</div>Example 2 in style.css
#heading {! background-color: #fff;! width: 960px;! margin: 1.5em auto;! text-align:right;}Example 2 in style.css
#heading {! background-color: #fff;! width: 75%;! margin: 1.5em auto;! text-align:right;}Example 2 in style.css
<div id="promowrapper">  <img src="promoimage.jpg" alt="Attend  seminars, networking events, and  more." /></div>Example 3...
#promowrapper {! margin: 0 auto;! width: 960px;}Example 3 in style.css
#promowrapper {! margin: 0 auto;! width: 75%;}Example 3 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 id=”content”>  <div class="contentbox">    <h2>Who We Are</h2>     ...  </div>  ...</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 3...
#promo img {! margin: 2em 0;}Example 3 in style.css
#promo img {! margin: 2em 0;! max-width: 100%;}Example 3 in style.css
Don’t set the width and height   attributes of the image
Also: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; }}
@media screen {! ...}
@media screen and (min-width: 1024px) {! ...}
@media screen and (min-width: 768px) and(max-width: 1024px) {! ...}
min-device-width: 00px max-device-width: 00px orientation: landscape orientation: portraitdevice-aspect-ratio: 16/9  min-c...
@media screen and (max-width: 1100px) {! #navbox {! !! !! !! }}Example 6 in style.css
@media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! !! !! }}Example 6 in style.css
@media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! ! padding-top: 0;! !! }}Example 6 in style.css
@media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}Example 6 ...
@media screen and (max-width: 500px) {! .nav li {! !! !! !! }}Example 7 on style.css
@media screen and (max-width: 500px) {! .nav li {! ! display: block;! !! !! }}Example 7 on style.css
@media screen and (max-width: 500px) {! .nav li {! ! display: block;! ! margin-left: 0;! ! padding-bottom: 5px;! }}Example...
@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%;!   !!   !!   }}Example 7 on style.css
@media screen and (max-width: 500px) {! ...!   .contentbox {!   ! width: 100%;!   ! float: none;!   ! padding: 25px 0 0;! ...
Breakpoints
(where the design breaks)
Commonly-Used Breakpoints            Device Type             WidthMobile phones (portrait)            320pxMobile phones (...
But what happens whenthere are new devices?
Break when the design tells you to.
Options:
Options:Ignore Mobile?
Options:  Ignore Mobile?Separate Mobile Site
Options:  Ignore Mobile?Separate Mobile SiteNative Mobile App
Options:  Ignore Mobile?Separate Mobile SiteNative Mobile App Responsive Design
Your boss saying you need  a mobile app is not a goodreason to make a mobile app.
Mobile First
Start from the smallest screen,determine which parts of the designare truly necessary, and make those      the basis of yo...
Mobile first = better userexperience across devices
Mobile-Only Users
Consider bandwidth
Older Browsers:Give them default CSS that they can           understand.
Device Testing(if you don’t have devices)
Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
Test early, test often
Test at Various Widths     tools such as: resizemybrowser.comquirktools.com/screenfly/
Use a Mobile Emulator        such as:mobilephoneemulator.com
SmartphonesFeature Phones   Tablets
Touch Interaction
Desktop BrowsersMobile Browsers
Device Lab DCdevicelabdc.com
Responsive Process
How to explain responsivedesign to (internal/external) clients
The design won’t look thesame on every browser/device
Static comps aren’t enough
Style Tiles
Style Tilesfonts, colors, interface elements
Style Tiles  fonts, colors, interface elementscommunicate the essence of a visual       brand for the web
Style Tiles via Creative Commons http://styletil.es/
Style Tiles  help form a common visual    language between thedesigners and the stakeholders
Style Tiles via Creative Commons http://styletil.es/
Photoshop is for photosInDesign is for design & typography
DesignDevelop
Design doesn’t endwhen development begins
Content First
Users aren’t coming to your    site because it’s pretty,they’re coming for the content.
Responsive Design:We are free of the canvas.
Q&A
Resources
BooksEthan MarcotteResponsive Web Design (2011)http://www.abookapart.com/products/responsive-web-design/Luke WroblewskiMob...
ArticlesResponsive Web Design - Ethan Marcotte (May 2010)http://www.alistapart.com/articles/responsive-web-design/How to A...
More ArticlesThe Top Responsive Web Design Problems and How to Avoid Them - James Young (Aug. 2012)http://www.netmagazine....
Websites@RWDlinks about responsive design (Ethan Marcotte)https://twitter.com/RWDFuture Friendlymaking things that are fut...
Other InformationDC Web WomenA professional organization of more than 3000 members located in the Washington, DC area.Memb...
Mount Rainier. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
Thank You Clarissa Petersonclarissapeterson.comcp@clarissapeterson.com       @clarissa
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Upcoming SlideShare
Loading in...5
×

Introduction to Responsive Design v.2

2,320

Published on

This is the same workshop from August, but about 40 new slides, mostly at the end.

A hands-on workshop for DC Web Women on September 11, 2012.

Published in: Design, Technology, Education
1 Comment
2 Likes
Statistics
Notes
  • wow amazing how, thanks all
    http://giaunhanh.mobi
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,320
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
49
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to Responsive Design v.2"

  1. 1. Introduction toResponsive Web Design version 2.0 Clarissa Peterson @clarissa
  2. 2. a workshop for the DC Web Women Code(Her) SeriesSeptember 11, 2012
  3. 3. 1. What is responsive web design2. Where it came from3. Example sites4. Hands-on demonstration5. Other things you should know6. Q&A
  4. 4. Responsive Web Design
  5. 5. Responsive Web Design
  6. 6. Responsive Web Design A collection of techniques that allowyour website to respond to the device that it is being viewed on.
  7. 7. Responsive Web Design A collection of techniques that allowyour website to respond to the device that it is being viewed on.This allows all users to have an optimal experiencewithout creating separate sites for different devices.
  8. 8. http://www.bostonglobe.com/
  9. 9. http://www.bostonglobe.com/
  10. 10. http://www.bostonglobe.com/
  11. 11. http://www.bostonglobe.com/
  12. 12. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
  13. 13. HTML
  14. 14. Markup Language
  15. 15. First website: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  16. 16. <p>...</p> <h1>...</h1><a href=””>...</a>
  17. 17. <hp1>...</hp1> (highlighting)
  18. 18. <blink>...</blink>
  19. 19. Control:HTML tables spacer gifs
  20. 20. Cascading Style Sheets (CSS)
  21. 21. HTML Content CSS Presentation
  22. 22. John Kannenberg via Creative Commons http://flic.kr/p/9E7tqh
  23. 23. Designing for one canvas.
  24. 24. Brendan Gates via Creative Commons http://flic.kr/p/dvX1J
  25. 25. Curtis Palmer via Creative Commons http://flic.kr/p/wyPiC
  26. 26. Designing for unlimited canvases?
  27. 27. Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
  28. 28. The web is free from the physical restraints of the canvas
  29. 29. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
  30. 30. Paulo Fierro via Creative Commons http://flic.kr/p/ae8Nnr
  31. 31. 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/
  32. 32. Responsive Web Design http://www.abookapart.com/products/responsive-web-design/
  33. 33. Responsive Architecture
  34. 34. Tristan Sterk via Creative Commons http://commons.wikimedia.org/wiki/File:ResponsiveEnvelope1.jpg
  35. 35. It’s easy to build a houseon flat land with four walls.
  36. 36. © Clarissa Peterson
  37. 37. Work around the environment.
  38. 38. © Clarissa Peterson
  39. 39. Think about design differently.
  40. 40. © Clarissa Peterson
  41. 41. A website with a responsive design is no longer just a picture on a canvas.
  42. 42. A Few Examplesof Responsive Design
  43. 43. Smashing Magazinehttp://www.smashingmagazine.com People (mobile site) http://m.people.com United Pixelworkershttp://www.unitedpixelworkers.com/
  44. 44. World Wildlife Fund http://worldwildlife.org/ Stuff & Nonsensehttp://www.stuffandnonsense.co.uk/ Emeril’s Restaurantshttp://www.emerilsrestaurants.com/
  45. 45. Andersson-Wise Architects http://www.anderssonwise.com Federal Government: AIDS.gov http://aids.gov WordPress Theme: Twenty Twelvehttp://twentytwelvedemo.wordpress.com/
  46. 46. Two Approaches
  47. 47. 1. Start from scratch2. Make an existing design more responsive
  48. 48. download files for hands-on exercise here:clarissapeterson.com/files/dcww/open in your text editor: style.cssopen in your browser: demo.html
  49. 49. 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
  50. 50. Older Browsers: Some of this won’t work in olderbrowsers, so you’ll need to do some extra stuff to make it work. (read the book....)
  51. 51. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
  52. 52. Columns provide structure.
  53. 53. http://www.bostonglobe.com/
  54. 54. target ÷ context = result
  55. 55. target ÷ context = result___px ÷ 1280px = __%
  56. 56. (but you don’t actually need to remember the formula)
  57. 57. <div class="site">! ...</div>Example 1 in style.css
  58. 58. .site {! width: 1280px;}Example 1 in style.css
  59. 59. .site {! width: 100%;}Example 1 in style.css
  60. 60. <div id="heading">! ...</div>Example 2 in style.css
  61. 61. #heading {! background-color: #fff;! width: 960px;! margin: 1.5em auto;! text-align:right;}Example 2 in style.css
  62. 62. #heading {! background-color: #fff;! width: 75%;! margin: 1.5em auto;! text-align:right;}Example 2 in style.css
  63. 63. <div id="promowrapper"> <img src="promoimage.jpg" alt="Attend seminars, networking events, and more." /></div>Example 3 in style.css
  64. 64. #promowrapper {! margin: 0 auto;! width: 960px;}Example 3 in style.css
  65. 65. #promowrapper {! margin: 0 auto;! width: 75%;}Example 3 in style.css
  66. 66. <div id="content"> ...</div>Example 4 in style.css
  67. 67. #content {! background-color: #fff;! width: 960px;! margin: auto;}Example 4 in style.css
  68. 68. #content {! background-color: #fff;! width: 75%;! margin: auto;}Example 4 in style.css
  69. 69. <div id=”content”> <div class="contentbox"> <h2>Who We Are</h2> ... </div> ...</div>Example 4 in style.css
  70. 70. .contentbox {! width: 300px;! float:left;! padding: 2em 30px 2em 0;}Example 4 in style.css
  71. 71. .contentbox {! width: 31.25%;! float:left;! padding: 2em 30px 2em 0;}Example 4 in style.css
  72. 72. .contentbox {! width: 31.25%;! float:left;! padding: 2em 30px 2em 0;}Example 4 in style.css
  73. 73. .contentbox {! width: 31.25%;! float:left;! padding: 2em 3.125% 2em 0;}Example 4 in style.css
  74. 74. <div id="footercontent"> ...</div>Example 5 in style.css
  75. 75. #footercontent {! width: 960px;! margin: auto;! color: #fff;}Example 5 in style.css
  76. 76. #footercontent {! width: 75%;! margin: auto;! color: #fff;}Example 5 in style.css
  77. 77. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
  78. 78. <div id="promowrapper"><img src="promoimage.jpg" alt="..." /></div>#promowrapper {! margin: 0 auto;! width: 75%;}Example 3 in style.css
  79. 79. #promo img {! margin: 2em 0;}Example 3 in style.css
  80. 80. #promo img {! margin: 2em 0;! max-width: 100%;}Example 3 in style.css
  81. 81. Don’t set the width and height attributes of the image
  82. 82. Also:embedobjectvideo
  83. 83. 1. A flexible, grid-based layout2. Flexible images and media3. Media queries
  84. 84. <link rel="stylesheet" href="style.css"media=”print” />
  85. 85. h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
  86. 86. h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
  87. 87. h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
  88. 88. h1 { color: #f00; }p { color: #333; }@media print {! h1 { color: #0f0; }! p { color: #099; }}
  89. 89. @media screen {! ...}
  90. 90. @media screen and (min-width: 1024px) {! ...}
  91. 91. @media screen and (min-width: 768px) and(max-width: 1024px) {! ...}
  92. 92. min-device-width: 00px max-device-width: 00px orientation: landscape orientation: portraitdevice-aspect-ratio: 16/9 min-color-index: 256 min-resolution: 300dpi
  93. 93. @media screen and (max-width: 1100px) {! #navbox {! !! !! !! }}Example 6 in style.css
  94. 94. @media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! !! !! }}Example 6 in style.css
  95. 95. @media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! ! padding-top: 0;! !! }}Example 6 in style.css
  96. 96. @media screen and (max-width: 1100px) {! #navbox {! ! clear: left;! ! padding-top: 0;! ! text-align: center;! }}Example 6 in style.css
  97. 97. @media screen and (max-width: 500px) {! .nav li {! !! !! !! }}Example 7 on style.css
  98. 98. @media screen and (max-width: 500px) {! .nav li {! ! display: block;! !! !! }}Example 7 on style.css
  99. 99. @media screen and (max-width: 500px) {! .nav li {! ! display: block;! ! margin-left: 0;! ! padding-bottom: 5px;! }}Example 7 on style.css
  100. 100. @media screen and (max-width: 500px) {! ...! .logo {! ! float: none;! ! text-align: center;! }}Example 7 on style.css
  101. 101. @media screen and (max-width: 500px) {! ...! .contentbox {! ! width: 100%;! !! !! }}Example 7 on style.css
  102. 102. @media screen and (max-width: 500px) {! ...! .contentbox {! ! width: 100%;! ! float: none;! ! padding: 25px 0 0;! }}Example 7 on style.css
  103. 103. Breakpoints
  104. 104. (where the design breaks)
  105. 105. Commonly-Used Breakpoints Device Type WidthMobile phones (portrait) 320pxMobile phones (landscape) 480px7” tablets (portrait) 600px10” tablets (portrait) 768px10” tablets (landscape), Monitors 1024pxWider monitors 1280px
  106. 106. But what happens whenthere are new devices?
  107. 107. Break when the design tells you to.
  108. 108. Options:
  109. 109. Options:Ignore Mobile?
  110. 110. Options: Ignore Mobile?Separate Mobile Site
  111. 111. Options: Ignore Mobile?Separate Mobile SiteNative Mobile App
  112. 112. Options: Ignore Mobile?Separate Mobile SiteNative Mobile App Responsive Design
  113. 113. Your boss saying you need a mobile app is not a goodreason to make a mobile app.
  114. 114. Mobile First
  115. 115. Start from the smallest screen,determine which parts of the designare truly necessary, and make those the basis of your design.
  116. 116. Mobile first = better userexperience across devices
  117. 117. Mobile-Only Users
  118. 118. Consider bandwidth
  119. 119. Older Browsers:Give them default CSS that they can understand.
  120. 120. Device Testing(if you don’t have devices)
  121. 121. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
  122. 122. Test early, test often
  123. 123. Test at Various Widths tools such as: resizemybrowser.comquirktools.com/screenfly/
  124. 124. Use a Mobile Emulator such as:mobilephoneemulator.com
  125. 125. SmartphonesFeature Phones Tablets
  126. 126. Touch Interaction
  127. 127. Desktop BrowsersMobile Browsers
  128. 128. Device Lab DCdevicelabdc.com
  129. 129. Responsive Process
  130. 130. How to explain responsivedesign to (internal/external) clients
  131. 131. The design won’t look thesame on every browser/device
  132. 132. Static comps aren’t enough
  133. 133. Style Tiles
  134. 134. Style Tilesfonts, colors, interface elements
  135. 135. Style Tiles fonts, colors, interface elementscommunicate the essence of a visual brand for the web
  136. 136. Style Tiles via Creative Commons http://styletil.es/
  137. 137. Style Tiles help form a common visual language between thedesigners and the stakeholders
  138. 138. Style Tiles via Creative Commons http://styletil.es/
  139. 139. Photoshop is for photosInDesign is for design & typography
  140. 140. DesignDevelop
  141. 141. Design doesn’t endwhen development begins
  142. 142. Content First
  143. 143. Users aren’t coming to your site because it’s pretty,they’re coming for the content.
  144. 144. Responsive Design:We are free of the canvas.
  145. 145. Q&A
  146. 146. Resources
  147. 147. BooksEthan MarcotteResponsive Web Design (2011)http://www.abookapart.com/products/responsive-web-design/Luke WroblewskiMobile First (2011)http://www.abookapart.com/products/mobile-first
  148. 148. ArticlesResponsive Web Design - Ethan Marcotte (May 2010)http://www.alistapart.com/articles/responsive-web-design/How to Approach a Responsive Design (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.shtml3 Types of Solutions To Work With Responsive Images - Steven Bradley (July 2012)http://www.vanseodesign.com/web-design/responsive-images/
  149. 149. More ArticlesThe 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-themPresidential Smackdown Edition: Separate Mobile Website Vs. Responsive Website - Brad Frost (Aug. 2012)http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/Responsive Design Case Study (South Tees Hospitals NHS Foundation Trust) - Matt Berridge (Aug. 2012)http://builtbyboon.com/blog/responsive-design-case-study MiscellaneousSomeone asked how I measure things on the screen:MeasureIt (Firefox add-on)https://addons.mozilla.org/en-US/firefox/addon/measureit/
  150. 150. 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/
  151. 151. Other InformationDC 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/
  152. 152. Mount Rainier. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
  153. 153. Thank You Clarissa Petersonclarissapeterson.comcp@clarissapeterson.com @clarissa
  1. A particular slide catching your eye?

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

×