Planning Adaptive Interfaces [RWD Summit 2016]

1,019 views

Published on

In this session, Aaron Gustafson will explain the ins and outs of crafting rich Web experiences that adapt to the capabilities and peculiarities of our customers and their devices, while maintaining your sanity in the process.

You will learn:

* An understanding of the challenges (and possibilities) presented by the wide range of browsers and devices being used to access the web
* A fresh perspective on interface design, grounded in the progressive enhancement philosophy
* Ideas around how to tailor experiences based on device capabilities;
* Solid strategies for determining how common UI components can be re-imagined in an adaptive fashion
* A practical knowledge of how HTML, CSS, and JavaScript can be deployed in the service of adaptive user interfaces

Published in: Internet
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,019
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Planning Adaptive Interfaces [RWD Summit 2016]

  1. 1. PLANNING ADAPTIVE INTERFACES Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
  2. 2. Web design is HARD © 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
  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. Chasing screen
 sizes is a
 FOOL’S ERRAND © Brad Frost
  11. 11. Smartphones have reached 75% penetrationin 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(inthousands) 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 Cloud FX 3.5” (480 × 320) 128MB RAM 256MB Storage 2MP Camera 1GHz Single-core Firefox OS 1.3 $35
  18. 18. 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
  19. 19. As of Q4 2014, 62%of new
 non-phone AT&T subscriptions are
 connected cars Source
  20. 20. We DON’T know
  21. 21. Even when we
 think we know, we’re probably
 WRONG
  22. 22. So how do we COPE?
  23. 23. Progressive Enhancement
  24. 24. Technological
 restrictions
  25. 25. UserExperience Browser Capabilities BASIC ADVANCED
  26. 26. UserExperience Browser Capabilities BASIC ADVANCED Content
  27. 27. UserExperience Browser Capabilities BASIC ADVANCED Content Semantics
  28. 28. UserExperience Browser Capabilities BASIC ADVANCED Content Semantics Design
  29. 29. UserExperience Browser Capabilities BASIC ADVANCED Content Semantics Design Interactivity
  30. 30. UserExperience Browser Capabilities BASIC ADVANCED Content Semantics Design Interactivity Accessibility
  31. 31. UserExperience Browser Capabilities BASIC ADVANCED Text & HTTP HTML CSS JavaScript ¶ <> {} ↖ ARIA
  32. 32. HTML
  33. 33. HTML HTML5 Microformats HTML4
  34. 34. Browsers ignore what they don’t understand
  35. 35. I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg
  36. 36. a dynamic web page can never break, it can only become a web page.
  37. 37. ๏Bugs ๏Browser Add-ons ๏Overzealous Firewalls ๏Underpowered devices ๏Page is still loading
  38. 38. SPoF
  39. 39. Content
  40. 40. So how do we PLAN
 for the unexpected?
  41. 41. PLANNING ADAPTIVE INTERFACES Lightboxes
  42. 42. PLANNING ADAPTIVE INTERFACES Lightboxes
  43. 43. PLANNING ADAPTIVE INTERFACES IxMap JS? No No lightboxLoad
  44. 44. PLANNING ADAPTIVE INTERFACES IxMap JS? No No lightboxLoad
  45. 45. PLANNING ADAPTIVE INTERFACES IxMap No Yes Verify browser width condition LIVE JS? No No lightboxLoad
  46. 46. PLANNING ADAPTIVE INTERFACES IxMap No Yes Verify browser width condition LIVE JS? No No lightboxLoad
  47. 47. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
  48. 48. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
  49. 49. PLANNING ADAPTIVE INTERFACES 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>
  50. 50. PLANNING ADAPTIVE INTERFACES 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>
  51. 51. PLANNING ADAPTIVE INTERFACES Lightboxes
  52. 52. PLANNING ADAPTIVE INTERFACES Thumbnails
  53. 53. PLANNING ADAPTIVE INTERFACES Thumbnails
  54. 54. PLANNING ADAPTIVE INTERFACES IxMap JS? No No imageLoad
  55. 55. PLANNING ADAPTIVE INTERFACES IxMap JS? No No imageLoad
  56. 56. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No imageLoad Yes Verify browser width condition
  57. 57. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No imageLoad Yes Verify browser width condition
  58. 58. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  59. 59. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  60. 60. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  61. 61. PLANNING ADAPTIVE INTERFACES There is no image… <p class="entry-image" data-image-src="/i/sample.jpg"></p>
  62. 62. PLANNING ADAPTIVE INTERFACES 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>
  63. 63. PLANNING ADAPTIVE INTERFACES CSS at rest [data-image-src] { display: none; }
  64. 64. PLANNING ADAPTIVE INTERFACES CSS at play [data-image-src][data-image-loaded] { display: block; }
  65. 65. PLANNING ADAPTIVE INTERFACES 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(); };
  66. 66. PLANNING ADAPTIVE INTERFACES JS Watcher var browser_width = 0; window.watchResize(function(){ browser_width = window.innerWidth || document.body.offsetWidth; });
  67. 67. PLANNING ADAPTIVE INTERFACES 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; } });
  68. 68. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition LIVE
  69. 69. PLANNING ADAPTIVE INTERFACES Smart CSS [data-image-src][data-image-loaded] { display: block; }
  70. 70. PLANNING ADAPTIVE INTERFACES 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; } }
  71. 71. PLANNING ADAPTIVE INTERFACES Thumbnails
  72. 72. http://is.gd/lazyloading_demo
  73. 73. http://is.gd/lazyloading_demo
  74. 74. http://is.gd/lazyloading_demo
  75. 75. http://is.gd/lazyloading_demo
  76. 76. PLANNING ADAPTIVE INTERFACES NO!!!! #reviews { display: none; } @media only screen and (min-width:50em) { #reviews { display: block; } }
  77. 77. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinksLoad
  78. 78. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinksLoad
  79. 79. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinksLoad Yes Verify browser width condition LIVE No Hold for user action
  80. 80. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinksLoad Yes Verify browser width condition LIVE No Hold for user action
  81. 81. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE No Hold for user action
  82. 82. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE No Hold for user action
  83. 83. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action
  84. 84. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action
  85. 85. PLANNING ADAPTIVE INTERFACES Lazy Loading <section class="aux reviews" id="reviews"> <header id="tab-reviews"> <a href="reviews.html" class="disabled">…</a> </header> </section>
  86. 86. PLANNING ADAPTIVE INTERFACES 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>
  87. 87. http://is.gd/lazyloading_demo
  88. 88. PLANNING ADAPTIVE INTERFACES Tabbed Interface
  89. 89. PLANNING ADAPTIVE INTERFACES 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>
  90. 90. PLANNING ADAPTIVE INTERFACES 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>
  91. 91. PLANNING ADAPTIVE INTERFACES 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>
  92. 92. PLANNING ADAPTIVE INTERFACES No JS, basic CSS
  93. 93. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinearLoad
  94. 94. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinearLoad
  95. 95. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinearLoad Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  96. 96. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinearLoad Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  97. 97. PLANNING ADAPTIVE INTERFACES 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>
  98. 98. PLANNING ADAPTIVE INTERFACES 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>
  99. 99. PLANNING ADAPTIVE INTERFACES 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>
  100. 100. PLANNING ADAPTIVE INTERFACES 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
  101. 101. PLANNING ADAPTIVE INTERFACES 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?
  102. 102. PLANNING ADAPTIVE INTERFACES role="tablist" 93 Adding ARIA
  103. 103. PLANNING ADAPTIVE INTERFACES role="tab" aria-selected="true" aria-controls="folder-1" Adding ARIA
  104. 104. PLANNING ADAPTIVE INTERFACES role="tab" aria-selected="false" aria-controls="folder-4" Adding ARIA
  105. 105. PLANNING ADAPTIVE INTERFACES role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab" Adding ARIA
  106. 106. PLANNING ADAPTIVE INTERFACES Result!
  107. 107. Questions? Tweet me at
 @AaronGustafson
  108. 108. Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson

×