SlideShare une entreprise Scribd logo
1  sur  112
MOBILE
FIRST
LUKE WROBLEWSKI
OCTOBER 2011



                  @LUKEW




                           1
Web products should be designed for mobile first.

Flickr photo by @kevinv033                           2
Google programmers are doing work
on mobile applications first, because
they are better apps and that's what
top programmers want to develop.
–Eric Schmidt, Google Chairman




                                        3
We're just now starting to think about mobile first and desktop
second for a lot of our products.”
-Kate Aronowitz, Design Director Facebook



Flickr photo by gscottolson                                       4
We really need to shift now to start thinking about building mobile
first. This is an even bigger shift than the PC revolution.”
-Kevin Lynch, CTO Adobe



Flickr photo by jdlasica                                          5
“Designing the mobile app first forced us to strip down to essentials.”
-Bill DeRouchey, BankSimple

Flickr photo by by WebVisions Event                                 6
MOBILE FIRST
1. GROWTH       = OPPORTUNITY
2. CONSTRAINTS = FOCUS
3. CAPABILITIES = INNOVATION


                            7
MOBILE FIRST
1. GROWTH       = OPPORTUNITY
2. CONSTRAINTS = FOCUS
3. CAPABILITIES = INNOVATION


                            8
GROWTH = OPPORTUNITY
Mobile Web growth has outpaced desktop Web growth 8x
Global mobile data traffic should grow 26x over next 5 years




         PC                                    Desktop Internet                            Mobile Consumer
         100M+                                 1B+                                         10B+




 1990                                    2000                                     2010                                     2020
 Note: PC installed base reached 100MM in 1993, cellphone / Internet users reached 1B in 2002 / 2005 respectively;25 Source:
                                                                                                                               9
 ITU, Mark Lipacis, Morgan Stanley Research.
Commerce
• Amazon: over $1 billion spent via mobile devices in the past 12 months
• eBay: global mobile sales ~$4 billion in 2011, $2B in 2010, $600M in 2009
• Best Buy: mobile Web users doubling every year:
  30M (10), 17M (09), 6M (08)


Social
• Twitter: 40% of tweets sent via mobile, 16% of new users start on mobile
• Instagram: iPhone only 3 months to hit 1M users. Six weeks to 2M
• Mixi (Japan): 85% of page views on mobile vs. 14% 4.5 years ago


Productivity & Media
• Google: mobile searches grew 130% in Q3 2010
• Pandora: 50% of total user base subscribes to the service on mobile
• Email: 70% of smartphone users have accessed email on mobile device



              Source: http://www.lukew.com/ff/entry.asp?1188                  10
PC vs. Smartphone Shipments
                                                Smartphones passed PC shipments in Q42010
                         700
Global Shipments in MM




                                                                                               SMARTPHONES
                         600


                         500                                                                                  PCS

                         400
                                                                              Q42010                  2012E
                         300


                         200


                         100


                          0
                               2005        2006         2007         2008   2009   2010E   2011E   2012E   2013E


                                      Source: http://bit.ly/gIqKm9
                                                                                                                    11
                                      Source: http://bit.ly/g5ktGq
Shift in Usage
                                        40

                                        35

                                        30

                                        25

-20%          Home usage of PC
              since 2008                20

                                        15

                                        10

                                         5

                                        0
                                             2006   2008   2010




                                       Why?     Smartphones &
                                                tablets



       Source: http://read.bi/efrmCj                              12
Shift in Usage




      Visitors to Web-                       Visitors accessing
-7%   based email sites
      declined                        +36%   email on mobile
                                             devices increased




       Source: http://bit.ly/hJdtty                         13
35% of searches come from 7% of users

               • 35% of all Yelp searches come from
                 their mobile applications which had
                 3.2 million unique users in Feb 2011
               • That month Yelp had 45 million
                 monthly unique users around the world




                Source: http://bit.ly/hw0Xtb            14
Additional Usage

              • Every other second a consumer calls a
                local business and generates driving
                directions from a Yelp mobile app.


              • Viewing active listings 45% more often
                from mobile devices (audience is
                primarily active buyers, on location or
                scoping out neighborhoods)


              • People that use Facebook on their
                mobile devices (350M active) are twice
                as active on Facebook than non-
                mobile users.

                   Source: http://www.lukew.com/ff/entry.asp?1131
                   Source: http://www.lukew.com/ff/entry.asp?1178   15
SMARTPHONES
Don’t most people just use
native mobile applications
to access the Internet?




                             16
Twitter Usage

            347% INCREASE    IN MOBILE BROWSER USERS (4.7M) JAN 2010



                     TWITTER.COM
            •78% of tweets sent via mobile
              40%
            • 16% M.TWITTER.COM
                  of new users start on mobile
             14%
            • What are the top two Twitter
                  SMS
              mobile clients?
               8%
                     TWITTER ON IPHONE

                8%
                     TWITTER ON BLACKBERRY

                7%


                                                                 17
18
Facebook Usage

          112% INCREASE   IN MOBILE BROWSER USERS (251M) JAN 2010



                 NON MOBILE

           67%
          • 33% of posts sent via mobile
                M.FACEBOOK.COM
            18%
          • What are the top two Facebook
            mobile clients?
                ANDROID

             4%
                 IPHONE

            4%
                 BLACKBERRY

            4%


                                                                19
20
21
Mobile Web Usage

         • Mobile phones will overtake PCs as the
           most common Web access devices
           worldwide by 2013
         • 600% growth in traffic to mobile websites
           in 2010
         • Avg smartphone user visits up to 24 Web
           sites visits per day
         • Top 50 websites constitute only 40% of
           all mobile visits
         • Opera Mini traffic up 200% yr/yr




          Source: http://www.mobiadnews.com/?p=5133
          Source: http://www.lukew.com/ff/entry.asp?1013   22
MOBILE ONLY?
                                                 UK: 22%
  BY 2015
                                                NEVER/INFREQUENT
                                                  DESKTOP USE
                                                                                                       Asia: 50+%
                                                                                                       DON’T USE INTERNET ON PC


 US: 25%
 US: 50+%
  NEVER/INFREQUENT
 MORE MOBILE THAN PC
    DESKTOP USE



                                                                                    India: 49%
                                                                                    NEVER/INFREQUENT
                                                                                      DESKTOP USE


                                                        Africa: 50+%
                                                         DON’T USE INTERNET ON PC




                       Source: http://www.lukew.com/ff/entry.asp?1391                                                  23
“My goal was initially just to make a mobile companion, but I became
convinced it was possible to create a version of Facebook that was
actually better than the website.”
–Joe Hewitt

                                                                 24
