Responsive DesignIn 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

Design

Develop

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/

Photo Credit: Umberto Salvagnin via Creative Commons http://flic.kr/p/dmtR5

Syntactic Sugar

Photo Credit: Rinina25 and Twice25 via Creative Commons http://commons.wikimedia.org/wiki/File:Saluzzo-Castello_della_Manta-mago.jpg

Sass

Photo Credit: João Trindade via Creative Commons http://flic.kr/p/7DuvV4

Math

.sidebar { width: percentage(360px / 960px);}

.sidebar { width: 37.5%; }

Photo Credit: Prem Sichanugrist via Creative Commons http://flic.kr/p/KPo5A

Nesting

#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; }

Photo Credit: John McWhirter via Creative Commons http://flic.kr/p/7ujLsh

@media Bubbling

.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 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">

<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">

<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">

.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

Frameworks

Which 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 - August 2012http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/

Prototyping & Design Process

Dive 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-sheets

Style Tileshttp://styletil.es/

Navigation

Responsive 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/

Preprocessors

Sass 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) - September 2011http://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-32

Create faster fluid layouts with LESS (Paul Mist) - August 2012http://www.netmagazine.com/tutorials/create-faster-fluid-layouts-less

Books to Read

Responsive Web DesignEthan 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 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/RWD

Future 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/

@clarissa clarissapeterson.com