1. Responsive Design
Tools & Resources
Baltimore Mobile Meetup - January 15, 2013
Refresh DC - January 17, 2013
Clarissa Peterson
@clarissa

2. What We’ll Cover:
Overview
Frameworks
Navigation Patterns
Preprocessors
Responsive Images
Responsive Data Tables
Polyfills

3. “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

4. Before

8. http://www.usa.gov/

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

10. Responsive Web Design

11. http://bostonglobe.com

12. 1. Flexible Grid
2. Flexible Images/Media
3. Media Queries

13. 1. Flexible Grid
2. Flexible Images/Media
3. Media Queries

15. http://www.bostonglobe.com/

16. http://www.jsonline.com/

17. http://www.jsonline.com/

18. 1. Flexible Grid
2. Flexible Images/Media
3. Media Queries

19. http://www.unitedpixelworkers.com/

20. http://www.unitedpixelworkers.com/

21. http://www.unitedpixelworkers.com/

22. http://www.unitedpixelworkers.com/

23. http://www.unitedpixelworkers.com/

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

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

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

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

28. Frameworks

29. http://foundation.zurb.com/

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

31. http://www.zurb.com/soapbox

32. http://foundation.zurb.com/

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

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

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

36. Responsive

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

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

39. class="show-for-landscape"
class="show-for-portrait"
class="show-for-touch"
class="hide-for-touch"

40. Prototyping

41. Design
Develop

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

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

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

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

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

47. http://www.getskeleton.com

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

49. http://html5boilerplate.com/

50. Navigation Patterns

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

52. Top Navigation

53. http://www.gravitatedesign.com

54. http://www.temple.edu/

55. Footer Anchor

56. http://contentsmagazine.com/

57. http://contentsmagazine.com/

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

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

60. http://contentsmagazine.com/

61. Toggle Navigation

62. http://starbucks.com/

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

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

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

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

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

68. .js nav[role=navigation] {
! overflow: hidden;
! max-height: 0;
}
nav[role=navigation].active {
! max-height: 15em;
}

69. .js nav[role=navigation] {
! overflow: hidden;
! max-height: 0;
}
nav[role=navigation].active {
! max-height: 15em;
}

70. .js nav[role=navigation] {
! overflow: hidden;
! max-height: 0;
}
nav[role=navigation].active {
! max-height: 15em;
}

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

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

73. @media screen and (min-width: 48.25em) {
! a.menu-link {
! ! display: none;
! }
! .js nav[role=navigation] {
! ! max-height: none;
! }
}

74. @media screen and (min-width: 48.25em) {
! a.menu-link {
! ! display: none;
! }
! .js nav[role=navigation] {
! ! max-height: none;
! }
}

75. @media screen and (min-width: 48.25em) {
! a.menu-link {
! ! display: none;
! }
! .js nav[role=navigation] {
! ! max-height: none;
! }
}

76. Left Nav Flyout

77. http://www.emerilsrestaurants.com

78. Three-Dimensional Menu

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

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

81. Preprocessors

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

83. Compilers

84. Sass

85. Nesting

86. #navbar {
width: 80%;
height: 23px;
}
#navbar ul {
list-style-type: none;
}
#navbar li {
float: left;
}

87. #navbar {
width: 80%;
height: 23px;
ul {
list-style-type: none;
}
li {
float: left;
}
}

88. #navbar {
width: 80%;
height: 23px;
ul {
list-style-type: none;
}
li {
float: left;
}
}

89. #navbar {
width: 80%;
height: 23px;
ul {
list-style-type: none;
}
li {
float: left;
}
}

90. #navbar {
width: 80%;
height: 23px;
ul {
list-style-type: none;
}
li {
float: left;
}
}

91. #navbar {
width: 80%;
height: 23px;
}
#navbar ul {
list-style-type: none;
}
#navbar li {
float: left;
}

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

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

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

95. Variables

96. $main-color: #ce4dd6;
$style: solid;
#navbar {
border-bottom: {
color: $main-color;
style: $style;
}
}

97. $main-color: #ce4dd6;
$style: solid;
#navbar {
border-bottom: {
color: $main-color;
style: $style;
}
}

98. $main-color: #ce4dd6;
$style: solid;
#navbar {
border-bottom: {
color: $main-color;
style: $style;
}
}

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

100. Mixins

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

102. @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; }

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

104. Math

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

106. .sidebar {
width: 37.5%;
}

107. @media Bubbling

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

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

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

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

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

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

114. $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;
}
}

115. Responsive Images

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

117. Performance

118. <picture>

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

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

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

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

123. Different Images

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

125. Picturefill

126. What’s a Polyfill?

127. https://github.com/scottjehl/picturefill

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

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

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

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

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

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

134. HD/Retina

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

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

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

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

139. Adaptive Images

140. http://adaptive-images.com/

141. Apache & PHP

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

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

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

145. .htaccess

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

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

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

149. http://adaptive-images.com/

150. Responsive Data Tables

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

152. <link rel="stylesheet" href="responsive-
tables.css">
<script src="responsive-tables.js">
</script>

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

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

155. @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%;
! }

156. ! 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"; }
}

157. Polyfills

158. http://modernizr.com/

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

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

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

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

163. .no-boxshadow {
...
}

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

165. https://github.com/scottjehl/Respond

166. <!--[if lte IE 8]>
<script src=”js/respond.min.js”/></script>
<![endif]-->

167. Resources

168. 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/

169. 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/

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

171. Other Image Solutions
Responsive Images
https://github.com/filamentgroup/Responsive-Images
Retina.js
http://retinajs.com/
FitVids.js (video)
http://fitvidsjs.com/

172. 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/

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

174. 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/

175. 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/

176. 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/

177. Clarissa Peterson
@clarissa