Progressive Enhancement & Mobile

PLANNING ADAPTIVE INTERFACES Aaron Gustafson @aarongustafson slideshare.net/AaronGustafson

“ 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

Perception

“ There is no WebKit on Mobile — Peter-Paul Koch

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

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&section_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

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

a dynamic web page can never break, it can only become a web page.

Graceful Degradation Progressive Enhancement

Content

Graceful Degradation Progressive Enhancement

on Responsive Web Design Progressive Enhancement Mobile First

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 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 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 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!