MOBILE FIRST
1. GROWTH       = OPPORTUNITY
2. CONSTRAINTS = FOCUS
3. CAPABILITIES = INNOVATION


                            25
CONSTRAINTS
• Size of Screen
• Speed of Networks
• Modes of Use




                      26
1024x768   320x480




                 27
28
29
30
31
32
Know your audience




                     33
34
35
36
37
CONSTRAINTS
• Size of Screen
• Speed of Networks
• Modes of Use




                      38
39
Reduce Requests & File Size
•   Eliminate redirects
•   Use CSS sprites to serve multiple images
•   Consolidate CSS & Javascript into a single file
•   Reduce dependencies on heavy Javascript libraries
•   Minify your code


Take Advantage of HTML5, etc.
•   Use proper http headers for caching
•   Load contents lazily
•   Use application cache for local content storage
•   Use CSS3 and canvas tag instead of images where
    possible


           Source: Make the mobile web faster, Jeremy Weinstein   40
100ms delay results in 1% sales loss.
                                       (potential $191M in lost revenue in 2008)


                                       400ms delay results in 5-9% drop in full-
                                       page traffic.


                                       500ms delay drops search traffic by 20%.
                                       The cost of slower performance increases
                                       over time.

                                       1s delay results 4% drop in revenue



                                       Fastest 10% of users stay 50% longer than
                                       slowest 10%

Sources: slideshare.net/stubbornella/designing-fast-websites-presentation & slideshare.net/markstanton/speed-matters   41
CONSTRAINTS
• Size of Screen
• Speed of Networks
• Modes of Use




                      42
Big Screen


Power Supply


Consistent Network


Keyboard


Mouse


Chair


Desk



                     43
Small Screen



               Battery



INTENSELY PERSONAL Network
              Inconsistent



               Fingers




               Sensors


                              44
WHERE ARE WE MOBILE?

84% at home
80% during misc. times
74% waiting in lines
64% at work




                         Photo by Steve Rhodes
                                            45
ONE EYEBALL




Partial attention requires focused design



                                        ONE THUMB




                                            PHOTO BY STEVE RHODES
When are we mobile?

                                                                                      Computer users




1    2   3   4   5      6     7    8     9    10    11   12   1   2   3   4   5   6    7   8   9   10   11        12



                     Source: http://bit.ly/hGrQMy                                                            47
When are we mobile?

                                                                                          iPhone users


                                                ANYTIME




1    2   3   4   5      6     7    8     9    10    11   12   1   2   3   4   5   6   7   8   9   10   11    12



                     Source: http://bit.ly/hGrQMy                                                           48
When are we mobile?

                                                                                              iPad users




1    2   3   4   5      6     7    8     9    10    11   12   1   2   3   4   5   6   7   8   9   10   11    12



                     Source: http://bit.ly/hGrQMy                                                           49
When are we mobile?
                                                                              Linkedin Overall users




1    2   3   4   5      6     7    8     9    10    11   12   1   2   3   4    5   6   7   8   9   10   11    12



                     Source: http://bit.ly/hGrQMy                                                            50
When are we mobile?
                                                                              Linkedin Mobile users




1    2   3   4   5      6     7    8     9    10    11   12   1   2   3   4    5   6   7   8   9   10   11        12



                     Source: http://bit.ly/hGrQMy                                                            51
When are we mobile?
                                      Mobile 3G Traffic Patterns


                                                           Laptop




                                                            Tablet




                                                       Smartphone




9      12                       15   18           21          24



      Source: http://bit.ly/qL5NdX                            52
CONSTRAINTS
• Size of Screen
• Speed of Networks
• Modes of Use




                      53
“I was looking at the right side of the Venn diagram I thought, ‘That looks
like a lot of the current and planned content for our mobile site.’ I think the
only thing we don’t have are the admissions application.”




             Source: XKCD http://xkcd.com/773/ & http://www.dmolsen.com/mobile-in-higher-ed/?p=197   54
MOBILE FIRST
1. GROWTH       = OPPORTUNITY
2. CONSTRAINTS = FOCUS
3. CAPABILITIES = INNOVATION


                            55
Landscape Mode




                 56
Landscape Mode




                 57
Safari Gyroscope Access




      Source: http://bit.ly/gAXCeL   58
TOUCH
•   1.03M touchscreen phones sold per day (2009)
•   88K iPads sold per day (2011)
•   194K iPhones sold per day (2011)
•   500K Android devices activated per day (2011)
•   What about RIM & Nokia?


                                                    59
Indirect Manipulation




TRACKBALL                           TRACKPAD
KEYBOARD                            KEYPAD




                                             60
Direct Manipulation




TRACKPAD




                                 61
Nokia smartphone mix
     Keypad
     Qwerty Only
     Touch         INCLUDES QWERTY + TOUCH




          2008                                                2009   2010
                                                                     PROJECTED


                                                                                 62
Source: Nokia –deices sold. Nokia Capital markets day 2009.
63
Touch Target Sizes


     44px/pt


               44px/pt




                         64
Recommended touch
target size is 9mm/34px


Minimum touch target size
is 7mm/26px


Minimum spacing between
elements is 2mm/8px


Visual size is 60-100% of
the touch target size




                            65
Touch Targets

                     44px



Bigger then you’re
comfortable with

                     44px

                     30px




                        66
67
Touch Gestures   Platforms

Tap              iPhone OS
Double Tap       Android
                 Web OS
Drag
                 Windows Phone 7
Flick
                 OS X
Pinch            Windows 7
Spread           RIM 6.0
Press            Ubuntu
                 And more...
Press & Tap
Press & Drag
Rotate



                                   68
Tap
Briefly touch surface with fingertip.




Double Tap
Rapidly touch surface twice with fingertip.




                Images: Dan Willis Research: Craig Villamor & LukeW   69
Drag
Move fingertip over surface without losing contact.




Flick
Quickly brush surface with fingertip.




               Images: Dan Willis Research: Craig Villamor & LukeW   70
Pinch
Touch surface with two fingers and bring them closer together.




Spread
Touch surface with two fingers and move them apart.




              Images: Dan Willis Research: Craig Villamor & LukeW   71
Press                                                      Press & Tap
Touch surface for extended period of                       Press surface with one finger and briefly
time.                                                      touch surface with second finger.




Press & Drag
Press surface with one finger and move second finger over surface without losing
contact.




              Images: Dan Willis Research: Craig Villamor & LukeW                                72
