SlideShare ist ein Scribd-Unternehmen logo
1 von 139
Downloaden Sie, um offline zu lesen
PROGRESSIVE
     ENHANCEMENT
    &  MOBILE
Aaron Gustafson
@aarongustafson
slideshare.net/AaronGustafson
BROWSERS ARE A
 PAIN IN THE ASS
Progressive Enhancement & Mobile [HOW Interactive 2012]
Progressive Enhancement & Mobile [HOW Interactive 2012]
Progressive Enhancement & Mobile [HOW Interactive 2012]
Progressive Enhancement & Mobile [HOW Interactive 2012]
Progressive Enhancement & Mobile [HOW Interactive 2012]
Progressive Enhancement & Mobile [HOW Interactive 2012]
Progressive Enhancement & Mobile [HOW Interactive 2012]
Progressive Enhancement & Mobile [HOW Interactive 2012]
Progressive Enhancement & Mobile [HOW Interactive 2012]
© Brad Frost
© 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
LET’S TALK
MOBILE
FIRST OFF
MOBILE
IS NOT THE
BEST 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                           Tablet



http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html
MOBILE IS NOT
            ISOLATED

                   90       %
                                    of people use
                                    multiple screens
                                    sequentially




http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html
starting place for online activities

Started on
smartphone
                   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 = OPPORTUNITY
Often 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?
WHAT IS MOBILE?
“   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                              2011
                  2009               2010                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 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
Progressive Enhancement & Mobile [HOW Interactive 2012]
“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 just
build an iPhone app.
      kthxbye.
NATIVE
  vs.
 WEB
NATIVE
  vs.
 WEB
© Brad Frost
© Brad Frost
WE DON’T KNOW
Progressive Enhancement & Mobile [HOW Interactive 2012]
WE DON’T KNOW
EVEN WHEN
 WE THINK
 WE KNOW,
  WE ARE
 PROBABLY
  WRONG
SO HOW DO WE
    COPE?
PROGRESSIVE
ENHANCEMENT
TECHNOLOGICAL
 RESTRICTIONS
I like an escalator because
an escalator can never break,
it can only become stairs.
             — Mitch Hedberg
Progressive Enhancement & Mobile [HOW Interactive 2012]
GRACEFUL
DEGRADATION
MODERN
BROWSERS
   OLDER BROWSERS
MODERN
BROWSERS
   OLDER BROWSERS
a dynamic web page can
never break, it can only
become a web page.
Progressive Enhancement & Mobile [HOW Interactive 2012]
Progressive Enhancement & Mobile [HOW Interactive 2012]
Progressive Enhancement & Mobile [HOW Interactive 2012]
PROGRESSIVE
ENHANCEMENT
CONTENT
CONTENT
Progressive Enhancement & Mobile [HOW Interactive 2012]
ACCESSIBILITY
“SPECIAL NEEDS”
“SPECIAL NEEDS”
“SPECIAL NEEDS”
    CAN BE
  CONTEXTUAL
Progressive Enhancement & Mobile [HOW Interactive 2012]
PROGRESSIVE
GRACEFUL DEGRADATION   ENHANCEMENT
OOOH, SHINY!
PROGRESSIVE
ENHANCEMENT
 ISN’T ABOUT
  BROWSERS
BROWSERS AND
TECHNOLOGIES
 COME AND GO
DON’T LOSE SIGHT
 OF YOUR USERS
Progressive
Graceful Degradation   Enhancement
Responsive
         Web Design



      Progressive
on   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
HTML
HTML5

HTML
Microformats
  HTML4
EXAMPLES
Progressive Enhancement & Mobile [HOW Interactive 2012]
PROGRESSIVE ENHANCEMENT & MOBILE




Semantics 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&#8217;t know what">je ne sais quoi</i>.</p>
PROGRESSIVE ENHANCEMENT & MOBILE




PE 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 & MOBILE




PE 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 & MOBILE




PE with HTML
 <input type="date" name="dob"/>


                   I get it!       I don’t get it :-(
PROGRESSIVE ENHANCEMENT & MOBILE




PE 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 & Mobile [HOW Interactive 2012]
Progressive Enhancement & Mobile [HOW Interactive 2012]
Progressive Enhancement & Mobile [HOW Interactive 2012]
PROGRESSIVE ENHANCEMENT & MOBILE




PE 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 & MOBILE




These 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 & MOBILE




Parsing errors


                                   p{
                                     color: red;
                                   }
PROGRESSIVE ENHANCEMENT & MOBILE




Parsing errors


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




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




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




Parsing 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 & MOBILE




Parsing errors
 @import 'not-for-IE7-or-below.css' screen;

 @media screen, print, refrigerator {
   /* IE will get these rules */
 }
Progressive Enhancement & Mobile [HOW Interactive 2012]
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 & MOBILE




Don’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 & MOBILE




Mobile 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 */
 }
