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.

Beyond Responsive Workshop [Beyond Tellerrand 2014]

45 views

Published on

Responsive web design has taken our industry by storm and with good reason: it helps us improve our reach with less effort. But incorporating responsive design is not the goal, meeting our user’s needs is. Responsive design is not an end in itself… it’s just the beginning.

We need to embrace the heterogenous nature of the web—myriad web-enabled devices with vastly different dimensions, screen sizes, networks, and capabilities in use by countless individuals, each with their own special needs—and craft experiences that will work anywhere at any time. We need to build robust systems that adapt in ways far beyond aesthetics.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Beyond Responsive Workshop [Beyond Tellerrand 2014]

  1. 1. BEYOND RESPONSIVE Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
  2. 2. © Brad Frost
  3. 3. Just four years ago the majority of our visitors saw our website in Internet Explorer on a Windows computer on a minimum 1,024 pixel wide screen. Times have really changed. “ Jason Samuels IT Manager, National Council on Family Relations Source
  4. 4. Windows users used to comprise 93.5% of our web visits. Now that percentage is 72.4%. Visitors using a Mac have more than tripled.“
  5. 5. The percentage visiting from a mobile device or tablet … was just 0.1% in 2008. It has since grown exponentially, 200-400% per year, to 6.2% today. “
  6. 6. Four years ago 75.5% of our web visitors used Internet Explorer. That number has fallen to 37%. Firefox now comprises 25.5%, Safari 19.5%, and Chrome 15.3%. “
  7. 7. In the second quarter of 2008 we detected 71 different screen resolutions among our visitors. In the first quarter of 2012 we detected “ 830
  8. 8. © Brad Frost
  9. 9. Perception
  10. 10. Perception
  11. 11. Perception
  12. 12. Perception
  13. 13. There is no WebKit on Mobile — Peter-Paul Koch“
  14. 14. WebKit vs. Acid3 http://www.quirksmode.org/webkit_mobile.html
  15. 15. Surely there’s platform consistency!?! — Any sane individual “
  16. 16. There is no Android — Stephanie Rieger “
  17. 17. http://yfrog.com/z/ob5kndj
  18. 18. But Android is NOT unique in this
  19. 19. The culprits? SCREEN SIZE
  20. 20. The culprits? EMBEDDED VIEWS
  21. 21. The culprits? BROWSER CHROME
  22. 22. The culprits? ZOOM LEVEL
  23. 23. The culprits? ZOOM LEVEL (Ok, this one’s on Android)
  24. 24. Smartphones have reached 56% penetration in the US… “
  25. 25. …but that’s concentrated in 30% of households “ http://www.chetansharma.com/usmarketupdateq12013.htm
  26. 26. U.S. Smartphone penetration #s released in February http://www.pewinternet.org/2014/02/27/part-1-how-the-internet-has-woven-itself-into-american-life/ < $30k 47% $30-50k 53% $50-75k 61% >$75k 81%
  27. 27. U.S. Smartphone penetration #s released in February http://www.pewinternet.org/2014/02/27/part-1-how-the-internet-has-woven-itself-into-american-life/ $30k = Average US income 2013 < $30k 47% $30-50k 53% $50-75k 61% >$75k 81%
  28. 28. < $30k 47% $30-50k 53% $50-75k 61% >$75k 81% 0 30000 60000 90000 120000 <30k $30-50k $50-70k >$70k Population(inthousands) 8,767 U.S. Smartphone vs. Income distribution
  29. 29. < $30k 47% $30-50k 53% $50-75k 61% >$75k 81% 0 30000 60000 90000 120000 <30k $30-50k $50-70k >$70k Population(inthousands) 8,767 U.S. Smartphone vs. Income distribution Opportunity!
  30. 30. The reality
  31. 31. © Brad Frost
  32. 32. We DON’T know
  33. 33. We DON’T know
  34. 34. Even when we think we know, WE ARE PROBABLY WRONG
  35. 35. So how do we COPE?
  36. 36. Progressive Enhancement
  37. 37. Technological restrictions
  38. 38. BASIC ADVANCED UserExperience Browser Capabilities
  39. 39. BASIC ADVANCED UserExperience Browser Capabilities Content
  40. 40. BASIC ADVANCED UserExperience Browser Capabilities Content Semantics
  41. 41. BASIC ADVANCED UserExperience Browser Capabilities Content Semantics Design
  42. 42. BASIC ADVANCED UserExperience Browser Capabilities Content Semantics Design Interactivity
  43. 43. BASIC ADVANCED UserExperience Browser Capabilities Content Semantics Design Interactivity Accessibility
  44. 44. BASIC ADVANCED UserExperience Browser Capabilities Text & HTTP HTML CSS JavaScript ¶ <> {} ↖ ARIA
  45. 45. HTML
  46. 46. HTML HTML5 Microformats HTML4
  47. 47. Browsers ignore what they don’t understand
  48. 48. I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg
  49. 49. Graceful Degradation
  50. 50. Modern Browsers Older Browsers
  51. 51. Modern Browsers Older Browsers
  52. 52. a dynamic web page can never break, it can only become a web page.
  53. 53. ๏Bugs ๏Browser Add-ons ๏Overzealous Firewalls ๏Underpowered devices ๏Page is still loading
  54. 54. SPoF
  55. 55. Graceful Degradation Progressive Enhancement
  56. 56. Content
  57. 57. Graceful Degradation Progressive Enhancement
  58. 58. on Progressive Enhancement Responsive Web Design Mobile First
  59. 59. Mobile First Responsive Web Design
  60. 60. Mobile First Responsive Web Design :-)
  61. 61. BEYOND RESPONSIVE Lightboxes
  62. 62. BEYOND RESPONSIVE Lightboxes
  63. 63. BEYOND RESPONSIVE Interface experience Map Load
  64. 64. BEYOND RESPONSIVE Interface experience Map JS?Load
  65. 65. BEYOND RESPONSIVE Interface experience Map JS? No No lightboxLoad
  66. 66. BEYOND RESPONSIVE Interface experience Map JS? No No lightboxLoad Yes Verify browser width condition LIVE
  67. 67. BEYOND RESPONSIVE Interface experience Map No JS? No No lightboxLoad Yes Verify browser width condition LIVE
  68. 68. BEYOND RESPONSIVE Interface experience Map No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
  69. 69. BEYOND RESPONSIVE IxMap No JS? No No lightbox Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE Load
  70. 70. BEYOND RESPONSIVE IxMap No JS? No No lightbox Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE Load
  71. 71. BEYOND RESPONSIVE IxMap No Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE JS? No No lightboxLoad
  72. 72. BEYOND RESPONSIVE IxMap No Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE JS? No No lightboxLoad
  73. 73. BEYOND RESPONSIVE IxMap Yes Lightbox Create link Make image clickable JS? No No lightboxLoad No Yes Verify browser width condition LIVE
  74. 74. BEYOND RESPONSIVE IxMap Yes Lightbox Create link Make image clickable JS? No No lightboxLoad No Yes Verify browser width condition LIVE
  75. 75. BEYOND RESPONSIVE IxMap No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
  76. 76. BEYOND RESPONSIVE IxMap No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
  77. 77. BEYOND RESPONSIVE No need to link <figure id="fig-1"> <img src="/path/small.png" data-enlarged="/path/large.png" alt=""> <figcaption> <h6>Retreats 4 Geeks</h6> <p>We built this site for our intimate retreat series.</p> </figcaption> </figure>
  78. 78. BEYOND RESPONSIVE Make the connection <figure id="fig-1"> <img src="/path/small.png" data-enlarged="/path/large.png" alt="" class="enlargable"> <p class="enlarge"><a href="#enlarge">Click to Enlarge</a></p> <figcaption> <h6>Retreats 4 Geeks</h6> <p>We built this site for our intimate retreat series.</p> </figcaption> </figure>
  79. 79. BEYOND RESPONSIVE Lightboxes
  80. 80. BEYOND RESPONSIVE Thumbnails
  81. 81. BEYOND RESPONSIVE Thumbnails
  82. 82. BEYOND RESPONSIVE IxMap Load
  83. 83. BEYOND RESPONSIVE IxMap JS?Load
  84. 84. BEYOND RESPONSIVE IxMap JS? No No imageLoad
  85. 85. BEYOND RESPONSIVE IxMap JS? No No imageLoad Yes Verify browser width condition
  86. 86. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Verify browser width condition
  87. 87. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  88. 88. BEYOND RESPONSIVE IxMap No JS? No No image Yes Yes Image Adjust markup Add custom CSS Verify browser width condition Load
  89. 89. BEYOND RESPONSIVE IxMap No JS? No No image Yes Yes Image Adjust markup Add custom CSS Verify browser width condition Load
  90. 90. BEYOND RESPONSIVE IxMap No Yes Yes Image Adjust markup Add custom CSS Verify browser width condition JS? No No imageLoad
  91. 91. BEYOND RESPONSIVE IxMap No Yes Yes Image Adjust markup Add custom CSS Verify browser width condition JS? No No imageLoad
  92. 92. BEYOND RESPONSIVE IxMap Yes Image Adjust markup Add custom CSS No JS? No No imageLoad Yes Verify browser width condition
  93. 93. BEYOND RESPONSIVE IxMap Yes Image Adjust markup Add custom CSS No JS? No No imageLoad Yes Verify browser width condition
  94. 94. BEYOND RESPONSIVE IxMap No No No imageJS?Load Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  95. 95. BEYOND RESPONSIVE IxMap No No No imageJS?Load Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  96. 96. BEYOND RESPONSIVE IxMap No No No imageJS?Load Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  97. 97. BEYOND RESPONSIVE IxMap No No No imageJS?Load Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  98. 98. BEYOND RESPONSIVE There is no image… <p class="entry-image" data-image-src="/i/sample.jpg"></p>
  99. 99. BEYOND RESPONSIVE Until there is <p class="entry-image" data-image-src="/i/sample.jpg"></p>
  100. 100. BEYOND RESPONSIVE Until there is <p class="entry-image" data-image-src="/i/sample.jpg"></p> <p class="entry-image" data-image-src="/i/sample.jpg" data-has-image="true"> <img alt="" src="/i/sample.jpg" alt=””/> </p>
  101. 101. BEYOND RESPONSIVE CSS at rest [data-image-src] { display: none; }
  102. 102. BEYOND RESPONSIVE CSS at play [data-image-src][data-image-loaded] { display: block; }
  103. 103. BEYOND RESPONSIVE JS Watcher window.watchResize = function(callback) { var resizing; function done() { clearTimeout( resizing ); resizing = null; callback(); } window.onresize = function(){ if ( resizing ) { clearTimeout( resizing ); resizing = null; } resizing = setTimeout( done, 50 ); }; callback(); };
  104. 104. BEYOND RESPONSIVE JS Watcher var browser_width = 0; window.watchResize(function(){ browser_width = window.innerWidth || document.body.offsetWidth; });
  105. 105. BEYOND RESPONSIVE JS Watcher window.watchResize(function(){ var threshold = 400, image = document.createElement('img'), paragraphs = document.getElementsByTagName('p'), i = paragraphs.length, p, loaded, src, img; if ( browser_width >= threshold ) { image.setAttribute('alt',''); while ( i-- ) { p = paragraphs[i]; src = p.getAttribute('data-image-src'); loaded = p.getAttribute('data-image-loaded'); if ( src != null && loaded == null ) { img = image.cloneNode(true); img.setAttribute('src',src); p.appendChild( img ); p.setAttribute('data-image-loaded',''); } } image = paragraphs = p = img = null; } });
  106. 106. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition LIVE
  107. 107. BEYOND RESPONSIVE Smart CSS [data-image-src][data-image-loaded] { display: block; }
  108. 108. BEYOND RESPONSIVE Smart CSS [data-image-src][data-image-loaded] { display: block; }
  109. 109. BEYOND RESPONSIVE Smart CSS [data-image-src][data-image-loaded] { display: block; } @media only screen and (min-width:400px) { [data-img-src][data-image-loaded] { display: block; } }
  110. 110. BEYOND RESPONSIVE Thumbnails
  111. 111. http://is.gd/lazyloading_demo
  112. 112. http://is.gd/lazyloading_demo
  113. 113. http://is.gd/lazyloading_demo
  114. 114. http://is.gd/lazyloading_demo
  115. 115. BEYOND RESPONSIVE NO!!!! #reviews { display: none; } @media only screen and (min-width:50em) { #reviews { display: block; } }
  116. 116. BEYOND RESPONSIVE IxMap Load
  117. 117. BEYOND RESPONSIVE IxMap JS?Load
  118. 118. BEYOND RESPONSIVE IxMap JS? No LinksLoad
  119. 119. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Verify browser width condition LIVE
  120. 120. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Verify browser width condition LIVE No Hold for user action
  121. 121. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE No Hold for user action
  122. 122. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action
  123. 123. BEYOND RESPONSIVE IxMap JS? No Links Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action Load
  124. 124. BEYOND RESPONSIVE IxMap JS? No Links Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action Load
  125. 125. BEYOND RESPONSIVE IxMap Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action JS? No LinksLoad
  126. 126. BEYOND RESPONSIVE IxMap Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action JS? No LinksLoad
  127. 127. BEYOND RESPONSIVE IxMap Yes Reviews Lazy Load the reviews Click Hold for user action JS? No LinksLoad Yes Verify browser width condition LIVE No
  128. 128. BEYOND RESPONSIVE IxMap Yes Reviews Lazy Load the reviews Click Hold for user action JS? No LinksLoad Yes Verify browser width condition LIVE No
  129. 129. BEYOND RESPONSIVE IxMap Click JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE No Hold for user action
  130. 130. BEYOND RESPONSIVE IxMap Click JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE No Hold for user action
  131. 131. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Verify browser width condition LIVE No Hold for user action Click Yes Reviews Lazy Load the reviews
  132. 132. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Verify browser width condition LIVE No Hold for user action Click Yes Reviews Lazy Load the reviews
  133. 133. BEYOND RESPONSIVE Lazy Loading <section class="aux reviews" id="reviews"> <header id="tab-reviews"> <a href="reviews.html" class="disabled">…</a> </header> </section>
  134. 134. BEYOND RESPONSIVE Lazy Loading <section class="aux reviews loaded" id="reviews"> <header id="tab-reviews"> <a href="reviews.html" class="disabled open">…</a> </header> <div role="tabpanel"> <div id="p-reviews" aria-labeledby="tab-reviews"> <ol class="reviews-list"> <li> <img src="images/avatar.png" alt="Commenter Name"> <div class="review-meta"> <h3>Awesome shirt!</h3> <a href="#"><time datetime="2010-01-20" pubdate="">11/12/2011</time></a> By Bruce Bosco </div> <div class="review-content"> <p>This shirt looks awesome and is really comfortable to wear. It did shrink quite a lot when washed, but that could have just been how I ran it. All in all, it's my favourite shirt, and I love wearing it.</p> </div> </li> <!-- … --> </ol> </div> </div> </section>
  135. 135. http://is.gd/lazyloading_demo
  136. 136. BEYOND RESPONSIVE Tabbed Interface
  137. 137. BEYOND RESPONSIVE Traditional approach <h1>Pumpkin Pie</h1> <div class="container"> <ul class="tabs"> <li><a href="#">Overview</a></li> <li><a href="#">Ingredients</a></li> <li><a href="#">Directions</a></li> <li><a href="#">Nutrition</a></li> </ul> <div class="section"> <h2>Overview</h2> <img src="pie.jpg" alt=""> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> <!-- ... --> </div> <!-- ... --> </div>
  138. 138. BEYOND RESPONSIVE Cleaner approach <h1>Pumpkin Pie</h1> <div class="tabbed-interface"> <h2>Overview</h2> <img src="pie.jpg" alt="" /> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> <!-- ... --> <h2>Ingredients</h2> <ul> <li>1 (9<abbr title="inch">in</abbr>) unbaked deep dish pie crust</li> <li> cup white sugar</li> <!-- ... --> </ul> <h2>Directions</h2> <!-- ... --> </div>
  139. 139. BEYOND RESPONSIVE Cleaner approach <h1>Pumpkin Pie</h1> <div class="tabbed-interface"> <h2>Overview</h2> <img src="pie.jpg" alt="" /> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> <!-- ... --> <h2>Ingredients</h2> <ul> <li>1 (9<abbr title="inch">in</abbr>) unbaked deep dish pie crust</li> <li> cup white sugar</li> <!-- ... --> </ul> <h2>Directions</h2> <!-- ... --> </div>
  140. 140. BEYOND RESPONSIVE No JS, basic CSS
  141. 141. BEYOND RESPONSIVE IxMap Load
  142. 142. BEYOND RESPONSIVE IxMap JS?Load
  143. 143. BEYOND RESPONSIVE IxMap JS? No LinearLoad
  144. 144. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  145. 145. BEYOND RESPONSIVE IxMap JS? No Linear Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard) Load
  146. 146. BEYOND RESPONSIVE IxMap JS? No Linear Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard) Load
  147. 147. BEYOND RESPONSIVE IxMap Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard) JS? No LinearLoad
  148. 148. BEYOND RESPONSIVE IxMap Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard) JS? No LinearLoad
  149. 149. BEYOND RESPONSIVE IxMap Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard) JS? No LinearLoad
  150. 150. BEYOND RESPONSIVE IxMap Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard) JS? No LinearLoad
  151. 151. BEYOND RESPONSIVE Linear HTML <h1>Pumpkin Pie</h1> <div class="tabbed-interface"> <h2>Overview</h2> <img src="pie.jpg" alt="" /> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> <!-- ... --> <h2>Ingredients</h2> <ul> <li>1 (9<abbr title="inch">in</abbr>) unbaked deep dish pie crust</li> <li> cup white sugar</li> <!-- ... --> </ul> <h2>Directions</h2> <!-- ... --> </div>
  152. 152. BEYOND RESPONSIVE Tabbed <h1>Pumpkin Pie</h1> <div class="tabbed-interface TabInterface-enabled"> <ul class="tabs"> <li><a href="#folder-1">Overview</a></li> <li><a href="#folder-2">Ingredients</a></li> <li><a href="#folder-3">Directions</a></li> <li><a href="#folder-4">Nutrition</a></li> </ul> <section id=”folder-1”> <h2>Overview</h2> <img src="pie.jpg" alt=""> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> <!-- ... --> </section> <!-- ... --> </div>
  153. 153. BEYOND RESPONSIVE Tabbed <h1>Pumpkin Pie</h1> <div class="tabbed-interface TabInterface-enabled"> <ul class="tabs"> <li><a href="#folder-1">Overview</a></li> <li><a href="#folder-2">Ingredients</a></li> <li><a href="#folder-3">Directions</a></li> <li><a href="#folder-4">Nutrition</a></li> </ul> <section id=”folder-1”> <h2>Overview</h2> <img src="pie.jpg" alt=""> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> <!-- ... --> </section> <!-- ... --> </div>
  154. 154. BEYOND RESPONSIVE IxMap Load
  155. 155. BEYOND RESPONSIVE IxMap JS?Load
  156. 156. BEYOND RESPONSIVE IxMap JS? No LinearLoad
  157. 157. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Verify space for tabs LIVE
  158. 158. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Verify space for tabs LIVE No Accordion Build accordion
  159. 159. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard) Yes Verify space for tabs LIVE No Accordion Build accordion
  160. 160. BEYOND RESPONSIVE JS?Load IxMap Yes Tabs Yes Verify space for tabs LIVE No Linear <?>
  161. 161. BEYOND RESPONSIVE JS?Load IxMap Yes Tabs Yes Verify space for tabs LIVE No Linear No Accordion Build accordion <?>
  162. 162. BEYOND RESPONSIVE JS?Load IxMap Yes Tabs Yes Verify space for tabs LIVE No Linear No Accordion Build accordion <?> Yes Native Insert details & summary Support details & summary?
  163. 163. BEYOND RESPONSIVE role="tablist" 133 Adding ARIA
  164. 164. BEYOND RESPONSIVE role="tab" aria-selected="true" aria-controls="folder-1" Adding ARIA
  165. 165. BEYOND RESPONSIVE role="tab" aria-selected="false" aria-controls="folder-4" Adding ARIA
  166. 166. BEYOND RESPONSIVE role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab" Adding ARIA
  167. 167. BEYOND RESPONSIVE role="application" aria-activedescendant="folder-1" Adding ARIA
  168. 168. BEYOND RESPONSIVE Result!
  169. 169. BEYOND RESPONSIVE Tabbed Interface
  170. 170. Now it’s time for YOU to do some work
  171. 171. BEYOND RESPONSIVE Interfaces ๏ Carousel ๏ Video Gallery ๏ Tab Interface v2 ๏ Data Tables ๏ Scorecard 141 ๏ Complex Navigation ๏ Timeline ๏ Modal Dialogs ๏ Accordion ๏ Shopping Cart
  172. 172. BEYOND RESPONSIVE Carousel
  173. 173. BEYOND RESPONSIVE Video Gallery
  174. 174. BEYOND RESPONSIVE Tabbed Interface
  175. 175. BEYOND RESPONSIVE Data Tables
  176. 176. BEYOND RESPONSIVE Scorecard
  177. 177. BEYOND RESPONSIVE Complex Navigation
  178. 178. BEYOND RESPONSIVE Timeline
  179. 179. BEYOND RESPONSIVE Modal Dialogs
  180. 180. BEYOND RESPONSIVE Accordion
  181. 181. BEYOND RESPONSIVE Shopping Cart
  182. 182. http://is.gd/bt_beyond_responsive Password: tellerrand Further Reading: http://is.gd/readlist_awd
  183. 183. BEYOND RESPONSIVE The Ask: ๏ Imagine at least 2 different ways to experience the interface from a UX standpoint ๏ How might it look different? ๏ How might it behave differently? ๏ Can you speed up the download/optimize performance? ๏ What happens without JavaScript? ๏ Sketch it out. ๏ Have fun! 153

×