Progressive Enhancement & Mobile
A presentation at AAF North Dakota in in Fargo, ND, USA by Aaron Gustafson
PLANNING ADAPTIVE INTERFACES Aaron Gustafson @aarongustafson slideshare.net/AaronGustafson
© Brad Frost
“ 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
“ 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.
“ 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.
“ 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%.
“ In the second quarter of 2008 we detected 71 different screen resolutions among our visitors. In the first quarter of 2012 we detected 830
© Brad Frost
Perception
Perception
Perception
Perception
“ There is no WebKit on Mobile — Peter-Paul Koch
WebKit vs. Acid3 http://www.quirksmode.org/webkit_mobile.html
WebKit vs. Acid3 http://www.quirksmode.org/webkit_mobile.html
WebKit vs. Acid3 http://www.quirksmode.org/webkit_mobile.html
“ Surely there’s platform consistency!?! — Any sane individual
“ There is no Android — Stephanie Rieger
http://yfrog.com/z/ob5kndj
http://yfrog.com/z/ob5kndj
http://yfrog.com/z/ob5kndj
But Android is NOT unique in this
The culprits? SCREEN SIZE
The culprits? EMBEDDED VIEWS
The culprits? BROWSER CHROME
The culprits? ZOOM LEVEL
The culprits? ZOOM LEVEL (Ok, this one’s on Android)
6 Billion 2009 2010 2009 2010 2011 2011 http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/a#subscribers
Over 80% of these are FEATURE PHONES, not smartphones http://developinthecloud.drdobbs.com/author.asp?doc_id=253055§ion_id=2280
especially in DEVELOPING COUNTRIES
Internet in Kenya MOBILE = 90% http://www.cck.go.ke/resc/downloads/SECTOR_STATISTICS_REPORT_Q4_11-12.pdf
The reality
“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
© Brad Frost
© 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
User Experience BASIC ADVANCED Browser Capabilities
User Experience BASIC ADVANCED Browser Capabilities Content
User Experience BASIC Semantics Browser Capabilities Content ADVANCED
User Experience Design BASIC Semantics Browser Capabilities Content ADVANCED
User Experience Interactivity Design BASIC Semantics Browser Capabilities Content ADVANCED
User Experience Accessibility Interactivity Design BASIC Semantics Browser Capabilities Content ADVANCED
User Experience ARIA JavaScript CSS BASIC HTML Browser Capabilities Text & HTTP ADVANCED
HTML
HTML5 HTML Microformats HTML4
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
Modern Browsers Older Browsers
a dynamic web page can never break, it can only become a web page.
Graceful Degradation Progressive Enhancement
Content
Content
Graceful Degradation Progressive Enhancement
on Responsive Web Design Progressive Enhancement Mobile First
PLANNING ADAPTIVE INTERFACES Complex interfaces
PLANNING ADAPTIVE INTERFACES Complex interfaces
PLANNING ADAPTIVE INTERFACES There is no image… <p class=”entry-image” data-image-src=”/alztheme/images/news/sample.jpg”></p>
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>
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page JS?
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page JS? No
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page Yes JS? No
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page No Yes JS? No
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Lazy load the images Page Yes No Yes JS? No
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Lazy load the images Page LIVE Yes No Yes JS? No Hide the images (if loaded)
PLANNING ADAPTIVE INTERFACES Complex interfaces
PLANNING ADAPTIVE INTERFACES Complex interfaces
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>
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page JS?
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page JS? No
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page Yes JS? No
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page No Yes JS? No
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Create the link & make image clickable Yes Page No Yes JS? No
PLANNING ADAPTIVE INTERFACES Complex interfaces
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>
PLANNING ADAPTIVE INTERFACES Complex interfaces
PLANNING ADAPTIVE INTERFACES Complex interfaces
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>
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>
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>
PLANNING ADAPTIVE INTERFACES No JS, basic CSS
PLANNING ADAPTIVE INTERFACES Widget logic Page
PLANNING ADAPTIVE INTERFACES Widget logic Page JS?
PLANNING ADAPTIVE INTERFACES Widget logic Page JS? No
PLANNING ADAPTIVE INTERFACES Widget logic Page Split the content & make some tabs Yes JS? No
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>
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>
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page JS?
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page JS? No
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page Yes JS? No
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Page No Yes JS? No
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Split the content & make some tabs Yes Page No Yes JS? No
PLANNING ADAPTIVE INTERFACES Adaptive widget logic Split the content & make some tabs Page LIVE Yes No Yes JS? No Untab (if tabbed)
PLANNING ADAPTIVE INTERFACES Adding ARIA role=”tablist” 79
PLANNING ADAPTIVE INTERFACES Adding ARIA role=”tab” aria-selected=”true” aria-controls=”folder-1”
PLANNING ADAPTIVE INTERFACES Adding ARIA role=”tab” aria-selected=”false” aria-controls=”folder-4”
PLANNING ADAPTIVE INTERFACES Adding ARIA role=”tabpanel” aria-hidden=”false” aria-labelledby=”folder-1-tab”
PLANNING ADAPTIVE INTERFACES Adding ARIA role=”application” aria-activedescendant=”folder-1”
PLANNING ADAPTIVE INTERFACES Result!
For years, designers and developers have griped about the difficulties they encountered in supporting the numerous desktop browsers out there, but mobile is even more fragmented. Phones, tablets, media players, video game systems—each device (and in some cases each browser on each device) has its own dimensions, quirks and capabilities. It can make your brain hurt just thinking about it.
Thankfully, going mobile doesn’t have to be a painful experience. In this session, Aaron Gustafson will introduce you to the concept of progressive enhancement and demonstrate why it is the way forward for web design, especially on mobile devices. In the course of his talk, he’ll walk you through progressive enhancement’s layered approach and show you how the latest techniques—mobile first, responsive design, and adaptive UI—fit in to the process. Along the way, he’ll show you tons of examples and give you lots of great ideas you can put to use in your own projects.
