Successfully reported this slideshow.

Responsive Design in the Real World

15

Share

Loading in …3
×
1 of 108
1 of 108

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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. Design Develop
  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 Sugar Photo Credit: Umberto Salvagnin via Creative Commons http://flic.kr/p/dmtR5
  73. 73. Photo Credit: Rinina25 and Twice25 via Creative Commons http://commons.wikimedia.org/wiki/File:Saluzzo-Castello_della_Manta-mago.jpg
  74. 74. Sass
  75. 75. Math Photo 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. Nesting Photo 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 Bubbling Photo 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 canvastext geolocation crosswindowmessaging no- websqldatabase indexeddb hashchange historymanagement draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients no- cssreflections csstransforms no- csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache svg smil svgclippaths fontface">
  95. 95. <html class=" js canvas canvastext geolocation crosswindowmessaging no- websqldatabase indexeddb hashchange historymanagement draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients no- cssreflections csstransforms no- csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache svg smil svgclippaths fontface">
  96. 96. <HTML class=" js no-canvas no-canvastext no-geolocation no-crosswindowmessaging no- websqldatabase no-indexeddb no-hashchange no-historymanagement draganddrop no- websockets no-rgba no-hsla no-multiplebgs no-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-audio no-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. 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/
  103. 103. 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/
  104. 104. 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 Responsive Navigation Solutions and Tutorials - August 2012 http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and- tutorials/ 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/
  105. 105. Preprocessors Sass And LESS: An Introduction To CSS Preprocessors (Steven Bradley) - April 2012 http://www.vanseodesign.com/css/css-preprocessors/ An Introduction To LESS, And Comparison To Sass (Jeremy Hixon) - September 2011 http://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 2012 http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media- queries-in-sass-32 Create faster fluid layouts with LESS (Paul Mist) - August 2012 http://www.netmagazine.com/tutorials/create-faster-fluid-layouts-less
  106. 106. Books to Read 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/
  107. 107. 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/
  108. 108. @clarissa clarissapeterson.com

×