Successfully reported this slideshow.

Responsive Design Essentials

26

Share

Upcoming SlideShare
Responsive Design
Responsive Design
Loading in …3
×
1 of 125
1 of 125

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Responsive Design Essentials

  1. Learning the Essentials to Design Responsively Responsive Web Design NYC Meetup January 22, 2013 - New York City Clarissa Peterson clarissapeterson.com @clarissa
  2. "So you’re going to make websites work better on mobile phones? Because right now they mostly all suck." - my friend who's 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 Grid 2. Flexible Images/Media 3. Media Queries
  10. 1. Flexible Grid 2. Flexible Images/Media 3. Media Queries
  11. div { width: 25%; float: left; }
  12. 1. Flexible Grid 2. Flexible Images/Media 3. Media Queries
  13. img, object, video { max-width: 100% }
  14. 1. Flexible Grid 2. 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: portrait device-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 money at my desk using my phone because logging into my banking app requires fewer 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. Design Develop
  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. "It's not like our industry nailed web design before we started doing responsive design. It's still a work in progress." - 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. Books Responsive Web Design Ethan Marcotte (2011) http://www.abookapart.com/products/responsive-web-design/ Mobile First Luke Wroblewski (2011) http://www.abookapart.com/products/mobile-first Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement Aaron Gustafson (2011) http://easy-readers.net/books/adaptive-web-design/ Implementing Responsive Design: Building sites for an anywhere, everywhere web Tim Kadlec (2012) http://www.implementingresponsivedesign.com/ Content Strategy for Mobile Karen McGrane (2012) http://www.abookapart.com/products/content-strategy-for-mobile
  98. Articles Responsive 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 & Navigation Which Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained (Joshua Johnson) - August 2012 http://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. 2012 http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/ Responsive Navigation Patterns (Brad Frost) - February 2012 http://bradfrostweb.com/blog/web/responsive-nav-patterns/ Complex Navigation Patterns for Responsive Design (Brad Frost) - August 2012 http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/ 10 Tips How To Handle Responsive Navigation Menus Successfully (Sabina Idler) - October 2012 http://blog.usabilla.com/10-tips-how-to-handle-responsive-navigation-menus-successfully/ 10 Responsive Navigation Solutions and Tutorials - August 2012 http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
  100. Other Websites & Misc. @RWD Links about responsive design. (Ethan Marcotte) https://twitter.com/RWD Future Friendly Making things that are future-friendly. http://futurefriend.ly/ Responsive Resources A collection of resources about the various aspects of responsive web design. http://bradfrost.github.com/this-is-responsive/resources.html Mediaqueri.es Inspirational websites using media queries and responsive web design. http://mediaqueri.es/
  101. Advanced Responsive Design Topics To learn more about frameworks, navigation patterns, preprocessors, responsive images, responsive tables, and polyfills, check out my slides from: Responsive Design Tools & Resources http://www.slideshare.net/clarissapeterson/responsive-design-tools-resources-16066514
  102. Find me online: clarissapeterson.com @clarissa

×