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.
PLANNING
ADAPTIVE
INTERFACES
Aaron Gustafson
@AaronGustafson
slideshare.net/AaronGustafson
© Brad Frost
[In 2008] the majority of our visitors
saw our website in Internet
Explorer on a Windows computer on a
minimum 1,024 pixel...
Windows users used to comprise
93.5% of our web visits. Now that
percentage is 68.2%.
“
The percentage visiting from a mobile
device or tablet … was just
0.2% in 2008. It has since grown
exponentially to 14.4% ...
[In 2008] 74.9% of our web visitors
used Internet Explorer. That 

number has fallen to 19.7%. 

Firefox now comprises 20%...
In the second quarter of 2008
we detected 71 different
screen resolutions among our
visitors. In the first quarter of
2014...
In 2008, 27 screen 

resolutions showed up with
more than 10 visits, in 2014
that number was“ 200
© Brad Frost
Smartphones have reached
75% penetration in the US…
“ Source
…but that’s concentrated in
61% of households
U.S. Smartphone penetration #s
released in March 2015
Source
< $30k
50%
$30-50k
71%
$50-75k
72%
>$75k
84%
U.S. Smartphone penetration #s
released in March 2015
Source
$30k = Average US income 2013
< $30k
50%
$30-50k
71%
$50-75k
...
< $30k
50%
$30-50k
71%
$50-75k
72%
>$75k
84%
Population(in
thousands)
0
30000
60000
90000
120000
<30k $30-50k $50-70k >$70...
Smartphone users making < $30k/yr

experienced app errors

52% of the time
Source
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)
...
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)...
As of Q4 2014, 62% of new

non-phone AT&T subscriptions are

connected cars
Source
© Brad Frost
We DON’T know
We DON’T know
Even when
we think
we know,
WE ARE
PROBABLY
WRONG
So how
do we COPE?
Progressive
Enhancement
Technological