Rotate
Touch surface with two fingers and move them in a clockwise or
counterclockwise direction.




              Images: Dan Willis Research: Craig Villamor & LukeW   73
Images: Dan Willis Research: Craig Villamor & LukeW   74
Images: Dan Willis Research: Craig Villamor & LukeW   75
Images: Dan Willis Research: Craig Villamor & LukeW   76
Touch Gesture Cards




www.lukew.com/touch
                   77
Drag to Reveal




                 78
79
Drag to Refresh




                  80
Drag to Reveal




                 81
Drag to Reveal




• Feature overview




                     82
83
Natural User Interfaces (NUI)

 “NUI exploits skills that we have acquired through
 a lifetime of living in the World” –Bill Buxton

                      • Content is the UI (the action)
                      • Reduce the distance as much as possible
                        between user & content
                      • Enable direct manipulation of objects &
                        content
                      • Guessable, predictable, physical, realistic
                      • Reduce Visuals that are Not Content




          Source: http://www.lukew.com/ff/entry.asp?770               84
Location
Detection




            85
Location Systems
                      Accuracy                        Positioning Time         Battery Life

 GPS                  10m                             2-10 minutes (only       5-6 hours on
                                                      outdoors)                most phones


 WiFi                 50m (improves with              Almost instant (server   No additional
                      density)                        connect & lookup)        effect


 Cell tower           100-1400m (based on             Almost instant (server   Negligible
 triangulation        density)                        connect & lookup)


 Single Cell          500-2500m (based on             Almost instant (server   Negligible
 Tower                density)                        connect & lookup)


 IP                   Country: 99%                    Almost instant (server   Negligible
                                                      connect & lookup)
                      City: 46% US, 53% Intl
                      ZIP: 0%

Smartphones: hybrid of GPS, Wifi, and cell tower triangulation
Laptops/desktops: WiFi, IP, rarely GPS
                                                                                               86
Location
Detection




            87
Mobile Device Capabilities
•   Device positioning & motion: from an accelerometer
•   Gyroscope: 360 degrees of motion
•   Location detection
•   Multi-touch sensors
•   Orientation: direction from a digital compass
•   Video & image: capture/input from a camera
•   Dual cameras: front and back
•   Audio: input from a microphone; output to speaker
•   Device connections: through Bluetooth between devices
•   Proximity: device closeness to physical objects
•   Ambient Light: light/dark environment awareness
•   NFC: Near Field Communications through RFID readers


                                                            88
Direction   Location
Detection   Detection




                        89
320x480




          90
320x480




          91
320x480




          92
93
94
Source: AcrossAir
When discovered by users
boosted their sustained traffic
by 40 to 50 percent.


“It was sort of beyond our
expectations. We had no idea.”
Yelp CEO,
Jeremy Stoppelman

                                  95
Native App              Mobile Web




• Location detection    • Location detection
• Device orientation    • Device orientation
• Digital compass       • Digital compass
• Video camera access




                                               96
Android 3.0 (ish)




                    HTML Media Capture
                    Allows web applications to
                    access audio, image and video
                    capture capabilities of the
                    device.




                                                97
Awkward Interactions




    SCAN TO CHECKOUT

                                     98
Flickr photo by Nokia Point & Find
99
100
101
102
Images as Input




                  103
Images as Input & Output




                           104
Images as Input




                  105
Images as Input




                  106
Nerd.
                                     Found.




                                              107
Flickr photo by Nokia Point & Find
108
109
Mobile Device Capabilities
•   Device positioning & motion: from an accelerometer
•   Gyroscope: 360 degrees of motion
•   Location detection
•   Multi-touch sensors
•   Orientation: direction from a digital compass
•   Video & image: capture/input from a camera
•   Dual cameras: front and back
•   Audio: input from a microphone; output to speaker
•   Device connections: through Bluetooth between devices
•   Proximity: device closeness to physical objects
•   Ambient Light: light/dark environment awareness
•   NFC: Near Field Communications through RFID readers


                                                            110
MOBILE FIRST
1. GROWTH       = OPPORTUNITY
2. CONSTRAINTS = FOCUS
3. CAPABILITIES = INNOVATION


                            111
MOBILE FIRST

• @lukew
• www.lukew.com

Mobile First!
• abookapart.com

Contenu connexe

Tendances

Progressive Mobile Strategy Redux: The Future Friendly Enterprise
Progressive Mobile Strategy Redux: The Future Friendly EnterpriseProgressive Mobile Strategy Redux: The Future Friendly Enterprise
Progressive Mobile Strategy Redux: The Future Friendly EnterpriseDave Olsen
 
Designing For Mobile First
Designing For Mobile FirstDesigning For Mobile First
Designing For Mobile FirstJoe Hass
 
Mobile First and App Trends 2012
Mobile First and App Trends 2012Mobile First and App Trends 2012
Mobile First and App Trends 2012Magnus Jern
 
Mobile marketing copy
Mobile marketing copyMobile marketing copy
Mobile marketing copyJayne Navarre
 
Developing a Progressive Mobile Strategy (M3 Conf version)
Developing a Progressive Mobile Strategy (M3 Conf version)Developing a Progressive Mobile Strategy (M3 Conf version)
Developing a Progressive Mobile Strategy (M3 Conf version)Dave Olsen
 
10 reasons why now is the perfect time to get serious about the mobile web
10 reasons why now is the perfect time to get serious about the mobile web10 reasons why now is the perfect time to get serious about the mobile web
10 reasons why now is the perfect time to get serious about the mobile webTijs Vrolix
 
AD502: The Mobile Disruption: Why XPages Development is Targeting Mobile First
AD502: The Mobile Disruption: Why XPages Development is Targeting Mobile FirstAD502: The Mobile Disruption: Why XPages Development is Targeting Mobile First
AD502: The Mobile Disruption: Why XPages Development is Targeting Mobile FirstJohn Head
 
Ten reasons why now is the perfect time to get serious about the mobile web
Ten reasons why now is the perfect time to get serious about the mobile webTen reasons why now is the perfect time to get serious about the mobile web
Ten reasons why now is the perfect time to get serious about the mobile webTijs Vrolix
 
AppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs NativeAppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs NativeSebastian de Mel
 
Marketers guide to ipad for business
Marketers guide to ipad for businessMarketers guide to ipad for business
Marketers guide to ipad for businessOgilvy PR
 
Digital and Social Media in Aesthetics Marketing
Digital and Social Media in Aesthetics MarketingDigital and Social Media in Aesthetics Marketing
Digital and Social Media in Aesthetics MarketingVincent Teo
 
How to market your app
How to market your appHow to market your app
How to market your appOuriel Ohayon
 