Progressive Enhancement & Mobile [HOW Interactive 2012]
Progressive Enhancement & Mobile [HOW Interactive 2012]
Progressive Enhancement & Mobile [HOW Interactive 2012]
Progressive Enhancement & Mobile [HOW Interactive 2012]
Progressive Enhancement & Mobile [HOW Interactive 2012]
Progressive Enhancement & Mobile [HOW Interactive 2012]
http://is.gd/lazyloading_demo
PROGRESSIVE ENHANCEMENT & MOBILE




PE with JavaScript
PROGRESSIVE ENHANCEMENT & MOBILE




PE with JavaScript




 <input class="tweet-counter" value="140" disabled="disabled">
PROGRESSIVE ENHANCEMENT & MOBILE




PE with JavaScript




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




PE with JavaScript




 <span class="tweet-counter">140
  <b class="hidden"> characters remaining</b></span>


 .hidden {
   position: absolute;
   left: 999em;
 }
PROGRESSIVE ENHANCEMENT & MOBILE




PE 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 & MOBILE




PE with JavaScript & ARIA




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




PE with JavaScript & ARIA
PROGRESSIVE ENHANCEMENT & MOBILE




PE with JavaScript & ARIA
PROGRESSIVE ENHANCEMENT & MOBILE




PE with JavaScript & ARIA




                                   role="application"
                                   aria-activedescendant="folder-1"
PROGRESSIVE ENHANCEMENT & MOBILE




PE with JavaScript & ARIA
                                   role="tablist"
PROGRESSIVE ENHANCEMENT & MOBILE




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




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




PE with JavaScript & ARIA




                                   role="tabpanel"
                                   aria-hidden="false"
                                   aria-labelledby="folder-1-tab"
PROGRESSIVE ENHANCEMENT & MOBILE




PE 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

                   flickr Photo Credits
http://www.flickr.com/photos/aarongustafson/galleries/72157629846428745/

Weitere ähnliche Inhalte

Andere mochten auch

Running your App as a Business
Running your App as a BusinessRunning your App as a Business
Running your App as a BusinessBill Magnuson
 
Mobile Mega Trends to Change the World
Mobile Mega Trends to Change the WorldMobile Mega Trends to Change the World
Mobile Mega Trends to Change the WorldAkash Shrivastava
 
Les usages associés aux tablettes tactiles - GESTE - Mediametrie - Mars 2012
Les usages associés aux tablettes tactiles  - GESTE - Mediametrie - Mars 2012Les usages associés aux tablettes tactiles  - GESTE - Mediametrie - Mars 2012
Les usages associés aux tablettes tactiles - GESTE - Mediametrie - Mars 2012Romain Fonnier
 
Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012Petit Web
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Mobile Marketing: myths, truths and practice
Mobile Marketing: myths, truths and practiceMobile Marketing: myths, truths and practice
Mobile Marketing: myths, truths and practiceMichel Lent Schwartzman
 
Device Fragmentation 2011 / Metrics of the Mobile Web
Device Fragmentation 2011 / Metrics of the Mobile WebDevice Fragmentation 2011 / Metrics of the Mobile Web
Device Fragmentation 2011 / Metrics of the Mobile WebAvenga Germany GmbH
 
Internationaliser son app pour réussir: l'exemple de 94 Secondes
Internationaliser son app pour réussir: l'exemple de 94 SecondesInternationaliser son app pour réussir: l'exemple de 94 Secondes
Internationaliser son app pour réussir: l'exemple de 94 SecondesBenjamin Faure
 
les utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikate
les utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikateles utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikate
les utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikateservicesmobiles.fr
 
Getting Web Multi-Touch Working
Getting Web Multi-Touch Working Getting Web Multi-Touch Working
Getting Web Multi-Touch Working Aidan Wu
 
Sneak Peek at Google I/O 2014 Highlights
Sneak Peek at Google I/O 2014 HighlightsSneak Peek at Google I/O 2014 Highlights
Sneak Peek at Google I/O 2014 HighlightsTechAhead
 
