Your SlideShare is downloading. ×
Responsive Design in the Real World
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Design in the Real World

8,828
views

Published on

Presentation at Snow*Mobile conference in Madison, Wisconsin

Presentation at Snow*Mobile conference in Madison, Wisconsin

Published in: Design

0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,828
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
143
Comments
0
Likes
13
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. Responsive Design In the Real World@clarissa
  • 2. What We’ll Cover: Frameworks Navigation Patterns Preprocessors Polyfills
  • 3. Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL
  • 4. Responsive Design
  • 5. http://bostonglobe.com
  • 6. http://bostonglobe.com
  • 7. http://bostonglobe.com
  • 8. Frameworks
  • 9. Photo Credit: Garreth Wilcock via Creative Commons http://flic.kr/p/aDJVzT
  • 10. Photo Credit: Matti Mattila via Creative Commons http://flic.kr/p/buX4Sb
  • 11. http://foundation.zurb.com/
  • 12. http://foundation.zurb.com/
  • 13. http://foundation.zurb.com/
  • 14. http://foundation.zurb.com/
  • 15. http://foundation.zurb.com/grid-example1.php
  • 16. http://bonbonsbakery.com.au/
  • 17. http://bonbonsbakery.com.au/
  • 18. http://bonbonsbakery.com.au/
  • 19. http://bonbonsbakery.com.au/
  • 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. 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. Design Process
  • 23. Photo Credit: Clarissa Peterson via Creative Commons http://flic.kr/p/35Ahx
  • 24. Design Develop
  • 25. Photo Credit: Chris Gladis via Creative Commons http://flic.kr/p/rZVTg
  • 26. DesignDevelop
  • 27. Illustration credit: podluzny via Creative Commons http://flic.kr/p/cJJdzm
  • 28. Responsive Prototypes
  • 29. http://foundation.zurb.com/prototype-example2.php
  • 30. http://foundation.zurb.com/prototype-example2.php
  • 31. http://foundation.zurb.com/prototype-example2.php
  • 32. http://foundation.zurb.com/prototype-example2.php
  • 33. http://foundation.zurb.com/docs/typography.php
  • 34. http://foundation.zurb.com/docs/forms.php
  • 35. http://foundation.zurb.com/docs/buttons.php
  • 36. http://twitter.github.com/bootstrap/index.html
  • 37. http://www.getskeleton.com
  • 38. http://stuffandnonsense.co.uk/projects/320andup/
  • 39. Navigation Patterns
  • 40. http://bradfrost.github.com/this-is-responsive/patterns.html
  • 41. http://www.gravitatedesign.com
  • 42. http://www.gravitatedesign.com
  • 43. http://www.gravitatedesign.com
  • 44. http://www.temple.edu/
  • 45. http://www.temple.edu/
  • 46. http://www.temple.edu/
  • 47. Toggle Navigation
  • 48. http://www.starbucks.com/
  • 49. http://starbucks.com/
  • 50. http://starbucks.com/
  • 51. http://starbucks.com/
  • 52. http://starbucks.com/
  • 53. http://codepen.io/bradfrost/full/sHvaz
  • 54. http://codepen.io/bradfrost/full/sHvaz
  • 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. http://codepen.io/bradfrost/full/sHvaz
  • 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. .js nav[role=navigation] {! overflow: hidden;! max-height: 0;}nav[role=navigation].active {! max-height: 15em;}
  • 59. .js nav[role=navigation] {! overflow: hidden;! max-height: 0;}nav[role=navigation].active {! max-height: 15em;}
  • 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. http://codepen.io/bradfrost/full/sHvaz
  • 62. http://codepen.io/bradfrost/full/sHvaz
  • 63. @media screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! .js nav[role=navigation] {! ! max-height: none;! }}
  • 64. @media screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! .js nav[role=navigation] {! ! max-height: none;! }}
  • 65. @media screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! .js nav[role=navigation] {! ! max-height: none;! }}
  • 66. Left Nav Flyout
  • 67. http://www.emerilsrestaurants.com
  • 68. http://www.emerilsrestaurants.com
  • 69. http://www.emerilsrestaurants.com
  • 70. Preprocessors
  • 71. http://sass-lang.com/ and http://lesscss.org/
  • 72. Syntactic SugarPhoto Credit: Umberto Salvagnin via Creative Commons http://flic.kr/p/dmtR5
  • 73. Photo Credit: Rinina25 and Twice25 via Creative Commonshttp://commons.wikimedia.org/wiki/File:Saluzzo-Castello_della_Manta-mago.jpg
  • 74. Sass
  • 75. MathPhoto Credit: João Trindade via Creative Commons http://flic.kr/p/7DuvV4
  • 76. .sidebar { width: percentage(360px / 960px);}
  • 77. .sidebar { width: 37.5%;}
  • 78. NestingPhoto Credit: Prem Sichanugrist via Creative Commons http://flic.kr/p/KPo5A
  • 79. #navbar { width: 80%; height: 23px;}#navbar ul { list-style-type: none;}#navbar li { float: left;}
  • 80. #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; }}
  • 81. #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; }}
  • 82. #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; }}
  • 83. #navbar { width: 80%; height: 23px;}#navbar ul { list-style-type: none;}#navbar li { float: left;}
  • 84. @media BubblingPhoto Credit: John McWhirter via Creative Commons http://flic.kr/p/7ujLsh
  • 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. .profile-pic { float: left; width: 100px; @media screen and (min-width: 320px) { width: 250px; } @media screen and (min-width: 1200px) { float: none; }}
  • 87. .profile-pic { float: left; width: 100px; @media screen and (min-width: 320px) { width: 250px; } @media screen and (min-width: 1200px) { float: none; }}
  • 88. .profile-pic { float: left; width: 100px; @media screen and (min-width: 320px) { width: 250px; } @media screen and (min-width: 1200px) { float: none; }}
  • 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. Variables
  • 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. Polyfills
  • 93. http://modernizr.com/
  • 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. <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. <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. .no-cssgradients { ...}
  • 98. https://github.com/scottjehl/Respond
  • 99. <!--[if lte IE 8]><script src=”js/respond.min.js”/></script><![endif]-->
  • 100. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  • 101. Resources
  • 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. 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. 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. 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. 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. 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. @clarissaclarissapeterson.com