Domain7: Mobile Web Market Analysis
Domain7: Mobile Web Market AnalysisDomain7: Mobile Web Market Analysis
Domain7: Mobile Web Market AnalysisRyan Hanawalt
 
Around the World with Mobile Global Insights and Regional Relevance of Mobile...
Around the World with Mobile Global Insights and Regional Relevance of Mobile...Around the World with Mobile Global Insights and Regional Relevance of Mobile...
Around the World with Mobile Global Insights and Regional Relevance of Mobile...Vivastream
 
Debunking social media myths
Debunking social media mythsDebunking social media myths
Debunking social media mythsVincent Teo
 
Why you should get serious about the mobile web
Why you should get serious about the mobile webWhy you should get serious about the mobile web
Why you should get serious about the mobile webTijs Vrolix
 
Are Websites Optimized for Mobile Devices and Smart TVs ?
Are Websites Optimized for Mobile Devices and Smart TVs ?Are Websites Optimized for Mobile Devices and Smart TVs ?
Are Websites Optimized for Mobile Devices and Smart TVs ?Manos Perakakis
 
500 Mobile Collective - Mobile Growth Hacking MOAARRR @ MWC 2015 4YFN
500 Mobile Collective - Mobile Growth Hacking MOAARRR @ MWC 2015 4YFN500 Mobile Collective - Mobile Growth Hacking MOAARRR @ MWC 2015 4YFN
500 Mobile Collective - Mobile Growth Hacking MOAARRR @ MWC 2015 4YFNEdith Yeung
 
Developing a Progressive Mobile Strategy (J. Boye edition)
Developing a Progressive Mobile Strategy (J. Boye edition)Developing a Progressive Mobile Strategy (J. Boye edition)
Developing a Progressive Mobile Strategy (J. Boye edition)Dave Olsen
 

Tendances (20)

Progressive Mobile Strategy Redux: The Future Friendly Enterprise
Progressive Mobile Strategy Redux: The Future Friendly EnterpriseProgressive Mobile Strategy Redux: The Future Friendly Enterprise
Progressive Mobile Strategy Redux: The Future Friendly Enterprise
 
Designing For Mobile First
Designing For Mobile FirstDesigning For Mobile First
Designing For Mobile First
 
Mobile First and App Trends 2012
Mobile First and App Trends 2012Mobile First and App Trends 2012
Mobile First and App Trends 2012
 
Mobile marketing copy
Mobile marketing copyMobile marketing copy
Mobile marketing copy
 
Developing a Progressive Mobile Strategy (M3 Conf version)
Developing a Progressive Mobile Strategy (M3 Conf version)Developing a Progressive Mobile Strategy (M3 Conf version)
Developing a Progressive Mobile Strategy (M3 Conf version)
 
10 reasons why now is the perfect time to get serious about the mobile web
10 reasons why now is the perfect time to get serious about the mobile web10 reasons why now is the perfect time to get serious about the mobile web
10 reasons why now is the perfect time to get serious about the mobile web
 
AD502: The Mobile Disruption: Why XPages Development is Targeting Mobile First
AD502: The Mobile Disruption: Why XPages Development is Targeting Mobile FirstAD502: The Mobile Disruption: Why XPages Development is Targeting Mobile First
AD502: The Mobile Disruption: Why XPages Development is Targeting Mobile First
 
Ten reasons why now is the perfect time to get serious about the mobile web
Ten reasons why now is the perfect time to get serious about the mobile webTen reasons why now is the perfect time to get serious about the mobile web
Ten reasons why now is the perfect time to get serious about the mobile web
 
AppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs NativeAppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs Native
 
Marketers guide to ipad for business
Marketers guide to ipad for businessMarketers guide to ipad for business
Marketers guide to ipad for business
 
Digital and Social Media in Aesthetics Marketing
Digital and Social Media in Aesthetics MarketingDigital and Social Media in Aesthetics Marketing
Digital and Social Media in Aesthetics Marketing
 
How to market your app
How to market your appHow to market your app
How to market your app
 
Domain7: Mobile Web Market Analysis
Domain7: Mobile Web Market AnalysisDomain7: Mobile Web Market Analysis
Domain7: Mobile Web Market Analysis
 
Around the World with Mobile Global Insights and Regional Relevance of Mobile...
Around the World with Mobile Global Insights and Regional Relevance of Mobile...Around the World with Mobile Global Insights and Regional Relevance of Mobile...
Around the World with Mobile Global Insights and Regional Relevance of Mobile...
 
Debunking social media myths
Debunking social media mythsDebunking social media myths
Debunking social media myths
 
Why you should get serious about the mobile web
Why you should get serious about the mobile webWhy you should get serious about the mobile web
Why you should get serious about the mobile web
 
Are Websites Optimized for Mobile Devices and Smart TVs ?
Are Websites Optimized for Mobile Devices and Smart TVs ?Are Websites Optimized for Mobile Devices and Smart TVs ?
Are Websites Optimized for Mobile Devices and Smart TVs ?
 
500 Mobile Collective - Mobile Growth Hacking MOAARRR @ MWC 2015 4YFN
500 Mobile Collective - Mobile Growth Hacking MOAARRR @ MWC 2015 4YFN500 Mobile Collective - Mobile Growth Hacking MOAARRR @ MWC 2015 4YFN
500 Mobile Collective - Mobile Growth Hacking MOAARRR @ MWC 2015 4YFN
 
Big Brand Strategies for Mobile App Marketing
Big Brand Strategies for Mobile App MarketingBig Brand Strategies for Mobile App Marketing
Big Brand Strategies for Mobile App Marketing
 
Developing a Progressive Mobile Strategy (J. Boye edition)
Developing a Progressive Mobile Strategy (J. Boye edition)Developing a Progressive Mobile Strategy (J. Boye edition)
Developing a Progressive Mobile Strategy (J. Boye edition)
 

En vedette

Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Jason Grigsby
 
Mobile-First Strategy
Mobile-First StrategyMobile-First Strategy
Mobile-First StrategySteve Buttry
 
Hyper Island teaching notes: usability testing
Hyper Island teaching notes: usability testingHyper Island teaching notes: usability testing
Hyper Island teaching notes: usability testingBarry Briggs
 
Gamification to get your message across
Gamification to get your message acrossGamification to get your message across
Gamification to get your message acrossOlivier Gillin
 
Designing speed with progressive enhancement
Designing speed with progressive enhancementDesigning speed with progressive enhancement
Designing speed with progressive enhancementSergeyChernyshev
 
