Progressive Enhancement & Mobile [HOW Interactive 2012]

PROGRESSIVE ENHANCEMENT & MOBILEAaron Gustafson@aarongustafsonslideshare.net/AaronGustafson

BROWSERS ARE A PAIN IN THE ASS

“ 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

LET’S TALKMOBILE

FIRST OFFMOBILEIS NOT THEBEST WORD

31% 40% 21% Out of Out of home Out of home home 69% At home 60% At home 79% At home 54% of our daily Computer media interactions Smartphone Tablethttp://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html

MOBILE IS NOT ISOLATED 90 % of people use multiple screens sequentiallyhttp://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html

starting place for online activitiesStarted onsmartphone 65% 63% 65% 47% 59% 66% 56% Searching Browsing Shopping Planning Managing Social Watching an for Info the Internet Online a Trip Finances Networking Online Video Continued on a PC 60% 58% 61% 45% 56% 58% 48% Continued on a tablet 4% 5% 4% 3% 3% 8% 8%http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html

MOBILE = OPPORTUNITYOften this is for “spur-of-the-moment” activity Often this is for “spur-of-the-moment” activity Spontaneous vs. Planned Search Search Spontaneous vs. Planned 20% 20% Planned Planned 48% 48% Planned Planned 80%80% Spontaneous Spontaneous 52% 52% Spontaneous Spontaneous 44%44% 43%43% of all spontaneous searchessearches of all spontaneous of all spontaneous of all spontaneous on smartphones were to were to on smartphones searchessearches on PCs were to on PCs were to accomplish a goal a goal accomplish accomplish a goal a goal accomplish http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html Base: Total Answering, Follow-Up Occasion (Search) –Occasion (Search)Smartphone (216); Tablet not shown due to smallshown dueQ. Wouldbase consider your use of Base: Total Answering, Follow-Up PC/Laptop (492); – PC/Laptop (492); Smartphone (216); Tablet not base size. to small you size. Q. Would you consider your use of 35

WHAT IS MOBILE?

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

WebKit vs. Acid3http://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 ANDROIDIS 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 2011 2009 2010 2011http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/a#subscribers

OVER 80% OF THESE ARE FEATURE PHONES, NOT SMARTPHONEShttp://developinthecloud.drdobbs.com/author.asp?doc_id=253055&section_id=2280

ESPECIALLY TRUE 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

Um… I think I’ll justbuild an iPhone app. kthxbye.

NATIVE vs. WEB

WE DON’T KNOW

EVEN WHEN WE THINK WE KNOW, WE ARE PROBABLY WRONG

SO HOW DO WE COPE?

PROGRESSIVEENHANCEMENT

TECHNOLOGICAL RESTRICTIONS

I like an escalator becausean escalator can never break,it can only become stairs. — Mitch Hedberg

GRACEFULDEGRADATION

MODERNBROWSERS OLDER BROWSERS

a dynamic web page cannever break, it can onlybecome a web page.

PROGRESSIVEENHANCEMENT

CONTENT

ACCESSIBILITY

“SPECIAL NEEDS”

“SPECIAL NEEDS” CAN BE CONTEXTUAL

PROGRESSIVEGRACEFUL DEGRADATION ENHANCEMENT

OOOH, SHINY!

PROGRESSIVEENHANCEMENT ISN’T ABOUT BROWSERS

BROWSERS ANDTECHNOLOGIES COME AND GO

DON’T LOSE SIGHT OF YOUR USERS

ProgressiveGraceful Degradation Enhancement

Responsive Web Design Progressiveon Enhancement Mobile First

User Experience NEWER OLDER Browser Age Graceful Degradation

User Experience BASIC ADVANCED Browser & Device Capabilities Progressive Enhancement

User Experience BASIC ADVANCED Browser & Device Capabilities Content

User Experience Semantics BASIC ADVANCED Browser & Device Capabilities Content

User Experience Design Semantics BASIC ADVANCED Browser & Device Capabilities Content

User Experience Interactivity Design Semantics BASIC ADVANCED Browser & Device Capabilities Content

User Experience Accessibility Interactivity Design Semantics BASIC ADVANCED Browser & Device Capabilities Content

User Experience ARIA JavaScript CSS HTML BASIC ADVANCED Browser & Device Capabilities Text & HTTP

HTML5HTMLMicroformats HTML4

EXAMPLES

PROGRESSIVE ENHANCEMENT & MOBILESemantics 101 <p>HTML5 introduces several <em>really</em> useful elements and a ton of new APIs.</p> <p>Please fill out the form below. <strong>Note: all fields are required.</strong></p> <p>I like to work with markup languages because <strong>they are simple and easy to read</strong>. They also have that certain <i lang="fr" title="I don’t know what">je ne sais quoi</i>.</p>

PROGRESSIVE ENHANCEMENT & MOBILEPE with HTML <video poster=”poster.png”> <source src=”video.m4v”/> <source src=”video.webm”/> <source src=”video.ogv”/> <img src=”poster.png” alt=””/> <ul> <li><a href="video.m4v">Download MP4</a></li> <li><a href="video.webm">Download WebM</a></li> <li><a href="video ogv">Download Ogg</a></li> </ul> </video>

PROGRESSIVE ENHANCEMENT & MOBILEPE with HTML <img src=”poster.png” alt=””/> <ul> <li><a href="video.m4v">Download MP4</a></li> <li><a href="video.webm">Download WebM</a></li> <li><a href="video ogv">Download Ogg</a></li> </ul>

