Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Design Tools & Resources

4,951 views

Published on

  • Hello there! Get Your Professional Job-Winning Resume Here! http://bit.ly/topresum
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Responsive Design Tools & Resources

  1. 1. Responsive DesignTools & ResourcesBaltimore Mobile Meetup - January 15, 2013Refresh DC - January 17, 2013 Clarissa Peterson @clarissa
  2. 2. What We’ll Cover: Overview Frameworks Navigation Patterns Preprocessors Responsive Images Responsive Data Tables Polyfills
  3. 3. “Its not like our industry nailed webdesign before we started doingresponsive design. Its still a work inprogress.” – Dan Willis @uxcrank
  4. 4. Before
  5. 5. http://www.usa.gov/
  6. 6. Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL
  7. 7. Responsive Web Design
  8. 8. http://bostonglobe.com
  9. 9. 1. Flexible Grid2. Flexible Images/Media 3. Media Queries
  10. 10. 1. Flexible Grid2. Flexible Images/Media 3. Media Queries
  11. 11. http://www.bostonglobe.com/
  12. 12. http://www.jsonline.com/
  13. 13. http://www.jsonline.com/
  14. 14. 1. Flexible Grid2. Flexible Images/Media 3. Media Queries
  15. 15. http://www.unitedpixelworkers.com/
  16. 16. http://www.unitedpixelworkers.com/
  17. 17. http://www.unitedpixelworkers.com/
  18. 18. http://www.unitedpixelworkers.com/
  19. 19. http://www.unitedpixelworkers.com/
  20. 20. @media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; }}
  21. 21. @media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; }}
  22. 22. @media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; }}
  23. 23. @media screen and (min-width: 40em) { .section1, .section2 { float: left; width: 50%; }}
  24. 24. Frameworks
  25. 25. http://foundation.zurb.com/
  26. 26. http://foundation.zurb.com/grid-example1.php
  27. 27. http://www.zurb.com/soapbox
  28. 28. http://foundation.zurb.com/
  29. 29. <div class="row"> <div class="twelve columns"> ... </div></div><div class="row"> <div class="three columns"> ... </div> <div class="nine columns"> ... </div></div>
  30. 30. <div class="row"> <div class="twelve columns"> ... </div></div><div class="row"> <div class="three columns"> ... </div> <div class="nine columns"> ... </div></div>
  31. 31. <div class="row"> <div class="twelve columns"> ... </div></div><div class="row"> <div class="three columns"> ... </div> <div class="nine columns"> ... </div></div>
  32. 32. Responsive
  33. 33. 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
  34. 34. 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
  35. 35. class="show-for-landscape"class="show-for-portrait"class="show-for-touch"class="hide-for-touch"
  36. 36. Prototyping
  37. 37. DesignDevelop
  38. 38. http://foundation.zurb.com/prototype-example2.php
  39. 39. http://foundation.zurb.com/docs/forms.php
  40. 40. http://foundation.zurb.com/docs/buttons.php
  41. 41. http://foundation.zurb.com/docs/typography.php
  42. 42. http://twitter.github.com/bootstrap/index.html
  43. 43. http://www.getskeleton.com
  44. 44. http://stuffandnonsense.co.uk/projects/320andup/
  45. 45. http://html5boilerplate.com/
  46. 46. Navigation Patterns
  47. 47. http://bradfrost.github.com/this-is-responsive/patterns.html
  48. 48. Top Navigation
  49. 49. http://www.gravitatedesign.com
  50. 50. http://www.temple.edu/
  51. 51. Footer Anchor
  52. 52. http://contentsmagazine.com/
  53. 53. http://contentsmagazine.com/
  54. 54. <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>
  55. 55. @media screen and (min-width: 48em) {! #site-nav {! ! position: absolute;! ! top: -5em;! ! width: 100%;! ! z-index: 5;! }}
  56. 56. http://contentsmagazine.com/
  57. 57. Toggle Navigation
  58. 58. http://starbucks.com/
  59. 59. http://bradfrost.github.com/this-is-responsive/patterns.html
  60. 60. <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>
  61. 61. <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>
  62. 62. http://bradfrost.github.com/this-is-responsive/patterns.html
  63. 63. <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>
  64. 64. .js nav[role=navigation] {! overflow: hidden;! max-height: 0;}nav[role=navigation].active {! max-height: 15em;}
  65. 65. .js nav[role=navigation] {! overflow: hidden;! max-height: 0;}nav[role=navigation].active {! max-height: 15em;}
  66. 66. .js nav[role=navigation] {! overflow: hidden;! max-height: 0;}nav[role=navigation].active {! max-height: 15em;}
  67. 67. <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>
  68. 68. http://bradfrost.github.com/this-is-responsive/patterns.html
  69. 69. @media screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! .js nav[role=navigation] {! ! max-height: none;! }}
  70. 70. @media screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! .js nav[role=navigation] {! ! max-height: none;! }}
  71. 71. @media screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! .js nav[role=navigation] {! ! max-height: none;! }}
  72. 72. Left Nav Flyout
  73. 73. http://www.emerilsrestaurants.com
  74. 74. Three-Dimensional Menu
  75. 75. http://lab.hakim.se/meny/
  76. 76. http://lab.hakim.se/meny/
  77. 77. Preprocessors
  78. 78. http://sass-lang.com/ and http://lesscss.org/
  79. 79. Compilers
  80. 80. Sass
  81. 81. Nesting
  82. 82. #navbar { width: 80%; height: 23px;}#navbar ul { list-style-type: none;}#navbar li { float: left;}
  83. 83. #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; }}
  84. 84. #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; }}
  85. 85. #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; }}
  86. 86. #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; }}
  87. 87. #navbar { width: 80%; height: 23px;}#navbar ul { list-style-type: none;}#navbar li { float: left;}
  88. 88. .fakeshadow { border-style: solid; border-left-width: 4px; border-left-color: #888; border-right-width: 2px; border-right-color: #ccc;}
  89. 89. .fakeshadow { border: { style: solid; left: { width: 4px; color: #888; } right: { width: 2px; color: #ccc; } }}
  90. 90. .fakeshadow { border-style: solid; border-left-width: 4px; border-left-color: #888; border-right-width: 2px; border-right-color: #ccc;}
  91. 91. Variables
  92. 92. $main-color: #ce4dd6;$style: solid;#navbar { border-bottom: { color: $main-color; style: $style; }}
  93. 93. $main-color: #ce4dd6;$style: solid;#navbar { border-bottom: { color: $main-color; style: $style; }}
  94. 94. $main-color: #ce4dd6;$style: solid;#navbar { border-bottom: { color: $main-color; style: $style; }}
  95. 95. #navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid;}
  96. 96. Mixins
  97. 97. #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;}
  98. 98. @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; }
  99. 99. #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;}
  100. 100. Math
  101. 101. .sidebar { width: percentage(360px / 960px);}
  102. 102. .sidebar { width: 37.5%;}
  103. 103. @media Bubbling
  104. 104. .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; }}
  105. 105. .profile-pic { float: left; width: 250px; @media screen and (max-width: 320px) { width: 100px; } @media screen and (min-width: 1200px) { float: none; }}
  106. 106. .profile-pic { float: left; width: 250px; @media screen and (max-width: 320px) { width: 100px; } @media screen and (min-width: 1200px) { float: none; }}
  107. 107. .profile-pic { float: left; width: 250px; @media screen and (max-width: 320px) { width: 100px; } @media screen and (min-width: 1200px) { float: none; }}
  108. 108. .profile-pic { float: left; width: 250px; @media screen and (max-width: 320px) { width: 100px; } @media screen and (min-width: 1200px) { float: none; }}
  109. 109. .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; }}
  110. 110. $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; }}
  111. 111. Responsive Images
  112. 112. img, object, video { max-width: 100%}
  113. 113. Performance
  114. 114. <picture>
  115. 115. <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>
  116. 116. <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>
  117. 117. <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>
  118. 118. <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>
  119. 119. Different Images
  120. 120. http://www.ottersurfboards.co.uk/
  121. 121. Picturefill
  122. 122. What’s a Polyfill?
  123. 123. https://github.com/scottjehl/picturefill
  124. 124. <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 theinitial, unqualified source element. --> <noscript> <img src="/img/small.jpg" alt="Your alt text."> </noscript></div>
  125. 125. <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 theinitial, unqualified source element. --> <noscript> <img src="/img/small.jpg" alt="Your alt text."> </noscript></div>
  126. 126. <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 theinitial, unqualified source element. --> <noscript> <img src="/img/small.jpg" alt="Your alt text."> </noscript></div>
  127. 127. <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 theinitial, unqualified source element. --> <noscript> <img src="/img/small.jpg" alt="Your alt text."> </noscript></div>
  128. 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 theinitial, unqualified source element. --> <noscript> <img src="/img/small.jpg" alt="Your alt text."> </noscript></div>
  129. 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><!--[if (lt IE 9) & (!IEMobile)]> <div data-src="medium.jpg"></div><![endif]--><!-- Fallback content for non-JS browsers. Same img src as theinitial, unqualified source element. --> <noscript> <img src="/img/small.jpg" alt="Your alt text."> </noscript></div>
  130. 130. HD/Retina
  131. 131. <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>
  132. 132. <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>
  133. 133. <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>
  134. 134. <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>
  135. 135. Adaptive Images
  136. 136. http://adaptive-images.com/
  137. 137. Apache & PHP
  138. 138. <?php$resolutions = array(1382, 992, 768,480); // the resolution break-points touse (screen widths, in pixels)...
  139. 139. <script>document.cookie=resolution=+Math.max(screen.width,screen.height)+;path=/;</script>
  140. 140. <script>document.cookie=resolution=+Math.max(screen.width,screen.height)+;path=/;</script>
  141. 141. .htaccess
  142. 142. <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>
  143. 143. <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>
  144. 144. $resolutions = array(1382, 992, 768,480); // the resolution break-points touse (screen widths, in pixels)
  145. 145. http://adaptive-images.com/
  146. 146. Responsive Data Tables
  147. 147. http://www.zurb.com/playground/responsive-tables
  148. 148. <link rel="stylesheet" href="responsive-tables.css"><script src="responsive-tables.js"></script>
  149. 149. <table class="responsive"> <tr> …
  150. 150. http://css-tricks.com/examples/ResponsiveTables/responsive.php
  151. 151. @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%;! }
  152. 152. ! 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"; }}
  153. 153. Polyfills
  154. 154. http://modernizr.com/
  155. 155. <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">
  156. 156. <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">
  157. 157. <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">
  158. 158. <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">
  159. 159. .no-boxshadow { ...}
  160. 160. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  161. 161. https://github.com/scottjehl/Respond
  162. 162. <!--[if lte IE 8]><script src=”js/respond.min.js”/></script><![endif]-->
  163. 163. Resources
  164. 164. 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/
  165. 165. 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/
  166. 166. 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
  167. 167. Other Image SolutionsResponsive Imageshttps://github.com/filamentgroup/Responsive-ImagesRetina.jshttp://retinajs.com/FitVids.js (video)http://fitvidsjs.com/
  168. 168. Responsive ImagesW3C 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) - May2012http://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/
  169. 169. Resources: Responsive TablesA 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#tablesResponsive 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
  170. 170. 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/
  171. 171. 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/
  172. 172. 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/
  173. 173. Clarissa Peterson @clarissa

×