Android et ses petits secrets - SFR Régie - Mars 2012
Android et ses petits secrets  - SFR Régie - Mars 2012Android et ses petits secrets  - SFR Régie - Mars 2012
Android et ses petits secrets - SFR Régie - Mars 2012Romain Fonnier
 
Mobile Marketing Attitude 2013 - SNCD
Mobile Marketing Attitude 2013 - SNCDMobile Marketing Attitude 2013 - SNCD
Mobile Marketing Attitude 2013 - SNCDRomain Fonnier
 

Andere mochten auch (14)

Running your App as a Business
Running your App as a BusinessRunning your App as a Business
Running your App as a Business
 
Mobile Mega Trends to Change the World
Mobile Mega Trends to Change the WorldMobile Mega Trends to Change the World
Mobile Mega Trends to Change the World
 
Les usages associés aux tablettes tactiles - GESTE - Mediametrie - Mars 2012
Les usages associés aux tablettes tactiles  - GESTE - Mediametrie - Mars 2012Les usages associés aux tablettes tactiles  - GESTE - Mediametrie - Mars 2012
Les usages associés aux tablettes tactiles - GESTE - Mediametrie - Mars 2012
 
Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
 
Mobile Marketing: myths, truths and practice
Mobile Marketing: myths, truths and practiceMobile Marketing: myths, truths and practice
Mobile Marketing: myths, truths and practice
 
Device Fragmentation 2011 / Metrics of the Mobile Web
Device Fragmentation 2011 / Metrics of the Mobile WebDevice Fragmentation 2011 / Metrics of the Mobile Web
Device Fragmentation 2011 / Metrics of the Mobile Web
 
Internationaliser son app pour réussir: l'exemple de 94 Secondes
Internationaliser son app pour réussir: l'exemple de 94 SecondesInternationaliser son app pour réussir: l'exemple de 94 Secondes
Internationaliser son app pour réussir: l'exemple de 94 Secondes
 
les utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikate
les utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikateles utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikate
les utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikate
 
Getting Web Multi-Touch Working
Getting Web Multi-Touch Working Getting Web Multi-Touch Working
Getting Web Multi-Touch Working
 
Metro + Metro Like
Metro + Metro LikeMetro + Metro Like
Metro + Metro Like
 
Sneak Peek at Google I/O 2014 Highlights
Sneak Peek at Google I/O 2014 HighlightsSneak Peek at Google I/O 2014 Highlights
Sneak Peek at Google I/O 2014 Highlights
 
Android et ses petits secrets - SFR Régie - Mars 2012
Android et ses petits secrets  - SFR Régie - Mars 2012Android et ses petits secrets  - SFR Régie - Mars 2012
Android et ses petits secrets - SFR Régie - Mars 2012
 
Mobile Marketing Attitude 2013 - SNCD
Mobile Marketing Attitude 2013 - SNCDMobile Marketing Attitude 2013 - SNCD
Mobile Marketing Attitude 2013 - SNCD
 

Ähnlich wie Progressive Enhancement & Mobile [HOW Interactive 2012]

Designing the mobile user experience
Designing the mobile user experienceDesigning the mobile user experience
Designing the mobile user experienceIntergen
 
2012 Breakthrough Austin : Collective
2012 Breakthrough Austin : Collective2012 Breakthrough Austin : Collective
2012 Breakthrough Austin : CollectiveiMedia Connection
 
"Connected home" - aplikacja dla domu i biznesu
"Connected home" - aplikacja dla domu i biznesu"Connected home" - aplikacja dla domu i biznesu
"Connected home" - aplikacja dla domu i biznesuBiznes to Rozmowy
 
Information about Internet usage via smartphones in Netherlands (English)
Information about Internet usage via smartphones in Netherlands (English)Information about Internet usage via smartphones in Netherlands (English)
Information about Internet usage via smartphones in Netherlands (English)Anheuser-Busch InBev
 
Google ipsos mobile_internet_smartphone_adoption_insights_2011
Google ipsos mobile_internet_smartphone_adoption_insights_2011Google ipsos mobile_internet_smartphone_adoption_insights_2011
Google ipsos mobile_internet_smartphone_adoption_insights_2011Carlos Zapata
 
Mobile Marketing to the Rural Sector
Mobile Marketing to the Rural SectorMobile Marketing to the Rural Sector
Mobile Marketing to the Rural SectorBrent Williams
 
