Responsive Design Tools & Resources

Responsive DesignTools & ResourcesBaltimore Mobile Meetup - January 15, 2013

Refresh DC - January 17, 2013

Clarissa Peterson@clarissa

What We’ll Cover:Overview

FrameworksNavigation Patterns

PreprocessorsResponsive Images

Responsive Data TablesPolyfills

“It's not like our industry nailed web design before we started doing responsive design. It's still a work in progress.”

– Dan Willis@uxcrank

Before

http://www.usa.gov/

http://www.usa.gov

http://www.usa.gov

Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL

http://flic.kr/p/dtMQTL

http://flic.kr/p/dtMQTL

Responsive Web Design

http://bostonglobe.com



1. Flexible Grid2. Flexible Images/Media

3. Media Queries


3. Media Queries

http://www.bostonglobe.com/

http://www.bostonglobe.com

http://www.bostonglobe.com

http://www.jsonline.com/

http://www.jsonline.com


http://www.jsonline.com/




3. Media Queries

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com














@media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; }}



@media screen and (min-width: 40em) { .section1, .section2 { float: left; width: 50%; }}

Frameworks

http://foundation.zurb.com/

http://foundation.zurb.com


http://foundation.zurb.com/grid-example1.php



http://www.zurb.com/soapbox



http://foundation.zurb.com/



<div class="row"> <div class="twelve columns"> ... </div></div><div class="row"> <div class="three columns"> ... </div> <div class="nine columns"> ... </div></div>



Responsive

class="show-for-xlarge"class="show-for-large"class="show-for-large-up"class="show-for-medium"class="show-for-medium-down"class="show-for-small"

breakpoints at:767px, 1279px, 1441px

class="hide-for-xlarge"class="hide-for-large"class="hide-for-large-up"class="hide-for-medium"class="hide-for-medium-down"class="hide-for-small"

breakpoints at:767px, 1279px, 1441px

class="show-for-landscape"class="show-for-portrait"

class="show-for-touch"class="hide-for-touch"

Prototyping

Design

Develop

http://foundation.zurb.com/prototype-example2.php



http://foundation.zurb.com/docs/forms.php



http://foundation.zurb.com/docs/buttons.php



http://foundation.zurb.com/docs/typography.php



http://twitter.github.com/bootstrap/index.html



http://www.getskeleton.com



http://stuffandnonsense.co.uk/projects/320andup/



http://html5boilerplate.com/

http://html5boilerplate.com

http://html5boilerplate.com

Navigation Patterns

http://bradfrost.github.com/this-is-responsive/patterns.html



Top Navigation

http://www.gravitatedesign.com



http://www.temple.edu/

http://www.temple.edu

http://www.temple.edu

Footer Anchor

http://contentsmagazine.com/

http://contentsmagazine.com





<div id="site-nav">

<form> ... </form>

! <nav>

! ! <ul class="nav nav-primary">

! ! ! <li><a href="#">Archive</a></li>

! ! ! <li><a href="#">About</a></li>

! ! ! <li><a href="#">Write For Us</a></li>

! ! ! <li><a href="#">Subscribe</a></li>! ! !

! ! </ul>

! </nav>

</div>

@media screen and (min-width: 48em) {! #site-nav {! ! position: absolute;! ! top: -5em;! ! width: 100%;! ! z-index: 5;! }}




Toggle Navigation

http://starbucks.com/

http://starbucks.com

http://starbucks.com




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



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




@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



Three-Dimensional Menu

http://lab.hakim.se/meny/






Preprocessors

http://sass-lang.com/ and http://lesscss.org/

http://sass-lang.com

http://sass-lang.com

http://lesscss.org

http://lesscss.org

Compilers

Sass

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; }#navbar ul { list-style-type: none; }#navbar li { float: left; }