Mobile first responsive web design
Mobile first responsive web designMobile first responsive web design
Mobile first responsive web designMark Riggan
 
10 Most Common Misconceptions About User Experience
10 Most Common Misconceptions About User Experience10 Most Common Misconceptions About User Experience
10 Most Common Misconceptions About User ExperienceTherese Kokot
 
Page Heirarchy - Luke Wroblewski
Page Heirarchy - Luke WroblewskiPage Heirarchy - Luke Wroblewski
Page Heirarchy - Luke Wroblewskiguestb27917
 
A Guided Approach to Testing - A Mobile First Strategy for your Enterprise!
A Guided Approach to Testing - A Mobile First Strategy for your Enterprise! A Guided Approach to Testing - A Mobile First Strategy for your Enterprise!
A Guided Approach to Testing - A Mobile First Strategy for your Enterprise! Infostretch
 
Why and How to Build a Mobile First Web Strategy
Why and How to Build a Mobile First Web StrategyWhy and How to Build a Mobile First Web Strategy
Why and How to Build a Mobile First Web StrategyTechBlocks
 
Mobile trends to transform your business in 2015
Mobile trends to transform your business in 2015Mobile trends to transform your business in 2015
Mobile trends to transform your business in 2015Self-employed
 
Table-First : Building Responsive Data Visualization for the Web
Table-First : Building Responsive Data Visualization for the WebTable-First : Building Responsive Data Visualization for the Web
Table-First : Building Responsive Data Visualization for the WebBill Hinderman
 
Service Strategy
Service StrategyService Strategy
Service StrategyPeleg
 
UK Q2 2016 Mobile First Insights Report
UK Q2 2016 Mobile First Insights ReportUK Q2 2016 Mobile First Insights Report
UK Q2 2016 Mobile First Insights ReportOperaMediaworks
 
Condiciones Generales ADESLAS COMPLETA
Condiciones Generales ADESLAS COMPLETACondiciones Generales ADESLAS COMPLETA
Condiciones Generales ADESLAS COMPLETAComercial-APPSalud
 
Beefcious quotes slideshare
Beefcious quotes slideshareBeefcious quotes slideshare
Beefcious quotes slideshareBeefcious
 

En vedette (19)

Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013
 
Mobile-First Strategy
Mobile-First StrategyMobile-First Strategy
Mobile-First Strategy
 
Hyper Island teaching notes: usability testing
Hyper Island teaching notes: usability testingHyper Island teaching notes: usability testing
Hyper Island teaching notes: usability testing
 
Gamification to get your message across
Gamification to get your message acrossGamification to get your message across
Gamification to get your message across
 
Designing speed with progressive enhancement
Designing speed with progressive enhancementDesigning speed with progressive enhancement
Designing speed with progressive enhancement
 
Mobile first responsive web design
Mobile first responsive web designMobile first responsive web design
Mobile first responsive web design
 
History of hci
History of hciHistory of hci
History of hci
 
10 Most Common Misconceptions About User Experience
10 Most Common Misconceptions About User Experience10 Most Common Misconceptions About User Experience
10 Most Common Misconceptions About User Experience
 
Best Practices For Form Design
Best Practices For Form DesignBest Practices For Form Design
Best Practices For Form Design
 
Page Heirarchy - Luke Wroblewski
Page Heirarchy - Luke WroblewskiPage Heirarchy - Luke Wroblewski
Page Heirarchy - Luke Wroblewski
 
UXD WTF
UXD WTFUXD WTF
UXD WTF
 
A Guided Approach to Testing - A Mobile First Strategy for your Enterprise!
A Guided Approach to Testing - A Mobile First Strategy for your Enterprise! A Guided Approach to Testing - A Mobile First Strategy for your Enterprise!
A Guided Approach to Testing - A Mobile First Strategy for your Enterprise!
 
Why and How to Build a Mobile First Web Strategy
Why and How to Build a Mobile First Web StrategyWhy and How to Build a Mobile First Web Strategy
Why and How to Build a Mobile First Web Strategy
 
Mobile trends to transform your business in 2015
Mobile trends to transform your business in 2015Mobile trends to transform your business in 2015
Mobile trends to transform your business in 2015
 
Table-First : Building Responsive Data Visualization for the Web
Table-First : Building Responsive Data Visualization for the WebTable-First : Building Responsive Data Visualization for the Web
Table-First : Building Responsive Data Visualization for the Web
 
Service Strategy
Service StrategyService Strategy
Service Strategy
 
UK Q2 2016 Mobile First Insights Report
UK Q2 2016 Mobile First Insights ReportUK Q2 2016 Mobile First Insights Report
UK Q2 2016 Mobile First Insights Report
 
Condiciones Generales ADESLAS COMPLETA
Condiciones Generales ADESLAS COMPLETACondiciones Generales ADESLAS COMPLETA
Condiciones Generales ADESLAS COMPLETA
 
Beefcious quotes slideshare
Beefcious quotes slideshareBeefcious quotes slideshare
Beefcious quotes slideshare
 

Similaire à MOBILE FIRST: DESIGNING FOR CONSTRAINTS

Future of Web is Mobile by Dag Olav Norem
Future of Web is Mobile by Dag Olav NoremFuture of Web is Mobile by Dag Olav Norem
Future of Web is Mobile by Dag Olav NoremMobileMonday Norway
 
Mobile Web Vs Mobile Apps
Mobile Web Vs Mobile AppsMobile Web Vs Mobile Apps
Mobile Web Vs Mobile AppsJoe Hass
 
myStaffingPro - Mobile Webinar
myStaffingPro - Mobile WebinarmyStaffingPro - Mobile Webinar
myStaffingPro - Mobile WebinarmyStaffingPro
 
BIC5 Ian morgan google uk Making the Web Work for You 2012
BIC5 Ian morgan google uk Making the Web Work for You 2012BIC5 Ian morgan google uk Making the Web Work for You 2012
BIC5 Ian morgan google uk Making the Web Work for You 2012Wavelength
 
Mobile Search: A Force to be Reckoned With!
Mobile Search: A Force to be Reckoned With!Mobile Search: A Force to be Reckoned With!
Mobile Search: A Force to be Reckoned With!Karen Church
 
Bruce / The Seminar: In the Pocket
Bruce / The Seminar: In the PocketBruce / The Seminar: In the Pocket
Bruce / The Seminar: In the Pocketmarkee
 
2012 07 ijl2012_eddie-prentice_seminar_mobile
2012 07 ijl2012_eddie-prentice_seminar_mobile2012 07 ijl2012_eddie-prentice_seminar_mobile
2012 07 ijl2012_eddie-prentice_seminar_mobileEddie Prentice
 
