Have you ever considered that the way you design and build a site or app might be completely wrong? Have you ever actually had to support the top devices on the market, let alone make each of them amazing? Have you ever designed or built a mobile app for devices that don't even exist yet? Do you know how to do all of this and still come in under budget? These are just some of the questions that are being answered deep within the mobile community. It is unlike the web. It is opaque. It is competitive. It is an entirely different medium. And it is really really hard. In fact, there is a good chance that everything you think you know about mobile is wrong. In this session by Brian Fling—author of O'Reilly's Mobile Design & Development (now available for free online at http://mobiledesign.org) and Creative Director at pinch/zoom (http://pinchzoom.com)—he discusses his experiences of spending a decade between web and mobile and shares what he thinks the web community can learn from mobile.

1. what the web can
learn from
mobile
MADE WITH LOVE IN SEATTLE BY

2. MADE WITH LOVE IN SEATTLE BY

3. MADE WITH LOVE IN SEATTLE BY

10. web
mobile ux
MADE WITH LOVE IN SEATTLE BY

11. web
mobile ux
MADE WITH LOVE IN SEATTLE BY

13. MADE WITH LOVE IN SEATTLE BY

15. “[Brian] states making a native
application can be the best thing for a
product, but confirms on the other
hand that the mobile web is the only
long term commercially viable
content platform for mobile devices”
—Thibault Imbert

16. mobiledesign.org

17. MADE WITH LOVE IN SEATTLE BY

18. CENSORE
D
pinch / zoom
CE NS ORED
CENSORED
CENSORED
CENSOR
ED
CENSORED
pinchzoom.com

19. MADE WITH LOVE IN SEATTLE BY

20. “Chuck”
MADE WITH LOVE IN SEATTLE BY

21. Chuck is a real mobile expert.
MADE WITH LOVE IN SEATTLE BY

22. Chuck is a real mobile expert.
He will never speak at a conference you will
attend.
MADE WITH LOVE IN SEATTLE BY

23. Chuck is a real mobile expert.
He will never speak at a conference you will
attend.
He will never write a book that you will read.
MADE WITH LOVE IN SEATTLE BY

24. Chuck is a real mobile expert.
He will never speak at a conference you will
attend.
He will never write a book that you will read.
He doesn’t care about the topics we debate.
MADE WITH LOVE IN SEATTLE BY

25. Chuck is a real mobile expert.
He will never speak at a conference you will
attend.
He will never write a book that you will read.
He doesn’t care about the topics we debate.
But he is building the infrastructure that you
will use 5 years from now.
MADE WITH LOVE IN SEATTLE BY

26. There are tens of
thousands of people like
this around the world
solving the mobile
problem.
MADE WITH LOVE IN SEATTLE BY

27. These are my mentors.
MADE WITH LOVE IN SEATTLE BY

28. I learned more about the
future of mobile in three
hours than I have in the
last three years.
MADE WITH LOVE IN SEATTLE BY

29. I can tell you...
MADE WITH LOVE IN SEATTLE BY

30. I can tell you...
‣ how many smartphones are being shipped in the US
MADE WITH LOVE IN SEATTLE BY

31. I can tell you...
‣ how many smartphones are being shipped in the US
‣ which platforms are moving and which aren't
MADE WITH LOVE IN SEATTLE BY

32. I can tell you...
‣ how many smartphones are being shipped in the US
‣ which platforms are moving and which aren't
‣ which platforms the carrier is behind and which they aren’t
MADE WITH LOVE IN SEATTLE BY

33. I can tell you...
‣ how many smartphones are being shipped in the US
‣ which platforms are moving and which aren't
‣ which platforms the carrier is behind and which they aren’t
‣ who is making money in mobile and who isn't
MADE WITH LOVE IN SEATTLE BY

34. I can tell you...
‣ how many smartphones are being shipped in the US
‣ which platforms are moving and which aren't
‣ which platforms the carrier is behind and which they aren’t
‣ who is making money in mobile and who isn't
‣ where the network will be in the next three years
MADE WITH LOVE IN SEATTLE BY

35. I can tell you...
‣ how many smartphones are being shipped in the US
‣ which platforms are moving and which aren't
‣ which platforms the carrier is behind and which they aren’t
‣ who is making money in mobile and who isn't
‣ where the network will be in the next three years
‣ how carriers feel about mobile web apps
MADE WITH LOVE IN SEATTLE BY

