Presentation of Luke Wroblewski at WebExpo Prague 2011 Conference. More at http://webexpo.net/prague2011/talk/mobile-first/

1. MOBILE
FIRST
LUKE WROBLEWSKI
AN EVENT APART 2010
@LUKEW
1

2. Web products should be designed for mobile first.
(Even if no mobile version is planned.)
Flickr photo by @kevinv033 2

3. Mobile First at Google
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 CEO
3

4. Mobile First at Facebook
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. Mobile First at Adobe
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. MOBILE FIRST
1. GROWTH = OPPORTUNITY
2. CONSTRAINTS = FOCUS
3. CAPABILITIES = INNOVATION
6

7. Mobile Design Considerations
• Multiple screen sizes & densities
• Performance optimization
• Touch targets, gestures, and actions
• Location systems
• Device capabilities
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
Smartphone sales will pass PC sales in 2012
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
9
Source: ITU, Mark Lipacis, Morgan Stanley Research.

10. 10

11. 2006
High-end RAZR-inspired
phone with class 12 EDGE
high-speed data & WAP
2.0/xHTML Web browser.
2G network GSM 850 / 900 / 1800 / 1900
SMS, EMS, MMS, Email, Instant Messaging
2 megapixel camera
Music player
Resolution: 176 x 220 pixels
Colors: 262,144 (18-bit)
11

12. 12

13. 4,932% Increase
AT&T mobile data traffic increased 50x in 3 years
Motorola Z3 iPhone iPhone 3G iPhone 3GS
2006 2007 2008 2009
13
Source: AT&T, Morgan Stanley Research.

14. 27% of searches come from 4% of users
• 27% of all Yelp searches come from
their iPhone application which had
1.4 million unique users in May 2010
• That month Yelp had 32 million
monthly unique users around the
world
Source: http://officialblog.yelp.com/2010/06/yelp-mobile 14

15. Facebook on the iPhone
Create a product, don’t
re-imagine one for small
screens. Great mobile
products are created,
never ported.
–Brian Fling
15

16. “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
16

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

18. SCREEN SIZE
• Focus on core actions
• Know your users
• Use scalable design
18

19. Screen Size
1024x768 320x480
19

20. Focus on Core Elements
In iPhone apps, the main function
should be immediately apparent.
Minimize the number of controls
from which users have to choose.
–iPhone Interface Guidelines
20

21. 21

22. Southwest Airlines Mobile App
22

23. 23

24. Screen Size
24

25. Screen Size
25

26. Know your audience
Flickr photo by wertheim 26

27. Expedia Itinerary
27

28. Expedia Itinerary
28

29. Designing For Multiple Screen Sizes
320x480
29

30. Smartphone Screen Sizes
iPhone 320x480 3.5 in 164ppi
Palm Pre 320x480 3.1 in 186ppi
Palm Pixie 320x400 2.63 in 194ppi
T-Mobile G1 320x480 3.2 in 180ppi
MyTouch 3G
HTC Hero
Motorola Droid 480x854 3.7 in 264ppi
Nexus One 480x800 3.7 in 252ppi
HTC Desire
Nokia N97 360x640 3.2 in 229ppi
Nokia N900 800x480 3.5 in 266ppi
iPhone4 640x960 3.5 in 329ppi
30

31. The Impact of PPI
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes 31

32. The Impact of PPI
Cinema Display 1920x1200 24 in 94ppi
Nokia N900 800x480 3.5 in 266ppi
32

33. Designing for Multiple Screen Sizes
1. Define device groups
tiny: 84, 96, 101, 128, 130, 132
small: 160, 176
medium: 208, 220, 240
large: 320, 360, 480+
desktop: 800+
33
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

34. Designing for Multiple Screen Sizes
1. Define device groups
2. Create a default reference design
34
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

35. Designing for Multiple Screen Sizes
1. Define device groups
2. Create a default reference design
3. Define rules for content and design adaptation
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
35
http://www.littlespringsdesign.com/blog/blog/2009/03/11/photoshop-layout-is-not-your-friend/

36. Designing for Multiple Screen Sizes
1. Define device groups
2. Create a default reference design
3. Define rules for content and design adaptation
4. Opt for web standards and a flexible layout
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
36
http://www.alistapart.com/articles/switchymclayout/

37. Visible App Controls
37

38. Hardware Control for Menu
38

39. Make Content the Action
You should not view the large iPad screen as an invitation to bring
back all the functionality you pruned from your your iPhone
application. –iPad Interface Guidelines
39

40. 40

41. SPEED
• Keep performance top of mind
• Take advantage of HTML5
41

42. Connection Speed
42

43. Performance Tips
Reduce Requests & File Size
• Eliminate redirects
• Use CSS sprites to serve multiple images
• Consolidate CSS & Javascript into a single file
• Minify your code
Take Advantage of HTML5
• 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 43

44. Performance Matters!
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 44

45. CONTEXT
• Quick bursts… everywhere
• One-handed
45

46. During a typical day…
84% at home
80% during misc. times throughout the day
74% waiting in lines
64% at work 46
Flickr photo by Laughing Squid

47. Use Cases for Mobile Apps
• Access to Facebook via mobile browser grew
112% in the past year to 25.1 million users in
January 2010.
• Access to Twitter via mobile browser
experienced a 347% jump to 4.7 million users
in January 2010.
47

