SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Was ist angesagt?

Mobile marketing copy
Mobile marketing copyMobile marketing copy
Mobile marketing copy
Jayne Navarre
 
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
Tijs 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 First
John Head
 
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
 

Was ist angesagt? (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)
 

Andere mochten auch

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
Jason Grigsby
 
Page Heirarchy - Luke Wroblewski
Page Heirarchy - Luke WroblewskiPage Heirarchy - Luke Wroblewski
Page Heirarchy - Luke Wroblewski
guestb27917
 
Service Strategy
Service StrategyService Strategy
Service Strategy
Peleg
 
Condiciones Generales ADESLAS COMPLETA
Condiciones Generales ADESLAS COMPLETACondiciones Generales ADESLAS COMPLETA
Condiciones Generales ADESLAS COMPLETA
Comercial-APPSalud
 
Beefcious quotes slideshare
Beefcious quotes slideshareBeefcious quotes slideshare
Beefcious quotes slideshare
Beefcious
 

Andere mochten auch (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
 

Ähnlich wie Mobile first. Luke Wroblewski

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
MobileMonday Norway
 
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
Wavelength
 
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
Digital Accademia
 
Pt.2 mobile trends
Pt.2 mobile trendsPt.2 mobile trends
Pt.2 mobile trends
Terence Ling
 

Ähnlich wie Mobile first. Luke Wroblewski (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
 
Inma mobilefuureofnewspaper
Inma mobilefuureofnewspaperInma mobilefuureofnewspaper
Inma mobilefuureofnewspaper
 
Mobile future of newspapers
Mobile future of newspapersMobile future of newspapers
Mobile future of newspapers
 
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
 

Kürzlich hochgeladen

Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Kürzlich hochgeladen (20)

Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdf
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Buy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptxBuy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptx
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Buy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfBuy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdf
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 

Mobile first. Luke Wroblewski

  • 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