Responsive Design Tools & Resources
Upcoming SlideShare
Loading in...5
×
 

Responsive Design Tools & Resources

on

  • 4,271 views

 

Statistics

Views

Total Views
4,271
Views on SlideShare
4,230
Embed Views
41

Actions

Likes
9
Downloads
267
Comments
0

6 Embeds 41

http://tweets.jimlaneux.com 14
https://twitter.com 9
http://www.webheadneeded.com 7
http://www.clarissapeterson.com 5
http://alpha.responsivedesign.is 4
http://www.pinterest.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Design Tools & Resources Presentation Transcript

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