36. I can tell you...
‣ how many smartphones are being shipped in the US
‣ which platforms are moving and which aren't
‣ which platforms the carrier is behind and which they aren’t
‣ who is making money in mobile and who isn't
‣ where the network will be in the next three years
‣ how carriers feel about mobile web apps
‣ who is consuming the most bandwidth and why it matters
MADE WITH LOVE IN SEATTLE BY

37. I can tell you...
‣ how many smartphones are being shipped in the US
‣ which platforms are moving and which aren't
‣ which platforms the carrier is behind and which they aren’t
‣ who is making money in mobile and who isn't
‣ where the network will be in the next three years
‣ how carriers feel about mobile web apps
‣ who is consuming the most bandwidth and why it matters
‣ when the next product from Apple is shipping
MADE WITH LOVE IN SEATTLE BY

38. ?

39. Mobile Lesson #1
if you have inside
information, you keep it
to yourself
MADE WITH LOVE IN SEATTLE BY

42. “[Motorola Xoom &
Atrix sales] have
been disappointing
—Analyst Douchelord

46. Mobile Lesson #2
be skeptical of anyone
claiming they have
answers to mobile*
*see lesson #1
MADE WITH LOVE IN SEATTLE BY

50. pinchzoom.com/thecontext

51. what’s next?
MADE WITH LOVE IN SEATTLE BY

52. Mobile Lesson #3
“the only prevailing wisdom
in mobile is that there is no
prevailing wisdom”
—Daniel Appelquist, W3C Mobile Web Initiative
MADE WITH LOVE IN SEATTLE BY

53. MADE WITH LOVE IN SEATTLE BY

54. MADE WITH LOVE IN SEATTLE BY

55. MADE WITH LOVE IN SEATTLE BY

56. 1970 1980 1990 2000 2010 2020
computing
network
internet
devices
web
MADE WITH LOVE IN SEATTLE BY

57. 1970 1980 1990 2000 2010 2020
computing mainframe
network
internet
devices
web
MADE WITH LOVE IN SEATTLE BY

58. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s
network
internet
devices
web
MADE WITH LOVE IN SEATTLE BY

59. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility
network
internet
devices
web
MADE WITH LOVE IN SEATTLE BY

60. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network
internet
devices
web
MADE WITH LOVE IN SEATTLE BY

61. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G
internet
devices
web
MADE WITH LOVE IN SEATTLE BY

62. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G
internet
devices
web
MADE WITH LOVE IN SEATTLE BY

63. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G
internet
devices
web
MADE WITH LOVE IN SEATTLE BY

64. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G
internet
devices
web
MADE WITH LOVE IN SEATTLE BY

65. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G LTE
internet
devices
web
MADE WITH LOVE IN SEATTLE BY

66. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G LTE
internet IPv4
devices
web
MADE WITH LOVE IN SEATTLE BY

67. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G LTE
internet IPv4 IPv6
devices
web
MADE WITH LOVE IN SEATTLE BY

68. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G LTE
internet IPv4 IPv6
devices brick
web
MADE WITH LOVE IN SEATTLE BY

69. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G LTE
internet IPv4 IPv6
devices brick candybar
web
MADE WITH LOVE IN SEATTLE BY

70. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G LTE
internet IPv4 IPv6
devices brick candybar feature
web
MADE WITH LOVE IN SEATTLE BY

71. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G LTE
internet IPv4 IPv6
devices brick candybar feature touch
web
MADE WITH LOVE IN SEATTLE BY

72. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G LTE
internet IPv4 IPv6
devices brick candybar feature touch
web academia
MADE WITH LOVE IN SEATTLE BY

73. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G LTE
internet IPv4 IPv6
devices brick candybar feature touch
web academia dot-com
MADE WITH LOVE IN SEATTLE BY

74. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G LTE
internet IPv4 IPv6
devices brick candybar feature touch
web academia dot-com web 2.0
MADE WITH LOVE IN SEATTLE BY

75. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G LTE
internet IPv4 IPv6
devices brick candybar feature touch
web academia dot-com web 2.0 next
MADE WITH LOVE IN SEATTLE BY

76. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G LTE
internet IPv4 IPv6
devices brick candybar feature touch
web academia dot-com web 2.0 next
MADE WITH LOVE IN SEATTLE BY

77. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G LTE
internet IPv4 IPv6
devices brick candybar feature touch
web academia dot-com web 2.0 next
MADE WITH LOVE IN SEATTLE BY

78. everything has led
to this moment
MADE WITH LOVE IN SEATTLE BY

79. the future of mobile will
not be the web...
MADE WITH LOVE IN SEATTLE BY

80. the future of mobile will
not be the web...
...or apps
MADE WITH LOVE IN SEATTLE BY