48. People Don’t Stay Long
• Across 650,000 URLs tested…
10%
9% • 25% of all documents
8% were displayed for
less than 4 seconds
7%
6% • 52% of all visits were
5%
shorter than 10
seconds
4%
3% • Peak value was
2%
located between 2
and 3 seconds
1%
0%
0 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30
SECONDS DISPLAYED
Source: Clickstream Study Reveals Dynamic Web, Weboptimization.com 48

49. Where phones used
One-handed touch
Flickr photo by Steve Rhodes 49

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

51. TOUCH
• Simplify your user interface
• Don’t count on hovers
51

52. Nokia smartphone mix
Keypad
Qwerty Only
Touch INCLUDES QWERTY + TOUCH
1.1 billion consumers with Nokia devices in 2009
2008 2009 2010
PROJECTED
52
Source: Nokia –deices sold. Nokia Capital markets day 2009.

53. Touch Targets
Apple recommends a
minimum target size:
29px wide
44px tall
Source: Matt Legend Gemmell – mattgemmell.com 53

54. Touch Targets
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
54

55. 55

56. Basic Touch Gestures
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
56

57. Basic Touch Gestures
Tap
Briefly touch surface with fingertip.
Double Tap
Rapidly touch surface twice with fingertip.
Images: Dan Willis Research: Craig Villamor & LukeW 57

58. Basic Touch Gestures
Drag
Move fingertip over surface without losing contact.
Flick
Quickly brush surface with fingertip.
Images: Dan Willis Research: Craig Villamor & LukeW 58

59. Basic Touch Gestures
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 59

60. Basic Touch Gestures
Press Press & Tap
Touch surface for extended period Press surface with one finger and
of time. briefly 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 60

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

62. System-related Actions
Images: Dan Willis Research: Craig Villamor & LukeW 62

63. Object-related Actions
Images: Dan Willis Research: Craig Villamor & LukeW 63

64. Navigation-related Actions
www.lukew.com/touch
Images: Dan Willis Research: Craig Villamor & LukeW 64

65. Gestures as Input
65

66. Pop-Up Menus on iPhone
66

67. Pop-Up Menus on Android
67

68. Multi-Field Pop-Up Menus on iPhone
68

69. Multi-Field Pop-Up Menus on Android
69

70. Hover Details & Actions
70

71. 71

72. Tooltip with Hover
72

73. LOCATION
• Positioning
• Filtering
73

74. Location as Input
74

75. Location as Input
75

76. Location as Input
76

77. 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 No additional
density) (server connect & effect
lookup)
Cell tower 100-1400m (based on Almost instant Negligible
triangulation density) (server connect &
lookup)
Single Cell 500-2500m (based on Almost instant Negligible
Tower density) (server connect &
lookup)
IP Country: 99% Almost instant Negligible
City: 46% US, 53% Intl (server connect &
ZIP: 0% lookup)
Smartphones: hybrid of GPS, Wifi, and cell tower triangulation
Laptops/desktops: WiFi, IP, rarely GPS 77

78. 78

79. AND MORE…
• Orientation
• Audio & Video
• The List Goes On…
79

80. Mobile Device Capabilities
• Application cache for local storage
• CSS3 & Canvas for performance optimization
• Multi-touch sensors
• Location detection
• Device positioning & motion: from an accelerometer
• Orientation: direction from a digital compass
• Audio: input from a microphone; output to speaker
• Video & image: capture/input from a camera
• Push: real-time notifications “instant” to user
• Device connections: through Bluetooth between devices
• Proximity: device closeness to physical objects
• Ambient Light: light/dark environment awareness
• RFID reader: identify & track objects with broadcasted identifiers
• Haptic feedback: “feel” different surfaces on a screen
• Biometrics: retinal, fingerprint, etc.
80

81. Multiple Orientations
81

82. Standard Orientation
82

83. Pivot Orientation
83

84. Orientation Detection in Firefox 3.6
Source: http://hacks.mozilla.org/2009/10/orientation-for-firefox/ 84

85. Tilt Scrolling in Instapaper
85

86. Voice as Input
86

87. 87

88. Location & Orientation as Input
88

89. Location & Orientation as Input
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
89

90. Awkward Interactions
SCAN TO CHECKOUT
90
Flickr photo by Nokia Point & Find

91. Images as Input
91

92. SnapTell on iPhone
92

93. Images as Input
93

94. Images as Input
94

95. Images as Input
95

96. Nerd.
Found.
96
Flickr photo by Nokia Point & Find

97. 97

98. Location Check-in
98

99. Facebook Presence
99

100. Mobile Device Capabilities
• Application cache for local storage
• CSS3 & Canvas for performance optimization
• Multi-touch sensors
• Location detection
• Device positioning & motion: from an accelerometer
• Orientation: direction from a digital compass
•
• Audio: input from degrees of motion to speaker
Gyroscope: 360 a microphone; output
•
• Videocameras: capture/input facing camera
Dual & image: front & back from a
• Push: real-time notifications “instant” to user
• Device connections: through Bluetooth between devices
• Proximity: device closeness to physical objects
• Ambient Light: light/dark environment awareness
• RFID reader: identify & track objects with broadcasted identifiers
• Haptic feedback: “feel” different surfaces on a screen
• Biometrics: retinal, fingerprint, etc.
100

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

102. Mobile Design Considerations
• Multiple screen sizes & densities
• Performance optimization
• Touch targets, gestures, and actions
• Location systems
• Device capabilities
102

103. More Information
• @lukew
• www.lukew.com
Web Form Design
• www.rosenfeldmedia.com/
books/webforms/
• Discount code: (25%)
103