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.
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
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
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
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
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
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
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
109.
110.
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
127. “ adding manpower to a late
software project makes it
later.
—Fred Brooks
128.
129. Mobile Lesson #10
adding more devices
increases the cost of
mobile development
exponentially
MADE WITH LOVE IN SEATTLE BY
130.
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.
144.
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
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
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