PLANNING ADAPTIVE INTERFACES Aaron Gustafson @aarongustafson slideshare.net/AaronGustafson
Slide 1
Slide 2
© Brad Frost
Slide 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
Slide 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.
Slide 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.
Slide 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%.
Slide 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
Slide 8
© Brad Frost
Slide 9
Perception
Slide 10
Perception
Slide 11
Perception
Slide 12
Perception
Slide 13
“ There is no WebKit on Mobile — Peter-Paul Koch
Slide 14
WebKit vs. Acid3 http://www.quirksmode.org/webkit_mobile.html
Slide 15
WebKit vs. Acid3 http://www.quirksmode.org/webkit_mobile.html
Slide 16
WebKit vs. Acid3 http://www.quirksmode.org/webkit_mobile.html
Slide 17
“ Surely there’s platform consistency!?! — Any sane individual
Slide 18
“ There is no Android — Stephanie Rieger
Slide 19
http://yfrog.com/z/ob5kndj
Slide 20
http://yfrog.com/z/ob5kndj
Slide 21
http://yfrog.com/z/ob5kndj
Slide 22
But Android is NOT unique in this
Slide 23
The culprits? SCREEN SIZE
Slide 24
The culprits? EMBEDDED VIEWS
Slide 25
The culprits? BROWSER CHROME
Slide 26
The culprits? ZOOM LEVEL
Slide 27
The culprits? ZOOM LEVEL (Ok, this one’s on Android)
Slide 28
6 Billion 2009 2010 2009 2010 2011 2011 http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/a#subscribers
Slide 29
Over 80% of these are FEATURE PHONES, not smartphones http://developinthecloud.drdobbs.com/author.asp?doc_id=253055§ion_id=2280
Slide 30
especially in DEVELOPING COUNTRIES
Slide 31
Internet in Kenya MOBILE = 90% http://www.cck.go.ke/resc/downloads/SECTOR_STATISTICS_REPORT_Q4_11-12.pdf
Slide 32
The reality
Slide 33
Slide 34
Slide 35
“The commoditization of smartphone hardware is just the beginning … of a huge new wave of cheap devices about to invade our lives—a zombie apocalypse of electronics, if you will. — Scott Jenson
Slide 36
© Brad Frost
Slide 37
© Brad Frost
Slide 38
We DON’T know
Slide 39
Slide 40
We DON’T know
Slide 41
Even when we think we know, WE ARE PROBABLY WRONG
Slide 42
So how do we COPE?
Slide 43
Progressive Enhancement
Slide 44
Technological restrictions
Slide 45
User Experience BASIC ADVANCED Browser Capabilities
Slide 46
User Experience BASIC ADVANCED Browser Capabilities Content
Slide 47
User Experience BASIC Semantics Browser Capabilities Content ADVANCED
Slide 48
User Experience Design BASIC Semantics Browser Capabilities Content ADVANCED
Slide 49
User Experience Interactivity Design BASIC Semantics Browser Capabilities Content ADVANCED
Slide 50
User Experience Accessibility Interactivity Design BASIC Semantics Browser Capabilities Content ADVANCED
Slide 51
User Experience ARIA JavaScript CSS BASIC HTML Browser Capabilities Text & HTTP ADVANCED
Slide 52
HTML
Slide 53
HTML5 HTML Microformats HTML4
Slide 54
I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg
Slide 55
Slide 56
Slide 57
Graceful Degradation
Slide 58
Modern Browsers Older Browsers
Slide 59
Modern Browsers Older Browsers
Slide 60
Modern Browsers Older Browsers
Slide 61
a dynamic web page can never break, it can only become a web page.
Slide 62
Slide 63
Slide 64
Slide 65
Graceful Degradation Progressive Enhancement
Slide 66
Content
Slide 67
Content
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Graceful Degradation Progressive Enhancement
Slide 73
on Responsive Web Design Progressive Enhancement Mobile First
Slide 74
PLANNING ADAPTIVE INTERFACES Complex interfaces
Slide 75
PLANNING ADAPTIVE INTERFACES Complex interfaces
Slide 76
PLANNING ADAPTIVE INTERFACES There is no image… <p class=”entry-image” data-image-src=”/alztheme/images/news/sample.jpg”></p>
Slide 77
PLANNING ADAPTIVE INTERFACES Until there is <p class=”entry-image” data-image-src=”/alztheme/images/news/sample.jpg” data-has-image=”true”> <img alt=”” src=”/alztheme/images/news/sample.jpg” alt=””> </p>
Slide 78
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page
Slide 79
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page JS?
Slide 80
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page JS? No
Slide 81
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page Yes JS? No
Slide 82
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page No Yes JS? No
Slide 83
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Lazy load the images Page Yes No Yes JS? No
Slide 84
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Lazy load the images Page LIVE Yes No Yes JS? No Hide the images (if loaded)
Slide 85
PLANNING ADAPTIVE INTERFACES Complex interfaces
Slide 86
PLANNING ADAPTIVE INTERFACES Complex interfaces
Slide 87
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>
Slide 88
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page
Slide 89
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page JS?
Slide 90
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page JS? No
Slide 91
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page Yes JS? No
Slide 92
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page No Yes JS? No
Slide 93
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Create the link & make image clickable Yes Page No Yes JS? No
Slide 94
PLANNING ADAPTIVE INTERFACES Complex interfaces
Slide 95
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>
Slide 96
PLANNING ADAPTIVE INTERFACES Complex interfaces
Slide 97
PLANNING ADAPTIVE INTERFACES Complex interfaces
Slide 98
PLANNING ADAPTIVE INTERFACES Traditional approach <h1>Pumpkin Pie</h1> <div class=”container”> <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> <!— … —> <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>
Slide 99
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>
Slide 100
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>
Slide 101
PLANNING ADAPTIVE INTERFACES No JS, basic CSS
Slide 102
PLANNING ADAPTIVE INTERFACES Widget logic Page
Slide 103
PLANNING ADAPTIVE INTERFACES Widget logic Page JS?
Slide 104
PLANNING ADAPTIVE INTERFACES Widget logic Page JS? No
Slide 105
PLANNING ADAPTIVE INTERFACES Widget logic Page Split the content & make some tabs Yes JS? No
Slide 106
PLANNING ADAPTIVE INTERFACES On DOM ready <h1>Pumpkin Pie</h1> <div class=”tabbed-interface TabInterface-enabled”> <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> <!— … —> </section> <!— … —> <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>
Slide 107
PLANNING ADAPTIVE INTERFACES Cleaner approach <h1>Pumpkin Pie</h1> <div class=”tabbed-interface” data-tab-threshold=”800”> <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>
Slide 108
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page
Slide 109
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page JS?
Slide 110
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page JS? No
Slide 111
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page Yes JS? No
Slide 112
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page No Yes JS? No
Slide 113
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Split the content & make some tabs Yes Page No Yes JS? No
Slide 114
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Split the content & make some tabs Page LIVE Yes No Yes JS? No Untab (if tabbed)
Slide 115
PLANNING ADAPTIVE INTERFACES Adding ARIA role=”tablist” 79
Slide 116
PLANNING ADAPTIVE INTERFACES Adding ARIA role=”tab” aria-selected=”true” aria-controls=”folder-1”
Slide 117
PLANNING ADAPTIVE INTERFACES Adding ARIA role=”tab” aria-selected=”false” aria-controls=”folder-4”
Slide 118
PLANNING ADAPTIVE INTERFACES Adding ARIA role=”tabpanel” aria-hidden=”false” aria-labelledby=”folder-1-tab”
Slide 119
PLANNING ADAPTIVE INTERFACES Adding ARIA role=”application” aria-activedescendant=”folder-1”
Slide 120
PLANNING ADAPTIVE INTERFACES Result!
