Beyond Responsive [18F 2015]

3,590 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 your user’s needs is. Responsive design is not an end in itself… it’s just the beginning.

Embracing the heterogenous nature of the web—the myriad web-enabled devices with vastly different dimensions, screen sizes, networks, and capabilities in use by countless individuals, each with their own special needs—allows you to craft experiences that will work anywhere at any time. It also helps you build robust systems that adapt in ways far beyond aesthetics. This talk will cover a number of considerations that you should be aware of, beyond screen size and pixel density, and provide examples of how to adapt your interfaces so they rise to meet your users’ needs.

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,590
On SlideShare
0
From Embeds
0
Number of Embeds
362
Actions
Shares
0
Downloads
37
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Beyond Responsive [18F 2015]

  1. 1. BEYOND RESPONSIVE Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
  2. 2. © Brad Frost
  3. 3. [In 2008] 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 68.2%. “
  5. 5. The percentage visiting from a mobile device or tablet … was just 0.2% in 2008. It has since grown exponentially to 14.4% today.“ 14.4%
  6. 6. [In 2008] 74.9% of our web visitors used Internet Explorer. That 
 number has fallen to 19.7%. 
 Firefox now comprises 20%, 
 Safari 16.7%, and Chrome 37%. “
  7. 7. In the second quarter of 2008 we detected 71 different screen resolutions among our visitors. In the first quarter of 2014 we detected “
  8. 8. In the second quarter of 2008 we detected 71 different screen resolutions among our visitors. In the first quarter of 2014 we detected “ 1062
  9. 9. In 2008, 27 screen 
 resolutions showed up with more than 10 visits, in 2014 that number was“ 200
  10. 10. © Brad Frost
  11. 11. Smartphones have reached 75% penetration in the US… “ Source
  12. 12. …but that’s concentrated in 61% of households
  13. 13. U.S. Smartphone penetration #s released in March 2015 Source < $30k 50% $30-50k 71% $50-75k 72% >$75k 84%
  14. 14. U.S. Smartphone penetration #s released in March 2015 Source $30k = Average US income 2013 < $30k 50% $30-50k 71% $50-75k 72% >$75k 84%
  15. 15. < $30k 50% $30-50k 71% $50-75k 72% >$75k 84% Population(in thousands) 0 30000 60000 90000 120000 <30k $30-50k $50-70k >$70k U.S. Smartphone vs. Income distribution Opportunity!
  16. 16. Smartphone users making < $30k/yr
 experienced app errors
 52% of the time Source
  17. 17. Galaxy S5 5.1” (1920 × 1080) 2GB RAM 16GB Storage 16MP Camera 2.5GHz Quad-core Android 4.4 $799
  18. 18. Galaxy S5 5.1” (1920 × 1080) 2GB RAM 16GB Storage 16MP Camera 2.5GHz Quad-core Android 4.4 $799 Cloud FX 3.5” (480 × 320) 128MB RAM 256MB Storage 2MP Camera 1GHz Single-core Firefox OS 1.3 $35
  19. 19. Galaxy S5 5.1” (1920 × 1080) 2GB RAM 16GB Storage 16MP Camera 2.5GHz Quad-core Android 4.4 $799 Dash JR K 3.5" (480 × 320) 256 MB RAM 512MB Memory 2MP camera 1.3 GHz Dual-core Android 4.4 $43
  20. 20. As of Q4 2014, 62% of new
 non-phone AT&T subscriptions are
 connected cars Source
  21. 21. © Brad Frost
  22. 22. We DON’T know
  23. 23. We DON’T know
  24. 24. Even when we think we know, WE ARE PROBABLY WRONG
  25. 25. So how do we COPE?
  26. 26. Progressive Enhancement
  27. 27. Technological
 restrictions
  28. 28. UserExperience Browser Capabilities BASIC ADVANCED
  29. 29. UserExperience Browser Capabilities BASIC ADVANCED Content
  30. 30. UserExperience Browser Capabilities BASIC ADVANCED Content Semantics
  31. 31. UserExperience Browser Capabilities BASIC ADVANCED Content Semantics Design
  32. 32. UserExperience Browser Capabilities BASIC ADVANCED Content Semantics Design Interactivity
  33. 33. UserExperience Browser Capabilities BASIC ADVANCED Content Semantics Design Interactivity Accessibility
  34. 34. UserExperience Browser Capabilities BASIC ADVANCED Text & HTTP HTML CSS JavaScript ¶ <> {} ↖ ARIA
  35. 35. HTML
  36. 36. HTML HTML5 Microformats HTML4
  37. 37. Browsers ignore what they don’t understand
  38. 38. I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg
  39. 39. Graceful Degradation
  40. 40. Modern Browsers Older Browsers
  41. 41. Modern Browsers Older Browsers
  42. 42. a dynamic web page can never break, it can only become a web page.
  43. 43. ๏Bugs ๏Browser Add-ons ๏Overzealous Firewalls ๏Underpowered devices ๏Page is still loading
  44. 44. SPoF
  45. 45. Graceful Degradation Progressive Enhancement
  46. 46. Content
  47. 47. Mobile First Responsive Web Design :-)
  48. 48. BEYOND RESPONSIVE Lightboxes
  49. 49. BEYOND RESPONSIVE Lightboxes
  50. 50. BEYOND RESPONSIVE IxMap JS? No No lightboxLoad
  51. 51. BEYOND RESPONSIVE IxMap JS? No No lightboxLoad
  52. 52. BEYOND RESPONSIVE IxMap No Yes Verify browser width condition LIVE JS? No No lightboxLoad
  53. 53. BEYOND RESPONSIVE IxMap No Yes Verify browser width condition LIVE JS? No No lightboxLoad
  54. 54. BEYOND RESPONSIVE IxMap No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
  55. 55. BEYOND RESPONSIVE IxMap No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
  56. 56. 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>
  57. 57. 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>
  58. 58. BEYOND RESPONSIVE Lightboxes
  59. 59. BEYOND RESPONSIVE Thumbnails
  60. 60. BEYOND RESPONSIVE Thumbnails
  61. 61. BEYOND RESPONSIVE IxMap JS? No No imageLoad
  62. 62. BEYOND RESPONSIVE IxMap JS? No No imageLoad
  63. 63. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Verify browser width condition
  64. 64. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Verify browser width condition
  65. 65. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  66. 66. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  67. 67. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  68. 68. BEYOND RESPONSIVE There is no image… <p class="entry-image" data-image-src="/i/sample.jpg"></p>
  69. 69. 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"/> </p>
  70. 70. BEYOND RESPONSIVE CSS at rest [data-image-src] { display: none; }
  71. 71. BEYOND RESPONSIVE CSS at play [data-image-src][data-image-loaded] { display: block; }
  72. 72. 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(); };
  73. 73. BEYOND RESPONSIVE JS Watcher var browser_width = 0; window.watchResize(function(){ browser_width = window.innerWidth || document.body.offsetWidth; });
  74. 74. 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; } });
  75. 75. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition LIVE
  76. 76. BEYOND RESPONSIVE Smart CSS [data-image-src][data-image-loaded] { display: block; }
  77. 77. 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; } }
  78. 78. BEYOND RESPONSIVE Thumbnails
  79. 79. http://is.gd/lazyloading_demo
  80. 80. http://is.gd/lazyloading_demo
  81. 81. http://is.gd/lazyloading_demo
  82. 82. http://is.gd/lazyloading_demo
  83. 83. BEYOND RESPONSIVE NO!!!! #reviews { display: none; } @media only screen and (min-width:50em) { #reviews { display: block; } }
  84. 84. BEYOND RESPONSIVE IxMap JS? No LinksLoad
  85. 85. BEYOND RESPONSIVE IxMap JS? No LinksLoad
  86. 86. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Verify browser width condition LIVE No Hold for user action
  87. 87. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Verify browser width condition LIVE No Hold for user action
  88. 88. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE No Hold for user action
  89. 89. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE No Hold for user action
  90. 90. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action
  91. 91. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action
  92. 92. BEYOND RESPONSIVE Lazy Loading <section class="aux reviews" id="reviews"> <header id="tab-reviews"> <a href="reviews.html" class="disabled">…</a> </header> </section>
  93. 93. 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>
  94. 94. http://is.gd/lazyloading_demo
  95. 95. BEYOND RESPONSIVE Tabbed Interface
  96. 96. 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>
  97. 97. 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>
  98. 98. 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>
  99. 99. BEYOND RESPONSIVE No JS, basic CSS
  100. 100. BEYOND RESPONSIVE IxMap JS? No LinearLoad
  101. 101. BEYOND RESPONSIVE IxMap JS? No LinearLoad
  102. 102. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  103. 103. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  104. 104. 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>
  105. 105. 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>
  106. 106. 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>
  107. 107. BEYOND RESPONSIVE IxMap JS? No LinearLoad
  108. 108. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Verify space for tabs LIVE
  109. 109. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Verify space for tabs LIVE No Accordion Build accordion
  110. 110. 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
  111. 111. 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?
  112. 112. BEYOND RESPONSIVE role="tablist" 108 Adding ARIA
  113. 113. BEYOND RESPONSIVE role="tab" aria-selected="true" aria-controls="folder-1" Adding ARIA
  114. 114. BEYOND RESPONSIVE role="tab" aria-selected="false" aria-controls="folder-4" Adding ARIA
  115. 115. BEYOND RESPONSIVE role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab" Adding ARIA
  116. 116. BEYOND RESPONSIVE Result!
  117. 117. BEYOND RESPONSIVE Result!
  118. 118. BEYOND RESPONSIVE Tabbed Interface
  119. 119. Questions? Tweet me at
 @AaronGustafson
  120. 120. Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson

×