mobile first
DESCRIPTION
Testowy pdf z issuuTRANSCRIPT
![Page 1: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/1.jpg)
1
MOBILEFIRSTLUKE WROBLEWSKIOCTOBER 2011
@LUKEW
![Page 2: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/2.jpg)
2
Web products should be designed for mobile first.
Flickr photo by @kevinv033
![Page 3: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/3.jpg)
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
![Page 4: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/4.jpg)
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
![Page 5: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/5.jpg)
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
![Page 6: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/6.jpg)
6
“Designing the mobile app first forced us to strip down to essentials.”
-Bill DeRouchey, BankSimple
Flickr photo by by WebVisions Event
![Page 7: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/7.jpg)
7
MOBILE FIRST1. GROWTH2. CONSTRAINTS3. CAPABILITIES
= OPPORTUNITY = FOCUS = INNOVATION
![Page 8: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/8.jpg)
8
MOBILE FIRST1. GROWTH2. CONSTRAINTS3. CAPABILITIES
= OPPORTUNITY = FOCUS = INNOVATION
![Page 9: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/9.jpg)
9
1990
PC
100M+
2010 2020
Mobile Consumer
10B+
2000
Desktop Internet
1B+
Note: PC installed base reached 100MM in 1993, cellphone / Internet users reached 1B in 2002 / 2005 respectively;25 Source: ITU, Mark Lipacis, Morgan Stanley Research.
GROWTH = OPPORTUNITYMobile Web growth has outpaced desktop Web growth 8x
Global mobile data traffic should grow 26x over next 5 years
![Page 10: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/10.jpg)
10
Commerce
• 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
Social
Source: http://www.lukew.com/ff/entry.asp?1188
• 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)
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
![Page 11: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/11.jpg)
11
2005 2006 2007 2008 2009 2010E 2011E 2012E
700
600
500
400
300
200
100
0
PC vs. Smartphone ShipmentsG
lob
al S
hip
men
ts in
MM
SMARTPHONES
PCS
2013E
Q42010 2012E
Smartphones passed PC shipments in Q42010
Source: http://bit.ly/gIqKm9Source: http://bit.ly/g5ktGq
![Page 12: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/12.jpg)
12Source: http://read.bi/efrmCj
Home usage of PC since 2008-20%
40
35
30
25
20
15
10
5
02006 2008 2010
Smartphones & tabletsWhy?
Shift in Usage
![Page 13: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/13.jpg)
13Source: http://bit.ly/hJdtty
Shift in Usage
Visitors to Web-based email sites declined-7%
Visitors accessing email on mobile devices increased+36%
![Page 14: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/14.jpg)
14Source: http://bit.ly/hw0Xtb
• 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
35% of searches come from 7% of users
![Page 15: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/15.jpg)
15Source: http://www.lukew.com/ff/entry.asp?1131 Source: http://www.lukew.com/ff/entry.asp?1178
• Every other second a consumer calls a local business and generates driving directions from a Yelp mobile app.
Additional Usage
• 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.
![Page 16: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/16.jpg)
16
SMARTPHONES
Don’t most people just use native mobile applications to access the Internet?
![Page 17: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/17.jpg)
17
Twitter Usage
347% INCREASE IN MOBILE BROWSER USERS (4.7M) JAN 2010
TWITTER.COM
M.TWITTER.COM
SMS
TWITTER ON IPHONE
TWITTER ON BLACKBERRY
78%
14%
8%
8%
7%
• 40% of tweets sent via mobile
• 16% of new users start on mobile
• What are the top two Twitter mobile clients?
![Page 18: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/18.jpg)
18
![Page 19: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/19.jpg)
19
Facebook Usage
112% INCREASE IN MOBILE BROWSER USERS (251M) JAN 2010
NON MOBILE
M.FACEBOOK.COM
ANDROID
IPHONE
BLACKBERRY
67%
18%
4%
4%
4%
• 33% of posts sent via mobile
• What are the top two Facebook mobile clients?
![Page 20: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/20.jpg)
20
![Page 21: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/21.jpg)
21
![Page 22: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/22.jpg)
22Source: http://www.mobiadnews.com/?p=5133 Source: http://www.lukew.com/ff/entry.asp?1013
• 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
Mobile Web Usage
![Page 23: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/23.jpg)
23
MOBILE ONLY?
US: 25%NEVER/INFREQUENT
DESKTOP USE
UK: 22%NEVER/INFREQUENT
DESKTOP USEAsia: 50+%
DON’T USE INTERNET ON PC
Africa: 50+%DON’T USE INTERNET ON PC
India: 49%NEVER/INFREQUENT
DESKTOP USE
US: 50+%MORE MOBILE THAN PC
BY 2015
Source: http://www.lukew.com/ff/entry.asp?1391
![Page 24: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/24.jpg)
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
![Page 25: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/25.jpg)
25
MOBILE FIRST1. GROWTH2. CONSTRAINTS3. CAPABILITIES
= OPPORTUNITY = FOCUS = INNOVATION
![Page 26: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/26.jpg)
26
CONSTRAINTS
• Size of Screen
• Speed of Networks
• Modes of Use
![Page 27: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/27.jpg)
27
320x4801024x768
![Page 28: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/28.jpg)
28
![Page 29: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/29.jpg)
29
![Page 30: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/30.jpg)
30
![Page 31: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/31.jpg)
31
![Page 32: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/32.jpg)
32
![Page 33: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/33.jpg)
33
Know your audience
![Page 34: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/34.jpg)
34
![Page 35: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/35.jpg)
35
![Page 36: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/36.jpg)
36
![Page 37: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/37.jpg)
37
![Page 38: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/38.jpg)
38
CONSTRAINTS
• Size of Screen
• Speed of Networks
• Modes of Use
![Page 39: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/39.jpg)
39
![Page 40: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/40.jpg)
40
• 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
Reduce Requests & File Size
Take Advantage of HTML5, etc.
Source: Make the mobile web faster,�Jeremy Weinstein
• 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
![Page 41: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/41.jpg)
41Sources: slideshare.net/stubbornella/designing-fast-websites-presentation & slideshare.net/markstanton/speed-matters
Fastest 10% of users stay 50% longer than slowest 10%
500ms delay drops search traffic by 20%.The cost of slower performance increases over time.
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.
1s delay results 4% drop in revenue
![Page 42: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/42.jpg)
42
CONSTRAINTS
• Size of Screen
• Speed of Networks
• Modes of Use
![Page 43: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/43.jpg)
43
Power Supply
Consistent Network
Keyboard
Mouse
Big Screen
Desk
Chair
![Page 44: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/44.jpg)
44
Small Screen
Battery
Inconsistent Network
Fingers
Sensors
INTENSELY PERSONAL
![Page 45: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/45.jpg)
45
WHERE ARE WE MOBILE?
84% at home80% during misc. times74% waiting in lines64% at work
Photo by Steve Rhodes
![Page 46: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/46.jpg)
ONE THUMB
ONE EYEBALL
Partial attention requires focused design
PHOTO BY STEVE RHODES
![Page 47: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/47.jpg)
47
When are we mobile?
1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 910 11 12 10 11 12
Computer users
Source: http://bit.ly/hGrQMy
![Page 48: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/48.jpg)
48
When are we mobile?
iPhone users
1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 910 11 12 10 11 12
Source: http://bit.ly/hGrQMy
ANYTIME
![Page 49: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/49.jpg)
49
When are we mobile?
iPad users
1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 910 11 12 10 11 12
Source: http://bit.ly/hGrQMy
![Page 50: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/50.jpg)
50
When are we mobile?
Linkedin Overall users
Source: http://bit.ly/hGrQMy
1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 910 11 12 10 11 12
![Page 51: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/51.jpg)
51
When are we mobile?
Linkedin Mobile users
Source: http://bit.ly/hGrQMy
1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 910 11 12 10 11 12
![Page 52: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/52.jpg)
52
When are we mobile?
Mobile 3G Traffic Patterns
Source: http://bit.ly/qL5NdX
9 12 15 18 21 24
Laptop
Tablet
Smartphone
![Page 53: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/53.jpg)
53
CONSTRAINTS
• Size of Screen
• Speed of Networks
• Modes of Use
![Page 54: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/54.jpg)
54Source: XKCD http://xkcd.com/773/ & http://www.dmolsen.com/mobile-in-higher-ed/?p=197
“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.”
![Page 55: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/55.jpg)
55
MOBILE FIRST1. GROWTH2. CONSTRAINTS3. CAPABILITIES
= OPPORTUNITY = FOCUS = INNOVATION
![Page 56: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/56.jpg)
56
Landscape Mode
![Page 57: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/57.jpg)
57
Landscape Mode
![Page 58: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/58.jpg)
58
Safari Gyroscope Access
Source: http://bit.ly/gAXCeL
![Page 59: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/59.jpg)
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?
![Page 60: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/60.jpg)
60
Indirect Manipulation
TRACKPAD
KEYPAD
TRACKBALL
KEYBOARD
![Page 61: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/61.jpg)
61
Direct Manipulation
TRACKPAD
![Page 62: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/62.jpg)
62Source: Nokia –deices sold. Nokia Capital markets day 2009.
Nokia smartphone mixKeypad
Qwerty Only
Touch INCLUDES QWERTY + TOUCH
2008 2009 2010 PROJECTED
![Page 63: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/63.jpg)
63
![Page 64: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/64.jpg)
64
Touch Target Sizes
44px/pt
44px/pt
![Page 65: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/65.jpg)
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
![Page 66: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/66.jpg)
66
44px
44px
30px
Touch Targets
Bigger then you’re comfortable with
![Page 67: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/67.jpg)
67
![Page 68: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/68.jpg)
68
Tap
Double Tap
Drag
Flick
Pinch
Spread
Press
Press & Tap
Press & Drag
Rotate
Touch Gestures Platforms
iPhone OS
Android
Web OS
Windows Phone 7
OS X
Windows 7
RIM 6.0
Ubuntu
And more...
![Page 69: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/69.jpg)
69
TapBriefly touch surface with fingertip.
Double TapRapidly touch surface twice with fingertip.
Images: Dan Willis Research: Craig Villamor & LukeW
![Page 70: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/70.jpg)
70
DragMove fingertip over surface without losing contact.
FlickQuickly brush surface with fingertip.
Images: Dan Willis Research: Craig Villamor & LukeW
![Page 71: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/71.jpg)
71
PinchTouch surface with two fingers and bring them closer together.
SpreadTouch surface with two fingers and move them apart.
Images: Dan Willis Research: Craig Villamor & LukeW
![Page 72: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/72.jpg)
72
PressTouch surface for extended period of time.
Press & DragPress surface with one finger and move second finger over surface without losing contact.
Press & TapPress surface with one finger and briefly touch surface with second finger.
Images: Dan Willis Research: Craig Villamor & LukeW
![Page 73: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/73.jpg)
73
RotateTouch surface with two fingers and move them in a clockwise or counterclockwise direction.
Images: Dan Willis Research: Craig Villamor & LukeW
![Page 74: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/74.jpg)
74Images: Dan Willis Research: Craig Villamor & LukeW
![Page 75: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/75.jpg)
75Images: Dan Willis Research: Craig Villamor & LukeW
![Page 76: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/76.jpg)
76Images: Dan Willis Research: Craig Villamor & LukeW
![Page 77: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/77.jpg)
77
Touch Gesture Cards
www.lukew.com/touch
![Page 78: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/78.jpg)
78
Drag to Reveal
![Page 79: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/79.jpg)
79
![Page 80: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/80.jpg)
Drag to Refresh
80
![Page 81: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/81.jpg)
Drag to Reveal
81
![Page 82: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/82.jpg)
Drag to Reveal
82
• Feature overview
![Page 83: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/83.jpg)
83
![Page 84: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/84.jpg)
84
Natural User Interfaces (NUI)
• 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
“NUI exploits skills that we have acquired through a lifetime of living in the World” –Bill Buxton
![Page 85: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/85.jpg)
85
Location Detection
![Page 86: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/86.jpg)
86
Accuracy Positioning Time Battery Life
GPS 10m 2-10 minutes (only outdoors)
5-6 hours on most phones
WiFi 50m (improves with density)
Almost instant (server connect & lookup)
No additional effect
Cell tower triangulation
100-1400m (based on density)
Almost instant (server connect & lookup)
Negligible
Single Cell Tower
500-2500m (based on density)
Almost instant (server connect & lookup)
Negligible
IP Country: 99%
City: 46% US, 53% Intl
ZIP: 0%
Almost instant (server connect & lookup)
Negligible
Smartphones: hybrid of GPS, Wifi, and cell tower triangulation
Laptops/desktops: WiFi, IP, rarely GPS
Location Systems
![Page 87: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/87.jpg)
87
Location Detection
![Page 88: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/88.jpg)
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
![Page 89: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/89.jpg)
89
Direction Detection
Location Detection
![Page 90: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/90.jpg)
90
320x480
![Page 91: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/91.jpg)
91
320x480
![Page 92: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/92.jpg)
92
320x480
![Page 93: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/93.jpg)
93
![Page 94: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/94.jpg)
94Source: AcrossAir
![Page 95: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/95.jpg)
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
![Page 96: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/96.jpg)
96
Native App Mobile Web
• Location detection
• Device orientation
• Digital compass
• Video camera access
• Location detection
• Device orientation
• Digital compass
![Page 97: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/97.jpg)
97
Android 3.0 (ish)
HTML Media CaptureAllows web applications to access audio, image and video capture capabilities of the device.
![Page 98: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/98.jpg)
98
Awkward Interactions
SCAN TO CHECKOUT
Flickr photo by Nokia Point & Find
![Page 99: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/99.jpg)
99
![Page 100: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/100.jpg)
100
![Page 101: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/101.jpg)
101
![Page 102: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/102.jpg)
102
![Page 103: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/103.jpg)
103
Images as Input
![Page 104: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/104.jpg)
104
Images as Input & Output
![Page 105: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/105.jpg)
105
Images as Input
![Page 106: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/106.jpg)
106
Images as Input
![Page 107: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/107.jpg)
107
Nerd.Found.
Flickr photo by Nokia Point & Find
![Page 108: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/108.jpg)
108
![Page 109: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/109.jpg)
109
![Page 110: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/110.jpg)
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
![Page 111: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/111.jpg)
111
MOBILE FIRST1. GROWTH2. CONSTRAINTS3. CAPABILITIES
= OPPORTUNITY = FOCUS = INNOVATION
![Page 112: Mobile first](https://reader033.vdocuments.site/reader033/viewer/2022051421/568bd6791a28ab20349c3221/html5/thumbnails/112.jpg)
MOBILE FIRST
• @lukew
• www.lukew.com
Mobile First!• abookapart.com