Successfully reported this slideshow.

Responsive Design

8

Share

Upcoming SlideShare
Responsive Design Essentials
Responsive Design Essentials
Loading in …3
×
1 of 162
1 of 162

Responsive Design

8

Share

Download to read offline

Presentation by Clarissa Peterson for LVL Studio's UX Soiree, November 21, 2012, in Montreal, Quebec. Overview of responsive design with focus on user experience.

Presentation by Clarissa Peterson for LVL Studio's UX Soiree, November 21, 2012, in Montreal, Quebec. Overview of responsive design with focus on user experience.

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Responsive Design

  1. 1. Responsive Design LVL Studio UX Soirée at Station C November 21, 2012 in Montreal, Quebec Clarissa Peterson @clarissa
  2. 2. A Little History
  3. 3. Fixed-width Site
  4. 4. Separate Mobile Site
  5. 5. One Website
  6. 6. Before
  7. 7. After
  8. 8. Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
  9. 9. Responsive Web Design
  10. 10. Responsive Web Design http://www.abookapart.com/products/responsive-web-design/
  11. 11. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.” - Ethan Marcotte
  12. 12. How It Works
  13. 13. 1. Flexible Grid 2. Flexible Images/Media 3. Media Queries
  14. 14. 1. Flexible Grid 2. Flexible Images/Media 3. Media Queries
  15. 15. #content { ! width: 90%; }
  16. 16. img { ! max-width: 100%; }
  17. 17. 1. Flexible Grid 2. Flexible Images/Media 3. Media Queries
  18. 18. http://www.unitedpixelworkers.com/
  19. 19. http://www.unitedpixelworkers.com/
  20. 20. http://www.unitedpixelworkers.com/
  21. 21. http://www.unitedpixelworkers.com/
  22. 22. http://www.unitedpixelworkers.com/
  23. 23. http://www.unitedpixelworkers.com/
  24. 24. @media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; } }
  25. 25. @media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; } }
  26. 26. @media screen and (min-width: 40em) { .section1, .section2 { float: left; width: 50%; } }
  27. 27. Why?
  28. 28. Mobile
  29. 29. 45% of American adults own a smartphone http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  30. 30. 40% have a cell phone that’s not a smartphone http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  31. 31. 17% do most of their online browsing on their phone http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  32. 32. Content Parity
  33. 33. www.consumerreports.org/
  34. 34. The beauty of the web is its openness. Don’t arbitrarily lock people out because of browser, device or configuration. - Brad Frost @brad_frost
  35. 35. http://www.geico.com/
  36. 36. Access
  37. 37. http://www.unheap.com/
  38. 38. Future-Friendly
  39. 39. Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL
  40. 40. Photo Credit: Rafel Miro via Creative Commons http://flic.kr/p/8KSGt7
  41. 41. Sony PSP-1000, Photo credit: Anna Debenham via Creative Commons http://flic.kr/p/dpGnUj
  42. 42. Nokia 95-3, Photo credit: Jonathan Greene via Creative Commons http://flic.kr/p/4nGFUd
  43. 43. Responsive Design
  44. 44. Context of Use
  45. 45. Photo credit: Mith Huang via Creative Commons http://flic.kr/p/9B7A4c
  46. 46. Photo credit: Kai Chan Vong via Creative Commons http://flic.kr/p/5c4Sfv
  47. 47. Photo credit: Carlos Smith via Creative Commons http://flic.kr/p/8tLb4P
  48. 48. Photo credit: Pete Markham via Creative Commons http://flic.kr/p/2zvrrJ
  49. 49. Assumptions
  50. 50. Photo credit: Wendi Dunlap via Creative Commons http://flic.kr/p/vMJM6
  51. 51. Photo credit: Channy Yun via Creative Commons http://flic.kr/p/51QJr6
  52. 52. Photo credit: Matt Hamm via Creative Commons http://flic.kr/p/EyrLG
  53. 53. Mobile First
  54. 54. 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
  55. 55. Make it work better for everybody.
  56. 56. Touchscreen
  57. 57. Touch
  58. 58. Hover
  59. 59. Swipe
  60. 60. Navigation
  61. 61. Top Navigation
  62. 62. http://www.gravitatedesign.com
  63. 63. http://www.gravitatedesign.com
  64. 64. http://www.tuj.ac.jp/
  65. 65. http://www.tuj.ac.jp/
  66. 66. Footer Navigation
  67. 67. http://contentsmagazine.com/
  68. 68. http://contentsmagazine.com/
  69. 69. <div id="site-nav"> <form> ... </form> ! <nav> ! ! <ul class="nav nav-primary"> ! ! ! <li><a href="#">Archive</a></li> ! ! ! <li><a href="#">About</a></li> ! ! ! <li><a href="#">Write For Us</a></li> ! ! ! <li><a href="#">Subscribe</a></li>! ! ! ! ! </ul> ! </nav> </div>
  70. 70. @media screen and (min-width: 48em) { ! #site-nav { ! ! position: absolute; ! ! top: -5em; ! ! width: 100%; ! ! z-index: 5; ! } }
  71. 71. http://contentsmagazine.com/
  72. 72. Toggle Navigation
  73. 73. http://starbucks.com/
  74. 74. http://starbucks.com/
  75. 75. http://starbucks.com/
  76. 76. Left Nav Flyout
  77. 77. http://www.emerilsrestaurants.com
  78. 78. http://www.emerilsrestaurants.com
  79. 79. http://www.emerilsrestaurants.com
  80. 80. Breakpoints
  81. 81. Illustration credit: Ruth Leth Andersen via Creative Commons http://flic.kr/p/bmbZgo
  82. 82. Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
  83. 83. Design Process
  84. 84. Design Develop
  85. 85. Prototyping
  86. 86. Illustration credit: podluzny via Creative Commons http://flic.kr/p/cJJdzm
  87. 87. Frameworks
  88. 88. http://foundation.zurb.com/
  89. 89. http://foundation.zurb.com/
  90. 90. http://foundation.zurb.com/
  91. 91. http://foundation.zurb.com/
  92. 92. http://zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/
  93. 93. http://zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/
  94. 94. http://zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/
  95. 95. http://foundation.zurb.com/docs/forms.php
  96. 96. http://foundation.zurb.com/docs/buttons.php
  97. 97. http://foundation.zurb.com/docs/typography.php
  98. 98. http://www.getswizzle.com/
  99. 99. http://www.getswizzle.com/
  100. 100. http://www.getswizzle.com/
  101. 101. Style Tiles
  102. 102. Communicate the essence of a visual brand for the web
  103. 103. Style Tiles via Creative Commons http://styletil.es/
  104. 104. help form a common visual language between the designers and the stakeholders
  105. 105. Style Tiles via Creative Commons http://styletil.es/
  106. 106. Testing
  107. 107. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
  108. 108. Examples
  109. 109. http://worldwildlife.org/
  110. 110. http://worldwildlife.org/
  111. 111. http://worldwildlife.org/
  112. 112. http://emerilsrestaurants.com/
  113. 113. http://emerilsrestaurants.com/
  114. 114. http://emerilsrestaurants.com/
  115. 115. http://emerilsrestaurants.com/
  116. 116. http://www.oxideinteractive.com.au/
  117. 117. http://www.oxideinteractive.com.au/
  118. 118. http://www.oxideinteractive.com.au/
  119. 119. http://www.wm.edu/
  120. 120. http://www.wm.edu/
  121. 121. http://www.wm.edu/
  122. 122. Responsive Web Design 1. Give everybody the same content 2. Displayed appropriately for their device 3. No matter what device they have
  123. 123. There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. - Stephen Hay @stephenhay
  124. 124. Resources
  125. 125. A Few More Examples of Responsive Design Boston Globe http://www.bostonglobe.com Smashing Magazine http://www.smashingmagazine.com People (mobile site) http://m.people.com Disney http://disney.com/ Mashable (beta) http://beta.mashable.com/ Stuff & Nonsense http://www.stuffandnonsense.co.uk/ Google Nexus http://www.google.com/nexus/ Hotellweb http://www.hotellweb.no/?lang=en_US Andersson-Wise Architects http://www.anderssonwise.com WordPress Theme: Twenty Twelve http://twentytwelvedemo.wordpress.com/
  126. 126. Articles Responsive Web Design - Ethan Marcotte (May 2010) http://www.alistapart.com/articles/responsive-web-design/ En français: Le Web Design Réactif http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/ How to Approach a Responsive Design (Boston Globe) - Tito Bottitta (Jan. 2012) http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/ Presidential 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/
  127. 127. Prototyping & Design Process Dive into Responsive Prototyping with Foundation (Jonathan Smiley) - April 2012 http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/ Design Process In The Responsive Age (Drew Clemons) - May 2012 http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/ Responsive Web Design Sketch Sheets http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets Style Tiles http://styletil.es/
  128. 128. Frameworks 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 - August 2012 http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/
  129. 129. Navigation 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/
  130. 130. 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/ Brad Frost blog that covers responsive design http://bradfrostweb.com/blog/ Mediaqueri.es inspirational websites using media queries and responsive web design http://mediaqueri.es/
  131. 131. Books Responsive Web Design Ethan Marcotte (2011) http://www.abookapart.com/products/responsive-web-design/ En français http://www.editions-eyrolles.com/Livre/9782212133318/responsive-web-design Mobile First Luke Wroblewski (2011) http://www.abookapart.com/products/mobile-first En français http://www.editions-eyrolles.com/Livre/9782212134063/mobile-first
  132. 132. Thanks! Clarissa Peterson clarissapeterson.com mail@clarissapeterson.com @clarissa

×