.fakeshadow { border-style: solid; border-left-width: 4px; border-left-color: #888; border-right-width: 2px; border-right-color: #ccc; }

.fakeshadow { border: { style: solid; left: { width: 4px; color: #888; } right: { width: 2px; color: #ccc; } }}

.fakeshadow { border-style: solid; border-left-width: 4px; border-left-color: #888; border-right-width: 2px; border-right-color: #ccc; }

Variables

$main-color: #ce4dd6;$style: solid;

#navbar { border-bottom: { color: $main-color; style: $style; }}





#navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; }

Mixins

#navbar li { -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; border-top-radius: 10px;}

#footer { -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; border-top-radius: 10px;}

@mixin rounded-top { -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; border-top-radius: 10px;}

#navbar li { @include rounded-top; }#footer { @include rounded-top; }

#navbar li { -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; border-top-radius: 10px;}

#footer { -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; border-top-radius: 10px;}

Math

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

.sidebar { width: 37.5%; }

@media Bubbling

.profile-pic { float: left; width: 250px; } @media screen and (max-width: 320px) { .profile-pic { width: 100px; } } @media screen and (min-width: 1200px) { .profile-pic { float: none; } }

.profile-pic { float: left; width: 250px; @media screen and (max-width: 320px) { width: 100px; } @media screen and (min-width: 1200px) { float: none; }}




.profile-pic { float: left; width: 250px; } @media screen and (max-width: 320px) { .profile-pic { width: 100px; } } @media screen and (min-width: 1200px) { .profile-pic { float: none; } }

$break-small: 320px;

$break-large: 1200px;

.profile-pic {

float: left;

width: 250px;

@media screen and (max-width: $break-small) {

width: 100px;

}

@media screen and (min-width: $break-large) {

float: none;

}

}

Responsive Images

img, object, video { max-width: 100%}

Performance

<picture>

<picture> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <img src="small-1.jpg"></picture>




Different Images

http://www.ottersurfboards.co.uk/

http://www.ottersurfboards.co.uk

http://www.ottersurfboards.co.uk

Picturefill

What’s a Polyfill?

https://github.com/scottjehl/picturefill



<div data-picture data-alt="Your alt text.">

<div data-src="/img/small.jpg"></div>

<div data-src="/img/medium.jpg" data-media="(min-width: 500px)"></div>

<div data-src="/img/large.jpg" data-media="(min-width: 1000px)"></div>



<noscript>

<img src="/img/small.jpg" alt="Your alt text.">

</noscript>

</div>






<noscript>


</noscript>

</div>






<noscript>


</noscript>

</div>






<noscript>


</noscript>

</div>






<noscript>


</noscript>

</div>








<noscript>


</noscript>

</div>

HD/Retina

<div data-src="medium.jpg" data-media="(min-width: 400px)"></div>

<div data-src="medium_x2.jpg" data-media="(min-width: 400px) and (min-device-pixel-ratio: 2.0)"></div>







Adaptive Images

http://adaptive-images.com/

http://adaptive-images.com


Apache & PHP

<?php

$resolutions = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels)

...

<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>

<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>

.htaccess

<IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On

RewriteCond %{REQUEST_URI} !assets

RewriteCond %{REQUEST_URI} !ai-cache

RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

</IfModule>

<IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On

RewriteCond %{REQUEST_URI} !assets

RewriteCond %{REQUEST_URI} !ai-cache

RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

</IfModule>

$resolutions = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels)

http://adaptive-images.com/



Responsive Data Tables

http://www.zurb.com/playground/responsive-tables



<link rel="stylesheet" href="responsive-tables.css">

<script src="responsive-tables.js"></script>

<table class="responsive"> <tr> …

http://css-tricks.com/examples/ResponsiveTables/responsive.php



@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

! /* Force table to not be like tables anymore */

! table, thead, tbody, th, td, tr {

! ! display: block;

! }

! /* Hide table headers (but not display: none;, for accessibility) */

! thead tr {

! ! position: absolute;

! ! top: -9999px;

! ! left: -9999px;

! }

! td {

! ! /* Behave like a "row" */

! ! border: none;

! ! border-bottom: 1px solid #eee;

! ! position: relative;

! ! padding-left: 50%;

! }

! td:before {

! ! /* Now like a table header */

! ! position: absolute;

! ! /* Top/left values mimic padding */

! ! top: 6px;

! ! left: 6px;

! ! width: 45%;

! ! padding-right: 10px;

! ! white-space: nowrap;

! }

! /* Label the data */

! td:nth-of-type(1):before { content: "First Name"; }

! td:nth-of-type(2):before { content: "Last Name"; }

! td:nth-of-type(3):before { content: "Job Title"; }

! td:nth-of-type(4):before { content: "Favorite Color"; }

! td:nth-of-type(5):before { content: "Wars of Trek?"; }

! td:nth-of-type(6):before { content: "Porn Name"; }

! td:nth-of-type(7):before { content: "Date of Birth"; }

! td:nth-of-type(8):before { content: "Dream Vacation City"; }

! td:nth-of-type(9):before { content: "GPA"; }

! td:nth-of-type(10):before { content: "Arbitrary Data"; }

}

Polyfills

http://modernizr.com/

http://modernizr.com

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

<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-boxshadow { ...}

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills



https://github.com/scottjehl/Respond





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/

http://designshack.net/articles/css/which-is-right-for-me-22-responsive-css-frameworks-and-boilerplates-explained/




http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/




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/

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/




http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/




http://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

http://www.vanseodesign.com/css/css-preprocessors/

http://www.vanseodesign.com/css/css-preprocessors/

http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/




http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32




http://www.netmagazine.com/tutorials/create-faster-fluid-layouts-less

http://www.netmagazine.com/tutorials/create-faster-fluid-layouts-less

Other Image Solutions

Responsive Imageshttps://github.com/filamentgroup/Responsive-Images

Retina.jshttp://retinajs.com/

FitVids.js (video)http://fitvidsjs.com/

https://github.com/filamentgroup/Responsive-Images

https://github.com/filamentgroup/Responsive-Images

http://retinajs.com

http://retinajs.com

http://fitvidsjs.com

http://fitvidsjs.com

Responsive Images

W3C Responsive Images Community Grouphttp://www.w3.org/community/respimg/

Which responsive images solution should you use? - May 2012http://css-tricks.com/which-responsive-images-solution-should-you-use/

Responsive Images and Web Standards at the Turning Point (Mat Marquis) - May 2012http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/

Mo’ Pixels Mo’ Problems (Dave Rupert) - September 2012http://www.alistapart.com/articles/mo-pixels-mo-problems/

Compressive Images (Scott Jehl) - October 2012http://filamentgroup.com/lab/rwd_img_compression/

http://www.w3.org/community/respimg/

http://www.w3.org/community/respimg/

http://css-tricks.com/which-responsive-images-solution-should-you-use/

http://css-tricks.com/which-responsive-images-solution-should-you-use/

http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/




http://www.alistapart.com/articles/mo-pixels-mo-problems/

http://www.alistapart.com/articles/mo-pixels-mo-problems/

http://filamentgroup.com/lab/rwd_img_compression/

http://filamentgroup.com/lab/rwd_img_compression/

Resources: Responsive Tables

A Responsive Design Approach for Complex, Multicolumn Data Tableshttp://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables/

Responsive Data Tables with jQueryhttp://mobifreaks.com/coding/responsive-data-tables-jquery/

Responsive Patterns: Table Patternshttp://bradfrost.github.com/this-is-responsive/patterns.html#tables

Responsive Data Tables and Screen Reader Accessibility (Jason Kiss) - August 2011http://www.accessibleculture.org/articles/2011/08/responsive-data-tables-and-screen-reader-accessibility/

jQuery Mobile Column Toggle Table Modehttp://jquerymobile.com/demos/1.3.0-beta.1/docs/tables/table-column-toggle.html

http://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables/




http://mobifreaks.com/coding/responsive-data-tables-jquery/

http://mobifreaks.com/coding/responsive-data-tables-jquery/

http://bradfrost.github.com/this-is-responsive/patterns.html#tables

http://bradfrost.github.com/this-is-responsive/patterns.html#tables

http://www.accessibleculture.org/articles/2011/08/responsive-data-tables-and-screen-reader-accessibility/




http://jquerymobile.com/demos/1.3.0-beta.1/docs/tables/table-column-toggle.html

http://jquerymobile.com/demos/1.3.0-beta.1/docs/tables/table-column-toggle.html

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/

http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/




http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/




http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets

http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets

http://styletil.es

http://styletil.es

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/

http://www.abookapart.com/products/responsive-web-design/

http://www.abookapart.com/products/responsive-web-design/

http://www.abookapart.com/products/mobile-first

http://www.abookapart.com/products/mobile-first

http://easy-readers.net/books/adaptive-web-design/

http://easy-readers.net/books/adaptive-web-design/

http://www.implementingresponsivedesign.com

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/

https://twitter.com/RWD

https://twitter.com/RWD

http://futurefriend.ly

http://futurefriend.ly

http://bradfrostweb.com/blog/

http://bradfrostweb.com/blog/

http://mediaqueri.es

http://mediaqueri.es

Clarissa Peterson@clarissa

Documents

Responsive Design Tools & Resources