Ten Big Trends in Ten Short Minutes
Ten Big Trends in Ten Short MinutesTen Big Trends in Ten Short Minutes
Ten Big Trends in Ten Short MinutesLocal Social Summit
 
Our Mobile Plane (UK) - May 2012
Our Mobile Plane (UK) - May 2012Our Mobile Plane (UK) - May 2012
Our Mobile Plane (UK) - May 2012fastnetwebdesign
 
Mobilized Marketing
Mobilized MarketingMobilized Marketing
Mobilized MarketingVivastream
 
Breakfast &amp; Brains, September 2012- Guy Phillipson
Breakfast &amp; Brains, September 2012- Guy PhillipsonBreakfast &amp; Brains, September 2012- Guy Phillipson
Breakfast &amp; Brains, September 2012- Guy PhillipsonBrainient
 
State of SoLoMo by Greg Sterling - SIMposium 2012
State of SoLoMo by Greg Sterling - SIMposium 2012State of SoLoMo by Greg Sterling - SIMposium 2012
State of SoLoMo by Greg Sterling - SIMposium 2012SIM Partners
 
Vol1: Managing The Hype - The Reality of Mobile in Canada - Appendix
Vol1: Managing The Hype - The Reality of Mobile in Canada - AppendixVol1: Managing The Hype - The Reality of Mobile in Canada - Appendix
Vol1: Managing The Hype - The Reality of Mobile in Canada - AppendixDelvinia
 
Google presentation on Get Mo
Google presentation on Get MoGoogle presentation on Get Mo
Google presentation on Get MoDigital Leaders
 
Cashing in on the Smartphone Gaming Boom
Cashing in on the Smartphone Gaming BoomCashing in on the Smartphone Gaming Boom
Cashing in on the Smartphone Gaming BoomElastic Path
 
Understanding the Mobile Consumer
Understanding the Mobile Consumer Understanding the Mobile Consumer
Understanding the Mobile Consumer Hank Mondaca
 
our_mobile_planet_us_en
our_mobile_planet_us_enour_mobile_planet_us_en
our_mobile_planet_us_enWu Nengyong
 
Статистика використання смартфонів від Google
Статистика використання смартфонів від GoogleСтатистика використання смартфонів від Google
Статистика використання смартфонів від GoogleДіма Леонов
 
Mobile Marketing USA
Mobile Marketing USAMobile Marketing USA
Mobile Marketing USAVasco Marques
 

Ähnlich wie Progressive Enhancement & Mobile [HOW Interactive 2012] (20)

Designing the mobile user experience
Designing the mobile user experienceDesigning the mobile user experience
Designing the mobile user experience
 
2012 Breakthrough Austin : Collective
2012 Breakthrough Austin : Collective2012 Breakthrough Austin : Collective
2012 Breakthrough Austin : Collective
 
"Connected home" - aplikacja dla domu i biznesu
"Connected home" - aplikacja dla domu i biznesu"Connected home" - aplikacja dla domu i biznesu
"Connected home" - aplikacja dla domu i biznesu
 
Information about Internet usage via smartphones in Netherlands (English)
Information about Internet usage via smartphones in Netherlands (English)Information about Internet usage via smartphones in Netherlands (English)
Information about Internet usage via smartphones in Netherlands (English)
 
Google ipsos mobile_internet_smartphone_adoption_insights_2011
Google ipsos mobile_internet_smartphone_adoption_insights_2011Google ipsos mobile_internet_smartphone_adoption_insights_2011
Google ipsos mobile_internet_smartphone_adoption_insights_2011
 
Mobile Marketing to the Rural Sector
Mobile Marketing to the Rural SectorMobile Marketing to the Rural Sector
Mobile Marketing to the Rural Sector
 
Ten Big Trends in Ten Short Minutes
Ten Big Trends in Ten Short MinutesTen Big Trends in Ten Short Minutes
Ten Big Trends in Ten Short Minutes
 
Our Mobile Plane (UK) - May 2012
Our Mobile Plane (UK) - May 2012Our Mobile Plane (UK) - May 2012
Our Mobile Plane (UK) - May 2012
 
Mobile Marketing UK
Mobile Marketing UKMobile Marketing UK
Mobile Marketing UK
 
Mobilized Marketing
Mobilized MarketingMobilized Marketing
Mobilized Marketing
 
Breakfast &amp; Brains, September 2012- Guy Phillipson
Breakfast &amp; Brains, September 2012- Guy PhillipsonBreakfast &amp; Brains, September 2012- Guy Phillipson
Breakfast &amp; Brains, September 2012- Guy Phillipson
 