PROGRESSIVE ENHANCEMENT & MOBILEPE with HTML <input type="date" name="dob"/> I get it! I don’t get it :-(

PROGRESSIVE ENHANCEMENT & MOBILEPE with Microformats <section class="vcard"> <figure> <img class="photo" src="aaron-gustafson.jpg" alt=""/> </figure> <h1 class="fn">Aaron Gustafson</h1> … <p>Aaron … is <b class="role">Group Manager</b> of the <a class="org" href="http://webstandards.org">Web Standards Project (WaSP)</a> ….</p> </section>

PROGRESSIVE ENHANCEMENT & MOBILEPE with HTML & ARIA <header role=”banner”> <h1><img src="i/logo.png"/></h1> <nav role=”navigation”> <ol> <li><a href="#details">Details</a></li> <li><a href="#schedule">Schedule</a></li> <li><a href="#instructors">Instructors</a></li> <li><a href="#lodging">Lodging</a></li> <li><a href="#location">Location</a></li> </ol> </nav> </header>

PROGRESSIVE ENHANCEMENT & MOBILEThese are the droids you seek <span role="button">OK</span> <div role="alert"> <p>Something went wrong.</p> </div> <div role="alertdialog"> <p>Something went wrong.</p> <img src="x.png" alt="dismiss" role="button" /> </div>

PROGRESSIVE ENHANCEMENT & MOBILEParsing errors p{ color: red; }

PROGRESSIVE ENHANCEMENT & MOBILEParsing errors p{ color: red; font-weight: bold; }

PROGRESSIVE ENHANCEMENT & MOBILEParsing errors p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }

PROGRESSIVE ENHANCEMENT & MOBILEParsing errors html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }

PROGRESSIVE ENHANCEMENT & MOBILEParsing errors @-moz-document url-prefix() { html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); } }

#intro { /* Basic Layout */}/* ... */body[id=css-zen-garden] #intro { /* Advanced Layout */}

#intro { /* Basic Layout */}/* ... */[foo], #intro { /* Advanced Layout */}

PROGRESSIVE ENHANCEMENT & MOBILEParsing errors @import not-for-IE7-or-below.css screen; @media screen, print, refrigerator { /* IE will get these rules */ }

PROGRESSIVE ENHANCEMENT & MOBILE@Media blocks @media screen { /* Styles for screen media only */ }

PROGRESSIVE ENHANCEMENT & MOBILE@Media blocks+ @media screen and (max-width:450px) { /* Styles for screen media when browser is 450px wide or below */ }

PROGRESSIVE ENHANCEMENT & MOBILEDon’t do this @media screen and (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), screen and (max-device-width:480px) and (orientation:landscape), screen and (min-device-width:481px) and (orientation:portrait) { /* Layout for narrower desktop (below 990px) or iPhone running iOS 3 (or equivalent) or iPhone running iOS 4 (or equivalent) in “landscape” view or iPad (or equivalent) in “portrait” view */ }

PROGRESSIVE ENHANCEMENT & MOBILEMobile First w/ media queries /* Universal Layout */ @media screen { /* Styles for all screens */ } @media screen and (min-width:481px) { /* Styles for all screens 480px+ width */ } @media screen and (min-width:754px) { /* Styles for all screens 754px+ width */ }

http://is.gd/lazyloading_demo

PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript

PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <input class="tweet-counter" value="140" disabled="disabled">

PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>

PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span> .hidden { position: absolute; left: 999em; }

PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <span class="tweet-counter">maximum of 140 characters</span> <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>

PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA <span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>

PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA

PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="application" aria-activedescendant="folder-1"

PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="tablist"

PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="tab" aria-selected="true" aria-controls="folder-1"

PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="tab" aria-selected="false" aria-controls="folder-4"

PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab"

PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA

THANK YOU!http://readlists.com/7d414b24/

Progressive Enhancement & Mobile by Aaron Gustafson @AaronGustafson Further reading: http://adaptivewebdesign.info http://blog.easy-designs.net http://mobilewebbestpractices.com Slides available at http://slideshare.net/AaronGustafson This presentation is licensed under Creative Commons Attribution-Noncommercial-Share Alike 3.0 except where otherwise noted ﬂickr Photo Creditshttp://www.flickr.com/photos/aarongustafson/galleries/72157629846428745/

http://arquiteturadeinformacao.com	3009
http://blog.easy-designs.net	194
https://twitter.com	164
http://casabasa.com	110
http://www.blog-interaction.fr	94
http://codefactory.kr	46
http://www.iphone-entreprise.com	46
http://tm-imweb.tumblr.com	32
http://www.casabasa.com	22
http://www.linkedin.com	21
http://lanyrd.com	12
http://eventifier.co	9
http://www.twylah.com	5
https://t.co	4
https://e.mail.ru	3
http://blog-interaction.com	2
http://pinterest.com	2
http://buahbuahanshow.blogspot.com	2
http://flavors.me	1
http://www.blog-interaction.com	1
http://anireyna.herobo.com	1
http://bottlenose.com	1
https://si0.twimg.com	1
http://bottlenose.local	1
http://ranksit.com	1

Progressive Enhancement & Mobile [HOW Interactive 2012]

by Aaron Gustafson on Oct 29, 2012

Accessibility

Categories

Upload Details

Usage Rights

25 Embeds 3,784

Statistics

Progressive Enhancement & Mobile [HOW Interactive 2012] Presentation Transcript