81. Mobile Lesson #4
when it comes to mobile
assume nothing
MADE WITH LOVE IN SEATTLE BY

82. MADE WITH LOVE IN SEATTLE BY

83. MADE WITH LOVE IN SEATTLE BY

84. Mobile Lesson #5
use the appropriate
interaction to the
context
MADE WITH LOVE IN SEATTLE BY

86. Mobile Lesson #6
no gets fired for using a
lowest common
denominator design
MADE WITH LOVE IN SEATTLE BY

87. MADE WITH LOVE IN SEATTLE BY

88. “Chuck”
MADE WITH LOVE IN SEATTLE BY

91. content result
result result
result
result result
MADE WITH LOVE IN SEATTLE BY

92. Mobile Lesson #7
mobile users have
sophisticated spacial
orientation
MADE WITH LOVE IN SEATTLE BY

93. p/z universal
build a website that provided the best
possible experience to the context.
MADE WITH LOVE IN SEATTLE BY

94. p/z universal
build a website that provided the best
possible experience to the context.
iPad
magazine
MADE WITH LOVE IN SEATTLE BY

95. p/z universal
build a website that provided the best
possible experience to the context.
iPad iPhone
magazine web app
MADE WITH LOVE IN SEATTLE BY

96. p/z universal
build a website that provided the best
possible experience to the context.
iPad iPhone Desktop
magazine web app website
MADE WITH LOVE IN SEATTLE BY

97. MADE WITH LOVE IN SEATTLE BY

98. Content in Context
MADE WITH LOVE IN SEATTLE BY

100. MADE WITH LOVE IN SEATTLE BY

101. 1x HTML5 Markup
MADE WITH LOVE IN SEATTLE BY

102. 1x HTML5 Markup
1x Hexadecimal CSS Framework
MADE WITH LOVE IN SEATTLE BY

103. 1x HTML5 Markup
1x Hexadecimal CSS Framework
1x Typography Framework
MADE WITH LOVE IN SEATTLE BY

104. 1x HTML5 Markup
1x Hexadecimal CSS Framework
1x Typography Framework
3x Javascript Frameworks
MADE WITH LOVE IN SEATTLE BY

105. 1x HTML5 Markup
1x Hexadecimal CSS Framework
1x Typography Framework
3x Javascript Frameworks
8x Media-Query-based Layouts
MADE WITH LOVE IN SEATTLE BY

106. a hexadecimal what?
MADE WITH LOVE IN SEATTLE BY

107. the hex-grid
Typically when using a grid
web designers are typically
only using vertical units.
MADE WITH LOVE IN SEATTLE BY

108. the hex-grid
but in mobile design, we must use
horizontal units as well. this
means that any unit size must
work vertically as well as
horizontally.
MADE WITH LOVE IN SEATTLE BY

111. iPad iPhone Desktop
magazine web app website
MADE WITH LOVE IN SEATTLE BY

112. iPad iPhone Desktop
magazine web app website
‣ pagination was a nightmare.
MADE WITH LOVE IN SEATTLE BY

113. iPad iPhone Desktop
magazine web app website
‣ pagination was a nightmare.
‣ hadto create an entirely new css
framework to deal with all the screen
sizes.
MADE WITH LOVE IN SEATTLE BY

114. iPad iPhone Desktop
magazine web app website
‣ pagination was a nightmare.
‣ hadto create an entirely new css
framework to deal with all the screen
sizes.
‣ every page had to be designed
individually.
MADE WITH LOVE IN SEATTLE BY

115. iPad iPhone Desktop
magazine web app website
‣ pagination was a nightmare.
‣ hadto create an entirely new css
framework to deal with all the screen
sizes.
‣ every page had to be designed
individually.
‣ content had to be type fitted, similar to
print layout workflow.
MADE WITH LOVE IN SEATTLE BY

116. iPad iPhone Desktop
magazine web app website
‣ pagination was a nightmare.
‣ hadto create an entirely new css
framework to deal with all the screen
sizes.
‣ every page had to be designed
individually.
‣ content had to be type fitted, similar to
print layout workflow.
‣ had to disable pinch to zoom.
MADE WITH LOVE IN SEATTLE BY

117. iPad iPhone Desktop
magazine web app website
‣ pagination was a nightmare. ‣ largeimage needs for iPad were
‣ had
brutal.
to create an entirely new css
framework to deal with all the screen
sizes.
‣ every page had to be designed
individually.
‣ content had to be type fitted, similar to
print layout workflow.
‣ had to disable pinch to zoom.
MADE WITH LOVE IN SEATTLE BY

