Responsive Design Essentials

13,270 views
11,612 views

Published on

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

Published in: Design

Responsive Design Essentials

  1. Learning the Essentialsto Design ResponsivelyResponsive Web Design NYC MeetupJanuary 22, 2013 - New York City Clarissa Peterson clarissapeterson.com @clarissa
  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. Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL
  4. Fixed-width Site
  5. Separate Mobile Site
  6. One Website
  7. Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
  8. Responsive Design
  9. 1. Flexible Grid2. Flexible Images/Media 3. Media Queries
  10. 1. Flexible Grid2. Flexible Images/Media 3. Media Queries
  11. div { width: 25%; float: left;}
  12. 1. Flexible Grid2. Flexible Images/Media 3. Media Queries
  13. img, object, video { max-width: 100%}
  14. 1. Flexible Grid2. Flexible Images/Media 3. Media Queries
  15. http://www.unitedpixelworkers.com/
  16. http://www.unitedpixelworkers.com/
  17. http://www.unitedpixelworkers.com/
  18. http://www.unitedpixelworkers.com/
  19. http://www.unitedpixelworkers.com/
  20. @media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; }}
  21. @media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; }}
  22. @media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; }}
  23. @media screen and (min-width: 40em) { .section1, .section2 { float: left; width: 50%; }}
  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. Existing Site
  26. target ÷ context = result
  27. #heading {! width: 960px;}
  28. #heading {! width: 75%; /* 960px / 1280px */}
  29. Flexible Typesetting
  30. .nav {! font-size: 22px;}
  31. .nav {! font-size: 1.375em; /* 22px / 16px */}
  32. Small-Screen First (Mobile First)
  33. Mobile use case: I just transferred moneyat my desk using my phone becauselogging into my banking app requiresfewer steps. - Stephanie Rieger @stephanierieger
  34. Navigation
  35. http://bradfrost.github.com/this-is-responsive/patterns.html
  36. http://www.gravitatedesign.com
  37. http://www.gravitatedesign.com
  38. http://www.tuj.ac.jp/
  39. http://www.tuj.ac.jp/
  40. http://contentsmagazine.com/
  41. http://contentsmagazine.com/
  42. http://contentsmagazine.com/
  43. http://starbucks.com/
  44. http://starbucks.com/
  45. http://starbucks.com/
  46. http://starbucks.com/
  47. http://www.emerilsrestaurants.com
  48. http://www.emerilsrestaurants.com
  49. http://www.emerilsrestaurants.com
  50. Design Process
  51. Content
  52. DesignDevelop
  53. Prototyping
  54. Illustration credit: podluzny via Creative Commons http://flic.kr/p/cJJdzm
  55. Frameworks
  56. http://foundation.zurb.com/
  57. http://foundation.zurb.com/
  58. http://foundation.zurb.com/
  59. http://foundation.zurb.com/
  60. http://foundation.zurb.com/prototype-example2.php
  61. http://foundation.zurb.com/prototype-example2.php
  62. http://foundation.zurb.com/prototype-example2.php
  63. http://foundation.zurb.com/prototype-example2.php
  64. http://foundation.zurb.com/docs/forms.php
  65. http://foundation.zurb.com/docs/buttons.php
  66. http://foundation.zurb.com/docs/typography.php
  67. Testing
  68. Touch
  69. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
  70. "Its not like our industry nailed webdesign before we started doingresponsive design. Its still a work inprogress." - Dan Willis @uxcrank
  71. Examples
  72. http://worldwildlife.org/
  73. http://worldwildlife.org/
  74. http://worldwildlife.org/
  75. http://worldwildlife.org/
  76. http://worldwildlife.org/
  77. http://worldwildlife.org/
  78. http://emerilsrestaurants.com/
  79. http://emerilsrestaurants.com/
  80. http://emerilsrestaurants.com/
  81. http://emerilsrestaurants.com/
  82. http://emerilsrestaurants.com/
  83. http://www.oxideinteractive.com.au/
  84. http://www.oxideinteractive.com.au/
  85. http://www.oxideinteractive.com.au/
  86. http://www.oxideinteractive.com.au/
  87. http://www.wm.edu/
  88. http://www.wm.edu/
  89. http://www.wm.edu/
  90. http://www.wm.edu/
  91. http://www.hsgac.senate.gov
  92. http://www.hsgac.senate.gov
  93. http://www.hsgac.senate.gov
  94. http://www.hsgac.senate.gov
  95. http://www.hsgac.senate.gov
  96. Resources
  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. 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. 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. 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. 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. Find me online:clarissapeterson.com @clarissa

×