Successfully reported this slideshow.

Responsive Design Tools & Resources

8

Share

Upcoming SlideShare
Responsive Design Workshop
Responsive Design Workshop
Loading in …3
×
1 of 177
1 of 177

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Responsive Design Tools & Resources

  1. 1. Responsive Design Tools & Resources Baltimore Mobile Meetup - January 15, 2013 Refresh 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. “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. 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 Grid 2. Flexible Images/Media 3. Media Queries
  10. 10. 1. Flexible Grid 2. 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 Grid 2. 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. Design Develop
  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 the initial, 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 the initial, 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 the initial, 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 the initial, 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 the initial, 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 the initial, 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 to use (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 to use (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 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">
  156. 156. <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">
  157. 157. <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">
  158. 158. <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">
  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. 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/
  165. 165. 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/
  166. 166. 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
  167. 167. Other Image Solutions Responsive Images https://github.com/filamentgroup/Responsive-Images Retina.js http://retinajs.com/ FitVids.js (video) http://fitvidsjs.com/
  168. 168. 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/
  169. 169. 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
  170. 170. 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/
  171. 171. 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/
  172. 172. 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/
  173. 173. Clarissa Peterson @clarissa

×