This incredible presentation is published at http://www.lukew.com/presos/ by the author Luke Wroblewski.

1. MOBILE
FIRST
LUKE WROBLEWSKI
OCTOBER 2011
@LUKEW
1

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

33. Know your audience
33

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

56. Landscape Mode
56

57. Landscape Mode
57

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

61. Direct Manipulation
TRACKPAD
61

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

77. Touch Gesture Cards
www.lukew.com/touch
77

78. Drag to Reveal
78

79. 79

80. Drag to Refresh
80

81. Drag to Reveal
81

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

85. Location
Detection
85

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

87. Location
Detection
87

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

94. 94
Source: AcrossAir

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

103. Images as Input
103

104. Images as Input & Output
104

105. Images as Input
105

106. Images as Input
106

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