Responsive DesignLVL Studio UX Soirée at Station CNovember 21, 2012 in Montreal, Quebec                      Clarissa Pete...
A Little History
Fixed-width Site
Separate Mobile Site
One Website
Before
After
Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
Responsive Web Design
Responsive Web Design http://www.abookapart.com/products/responsive-web-design/
Responsive web design offers us a wayforward, finally allowing us to “design forthe ebb and flow of things.”                ...
How It Works
1. Flexible Grid2. Flexible Images/Media   3. Media Queries
1. Flexible Grid2. Flexible Images/Media   3. Media Queries
#content {! width: 90%;}
img {! 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/
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: 40em) {  .section1, .section2 {    float: left;    width: 50%;  }}
Why?
Mobile
45%         of American adultsown a smartphonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
40%  have a cell phone that’snot a smartphonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
17%do most of their online browsing     on their phone  http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
Content Parity
www.consumerreports.org/
The beauty of the web is its openness.Don’t arbitrarily lock people out becauseof browser, device or configuration.        ...
http://www.geico.com/
Access
http://www.unheap.com/
Future-Friendly
Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL
Photo Credit: Rafel Miro via Creative Commons http://flic.kr/p/8KSGt7
Sony PSP-1000, Photo credit: Anna Debenham via Creative Commons http://flic.kr/p/dpGnUj
Nokia 95-3, Photo credit: Jonathan Greene via Creative Commons http://flic.kr/p/4nGFUd
Responsive Design
Context of Use
Photo credit: Mith Huang via Creative Commons http://flic.kr/p/9B7A4c
Photo credit: Kai Chan Vong via Creative Commons http://flic.kr/p/5c4Sfv
Photo credit: Carlos Smith via Creative Commons http://flic.kr/p/8tLb4P
Photo credit: Pete Markham via Creative Commons http://flic.kr/p/2zvrrJ
Assumptions
Photo credit: Wendi Dunlap via Creative Commons http://flic.kr/p/vMJM6
Photo credit: Channy Yun via Creative Commons http://flic.kr/p/51QJr6
Photo credit: Matt Hamm via Creative Commons http://flic.kr/p/EyrLG
Mobile First
Mobile use case: I just transferred moneyat my desk using my phone becauselogging into my banking app requiresfewer steps....
Make it work better for everybody.
Touchscreen
Touch
Hover
Swipe
Navigation
Top Navigation
http://www.gravitatedesign.com
http://www.gravitatedesign.com
http://www.tuj.ac.jp/
http://www.tuj.ac.jp/
Footer Navigation
http://contentsmagazine.com/
http://contentsmagazine.com/
<div id="site-nav">    <form> ... </form>! <nav>! ! <ul class="nav nav-primary">! ! ! <li><a href="#">Archive</a></li>! ! ...
@media screen and (min-width: 48em) {! #site-nav {! ! position: absolute;! ! top: -5em;! ! width: 100%;! ! z-index: 5;! }}
http://contentsmagazine.com/
Toggle Navigation
http://starbucks.com/
http://starbucks.com/
http://starbucks.com/
Left Nav Flyout
http://www.emerilsrestaurants.com
http://www.emerilsrestaurants.com
http://www.emerilsrestaurants.com
Breakpoints
Illustration credit: Ruth Leth Andersen via Creative Commons http://flic.kr/p/bmbZgo
Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
Design Process
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://zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/
http://zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/
http://zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/
http://foundation.zurb.com/docs/forms.php
http://foundation.zurb.com/docs/buttons.php
http://foundation.zurb.com/docs/typography.php
http://www.getswizzle.com/
http://www.getswizzle.com/
http://www.getswizzle.com/
Style Tiles
Communicate theessence of a visual brand      for the web
Style Tiles via Creative Commons http://styletil.es/
help form acommon visual language between the designers  and the stakeholders
Style Tiles via Creative Commons http://styletil.es/
Testing
Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
Examples
http://worldwildlife.org/
http://worldwildlife.org/
http://worldwildlife.org/
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.wm.edu/
http://www.wm.edu/
http://www.wm.edu/
Responsive Web Design1. Give everybody the same content2. Displayed appropriately for their   device3. No matter what devi...
There is no Mobile Web. There is onlyThe Web, which we view in differentways. There is also no Desktop Web. OrTablet Web. ...
Resources
A Few More Examples of Responsive Design              Boston Globe      http://www.bostonglobe.com        Smashing Magazin...
ArticlesResponsive Web Design - Ethan Marcotte (May 2010)http://www.alistapart.com/articles/responsive-web-design/En franç...
Prototyping & Design ProcessDive into Responsive Prototyping with Foundation (Jonathan Smiley) - April 2012http://www.alis...
FrameworksWhich Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained(Joshua Johnson) - August 2012http...
NavigationResponsive Navigation Patterns (Brad Frost) - February 2012http://bradfrostweb.com/blog/web/responsive-nav-patte...
Other Websites & Misc.@RWDlinks about responsive design (Ethan Marcotte)https://twitter.com/RWDFuture Friendlymaking thing...
BooksResponsive Web DesignEthan Marcotte (2011)http://www.abookapart.com/products/responsive-web-design/En françaishttp://...
Thanks!Clarissa Peterson  clarissapeterson.commail@clarissapeterson.com         @clarissa
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Upcoming SlideShare
Loading in...5
×

Responsive Design

12,725

Published on

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.

Published in: Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
12,725
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
69
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Responsive Design

  1. 1. Responsive DesignLVL Studio UX Soirée at Station CNovember 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 wayforward, finally allowing us to “design forthe ebb and flow of things.” - Ethan Marcotte
  12. 12. How It Works
  13. 13. 1. Flexible Grid2. Flexible Images/Media 3. Media Queries
  14. 14. 1. Flexible Grid2. Flexible Images/Media 3. Media Queries
  15. 15. #content {! width: 90%;}
  16. 16. img {! max-width: 100%;}
  17. 17. 1. Flexible Grid2. 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 adultsown a smartphonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  30. 30. 40% have a cell phone that’snot a smartphonehttp://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 becauseof 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 moneyat my desk using my phone becauselogging into my banking app requiresfewer 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. DesignDevelop
  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 theessence of a visual brand for the web
  103. 103. Style Tiles via Creative Commons http://styletil.es/
  104. 104. help form acommon 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 Design1. Give everybody the same content2. Displayed appropriately for their device3. No matter what device they have
  123. 123. There is no Mobile Web. There is onlyThe Web, which we view in differentways. There is also no Desktop Web. OrTablet 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.comWordPress Theme: Twenty Twelve http://twentytwelvedemo.wordpress.com/
  126. 126. ArticlesResponsive Web Design - Ethan Marcotte (May 2010)http://www.alistapart.com/articles/responsive-web-design/En français: Le Web Design Réactifhttp://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 ProcessDive into Responsive Prototyping with Foundation (Jonathan Smiley) - April 2012http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/Design Process In The Responsive Age (Drew Clemons) - May 2012http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/Responsive Web Design Sketch Sheetshttp://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheetsStyle Tileshttp://styletil.es/
  128. 128. FrameworksWhich 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 - August2012http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/
  129. 129. NavigationResponsive 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/
  130. 130. Other Websites & Misc.@RWDlinks about responsive design (Ethan Marcotte)https://twitter.com/RWDFuture Friendlymaking things that are future-friendlyhttp://futurefriend.ly/Brad Frostblog that covers responsive designhttp://bradfrostweb.com/blog/Mediaqueri.esinspirational websites using media queries and responsive web designhttp://mediaqueri.es/
  131. 131. BooksResponsive Web DesignEthan Marcotte (2011)http://www.abookapart.com/products/responsive-web-design/En françaishttp://www.editions-eyrolles.com/Livre/9782212133318/responsive-web-designMobile FirstLuke Wroblewski (2011)http://www.abookapart.com/products/mobile-firstEn françaishttp://www.editions-eyrolles.com/Livre/9782212134063/mobile-first
  132. 132. Thanks!Clarissa Peterson clarissapeterson.commail@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.

×