State of SoLoMo by Greg Sterling - SIMposium 2012
State of SoLoMo by Greg Sterling - SIMposium 2012State of SoLoMo by Greg Sterling - SIMposium 2012
State of SoLoMo by Greg Sterling - SIMposium 2012
 
Vol1: Managing The Hype - The Reality of Mobile in Canada - Appendix
Vol1: Managing The Hype - The Reality of Mobile in Canada - AppendixVol1: Managing The Hype - The Reality of Mobile in Canada - Appendix
Vol1: Managing The Hype - The Reality of Mobile in Canada - Appendix
 
Google presentation on Get Mo
Google presentation on Get MoGoogle presentation on Get Mo
Google presentation on Get Mo
 
Cashing in on the Smartphone Gaming Boom
Cashing in on the Smartphone Gaming BoomCashing in on the Smartphone Gaming Boom
Cashing in on the Smartphone Gaming Boom
 
Understanding the Mobile Consumer
Understanding the Mobile Consumer Understanding the Mobile Consumer
Understanding the Mobile Consumer
 
our_mobile_planet_us_en
our_mobile_planet_us_enour_mobile_planet_us_en
our_mobile_planet_us_en
 
Статистика використання смартфонів від Google
Статистика використання смартфонів від GoogleСтатистика використання смартфонів від Google
Статистика використання смартфонів від Google
 
Our mobile planet_us_en
Our mobile planet_us_enOur mobile planet_us_en
Our mobile planet_us_en
 
Mobile Marketing USA
Mobile Marketing USAMobile Marketing USA
Mobile Marketing USA
 

Mehr von Aaron Gustafson

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Aaron Gustafson
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Aaron Gustafson
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Aaron Gustafson
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Aaron Gustafson
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Aaron Gustafson
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Aaron Gustafson
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Aaron Gustafson
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Aaron Gustafson
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Aaron Gustafson
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]Aaron Gustafson
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Aaron Gustafson
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Aaron Gustafson
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Aaron Gustafson
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for EveryoneAaron Gustafson
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Aaron Gustafson
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Aaron Gustafson
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Aaron Gustafson
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Aaron Gustafson
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Aaron Gustafson
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Aaron Gustafson
 

Mehr von Aaron Gustafson (20)

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
 

Kürzlich hochgeladen

Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Alexander Turgeon
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdfPaige Cruz
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementNuwan Dias
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 

Kürzlich hochgeladen (20)

Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API Management
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 