118. iPad iPhone Desktop
magazine web app website
‣ pagination was a nightmare. ‣ largeimage needs for iPad were
‣ had
brutal.
to create an entirely new css
framework to deal with all the screen ‣ had to add device detection to reduce
sizes. JS page load per context.
‣ every page had to be designed
individually.
‣ content had to be type fitted, similar to
print layout workflow.
‣ had to disable pinch to zoom.
MADE WITH LOVE IN SEATTLE BY

119. iPad iPhone Desktop
magazine web app website
‣ pagination was a nightmare. ‣ largeimage needs for iPad were
‣ had
brutal.
to create an entirely new css
framework to deal with all the screen ‣ had to add device detection to reduce
sizes. JS page load per context.
‣ every page had to be designed ‣ typical navigation had to be scrapped.
individually.
‣ content had to be type fitted, similar to
print layout workflow.
‣ had to disable pinch to zoom.
MADE WITH LOVE IN SEATTLE BY

120. iPad iPhone Desktop
magazine web app website
‣ pagination was a nightmare. ‣ largeimage needs for iPad were
‣ had
brutal.
to create an entirely new css
framework to deal with all the screen ‣ had to add device detection to reduce
sizes. JS page load per context.
‣ every page had to be designed ‣ typical navigation had to be scrapped.
individually. ‣ design sacrifices had to be made to
‣ content had to be type fitted, similar to make it work.
print layout workflow.
‣ had to disable pinch to zoom.
MADE WITH LOVE IN SEATTLE BY

121. iPad iPhone Desktop
magazine web app website
‣ pagination was a nightmare. ‣ largeimage needs for iPad were
‣ had
brutal.
to create an entirely new css
framework to deal with all the screen ‣ had to add device detection to reduce
sizes. JS page load per context.
‣ every page had to be designed ‣ typical navigation had to be scrapped.
individually. ‣ design sacrifices had to be made to
‣ content had to be type fitted, similar to make it work.
print layout workflow. ‣ page flow was less than ideal.
‣ had to disable pinch to zoom.
MADE WITH LOVE IN SEATTLE BY

122. Mobile Lesson #8
mobile is really hard
work
MADE WITH LOVE IN SEATTLE BY

123. Mobile Lesson #9
mobile web is often
harder than native
MADE WITH LOVE IN SEATTLE BY

125. mobiledesign.org

127. “ adding manpower to a late
software project makes it
later.
—Fred Brooks

129. Mobile Lesson #10
adding more devices
increases the cost of
mobile development
exponentially
MADE WITH LOVE IN SEATTLE BY

131. “ They are expensive to create
—a simple app could cost
you $32,639 and take two
months to create.

132. $32,639 for a simple app
MADE WITH LOVE IN SEATTLE BY

133. $32,639 for a simple app
2 months to create
MADE WITH LOVE IN SEATTLE BY

134. $32,639 for a simple app
2 months to create
2 weeks per feature
MADE WITH LOVE IN SEATTLE BY

135. $32,639 for a simple app
2 months to create
2 weeks per feature
4 features
MADE WITH LOVE IN SEATTLE BY

136. $32,639 for a simple app
2 months to create
2 weeks per feature
4 features
$8,160 per feature
MADE WITH LOVE IN SEATTLE BY

137. “ A complex app could have a
price tag of more than
$163,200 and take six
months to develop.

138. $163,200 for a complex app
MADE WITH LOVE IN SEATTLE BY

139. $163,200 for a complex app
6 months to create
MADE WITH LOVE IN SEATTLE BY

140. $163,200 for a complex app
6 months to create
2 weeks per feature
MADE WITH LOVE IN SEATTLE BY

141. $163,200 for a complex app
6 months to create
2 weeks per feature
12 features
MADE WITH LOVE IN SEATTLE BY

142. $163,200 for a complex app
6 months to create
2 weeks per feature
12 features
$13,600 per feature
MADE WITH LOVE IN SEATTLE BY

143. “ This price multiplies if you
decide you want to make it
available on more than one
operating system.

145. Native Mobile Web Hybrid
iPhone 100% 75% 113%
iPad 150% 125% 141%
Android 175% 150% 225%
Honeycomb 200% 150% 225%
Blackberry 300% 225% 338%
MADE WITH LOVE IN SEATTLE BY

146. Native Mobile Web Hybrid
iPhone 100% 75% 113%
iPad 150% 125% 141%
Android 175% 150% 225%
Honeycomb 200% 150% 225%
Blackberry 300% 225% 338%
MADE WITH LOVE IN SEATTLE BY

