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

Responsive Design in the Real World

on

  • 6,434 views

Presentation at Snow*Mobile conference in Madison, Wisconsin

Presentation at Snow*Mobile conference in Madison, Wisconsin

Statistics

Views

Total Views
6,434
Views on SlideShare
5,576
Embed Views
858

Actions

Likes
13
Downloads
136
Comments
0

8 Embeds 858

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Design in the Real World Responsive Design in the Real World Presentation Transcript

  • Responsive Design In the Real World@clarissa
  • What We’ll Cover: Frameworks Navigation Patterns Preprocessors Polyfills
  • Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL
  • Responsive Design
  • http://bostonglobe.com
  • http://bostonglobe.com
  • http://bostonglobe.com
  • Frameworks
  • Photo Credit: Garreth Wilcock via Creative Commons http://flic.kr/p/aDJVzT
  • Photo Credit: Matti Mattila via Creative Commons http://flic.kr/p/buX4Sb
  • http://foundation.zurb.com/
  • http://foundation.zurb.com/
  • http://foundation.zurb.com/
  • http://foundation.zurb.com/
  • http://foundation.zurb.com/grid-example1.php
  • http://bonbonsbakery.com.au/
  • http://bonbonsbakery.com.au/
  • http://bonbonsbakery.com.au/
  • http://bonbonsbakery.com.au/
  • <div class="row"> <div class="twelve columns"> ... </div></div><div class="row"> <div class="three columns"> ... </div> <div class="nine columns"> ... </div></div>
  • 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"
  • Design Process
  • Photo Credit: Clarissa Peterson via Creative Commons http://flic.kr/p/35Ahx
  • Design Develop
  • Photo Credit: Chris Gladis via Creative Commons http://flic.kr/p/rZVTg
  • DesignDevelop
  • Illustration credit: podluzny via Creative Commons http://flic.kr/p/cJJdzm
  • Responsive Prototypes
  • http://foundation.zurb.com/prototype-example2.php
  • http://foundation.zurb.com/prototype-example2.php
  • http://foundation.zurb.com/prototype-example2.php
  • http://foundation.zurb.com/prototype-example2.php
  • http://foundation.zurb.com/docs/typography.php
  • http://foundation.zurb.com/docs/forms.php
  • http://foundation.zurb.com/docs/buttons.php
  • http://twitter.github.com/bootstrap/index.html
  • http://www.getskeleton.com
  • http://stuffandnonsense.co.uk/projects/320andup/
  • Navigation Patterns
  • http://bradfrost.github.com/this-is-responsive/patterns.html
  • http://www.gravitatedesign.com
  • http://www.gravitatedesign.com
  • http://www.gravitatedesign.com
  • http://www.temple.edu/
  • http://www.temple.edu/
  • http://www.temple.edu/
  • Toggle Navigation
  • http://www.starbucks.com/
  • http://starbucks.com/
  • http://starbucks.com/
  • http://starbucks.com/
  • http://starbucks.com/
  • http://codepen.io/bradfrost/full/sHvaz
  • http://codepen.io/bradfrost/full/sHvaz
  • <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>
  • http://codepen.io/bradfrost/full/sHvaz
  • <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>
  • .js nav[role=navigation] {! overflow: hidden;! max-height: 0;}nav[role=navigation].active {! max-height: 15em;}
  • .js nav[role=navigation] {! overflow: hidden;! max-height: 0;}nav[role=navigation].active {! max-height: 15em;}
  • <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>
  • http://codepen.io/bradfrost/full/sHvaz
  • http://codepen.io/bradfrost/full/sHvaz
  • @media screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! .js nav[role=navigation] {! ! max-height: none;! }}
  • @media screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! .js nav[role=navigation] {! ! max-height: none;! }}
  • @media screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! .js nav[role=navigation] {! ! max-height: none;! }}
  • Left Nav Flyout
  • http://www.emerilsrestaurants.com
  • http://www.emerilsrestaurants.com
  • http://www.emerilsrestaurants.com
  • Preprocessors
  • http://sass-lang.com/ and http://lesscss.org/
  • Syntactic SugarPhoto Credit: Umberto Salvagnin via Creative Commons http://flic.kr/p/dmtR5
  • Photo Credit: Rinina25 and Twice25 via Creative Commonshttp://commons.wikimedia.org/wiki/File:Saluzzo-Castello_della_Manta-mago.jpg
  • Sass
  • MathPhoto Credit: João Trindade via Creative Commons http://flic.kr/p/7DuvV4
  • .sidebar { width: percentage(360px / 960px);}
  • .sidebar { width: 37.5%;}
  • NestingPhoto Credit: Prem Sichanugrist via Creative Commons http://flic.kr/p/KPo5A
  • #navbar { width: 80%; height: 23px;}#navbar ul { list-style-type: none;}#navbar li { float: left;}
  • #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; }}
  • #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; }}
  • #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; }}
  • #navbar { width: 80%; height: 23px;}#navbar ul { list-style-type: none;}#navbar li { float: left;}
  • @media BubblingPhoto Credit: John McWhirter via Creative Commons http://flic.kr/p/7ujLsh
  • .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; }}
  • .profile-pic { float: left; width: 100px; @media screen and (min-width: 320px) { width: 250px; } @media screen and (min-width: 1200px) { float: none; }}
  • .profile-pic { float: left; width: 100px; @media screen and (min-width: 320px) { width: 250px; } @media screen and (min-width: 1200px) { float: none; }}
  • .profile-pic { float: left; width: 100px; @media screen and (min-width: 320px) { width: 250px; } @media screen and (min-width: 1200px) { float: none; }}
  • .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; }}
  • Variables
  • $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; }}
  • Polyfills
  • http://modernizr.com/
  • <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">
  • <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">
  • <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">
  • .no-cssgradients { ...}
  • https://github.com/scottjehl/Respond
  • <!--[if lte IE 8]><script src=”js/respond.min.js”/></script><![endif]-->
  • https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  • Resources
  • 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/
  • 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/
  • 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/
  • 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
  • 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/
  • 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/
  • @clarissaclarissapeterson.com