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

Like this? Share it with your network

Share

Responsive Design Tools & Resources

  • 4,408 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,408
On Slideshare
4,367
From Embeds
41
Number of Embeds
6

Actions

Shares
Downloads
268
Comments
0
Likes
9

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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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