147. Native Mobile Web Hybrid
iPhone 100% 75% 113%
iPad 150% 125% 141%
Android 175% 150% 225%
Honeycomb 200% 150% 225%
Blackberry 300% 225% 338%
MADE WITH LOVE IN SEATTLE BY

148. task x time(complexity x effort) x rate = price
MADE WITH LOVE IN SEATTLE BY

149. features x time( platform x experience ) x rate = price
MADE WITH LOVE IN SEATTLE BY

150. Simple App
Native Mobile Web Hybrid
iPhone $32,639 $24,479 $36,719
iPad $48,959 $30,599 $45,899
Android $57,118 $48,959 $73,438
Honeycomb $65,278 $48,959 $73,438
Blackberry $97,917 $73,438 $110,157
Total $301,911 $226,433 $339,650
MADE WITH LOVE IN SEATTLE BY

151. Simple App
Native Mobile Web Hybrid
iPhone $32,639 $24,479 $36,719
iPad $48,959 $30,599 $45,899
Android $57,118 $48,959 $73,438
Honeycomb $65,278 $48,959 $73,438
Blackberry $97,917 $73,438 $110,157
Total $301,911 $226,433 $339,650
MADE WITH LOVE IN SEATTLE BY

152. Simple App
Native Mobile Web Hybrid
iPhone $32,639 $24,479 $36,719
iPad $48,959 $30,599 $45,899
Android $57,118 $48,959 $73,438
Honeycomb $65,278 $48,959 $73,438
Blackberry $97,917 $73,438 $110,157
Total $301,911 $226,433 $339,650
MADE WITH LOVE IN SEATTLE BY

153. Complex App
Native Mobile Web Hybrid
iPhone $163,200 $122,400 $183,600
iPad $244,800 $153,000 $229,500
Android $285,600 $244,800 $367,200
Honeycomb $326,400 $244,800 $367,200
Blackberry $489,600 $367,200 $550,800
Total $1,509,600 $1,132,200 $1,698,300
MADE WITH LOVE IN SEATTLE BY

154. Complex App
Native Mobile Web Hybrid
iPhone $163,200 $122,400 $183,600
iPad $244,800 $153,000 $229,500
Android $285,600 $244,800 $367,200
Honeycomb $326,400 $244,800 $367,200
Blackberry $489,600 $367,200 $550,800
Total $1,509,600 $1,132,200 $1,698,300
MADE WITH LOVE IN SEATTLE BY

155. Complex App
Native Mobile Web Hybrid
iPhone $163,200 $122,400 $183,600
iPad $244,800 $153,000 $229,500
Android $285,600 $244,800 $367,200
Honeycomb $326,400 $244,800 $367,200
Blackberry $489,600 $367,200 $550,800
Total $1,509,600 $1,132,200 $1,698,300
MADE WITH LOVE IN SEATTLE BY

156. MADE WITH LOVE IN SEATTLE BY

157. Mobile Lesson #11
regardless of technology,
mobile isn’t cheap
MADE WITH LOVE IN SEATTLE BY

160. an exercise
MADE WITH LOVE IN SEATTLE BY

161. November 22, 1963

162. today, we are going
prove who shot JFK
using the principles
of the mobile web.
November 22, 1963

169. what do you believe?
MADE WITH LOVE IN SEATTLE BY

172. “ HTML5 has so much
momentum it could
defeat the native app in
as little as two years.

173. “Chuck”
MADE WITH LOVE IN SEATTLE BY

174. 1970 1980 1990 2000 2010 2020
computing mainframe pc’s mobility ubiquity
network 1G 2G 2.5G 3G LTE
internet IPv4 IPv6
devices brick candybar feature touch
web academia dot-com web 2.0 next
MADE WITH LOVE IN SEATTLE BY

175. Mobile Lesson #12
the client is not your
problem. it’s your data.
MADE WITH LOVE IN SEATTLE BY

176. Mobile Lesson #13
a great mobile strategy
creates more questions
than it provide answers
MADE WITH LOVE IN SEATTLE BY

177. Mobile Lesson #14
there is no such thing as
a magic bullets*
*see lessons #1 & 2
MADE WITH LOVE IN SEATTLE BY

178. Get in Touch
THANK YOU Find Out How We Can Help You.
My name is Brian Fling and Brian Fling
I’m a Mobile Designer Founder & Creative Director
brian@pinchzoom.com
+1 206 351-6060
twitter.com/fling
book mobiledesign.org
company pinchzoom.com
blog pinchzoom.com/fling