Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Design in the Real World

15,030 views

Published on

Presentation at Snow*Mobile conference in Madison, Wisconsin

Published in: Design
  • Be the first to comment

Responsive Design in the Real World

  1. 1. Responsive Design In the Real World@clarissa
  2. 2. What We’ll Cover: Frameworks Navigation Patterns Preprocessors Polyfills
  3. 3. Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL
  4. 4. Responsive Design
  5. 5. http://bostonglobe.com
  6. 6. http://bostonglobe.com
  7. 7. http://bostonglobe.com
  8. 8. Frameworks
  9. 9. Photo Credit: Garreth Wilcock via Creative Commons http://flic.kr/p/aDJVzT
  10. 10. Photo Credit: Matti Mattila via Creative Commons http://flic.kr/p/buX4Sb
  11. 11. http://foundation.zurb.com/
  12. 12. http://foundation.zurb.com/
  13. 13. http://foundation.zurb.com/
  14. 14. http://foundation.zurb.com/
  15. 15. http://foundation.zurb.com/grid-example1.php
  16. 16. http://bonbonsbakery.com.au/
  17. 17. http://bonbonsbakery.com.au/
  18. 18. http://bonbonsbakery.com.au/
  19. 19. http://bonbonsbakery.com.au/
  20. 20. <div class="row"> <div class="twelve columns"> ... </div></div><div class="row"> <div class="three columns"> ... </div> <div class="nine columns"> ... </div></div>
  21. 21. class="show-for-xlarge"class="show-for-large"class="show-for-large-up" (etc.)class="hide-for-xlarge"class="show-for-landscape"class="show-for-portrait"class="show-for-touch"class="hide-for-touch"
  22. 22. Design Process
  23. 23. Photo Credit: Clarissa Peterson via Creative Commons http://flic.kr/p/35Ahx
  24. 24. Design Develop
  25. 25. Photo Credit: Chris Gladis via Creative Commons http://flic.kr/p/rZVTg
  26. 26. DesignDevelop
  27. 27. Illustration credit: podluzny via Creative Commons http://flic.kr/p/cJJdzm
  28. 28. Responsive Prototypes
  29. 29. http://foundation.zurb.com/prototype-example2.php
  30. 30. http://foundation.zurb.com/prototype-example2.php
  31. 31. http://foundation.zurb.com/prototype-example2.php
  32. 32. http://foundation.zurb.com/prototype-example2.php
  33. 33. http://foundation.zurb.com/docs/typography.php
  34. 34. http://foundation.zurb.com/docs/forms.php
  35. 35. http://foundation.zurb.com/docs/buttons.php
  36. 36. http://twitter.github.com/bootstrap/index.html
  37. 37. http://www.getskeleton.com
  38. 38. http://stuffandnonsense.co.uk/projects/320andup/
  39. 39. Navigation Patterns
  40. 40. http://bradfrost.github.com/this-is-responsive/patterns.html
  41. 41. http://www.gravitatedesign.com
  42. 42. http://www.gravitatedesign.com
  43. 43. http://www.gravitatedesign.com
  44. 44. http://www.temple.edu/
  45. 45. http://www.temple.edu/
  46. 46. http://www.temple.edu/
  47. 47. Toggle Navigation
  48. 48. http://www.starbucks.com/
  49. 49. http://starbucks.com/
  50. 50. http://starbucks.com/
  51. 51. http://starbucks.com/
  52. 52. http://starbucks.com/
  53. 53. http://codepen.io/bradfrost/full/sHvaz
  54. 54. http://codepen.io/bradfrost/full/sHvaz
  55. 55. <a href="#menu" class="menu-link">Menu</a><nav class="" id="menu" role="navigation">! <ul>! ! <li><a href="#">Home</a></li>! ! <li><a href="#">About</a></li>! ! <li><a href="#">Products</a></li>! ! <li><a href="#">Services</a></li>! ! <li><a href="#">Contact</a></li>! </ul></nav>
  56. 56. http://codepen.io/bradfrost/full/sHvaz
  57. 57. <a href="#menu" class="menu-link">Menu</a><nav class="" id="menu" role="navigation">! <ul>! ! <li><a href="#">Home</a></li>! ! <li><a href="#">About</a></li>! ! <li><a href="#">Products</a></li>! ! <li><a href="#">Services</a></li>! ! <li><a href="#">Contact</a></li>! </ul></nav>
  58. 58. .js nav[role=navigation] {! overflow: hidden;! max-height: 0;}nav[role=navigation].active {! max-height: 15em;}
  59. 59. .js nav[role=navigation] {! overflow: hidden;! max-height: 0;}nav[role=navigation].active {! max-height: 15em;}
  60. 60. <script>(function() {$(document).ready(function() { $(body).addClass(js); var $menu = $(#menu), $menulink = $(.menu-link);$menulink.click(function() { $menulink.toggleClass(active); $menu.toggleClass(active); return false;});});})();</script>
  61. 61. http://codepen.io/bradfrost/full/sHvaz
  62. 62. http://codepen.io/bradfrost/full/sHvaz
  63. 63. @media screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! .js nav[role=navigation] {! ! max-height: none;! }}
  64. 64. @media screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! .js nav[role=navigation] {! ! max-height: none;! }}
  65. 65. @media screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! .js nav[role=navigation] {! ! max-height: none;! }}
  66. 66. Left Nav Flyout
  67. 67. http://www.emerilsrestaurants.com
  68. 68. http://www.emerilsrestaurants.com
  69. 69. http://www.emerilsrestaurants.com
  70. 70. Preprocessors
  71. 71. http://sass-lang.com/ and http://lesscss.org/
  72. 72. Syntactic SugarPhoto Credit: Umberto Salvagnin via Creative Commons http://flic.kr/p/dmtR5
  73. 73. Photo Credit: Rinina25 and Twice25 via Creative Commonshttp://commons.wikimedia.org/wiki/File:Saluzzo-Castello_della_Manta-mago.jpg
  74. 74. Sass
  75. 75. MathPhoto Credit: João Trindade via Creative Commons http://flic.kr/p/7DuvV4
  76. 76. .sidebar { width: percentage(360px / 960px);}
  77. 77. .sidebar { width: 37.5%;}
  78. 78. NestingPhoto Credit: Prem Sichanugrist via Creative Commons http://flic.kr/p/KPo5A
  79. 79. #navbar { width: 80%; height: 23px;}#navbar ul { list-style-type: none;}#navbar li { float: left;}
  80. 80. #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; }}
  81. 81. #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; }}
  82. 82. #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; }}
  83. 83. #navbar { width: 80%; height: 23px;}#navbar ul { list-style-type: none;}#navbar li { float: left;}
  84. 84. @media BubblingPhoto Credit: John McWhirter via Creative Commons http://flic.kr/p/7ujLsh
  85. 85. .profile-pic { float: left; width: 100px;}@media screen and (min-width: 320px) { .profile-pic { width: 250px; }}@media screen and (min-width: 1200px) { .profile-pic { float: none; }}
  86. 86. .profile-pic { float: left; width: 100px; @media screen and (min-width: 320px) { width: 250px; } @media screen and (min-width: 1200px) { float: none; }}
  87. 87. .profile-pic { float: left; width: 100px; @media screen and (min-width: 320px) { width: 250px; } @media screen and (min-width: 1200px) { float: none; }}
  88. 88. .profile-pic { float: left; width: 100px; @media screen and (min-width: 320px) { width: 250px; } @media screen and (min-width: 1200px) { float: none; }}
  89. 89. .profile-pic { float: left; width: 100px;}@media screen and (min-width: 320px) { .profile-pic { width: 250px; }}@media screen and (min-width: 1200px) { .profile-pic { float: none; }}
  90. 90. Variables
  91. 91. $break-small: 320px;$break-large: 1200px;.profile-pic { float: left; width: 100px; @media screen and (min-width: $break-small) { width: 250px; } @media screen and (min-width: $break-large) { float: none; }}
  92. 92. Polyfills
  93. 93. http://modernizr.com/
  94. 94. <html class=" js canvas canvastextgeolocation crosswindowmessaging no-websqldatabase indexeddb hashchangehistorymanagement draganddrop websocketsrgba hsla multiplebgs backgroundsizeborderimage borderradius boxshadow opacitycssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions videoaudio localstorage sessionstoragewebworkers applicationcache svg smilsvgclippaths fontface">
  95. 95. <html class=" js canvas canvastextgeolocation crosswindowmessaging no-websqldatabase indexeddb hashchangehistorymanagement draganddrop websocketsrgba hsla multiplebgs backgroundsizeborderimage borderradius boxshadow opacitycssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions videoaudio localstorage sessionstoragewebworkers applicationcache svg smilsvgclippaths fontface">
  96. 96. <HTML class=" js no-canvas no-canvastextno-geolocation no-crosswindowmessaging no-websqldatabase no-indexeddb no-hashchangeno-historymanagement draganddrop no-websockets no-rgba no-hsla no-multiplebgsno-backgroundsize no-borderimage no-borderradius no-boxshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface no-video no-audiono-localstorage no-sessionstorage no-webworkers no-applicationcache no-svg no-smil no-svgclippaths">
  97. 97. .no-cssgradients { ...}
  98. 98. https://github.com/scottjehl/Respond
  99. 99. <!--[if lte IE 8]><script src=”js/respond.min.js”/></script><![endif]-->
  100. 100. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  101. 101. Resources
  102. 102. 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/
  103. 103. 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/
  104. 104. 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 Responsive Navigation Solutions and Tutorials - August 2012http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/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/
  105. 105. PreprocessorsSass And LESS: An Introduction To CSS Preprocessors (Steven Bradley) - April 2012http://www.vanseodesign.com/css/css-preprocessors/An Introduction To LESS, And Comparison To Sass (Jeremy Hixon) - September2011http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/Responsive Web Design in Sass: Using Media Queries in Sass 3.2 (Mason Wendell)- April 2012http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32Create faster fluid layouts with LESS (Paul Mist) - August 2012http://www.netmagazine.com/tutorials/create-faster-fluid-layouts-less
  106. 106. Books to ReadResponsive 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/
  107. 107. 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/
  108. 108. @clarissaclarissapeterson.com

×