Mobile future of newspapers
Mobile future of newspapersMobile future of newspapers
Mobile future of newspapersGreg Piechota
 
Are you Smart Phone savvy?
Are you Smart Phone savvy?Are you Smart Phone savvy?
Are you Smart Phone savvy?Simon Lock
 
A mobile view for BTO 2011 by Valentina Paruzzi
A mobile view for BTO 2011 by Valentina ParuzziA mobile view for BTO 2011 by Valentina Paruzzi
A mobile view for BTO 2011 by Valentina ParuzziDigital Accademia
 
Wap vs App - marketing magazine "future of mobile event" oct 2010
Wap vs App - marketing magazine "future of mobile event"  oct 2010Wap vs App - marketing magazine "future of mobile event"  oct 2010
Wap vs App - marketing magazine "future of mobile event" oct 2010Phil Barrett
 
Van wyk hothouse mobile 2012 sydney
Van wyk hothouse mobile 2012 sydneyVan wyk hothouse mobile 2012 sydney
Van wyk hothouse mobile 2012 sydneyiStrategy
 
Pt.2 mobile trends
Pt.2 mobile trendsPt.2 mobile trends
Pt.2 mobile trendsTerence Ling
 
Mobile Developement Choises
Mobile Developement ChoisesMobile Developement Choises
Mobile Developement ChoisesAlexander Anikin
 
Chinnovations on China's new media
Chinnovations on China's new mediaChinnovations on China's new media
Chinnovations on China's new mediaGreat Wall Club
 

Similaire à MOBILE FIRST: DESIGNING FOR CONSTRAINTS (20)

Mobile input lukew
Mobile input lukewMobile input lukew
Mobile input lukew
 
Future of Web is Mobile by Dag Olav Norem
Future of Web is Mobile by Dag Olav NoremFuture of Web is Mobile by Dag Olav Norem
Future of Web is Mobile by Dag Olav Norem
 
Mobile Web Vs Mobile Apps
Mobile Web Vs Mobile AppsMobile Web Vs Mobile Apps
Mobile Web Vs Mobile Apps
 
myStaffingPro - Mobile Webinar
myStaffingPro - Mobile WebinarmyStaffingPro - Mobile Webinar
myStaffingPro - Mobile Webinar
 
BIC5 Ian morgan google uk Making the Web Work for You 2012
BIC5 Ian morgan google uk Making the Web Work for You 2012BIC5 Ian morgan google uk Making the Web Work for You 2012
BIC5 Ian morgan google uk Making the Web Work for You 2012
 
Mobile Search: A Force to be Reckoned With!
Mobile Search: A Force to be Reckoned With!Mobile Search: A Force to be Reckoned With!
Mobile Search: A Force to be Reckoned With!
 
Bruce / The Seminar: In the Pocket
Bruce / The Seminar: In the PocketBruce / The Seminar: In the Pocket
Bruce / The Seminar: In the Pocket
 
Doug Bellenger
Doug BellengerDoug Bellenger
Doug Bellenger
 
2012 07 ijl2012_eddie-prentice_seminar_mobile
2012 07 ijl2012_eddie-prentice_seminar_mobile2012 07 ijl2012_eddie-prentice_seminar_mobile
2012 07 ijl2012_eddie-prentice_seminar_mobile
 
Mobile future of newspapers
Mobile future of newspapersMobile future of newspapers
Mobile future of newspapers
 
Inma mobilefuureofnewspaper
Inma mobilefuureofnewspaperInma mobilefuureofnewspaper
Inma mobilefuureofnewspaper
 
Are you Smart Phone savvy?
Are you Smart Phone savvy?Are you Smart Phone savvy?
Are you Smart Phone savvy?
 
A mobile view for BTO 2011 by Valentina Paruzzi
A mobile view for BTO 2011 by Valentina ParuzziA mobile view for BTO 2011 by Valentina Paruzzi
A mobile view for BTO 2011 by Valentina Paruzzi
 
Wap vs App - marketing magazine "future of mobile event" oct 2010
Wap vs App - marketing magazine "future of mobile event"  oct 2010Wap vs App - marketing magazine "future of mobile event"  oct 2010
Wap vs App - marketing magazine "future of mobile event" oct 2010
 
Van wyk hothouse mobile 2012 sydney
Van wyk hothouse mobile 2012 sydneyVan wyk hothouse mobile 2012 sydney
Van wyk hothouse mobile 2012 sydney
 
Pt.2 mobile trends
Pt.2 mobile trendsPt.2 mobile trends
Pt.2 mobile trends
 
Mobile Developement Choises
Mobile Developement ChoisesMobile Developement Choises
Mobile Developement Choises
 
iFront 2010 prezentacija na Jure Sustersic
iFront 2010 prezentacija na Jure SustersiciFront 2010 prezentacija na Jure Sustersic
iFront 2010 prezentacija na Jure Sustersic
 
Mobile Takeover
Mobile Takeover Mobile Takeover
Mobile Takeover
 
Chinnovations on China's new media
Chinnovations on China's new mediaChinnovations on China's new media
Chinnovations on China's new media
 

Dernier

Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditSkynet Technologies
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 

Dernier (20)

Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance Audit
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 