restrictions
UserExperience
Browser Capabilities
BASIC ADVANCED
UserExperience
Browser Capabilities
BASIC ADVANCED
Content
UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics
UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics
Design
UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics
Design
Interactivity
UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics
Design
Interactivity
Accessibility
UserExperience
Browser Capabilities
BASIC ADVANCED
Text & HTTP
HTML
CSS
JavaScript
¶
<>
{}
↖
ARIA
HTML
HTML
HTML5
Microformats
HTML4
Browsers ignore
what they don’t
understand
I like an escalator because
an escalator can never break,
it can only become stairs.
— Mitch Hedberg
Graceful
Degradation
Modern
Browsers
Older Browsers
Modern
Browsers
Older Browsers
a dynamic web page can
never break, it can only
become a web page.
๏Bugs
๏Browser Add-ons
๏Overzealous Firewalls
๏Underpowered devices
๏Page is still loading
SPoF
Graceful Degradation Progressive
Enhancement
Content
Mobile
First
Responsive
Web Design
:-)
PLANNING ADAPTIVE INTERFACES
Lightboxes
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
No lightboxLoad
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
No lightboxLoad
PLANNING ADAPTIVE INTERFACES
IxMap
No
Yes
Verify browser
width condition
LIVE
JS?
No
No lightboxLoad
PLANNING ADAPTIVE INTERFACES
IxMap
No
Yes
Verify browser
width condition
LIVE
JS?
No
No lightboxLoad
PLANNING ADAPTIVE INTERFACES
IxMap
No
JS?
No
No lightboxLoad
Yes
Yes
Lightbox
Create link
Make image clickable
Verify brow...
PLANNING ADAPTIVE INTERFACES
IxMap
No
JS?
No
No lightboxLoad
Yes
Yes
Lightbox
Create link
Make image clickable
Verify brow...
PLANNING ADAPTIVE INTERFACES
No need to link
<figure id="fig-1">
<img src="/path/small.png"
data-enlarged="/path/large.png...
PLANNING ADAPTIVE INTERFACES
Make the connection
<figure id="fig-1">
<img src="/path/small.png"
data-enlarged="/path/large...
PLANNING ADAPTIVE INTERFACES
Lightboxes
PLANNING ADAPTIVE INTERFACES
Thumbnails
PLANNING ADAPTIVE INTERFACES
Thumbnails
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
No imageLoad
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
No imageLoad
PLANNING ADAPTIVE INTERFACES
IxMap
No
JS?
No
No imageLoad
Yes
Verify browser
width condition
PLANNING ADAPTIVE INTERFACES
IxMap
No
JS?
No
No imageLoad
Yes
Verify browser
width condition
PLANNING ADAPTIVE INTERFACES
IxMap
No
JS?
No
No imageLoad
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width ...
PLANNING ADAPTIVE INTERFACES
IxMap
No
JS?
No
No imageLoad
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width ...
PLANNING ADAPTIVE INTERFACES
IxMap
No
JS?
No
No imageLoad
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width ...
PLANNING ADAPTIVE INTERFACES
There is no image…
<p class="entry-image"
data-image-src="/i/sample.jpg"></p>
PLANNING ADAPTIVE INTERFACES
Until there is
<p class="entry-image"
data-image-src="/i/sample.jpg"></p>
<p class="entry-ima...
PLANNING ADAPTIVE INTERFACES
CSS at rest
[data-image-src] {
display: none;
}
PLANNING ADAPTIVE INTERFACES
CSS at play
[data-image-src][data-image-loaded] {
display: block;
}
PLANNING ADAPTIVE INTERFACES
JS Watcher
window.watchResize = function(callback)
{
var resizing;
function done() {
clearTim...
PLANNING ADAPTIVE INTERFACES
JS Watcher
var browser_width = 0;
window.watchResize(function(){
browser_width = window.inner...
PLANNING ADAPTIVE INTERFACES
JS Watcher
window.watchResize(function(){
var threshold = 400,
image = document.createElement...
PLANNING ADAPTIVE INTERFACES
IxMap
No
JS?
No
No imageLoad
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width ...
PLANNING ADAPTIVE INTERFACES
Smart CSS
[data-image-src][data-image-loaded] {
display: block;
}
PLANNING ADAPTIVE INTERFACES
Smart CSS
[data-image-src][data-image-loaded] {
display: block;
}
@media only screen and (min...
PLANNING ADAPTIVE INTERFACES
Thumbnails
http://is.gd/lazyloading_demo
http://is.gd/lazyloading_demo
http://is.gd/lazyloading_demo
http://is.gd/lazyloading_demo
PLANNING ADAPTIVE INTERFACES
NO!!!!
#reviews {
display: none;
}
@media only screen and (min-width:50em) {
#reviews {
displ...
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
LinksLoad
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
LinksLoad
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
LinksLoad
Yes
Verify browser
width condition
LIVE
No
Hold for user action
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
LinksLoad
Yes
Verify browser
width condition
LIVE
No
Hold for user action
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
LinksLoad
Yes
Yes
Reviews
Lazy Load the reviews
Verify browser
width condition
L...
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
LinksLoad
Yes
Yes
Reviews
Lazy Load the reviews
Verify browser
width condition
L...
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
LinksLoad
Yes
Yes
Reviews
Lazy Load the reviews
Verify browser
width condition
L...
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
LinksLoad
Yes
Yes
Reviews
Lazy Load the reviews
Verify browser
width condition
L...
PLANNING ADAPTIVE INTERFACES
Lazy Loading
<section class="aux reviews" id="reviews">
<header id="tab-reviews">
<a href="re...
PLANNING ADAPTIVE INTERFACES
Lazy Loading
<section class="aux reviews loaded" id="reviews">
<header id="tab-reviews">
<a h...
http://is.gd/lazyloading_demo
PLANNING ADAPTIVE INTERFACES
Tabbed Interface
PLANNING ADAPTIVE INTERFACES
Traditional approach
<h1>Pumpkin Pie</h1>
<div class="container">

<ul class="tabs">
<li><a h...
PLANNING ADAPTIVE INTERFACES
Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface">

<h2>Overview</h2>
<img ...
PLANNING ADAPTIVE INTERFACES
Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface">

<h2>Overview</h2>
<img ...
PLANNING ADAPTIVE INTERFACES
No JS, basic CSS
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
LinearLoad
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
LinearLoad
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
LinearLoad
Yes
Tabs
Split content into sections
Make tabs
Assign event handlers ...
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
LinearLoad
Yes
Tabs
Split content into sections
Make tabs
Assign event handlers ...
PLANNING ADAPTIVE INTERFACES
Linear HTML
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface">

<h2>Overview</h2>
<img src="...
PLANNING ADAPTIVE INTERFACES
Tabbed
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface TabInterface-enabled">

<ul class="t...
PLANNING ADAPTIVE INTERFACES
Tabbed
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface TabInterface-enabled">

<ul class="t...
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
LinearLoad
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
LinearLoad
Yes
Verify space
for tabs
LIVE
No
Accordion
Build accordion
PLANNING ADAPTIVE INTERFACES
IxMap
JS?
No
LinearLoad
Yes
Tabs
Split content into sections
Make tabs
Assign event handlers ...
PLANNING ADAPTIVE INTERFACES
JS?Load
IxMap
Yes
Tabs
Yes
Verify space
for tabs
LIVE
No
Linear
<?>
PLANNING ADAPTIVE INTERFACES
JS?Load
IxMap
Yes
Tabs
Yes
Verify space
for tabs
LIVE
No
Linear
No
Accordion
Build accordion
...
PLANNING ADAPTIVE INTERFACES
JS?Load
IxMap
Yes
Tabs
Yes
Verify space
for tabs
LIVE
No
Linear
No
Accordion
Build accordion
...
PLANNING ADAPTIVE INTERFACES
role="tablist"
108
Adding ARIA
PLANNING ADAPTIVE INTERFACES
role="tab"
aria-selected="true"
aria-controls="folder-1"
Adding ARIA
PLANNING ADAPTIVE INTERFACES
role="tab"
aria-selected="false"
aria-controls="folder-4"
Adding ARIA
PLANNING ADAPTIVE INTERFACES
role="tabpanel"
aria-hidden="false"
aria-labelledby="folder-1-tab"
Adding ARIA
PLANNING ADAPTIVE INTERFACES
Result!
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Planning Adaptive Interfaces [EnhanceConf 2016]
Upcoming SlideShare
Loading in …5
×

Planning Adaptive Interfaces [EnhanceConf 2016]

91 views

Published on

How do you plan for the unknown? The answer is obvious—you can’t—but that’s not a bad thing. Unknowns can be scary, but they also create opportunity.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Planning Adaptive Interfaces [EnhanceConf 2016]

  1. 1. PLANNING ADAPTIVE INTERFACES 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 “ 1062
  8. 8. In 2008, 27 screen 
 resolutions showed up with more than 10 visits, in 2014 that number was“ 200
  9. 9. © Brad Frost
  10. 10. Smartphones have reached 75% penetration in the US… “ Source
  11. 11. …but that’s concentrated in 61% of households
  12. 12. U.S. Smartphone penetration #s released in March 2015 Source < $30k 50% $30-50k 71% $50-75k 72% >$75k 84%
  13. 13. 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%
  14. 14. < $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!
  15. 15. Smartphone users making < $30k/yr
 experienced app errors
 52% of the time Source
  16. 16. 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
  17. 17. 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
  18. 18. As of Q4 2014, 62% of new
 non-phone AT&T subscriptions are
 connected cars Source
  19. 19. © Brad Frost
  20. 20. We DON’T know
  21. 21. We DON’T know
  22. 22. Even when we think we know, WE ARE PROBABLY WRONG
  23. 23. So how do we COPE?
  24. 24. Progressive Enhancement
  25. 25. Technological
 restrictions
  26. 26. UserExperience Browser Capabilities BASIC ADVANCED
  27. 27. UserExperience Browser Capabilities BASIC ADVANCED Content
  28. 28. UserExperience Browser Capabilities BASIC ADVANCED Content Semantics
  29. 29. UserExperience Browser Capabilities BASIC ADVANCED Content Semantics Design
  30. 30. UserExperience Browser Capabilities BASIC ADVANCED Content Semantics Design Interactivity
  31. 31. UserExperience Browser Capabilities BASIC ADVANCED Content Semantics Design Interactivity Accessibility
  32. 32. UserExperience Browser Capabilities BASIC ADVANCED Text & HTTP HTML CSS JavaScript ¶ <> {} ↖ ARIA
  33. 33. HTML
  34. 34. HTML HTML5 Microformats HTML4
  35. 35. Browsers ignore what they don’t understand
  36. 36. I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg
  37. 37. Graceful Degradation
  38. 38. Modern Browsers Older Browsers
  39. 39. Modern Browsers Older Browsers
  40. 40. a dynamic web page can never break, it can only become a web page.
  41. 41. ๏Bugs ๏Browser Add-ons ๏Overzealous Firewalls ๏Underpowered devices ๏Page is still loading
  42. 42. SPoF
  43. 43. Graceful Degradation Progressive Enhancement
  44. 44. Content
  45. 45. Mobile First Responsive Web Design :-)
  46. 46. PLANNING ADAPTIVE INTERFACES Lightboxes
  47. 47. PLANNING ADAPTIVE INTERFACES IxMap JS? No No lightboxLoad
  48. 48. PLANNING ADAPTIVE INTERFACES IxMap JS? No No lightboxLoad
  49. 49. PLANNING ADAPTIVE INTERFACES IxMap No Yes Verify browser width condition LIVE JS? No No lightboxLoad
  50. 50. PLANNING ADAPTIVE INTERFACES IxMap No Yes Verify browser width condition LIVE JS? No No lightboxLoad
  51. 51. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
  52. 52. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
  53. 53. 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>
  54. 54. 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>
  55. 55. PLANNING ADAPTIVE INTERFACES Lightboxes
  56. 56. PLANNING ADAPTIVE INTERFACES Thumbnails
  57. 57. PLANNING ADAPTIVE INTERFACES Thumbnails
  58. 58. PLANNING ADAPTIVE INTERFACES IxMap JS? No No imageLoad
  59. 59. PLANNING ADAPTIVE INTERFACES IxMap JS? No No imageLoad
  60. 60. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No imageLoad Yes Verify browser width condition
  61. 61. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No imageLoad Yes Verify browser width condition
  62. 62. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  63. 63. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  64. 64. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  65. 65. PLANNING ADAPTIVE INTERFACES There is no image… <p class="entry-image" data-image-src="/i/sample.jpg"></p>
  66. 66. 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>
  67. 67. PLANNING ADAPTIVE INTERFACES CSS at rest [data-image-src] { display: none; }
  68. 68. PLANNING ADAPTIVE INTERFACES CSS at play [data-image-src][data-image-loaded] { display: block; }
  69. 69. 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(); };
  70. 70. PLANNING ADAPTIVE INTERFACES JS Watcher var browser_width = 0; window.watchResize(function(){ browser_width = window.innerWidth || document.body.offsetWidth; });
  71. 71. 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; } });
  72. 72. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition LIVE
  73. 73. PLANNING ADAPTIVE INTERFACES Smart CSS [data-image-src][data-image-loaded] { display: block; }
  74. 74. 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; } }
  75. 75. PLANNING ADAPTIVE INTERFACES Thumbnails
  76. 76. http://is.gd/lazyloading_demo
  77. 77. http://is.gd/lazyloading_demo
  78. 78. http://is.gd/lazyloading_demo
  79. 79. http://is.gd/lazyloading_demo
  80. 80. PLANNING ADAPTIVE INTERFACES NO!!!! #reviews { display: none; } @media only screen and (min-width:50em) { #reviews { display: block; } }
  81. 81. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinksLoad
  82. 82. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinksLoad
  83. 83. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinksLoad Yes Verify browser width condition LIVE No Hold for user action
  84. 84. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinksLoad Yes Verify browser width condition LIVE No Hold for user action
  85. 85. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE No Hold for user action
  86. 86. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE No Hold for user action
  87. 87. 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
  88. 88. 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
  89. 89. PLANNING ADAPTIVE INTERFACES Lazy Loading <section class="aux reviews" id="reviews"> <header id="tab-reviews"> <a href="reviews.html" class="disabled">…</a> </header> </section>
  90. 90. 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>
  91. 91. http://is.gd/lazyloading_demo
  92. 92. PLANNING ADAPTIVE INTERFACES Tabbed Interface
  93. 93. 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>
  94. 94. 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>
  95. 95. 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>
  96. 96. PLANNING ADAPTIVE INTERFACES No JS, basic CSS
  97. 97. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinearLoad
  98. 98. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinearLoad
  99. 99. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinearLoad Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  100. 100. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinearLoad Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  101. 101. 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>
  102. 102. 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>
  103. 103. 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>
  104. 104. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinearLoad
  105. 105. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinearLoad Yes Verify space for tabs LIVE No Accordion Build accordion
  106. 106. 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
  107. 107. PLANNING ADAPTIVE INTERFACES JS?Load IxMap Yes Tabs Yes Verify space for tabs LIVE No Linear <?>
  108. 108. PLANNING ADAPTIVE INTERFACES JS?Load IxMap Yes Tabs Yes Verify space for tabs LIVE No Linear No Accordion Build accordion <?>
  109. 109. 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?
  110. 110. PLANNING ADAPTIVE INTERFACES role="tablist" 108 Adding ARIA
  111. 111. PLANNING ADAPTIVE INTERFACES role="tab" aria-selected="true" aria-controls="folder-1" Adding ARIA
  112. 112. PLANNING ADAPTIVE INTERFACES role="tab" aria-selected="false" aria-controls="folder-4" Adding ARIA
  113. 113. PLANNING ADAPTIVE INTERFACES role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab" Adding ARIA
  114. 114. PLANNING ADAPTIVE INTERFACES Result!

×