Learning the Essentialsto Design ResponsivelyResponsive Web Design NYC MeetupJanuary 22, 2013 - New York City             ...
"So you’re going to make websiteswork better on mobile phones?Because right now they mostly all suck."              - my f...
Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL
Fixed-width Site
Separate Mobile Site
One Website
Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
Responsive Design
1. Flexible Grid2. Flexible Images/Media   3. Media Queries
1. Flexible Grid2. Flexible Images/Media   3. Media Queries
div {  width: 25%;  float: left;}
1. Flexible Grid2. Flexible Images/Media   3. Media Queries
img, object, video {  max-width: 100%}
1. Flexible Grid2. Flexible Images/Media   3. Media Queries
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
@media screen and (min-width: 640px) {  .section1, .section2 {    float: left;    width: 50%;  }}
@media screen and (min-width: 640px) {  .section1, .section2 {    float: left;    width: 50%;  }}
@media screen and (min-width: 640px) {  .section1, .section2 {    float: left;    width: 50%;  }}
@media screen and (min-width: 40em) {  .section1, .section2 {    float: left;    width: 50%;  }}
min-device-width: 00px max-device-width: 00px orientation: landscape orientation: portraitdevice-aspect-ratio: 16/9  min-c...
Existing Site
target ÷ context = result
#heading {! width: 960px;}
#heading {! width: 75%; /* 960px / 1280px */}
Flexible Typesetting
.nav {! font-size: 22px;}
.nav {! font-size: 1.375em; /* 22px / 16px */}
Small-Screen First  (Mobile First)
Mobile use case: I just transferred moneyat my desk using my phone becauselogging into my banking app requiresfewer steps....
Navigation
http://bradfrost.github.com/this-is-responsive/patterns.html
http://www.gravitatedesign.com
http://www.gravitatedesign.com
http://www.tuj.ac.jp/
http://www.tuj.ac.jp/
http://contentsmagazine.com/
http://contentsmagazine.com/
http://contentsmagazine.com/
http://starbucks.com/
http://starbucks.com/
http://starbucks.com/
http://starbucks.com/
http://www.emerilsrestaurants.com
http://www.emerilsrestaurants.com
http://www.emerilsrestaurants.com
Design Process
Content
DesignDevelop
Prototyping
Illustration credit: podluzny via Creative Commons http://flic.kr/p/cJJdzm
Frameworks
http://foundation.zurb.com/
http://foundation.zurb.com/
http://foundation.zurb.com/
http://foundation.zurb.com/
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/docs/forms.php
http://foundation.zurb.com/docs/buttons.php
http://foundation.zurb.com/docs/typography.php
Testing
Touch
Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
"Its not like our industry nailed webdesign before we started doingresponsive design. Its still a work inprogress."       ...
Examples
http://worldwildlife.org/
http://worldwildlife.org/
http://worldwildlife.org/
http://worldwildlife.org/
http://worldwildlife.org/
http://worldwildlife.org/
http://emerilsrestaurants.com/
http://emerilsrestaurants.com/
http://emerilsrestaurants.com/
http://emerilsrestaurants.com/
http://emerilsrestaurants.com/
http://www.oxideinteractive.com.au/
http://www.oxideinteractive.com.au/
http://www.oxideinteractive.com.au/
http://www.oxideinteractive.com.au/
http://www.wm.edu/
http://www.wm.edu/
http://www.wm.edu/
http://www.wm.edu/
http://www.hsgac.senate.gov
http://www.hsgac.senate.gov
http://www.hsgac.senate.gov
http://www.hsgac.senate.gov
http://www.hsgac.senate.gov
Resources
BooksResponsive Web DesignEthan Marcotte (2011)http://www.abookapart.com/products/responsive-web-design/Mobile FirstLuke W...
ArticlesResponsive Web Design - Ethan Marcotte (May 2010)http://www.alistapart.com/articles/responsive-web-design/Responsi...
Frameworks & NavigationWhich Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained(Joshua Johnson) - Au...
Other Websites & Misc.@RWDLinks about responsive design. (Ethan Marcotte)https://twitter.com/RWDFuture FriendlyMaking thin...
Advanced Responsive Design TopicsTo learn more about frameworks, navigation patterns, preprocessors, responsiveimages, res...
Find me online:clarissapeterson.com       @clarissa
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Responsive Design Essentials
Upcoming SlideShare
Loading in...5
×

