Responsive Design Essentials

  • 5,596 views
Uploaded on

Presentation to: …

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,596
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
151
Comments
0
Likes
24

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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