Responsive Design Tools & Resources

Responsive Design
Tools & Resources
Baltimore Mobile Meetup - January 15, 2013
Refresh DC - January 17, 2013



                    Clarissa Peterson
                            @clarissa
What We’ll Cover:
       Overview
      Frameworks
  Navigation Patterns
     Preprocessors
   Responsive Images
 Responsive Data Tables
        Polyfills
“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
Responsive Design Tools & Resources
Responsive Design Tools & Resources
Responsive Design Tools & Resources
http://www.usa.gov/
Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL
Responsive Web Design
http://bostonglobe.com
1. Flexible Grid
2. Flexible Images/Media
   3. Media Queries
1. Flexible Grid
2. Flexible Images/Media
   3. Media Queries
Responsive Design Tools & Resources
http://www.bostonglobe.com/
http://www.jsonline.com/
http://www.jsonline.com/
1. Flexible Grid
2. Flexible Images/Media
   3. Media Queries
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
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: 640px) {
  .section1, .section2 {
    float: left;
    width: 50%;
  }
}
@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/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>
<div class="row">
  <div class="twelve columns">
    ...
  </div>
</div>
<div class="row">
  <div class="three columns">
    ...
  </div>
  <div class="nine columns">
    ...
  </div>
</div>
<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/
Navigation Patterns
http://bradfrost.github.com/this-is-responsive/patterns.html
Top Navigation
http://www.gravitatedesign.com
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;
! }
}
http://contentsmagazine.com/
Toggle Navigation
http://starbucks.com/
http://bradfrost.github.com/this-is-responsive/patterns.html
<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>
<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://bradfrost.github.com/this-is-responsive/patterns.html
<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;
}
.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://bradfrost.github.com/this-is-responsive/patterns.html
@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
Three-Dimensional Menu
http://lab.hakim.se/meny/
http://lab.hakim.se/meny/
Preprocessors
http://sass-lang.com/ and 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;
  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;
}
.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;
  }
}
$main-color: #ce4dd6;
$style: solid;