MOBILE FIRST: DESIGNING FOR CONSTRAINTS

  • 2. Web products should be designed for mobile first. Flickr photo by @kevinv033 2
  • 3. Google programmers are doing work on mobile applications first, because they are better apps and that's what top programmers want to develop. –Eric Schmidt, Google Chairman 3
  • 4. We're just now starting to think about mobile first and desktop second for a lot of our products.” -Kate Aronowitz, Design Director Facebook Flickr photo by gscottolson 4
  • 5. We really need to shift now to start thinking about building mobile first. This is an even bigger shift than the PC revolution.” -Kevin Lynch, CTO Adobe Flickr photo by jdlasica 5
  • 6. “Designing the mobile app first forced us to strip down to essentials.” -Bill DeRouchey, BankSimple Flickr photo by by WebVisions Event 6
  • 7. MOBILE FIRST 1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION 7
  • 8. MOBILE FIRST 1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION 8
  • 9. GROWTH = OPPORTUNITY Mobile Web growth has outpaced desktop Web growth 8x Global mobile data traffic should grow 26x over next 5 years PC Desktop Internet Mobile Consumer 100M+ 1B+ 10B+ 1990 2000 2010 2020 Note: PC installed base reached 100MM in 1993, cellphone / Internet users reached 1B in 2002 / 2005 respectively;25 Source: 9 ITU, Mark Lipacis, Morgan Stanley Research.
  • 10. Commerce • Amazon: over $1 billion spent via mobile devices in the past 12 months • eBay: global mobile sales ~$4 billion in 2011, $2B in 2010, $600M in 2009 • Best Buy: mobile Web users doubling every year: 30M (10), 17M (09), 6M (08) Social • Twitter: 40% of tweets sent via mobile, 16% of new users start on mobile • Instagram: iPhone only 3 months to hit 1M users. Six weeks to 2M • Mixi (Japan): 85% of page views on mobile vs. 14% 4.5 years ago Productivity & Media • Google: mobile searches grew 130% in Q3 2010 • Pandora: 50% of total user base subscribes to the service on mobile • Email: 70% of smartphone users have accessed email on mobile device Source: http://www.lukew.com/ff/entry.asp?1188 10
  • 11. PC vs. Smartphone Shipments Smartphones passed PC shipments in Q42010 700 Global Shipments in MM SMARTPHONES 600 500 PCS 400 Q42010 2012E 300 200 100 0 2005 2006 2007 2008 2009 2010E 2011E 2012E 2013E Source: http://bit.ly/gIqKm9 11 Source: http://bit.ly/g5ktGq
  • 12. Shift in Usage 40 35 30 25 -20% Home usage of PC since 2008 20 15 10 5 0 2006 2008 2010 Why? Smartphones & tablets Source: http://read.bi/efrmCj 12
  • 13. Shift in Usage Visitors to Web- Visitors accessing -7% based email sites declined +36% email on mobile devices increased Source: http://bit.ly/hJdtty 13
  • 14. 35% of searches come from 7% of users • 35% of all Yelp searches come from their mobile applications which had 3.2 million unique users in Feb 2011 • That month Yelp had 45 million monthly unique users around the world Source: http://bit.ly/hw0Xtb 14
  • 15. Additional Usage • Every other second a consumer calls a local business and generates driving directions from a Yelp mobile app. • Viewing active listings 45% more often from mobile devices (audience is primarily active buyers, on location or scoping out neighborhoods) • People that use Facebook on their mobile devices (350M active) are twice as active on Facebook than non- mobile users. Source: http://www.lukew.com/ff/entry.asp?1131 Source: http://www.lukew.com/ff/entry.asp?1178 15
  • 16. SMARTPHONES Don’t most people just use native mobile applications to access the Internet? 16
  • 17. Twitter Usage 347% INCREASE IN MOBILE BROWSER USERS (4.7M) JAN 2010 TWITTER.COM •78% of tweets sent via mobile 40% • 16% M.TWITTER.COM of new users start on mobile 14% • What are the top two Twitter SMS mobile clients? 8% TWITTER ON IPHONE 8% TWITTER ON BLACKBERRY 7% 17
  • 18. 18
  • 19. Facebook Usage 112% INCREASE IN MOBILE BROWSER USERS (251M) JAN 2010 NON MOBILE 67% • 33% of posts sent via mobile M.FACEBOOK.COM 18% • What are the top two Facebook mobile clients? ANDROID 4% IPHONE 4% BLACKBERRY 4% 19
  • 20. 20
  • 21. 21
  • 22. Mobile Web Usage • Mobile phones will overtake PCs as the most common Web access devices worldwide by 2013 • 600% growth in traffic to mobile websites in 2010 • Avg smartphone user visits up to 24 Web sites visits per day • Top 50 websites constitute only 40% of all mobile visits • Opera Mini traffic up 200% yr/yr Source: http://www.mobiadnews.com/?p=5133 Source: http://www.lukew.com/ff/entry.asp?1013 22
  • 23. MOBILE ONLY? UK: 22% BY 2015 NEVER/INFREQUENT DESKTOP USE Asia: 50+% DON’T USE INTERNET ON PC US: 25% US: 50+% NEVER/INFREQUENT MORE MOBILE THAN PC DESKTOP USE India: 49% NEVER/INFREQUENT DESKTOP USE Africa: 50+% DON’T USE INTERNET ON PC Source: http://www.lukew.com/ff/entry.asp?1391 23
  • 24. “My goal was initially just to make a mobile companion, but I became convinced it was possible to create a version of Facebook that was actually better than the website.” –Joe Hewitt 24
  • 25. MOBILE FIRST 1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION 25
  • 26. CONSTRAINTS • Size of Screen • Speed of Networks • Modes of Use 26
  • 27. 1024x768 320x480 27
  • 28. 28
  • 29. 29
  • 30. 30
  • 31. 31
  • 32. 32
  • 34. 34
  • 35. 35
  • 36. 36
  • 37. 37
  • 38. CONSTRAINTS • Size of Screen • Speed of Networks • Modes of Use 38
  • 39. 39
  • 40. Reduce Requests & File Size • Eliminate redirects • Use CSS sprites to serve multiple images • Consolidate CSS & Javascript into a single file • Reduce dependencies on heavy Javascript libraries • Minify your code Take Advantage of HTML5, etc. • Use proper http headers for caching • Load contents lazily • Use application cache for local content storage • Use CSS3 and canvas tag instead of images where possible Source: Make the mobile web faster, Jeremy Weinstein 40
  • 41. 100ms delay results in 1% sales loss. (potential $191M in lost revenue in 2008) 400ms delay results in 5-9% drop in full- page traffic. 500ms delay drops search traffic by 20%. The cost of slower performance increases over time. 1s delay results 4% drop in revenue Fastest 10% of users stay 50% longer than slowest 10% Sources: slideshare.net/stubbornella/designing-fast-websites-presentation & slideshare.net/markstanton/speed-matters 41
  • 42. CONSTRAINTS • Size of Screen • Speed of Networks • Modes of Use 42
  • 43. Big Screen Power Supply Consistent Network Keyboard Mouse Chair Desk 43
  • 44. Small Screen Battery INTENSELY PERSONAL Network Inconsistent Fingers Sensors 44
  • 45. WHERE ARE WE MOBILE? 84% at home 80% during misc. times 74% waiting in lines 64% at work Photo by Steve Rhodes 45
  • 46. ONE EYEBALL Partial attention requires focused design ONE THUMB PHOTO BY STEVE RHODES
  • 47. When are we mobile? Computer users 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12 Source: http://bit.ly/hGrQMy 47
  • 48. When are we mobile? iPhone users ANYTIME 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12 Source: http://bit.ly/hGrQMy 48
  • 49. When are we mobile? iPad users 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12 Source: http://bit.ly/hGrQMy 49
  • 50. When are we mobile? Linkedin Overall users 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12 Source: http://bit.ly/hGrQMy 50
  • 51. When are we mobile? Linkedin Mobile users 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12 Source: http://bit.ly/hGrQMy 51
  • 52. When are we mobile? Mobile 3G Traffic Patterns Laptop Tablet Smartphone 9 12 15 18 21 24 Source: http://bit.ly/qL5NdX 52
  • 53. CONSTRAINTS • Size of Screen • Speed of Networks • Modes of Use 53
  • 54. “I was looking at the right side of the Venn diagram I thought, ‘That looks like a lot of the current and planned content for our mobile site.’ I think the only thing we don’t have are the admissions application.” Source: XKCD http://xkcd.com/773/ & http://www.dmolsen.com/mobile-in-higher-ed/?p=197 54
  • 55. MOBILE FIRST 1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION 55
  • 58. Safari Gyroscope Access Source: http://bit.ly/gAXCeL 58
  • 59. TOUCH • 1.03M touchscreen phones sold per day (2009) • 88K iPads sold per day (2011) • 194K iPhones sold per day (2011) • 500K Android devices activated per day (2011) • What about RIM & Nokia? 59
  • 60. Indirect Manipulation TRACKBALL TRACKPAD KEYBOARD KEYPAD 60
  • 62. Nokia smartphone mix Keypad Qwerty Only Touch INCLUDES QWERTY + TOUCH 2008 2009 2010 PROJECTED 62 Source: Nokia –deices sold. Nokia Capital markets day 2009.
  • 63. 63
  • 64. Touch Target Sizes 44px/pt 44px/pt 64
  • 65. Recommended touch target size is 9mm/34px Minimum touch target size is 7mm/26px Minimum spacing between elements is 2mm/8px Visual size is 60-100% of the touch target size 65
  • 66. Touch Targets 44px Bigger then you’re comfortable with 44px 30px 66
  • 67. 67
  • 68. Touch Gestures Platforms Tap iPhone OS Double Tap Android Web OS Drag Windows Phone 7 Flick OS X Pinch Windows 7 Spread RIM 6.0 Press Ubuntu And more... Press & Tap Press & Drag Rotate 68
  • 69. Tap Briefly touch surface with fingertip. Double Tap Rapidly touch surface twice with fingertip. Images: Dan Willis Research: Craig Villamor & LukeW 69
  • 70. Drag Move fingertip over surface without losing contact. Flick Quickly brush surface with fingertip. Images: Dan Willis Research: Craig Villamor & LukeW 70
  • 71. Pinch Touch surface with two fingers and bring them closer together. Spread Touch surface with two fingers and move them apart. Images: Dan Willis Research: Craig Villamor & LukeW 71
  • 72. Press Press & Tap Touch surface for extended period of Press surface with one finger and briefly time. touch surface with second finger. Press & Drag Press surface with one finger and move second finger over surface without losing contact. Images: Dan Willis Research: Craig Villamor & LukeW 72
  • 73. Rotate Touch surface with two fingers and move them in a clockwise or counterclockwise direction. Images: Dan Willis Research: Craig Villamor & LukeW 73
  • 74. Images: Dan Willis Research: Craig Villamor & LukeW 74
  • 75. Images: Dan Willis Research: Craig Villamor & LukeW 75
  • 76. Images: Dan Willis Research: Craig Villamor & LukeW 76
  • 79. 79
  • 82. Drag to Reveal • Feature overview 82
  • 83. 83
  • 84. Natural User Interfaces (NUI) “NUI exploits skills that we have acquired through a lifetime of living in the World” –Bill Buxton • Content is the UI (the action) • Reduce the distance as much as possible between user & content • Enable direct manipulation of objects & content • Guessable, predictable, physical, realistic • Reduce Visuals that are Not Content Source: http://www.lukew.com/ff/entry.asp?770 84
  • 86. Location Systems Accuracy Positioning Time Battery Life GPS 10m 2-10 minutes (only 5-6 hours on outdoors) most phones WiFi 50m (improves with Almost instant (server No additional density) connect & lookup) effect Cell tower 100-1400m (based on Almost instant (server Negligible triangulation density) connect & lookup) Single Cell 500-2500m (based on Almost instant (server Negligible Tower density) connect & lookup) IP Country: 99% Almost instant (server Negligible connect & lookup) City: 46% US, 53% Intl ZIP: 0% Smartphones: hybrid of GPS, Wifi, and cell tower triangulation Laptops/desktops: WiFi, IP, rarely GPS 86
  • 88. Mobile Device Capabilities • Device positioning & motion: from an accelerometer • Gyroscope: 360 degrees of motion • Location detection • Multi-touch sensors • Orientation: direction from a digital compass • Video & image: capture/input from a camera • Dual cameras: front and back • Audio: input from a microphone; output to speaker • Device connections: through Bluetooth between devices • Proximity: device closeness to physical objects • Ambient Light: light/dark environment awareness • NFC: Near Field Communications through RFID readers 88
  • 89. Direction Location Detection Detection 89
  • 90. 320x480 90
  • 91. 320x480 91
  • 92. 320x480 92
  • 93. 93
  • 95. When discovered by users boosted their sustained traffic by 40 to 50 percent. “It was sort of beyond our expectations. We had no idea.” Yelp CEO, Jeremy Stoppelman 95
  • 96. Native App Mobile Web • Location detection • Location detection • Device orientation • Device orientation • Digital compass • Digital compass • Video camera access 96
  • 97. Android 3.0 (ish) HTML Media Capture Allows web applications to access audio, image and video capture capabilities of the device. 97
  • 98. Awkward Interactions SCAN TO CHECKOUT 98 Flickr photo by Nokia Point & Find
  • 99. 99
  • 100. 100
  • 101. 101
  • 102. 102
  • 104. Images as Input & Output 104
  • 107. Nerd. Found. 107 Flickr photo by Nokia Point & Find
  • 108. 108
  • 109. 109
  • 110. Mobile Device Capabilities • Device positioning & motion: from an accelerometer • Gyroscope: 360 degrees of motion • Location detection • Multi-touch sensors • Orientation: direction from a digital compass • Video & image: capture/input from a camera • Dual cameras: front and back • Audio: input from a microphone; output to speaker • Device connections: through Bluetooth between devices • Proximity: device closeness to physical objects • Ambient Light: light/dark environment awareness • NFC: Near Field Communications through RFID readers 110
  • 111. MOBILE FIRST 1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION 111
  • 112. MOBILE FIRST • @lukew • www.lukew.com Mobile First! • abookapart.com