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

Like this? Share it with your network

Share

Responsive Design in the Real World

  • 7,411 views
Uploaded on

Presentation at Snow*Mobile conference in Madison, Wisconsin

Presentation at Snow*Mobile conference in Madison, Wisconsin

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,411
On Slideshare
6,549
From Embeds
862
Number of Embeds
8

Actions

Shares
Downloads
139
Comments
0
Likes
13

Embeds 862

http://www.conseilsmarketing.com 590
https://twitter.com 127
http://www.iphone-entreprise.com 91
http://www.scoop.it 23
http://lanyrd.com 10
http://eventifier.co 9
http://www.clarissapeterson.com 7
http://kred.com 5

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