#navbar {
  border-bottom: {
    color: $main-color;
    style: $style;
  }
}
$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) {
    width: 100px;
  }
  @media screen and (min-width: 1200px) {
    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) {
    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>
<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>
<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>
<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/
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>


<!-- Fallback content for non-JS browsers. Same img src as the
initial, unqualified source element. -->
  <noscript>
    <img src="/img/small.jpg" alt="Your alt text.">
  </noscript>
</div>
<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>


<!-- Fallback content for non-JS browsers. Same img src as the
initial, unqualified source element. -->
  <noscript>
    <img src="/img/small.jpg" alt="Your alt text.">
  </noscript>
</div>
<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>


<!-- Fallback content for non-JS browsers. Same img src as the
initial, unqualified source element. -->
  <noscript>
    <img src="/img/small.jpg" alt="Your alt text.">
  </noscript>
</div>
<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>


<!-- Fallback content for non-JS browsers. Same img src as the
initial, unqualified source element. -->
  <noscript>
    <img src="/img/small.jpg" alt="Your alt text.">
  </noscript>
</div>
<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>


<!-- Fallback content for non-JS browsers. Same img src as the
initial, unqualified source element. -->
  <noscript>
    <img src="/img/small.jpg" alt="Your alt text.">
  </noscript>
</div>
<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>


<!--[if (lt IE 9) & (!IEMobile)]>
  <div data-src="medium.jpg"></div>
<![endif]-->


<!-- Fallback content for non-JS browsers. Same img src as the
initial, unqualified source element. -->
  <noscript>
    <img src="/img/small.jpg" alt="Your alt text.">
  </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>
<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>
<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>
<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/
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/
<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
<!--[if lte IE 8]>
<script src=”js/respond.min.js”/></script>
<![endif]-->
Resources
Frameworks


Which Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained
(Joshua Johnson) - August 2012
http://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
2012
http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-
boilerplates-worth-considering/
Navigation


Responsive Navigation Patterns (Brad Frost) - February 2012
http://bradfrostweb.com/blog/web/responsive-nav-patterns/

Complex Navigation Patterns for Responsive Design (Brad Frost) - August 2012
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-
design/

10 Responsive Navigation Solutions and Tutorials - August 2012
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-
tutorials/

10 Tips How To Handle Responsive Navigation Menus Successfully (Sabina Idler) -
October 2012
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 2012
http://www.vanseodesign.com/css/css-preprocessors/

An Introduction To LESS, And Comparison To Sass (Jeremy Hixon) - September
2011
http://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 2012
http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-
queries-in-sass-32

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


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

Retina.js
http://retinajs.com/

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


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

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

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

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

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


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

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

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

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

jQuery Mobile Column Toggle Table Mode
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 2012
http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-
foundation/

Design Process In The Responsive Age (Drew Clemons) - May 2012
http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-
age/

Responsive Web Design Sketch Sheets
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets

Style Tiles
http://styletil.es/
Books to Read


Responsive Web Design
Ethan 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 Enhancement
Aaron Gustafson (2011)
http://easy-readers.net/books/adaptive-web-design/

Implementing Responsive Design: Building sites for an anywhere, everywhere web
Tim Kadlec (2012)
http://www.implementingresponsivedesign.com/
Other Websites & Misc.


@RWD
links about responsive design (Ethan Marcotte)
https://twitter.com/RWD

Future Friendly
making things that are future-friendly
http://futurefriend.ly/

Brad Frost
blog that covers responsive design
http://bradfrostweb.com/blog/

Mediaqueri.es
inspirational websites using media queries and responsive web design
http://mediaqueri.es/
Clarissa Peterson
   @clarissa
1 of 177

More Related Content

What's hot(20)

Responsive Web Design & TypographyResponsive Web Design & Typography
Responsive Web Design & Typography
Danny Calders3.1K views
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
Clarissa Peterson83.3K views
Responsive Web DesignResponsive Web Design
Responsive Web Design
Tung Dang1.4K views
Responsive Design Heaven & HellResponsive Design Heaven & Hell
Responsive Design Heaven & Hell
Clarissa Peterson7.1K views
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
Clarissa Peterson30.7K views
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive Websites
Clarissa Peterson10.4K views
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites Faster
Andy Davies13.8K views
The web is too slow The web is too slow
The web is too slow
Andy Davies15.2K views
Responsive Design for Non-TechiesResponsive Design for Non-Techies
Responsive Design for Non-Techies
Malcolm Jones6.7K views
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites Faster
Andy Davies23.3K views
Responsive webdesignResponsive webdesign
Responsive webdesign
Bart De Waele4.7K views
Responsive Email Design and DevelopmentResponsive Email Design and Development
Responsive Email Design and Development
ladyheatherly1.6K views

Similar to Responsive Design Tools & Resources(20)

Layout with CSSLayout with CSS
Layout with CSS
Mike Crabb1.5K views
Core CSS3Core CSS3
Core CSS3
Rachel Andrew2.3K views
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
Denise Jacobs18.4K views
Beyond CSS ArchitectureBeyond CSS Architecture
Beyond CSS Architecture
拓樹 谷11.2K views
HTML5 & CSS3 FlagHTML5 & CSS3 Flag
HTML5 & CSS3 Flag
Christopher Schmitt2.7K views
Sass & bootstrapSass & bootstrap
Sass & bootstrap
Amir Barylko1.4K views
Wrangling the CSS Beast  with SassWrangling the CSS Beast  with Sass
Wrangling the CSS Beast with Sass
Rob Friesel1.4K views
HTML5 and CSS3 RefresherHTML5 and CSS3 Refresher
HTML5 and CSS3 Refresher
Ivano Malavolta4.5K views
SassSass
Sass
Bram Verdyck904 views
css.pptcss.ppt
css.ppt
DakshPratapSingh14 views
css.pptcss.ppt
css.ppt
Sana90375432 views
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
Rachel Andrew2K views

More from Clarissa Peterson(6)

Alt Text Is Your SuperpowerAlt Text Is Your Superpower
Alt Text Is Your Superpower
Clarissa Peterson17 views
Making the Web EasyMaking the Web Easy
Making the Web Easy
Clarissa Peterson23.6K views
Responsive ColorResponsive Color
Responsive Color
Clarissa Peterson21.6K views
Responsive Typography IIResponsive Typography II
Responsive Typography II
Clarissa Peterson46.8K views

Responsive Design Tools & Resources