Progressive Enhancement & Mobile [HOW Interactive 2012]

  • 1. PROGRESSIVE ENHANCEMENT & MOBILE Aaron Gustafson @aarongustafson slideshare.net/AaronGustafson
  • 2. BROWSERS ARE A PAIN IN THE ASS
  • 14. 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
  • 15. 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.
  • 16. 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.
  • 17. 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%.
  • 18. In the second quarter of 2008 we detected 71 different screen resolutions among our visitors. In the first quarter of 2012 we detected 830
  • 20. FIRST OFF MOBILE IS NOT THE BEST WORD
  • 21. 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 Tablet http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html
  • 22. MOBILE IS NOT ISOLATED 90 % of people use multiple screens sequentially http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html
  • 23. starting place for online activities Started on smartphone 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
  • 24. MOBILE = OPPORTUNITY Often 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
  • 27. There is no WebKit on Mobile — Peter-Paul Koch
  • 29. Surely there’s platform consistency!?! — Any sane individual
  • 30. There is no Android — Stephanie Rieger
  • 32. BUT ANDROID IS NOT UNIQUE IN THIS
  • 37. THE CULPRITS? ZOOM LEVEL (Ok, this one’s on Android)
  • 38. 6 Billion 2009 2010 2011 2009 2010 2011 http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/a#subscribers
  • 39. OVER 80% OF THESE ARE FEATURE PHONES, NOT SMARTPHONES http://developinthecloud.drdobbs.com/author.asp?doc_id=253055&section_id=2280
  • 40. ESPECIALLY TRUE IN DEVELOPING COUNTRIES
  • 41. INTERNET IN KENYA MOBILE = 90% http://www.cck.go.ke/resc/downloads/SECTOR_STATISTICS_REPORT_Q4_11-12.pdf
  • 44. “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
  • 45. Um… I think I’ll just build an iPhone app. kthxbye.
  • 46. NATIVE vs. WEB
  • 47. NATIVE vs. WEB
  • 53. EVEN WHEN WE THINK WE KNOW, WE ARE PROBABLY WRONG
  • 54. SO HOW DO WE COPE?
  • 57. I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg
  • 60. MODERN BROWSERS OLDER BROWSERS
  • 61. MODERN BROWSERS OLDER BROWSERS
  • 62. a dynamic web page can never break, it can only become a web page.
  • 73. “SPECIAL NEEDS” CAN BE CONTEXTUAL
  • 79. DON’T LOSE SIGHT OF YOUR USERS
  • 81. Responsive Web Design Progressive on Enhancement Mobile First
  • 82. User Experience NEWER OLDER Browser Age Graceful Degradation
  • 83. User Experience BASIC ADVANCED Browser & Device Capabilities Progressive Enhancement
  • 84. User Experience BASIC ADVANCED Browser & Device Capabilities Content
  • 85. User Experience Semantics BASIC ADVANCED Browser & Device Capabilities Content
  • 86. User Experience Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  • 87. User Experience Interactivity Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  • 88. User Experience Accessibility Interactivity Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  • 89. User Experience ARIA JavaScript CSS HTML BASIC ADVANCED Browser & Device Capabilities Text & HTTP
  • 90. HTML
  • 94. PROGRESSIVE ENHANCEMENT & MOBILE Semantics 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&#8217;t know what">je ne sais quoi</i>.</p>
  • 95. PROGRESSIVE ENHANCEMENT & MOBILE PE 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>
  • 96. PROGRESSIVE ENHANCEMENT & MOBILE PE 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>
  • 97. PROGRESSIVE ENHANCEMENT & MOBILE PE with HTML <input type="date" name="dob"/> I get it! I don’t get it :-(
  • 98. PROGRESSIVE ENHANCEMENT & MOBILE PE 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>
  • 102. PROGRESSIVE ENHANCEMENT & MOBILE PE 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>
  • 103. PROGRESSIVE ENHANCEMENT & MOBILE These 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>
  • 104. PROGRESSIVE ENHANCEMENT & MOBILE Parsing errors p{ color: red; }
  • 105. PROGRESSIVE ENHANCEMENT & MOBILE Parsing errors p{ color: red; font-weight: bold; }
  • 106. PROGRESSIVE ENHANCEMENT & MOBILE Parsing errors p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
  • 107. PROGRESSIVE ENHANCEMENT & MOBILE Parsing errors html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
  • 108. PROGRESSIVE ENHANCEMENT & MOBILE Parsing errors @-moz-document url-prefix() { html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); } }
  • 109. #intro { /* Basic Layout */ } /* ... */ body[id=css-zen-garden] #intro { /* Advanced Layout */ }
  • 110. #intro { /* Basic Layout */ } /* ... */ [foo], #intro { /* Advanced Layout */ }
  • 111. PROGRESSIVE ENHANCEMENT & MOBILE Parsing errors @import 'not-for-IE7-or-below.css' screen; @media screen, print, refrigerator { /* IE will get these rules */ }
  • 113. PROGRESSIVE ENHANCEMENT & MOBILE @Media blocks @media screen { /* Styles for screen media only */ }
  • 114. PROGRESSIVE ENHANCEMENT & MOBILE @Media blocks+ @media screen and (max-width:450px) { /* Styles for screen media when browser is 450px wide or below */ }
  • 115. PROGRESSIVE ENHANCEMENT & MOBILE Don’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 */ }
  • 116. PROGRESSIVE ENHANCEMENT & MOBILE Mobile 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 */ }
  • 124. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript
  • 125. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript <input class="tweet-counter" value="140" disabled="disabled">
  • 126. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>
  • 127. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span> .hidden { position: absolute; left: 999em; }
  • 128. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript <span class="tweet-counter">maximum of 140 characters</span> <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>
  • 129. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA <span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>
  • 130. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA
  • 131. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA
  • 132. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA role="application" aria-activedescendant="folder-1"
  • 133. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA role="tablist"
  • 134. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA role="tab" aria-selected="true" aria-controls="folder-1"
  • 135. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA role="tab" aria-selected="false" aria-controls="folder-4"
  • 136. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab"
  • 137. PROGRESSIVE ENHANCEMENT & MOBILE PE with JavaScript & ARIA
  • 139. 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 flickr Photo Credits http://www.flickr.com/photos/aarongustafson/galleries/72157629846428745/