Responsive Design Essentials

6,132

Published on

Presentation to:
Chicago Web Professionals Meetup Group - February 12, 2013.
Responsive Web Design NYC Meetup - January 22, 2013.

Published in: Design

Transcript of "Responsive Design Essentials"

  1. 1. Learning the Essentialsto Design ResponsivelyResponsive Web Design NYC MeetupJanuary 22, 2013 - New York City Clarissa Peterson clarissapeterson.com @clarissa
  2. 2. "So you’re going to make websiteswork better on mobile phones?Because right now they mostly all suck." - my friend whos not a web designer
  3. 3. Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL
  4. 4. Fixed-width Site
  5. 5. Separate Mobile Site
  6. 6. One Website
  7. 7. Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
  8. 8. Responsive Design
  9. 9. 1. Flexible Grid2. Flexible Images/Media 3. Media Queries
  10. 10. 1. Flexible Grid2. Flexible Images/Media 3. Media Queries
  11. 11. div { width: 25%; float: left;}
  12. 12. 1. Flexible Grid2. Flexible Images/Media 3. Media Queries
  13. 13. img, object, video { max-width: 100%}
  14. 14. 1. Flexible Grid2. Flexible Images/Media 3. Media Queries
  15. 15. http://www.unitedpixelworkers.com/
  16. 16. http://www.unitedpixelworkers.com/
  17. 17. http://www.unitedpixelworkers.com/
  18. 18. http://www.unitedpixelworkers.com/
  19. 19. http://www.unitedpixelworkers.com/
  20. 20. @media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; }}
  21. 21. @media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; }}
  22. 22. @media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; }}
  23. 23. @media screen and (min-width: 40em) { .section1, .section2 { float: left; width: 50%; }}
  24. 24. min-device-width: 00px max-device-width: 00px orientation: landscape orientation: portraitdevice-aspect-ratio: 16/9 min-color-index: 256 min-resolution: 300dpi
  25. 25. Existing Site
  26. 26. target ÷ context = result
  27. 27. #heading {! width: 960px;}
  28. 28. #heading {! width: 75%; /* 960px / 1280px */}
  29. 29. Flexible Typesetting
  30. 30. .nav {! font-size: 22px;}
  31. 31. .nav {! font-size: 1.375em; /* 22px / 16px */}
  32. 32. Small-Screen First (Mobile First)
  33. 33. Mobile use case: I just transferred moneyat my desk using my phone becauselogging into my banking app requiresfewer steps. - Stephanie Rieger @stephanierieger
  34. 34. Navigation
  35. 35. http://bradfrost.github.com/this-is-responsive/patterns.html
  36. 36. http://www.gravitatedesign.com
  37. 37. http://www.gravitatedesign.com
  38. 38. http://www.tuj.ac.jp/
  39. 39. http://www.tuj.ac.jp/
  40. 40. http://contentsmagazine.com/
  41. 41. http://contentsmagazine.com/
  42. 42. http://contentsmagazine.com/
  43. 43. http://starbucks.com/
  44. 44. http://starbucks.com/
  45. 45. http://starbucks.com/
  46. 46. http://starbucks.com/
  47. 47. http://www.emerilsrestaurants.com
  48. 48. http://www.emerilsrestaurants.com
  49. 49. http://www.emerilsrestaurants.com
  50. 50. Design Process
  51. 51. Content
  52. 52. DesignDevelop
  53. 53. Prototyping
  54. 54. Illustration credit: podluzny via Creative Commons http://flic.kr/p/cJJdzm
  55. 55. Frameworks
  56. 56. http://foundation.zurb.com/
  57. 57. http://foundation.zurb.com/
  58. 58. http://foundation.zurb.com/
  59. 59. http://foundation.zurb.com/
  60. 60. http://foundation.zurb.com/prototype-example2.php
  61. 61. http://foundation.zurb.com/prototype-example2.php
  62. 62. http://foundation.zurb.com/prototype-example2.php
  63. 63. http://foundation.zurb.com/prototype-example2.php
  64. 64. http://foundation.zurb.com/docs/forms.php
  65. 65. http://foundation.zurb.com/docs/buttons.php
  66. 66. http://foundation.zurb.com/docs/typography.php
  67. 67. Testing
  68. 68. Touch
  69. 69. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
  70. 70. "Its not like our industry nailed webdesign before we started doingresponsive design. Its still a work inprogress." - Dan Willis @uxcrank
  71. 71. Examples
  72. 72. http://worldwildlife.org/
  73. 73. http://worldwildlife.org/
  74. 74. http://worldwildlife.org/
  75. 75. http://worldwildlife.org/
  76. 76. http://worldwildlife.org/
  77. 77. http://worldwildlife.org/
  78. 78. http://emerilsrestaurants.com/
  79. 79. http://emerilsrestaurants.com/
  80. 80. http://emerilsrestaurants.com/
  81. 81. http://emerilsrestaurants.com/
  82. 82. http://emerilsrestaurants.com/
  83. 83. http://www.oxideinteractive.com.au/
  84. 84. http://www.oxideinteractive.com.au/
  85. 85. http://www.oxideinteractive.com.au/
  86. 86. http://www.oxideinteractive.com.au/
  87. 87. http://www.wm.edu/
  88. 88. http://www.wm.edu/
  89. 89. http://www.wm.edu/
  90. 90. http://www.wm.edu/
  91. 91. http://www.hsgac.senate.gov
  92. 92. http://www.hsgac.senate.gov
  93. 93. http://www.hsgac.senate.gov
  94. 94. http://www.hsgac.senate.gov
  95. 95. http://www.hsgac.senate.gov
  96. 96. Resources
  97. 97. BooksResponsive Web DesignEthan Marcotte (2011)http://www.abookapart.com/products/responsive-web-design/Mobile FirstLuke Wroblewski (2011)http://www.abookapart.com/products/mobile-firstAdaptive Web Design: Crafting Rich Experiences with Progressive EnhancementAaron Gustafson (2011)http://easy-readers.net/books/adaptive-web-design/Implementing Responsive Design: Building sites for an anywhere, everywhere webTim Kadlec (2012)http://www.implementingresponsivedesign.com/Content Strategy for MobileKaren McGrane (2012)http://www.abookapart.com/products/content-strategy-for-mobile
  98. 98. ArticlesResponsive Web Design - Ethan Marcotte (May 2010)http://www.alistapart.com/articles/responsive-web-design/Responsive-Ready Content - Sara Wachter-Boettcher (March 2012)http://sarawb.com/2012/03/07/content-strategy-responsive-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/Design Process In The Responsive Age - Drew Clemons (May 2012)http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/Dive into Responsive Prototyping with Foundation - Jonathan Smiley (April 2012)http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/
  99. 99. Frameworks & NavigationWhich Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained(Joshua Johnson) - August 2012http://designshack.net/articles/css/which-is-right-for-me-22-responsive-css-frameworks-and-boilerplates-explained/15 More Responsive CSS Frameworks & Boilerplates Worth Considering - Aug. 2012http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/Responsive Navigation Patterns (Brad Frost) - February 2012http://bradfrostweb.com/blog/web/responsive-nav-patterns/Complex Navigation Patterns for Responsive Design (Brad Frost) - August 2012http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/10 Tips How To Handle Responsive Navigation Menus Successfully (Sabina Idler) -October 2012http://blog.usabilla.com/10-tips-how-to-handle-responsive-navigation-menus-successfully/10 Responsive Navigation Solutions and Tutorials - August 2012http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
  100. 100. Other Websites & Misc.@RWDLinks about responsive design. (Ethan Marcotte)https://twitter.com/RWDFuture FriendlyMaking things that are future-friendly.http://futurefriend.ly/Responsive ResourcesA collection of resources about the various aspects of responsive web design.http://bradfrost.github.com/this-is-responsive/resources.htmlMediaqueri.esInspirational websites using media queries and responsive web design.http://mediaqueri.es/
  101. 101. Advanced Responsive Design TopicsTo learn more about frameworks, navigation patterns, preprocessors, responsiveimages, responsive tables, and polyfills, check out my slides from:Responsive Design Tools & Resourceshttp://www.slideshare.net/clarissapeterson/responsive-design-tools-resources-16066514
  102. 102. Find me online: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.

×