native v. hybrid v. web
DESCRIPTION
My presentation for Web Directions Unplugged to talk about some of the specific costs and challenges we face when selecting a mobile development strategy.TRANSCRIPT
native hybrid web
vs vs
@fling
the format
ask questions.get answers.
my sad love story of the mobile web
native hybrid web
vs vs
bradfrostweb.com
bradfrostweb.com
“[Brian] made me feel the same way I feel when my grandpa talks to me about surviving the Great Depression.
—Brad Frost
That Guy
3:1QA : Dev
For every hour spent on development, three had to
be spent in QA.
mobile ux
web
mobile ux
web
2010
2010
“If the web was my religion, I feel as
though I’ve lost my faith.
mobiledesign.org
“[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
MADE WITH LOVE IN SEATTLE BY
while my friends were rolling in cash from native apps,
while my friends were rolling in cash from native apps,
I couldn’t pay my rent building web apps.
“I want desperately to be a web developer again, but if I have to wait until 2020 for browsers to do what Cocoa can do in 2010, I won’t wait.
—Joe Hewitt29 April 2010
pinch/zoom
pinchzoom.com
Price Apps!
iflowreader.com
iflowreader.com
“We bet everything on Apple and iOS and then Apple killed us by changing the rules in the middle of the game.
suck my ass
I bet everything on the web and I lost.
That Guy
Why?
MADE WITH LOVE IN SEATTLE BYMADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web
20102000199019801970 2020
mobilitypc’smainframe
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web
20102000199019801970 2020
ubiquitymobilitypc’smainframe
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web
20102000199019801970
3G
2020
2.5G2G1G
ubiquitymobilitypc’smainframe
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web
20102000199019801970
3G
2020
4G2.5G2G1G
ubiquitymobilitypc’smainframe
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web
20102000199019801970
IPv4
3G
2020
4G2.5G2G1G
ubiquitymobilitypc’smainframe
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web
20102000199019801970
IPv4
3G
IPv6
2020
4G2.5G2G1G
ubiquitymobilitypc’smainframe
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web
20102000199019801970
featurebrick
IPv4
3G
IPv6
2020
candybar
4G2.5G2G1G
ubiquitymobilitypc’smainframe
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web
20102000199019801970
featurebrick
IPv4
touch
3G
IPv6
2020
candybar
4G2.5G2G1G
ubiquitymobilitypc’smainframe
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web dot-com
20102000199019801970
web 2.0
featurebrick
IPv4
touch
3G
IPv6
2020
candybar
4G2.5G2G1G
ubiquitymobilitypc’smainframe
academia
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web dot-com
20102000199019801970
web 2.0
featurebrick
IPv4
touch
3G
IPv6
2020
candybar
4G2.5G2G1G
ubiquitymobilitypc’smainframe
nextacademia
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web dot-com
20102000199019801970
web 2.0
featurebrick
IPv4
touch
3G
IPv6
2020
candybar
4G2.5G2G1G
ubiquitymobilitypc’smainframe
nextacademia
MADE WITH LOVE IN SEATTLE BY
computing
network
internet
devices
web dot-com
20102000199019801970
web 2.0
featurebrick
IPv4
touch
3G
IPv6
2020
candybar
4G2.5G2G1G
ubiquitymobilitypc’smainframe
nextacademia
MADE WITH LOVE IN SEATTLE BY
touch
IPv6
4G
ubiquity
next
everything has led to this moment
the future of mobile will not be the web...
the future of mobile will not be the web...
...or apps
it’s everything everywhere
That Guy
native hybrid web
vs vs
native appAn application that is specifically written for a device platform.
“ They are expensive to create—a simple app could cost you $32,639 and take two months to create.
$32,639 for a simple app2 months to create
2 weeks per feature
4 features
$8,160 per feature
“A complex app could have a price tag of more than $163,200 and take six months to develop.
$163,200 for a complex app6 months to create
2 weeks per feature
12 features
$13,600 per feature
“ This price multiplies if you decide you want to make it available on more than one operating system.
PLATFORM RESOURCES
iPhone 100%
iPad 150%
Android 175%
Honeycomb 200%
Blackberry 300%
Cost of NativeSimple App Complex App
iPhone $32,639 $163,200
iPad $48,959 $244,800
Android $57,118 $285,600
Honeycomb $65,278 $326,400
Blackberry $97,917 $489,600
Total $301,911 $1,509,600
hybrid appAn application using primarily web technologies inside a native container.
hybrid app...to be in the App Store.
Price Apps!
The PhoneGap Box Score
1.2 Platforms
53 ReviewsStars
PLATFORM RESOURCES
Hybrid iPhone 113%
Hybrid iPad 141%
Hybrid Android 225%
Hybrid Honeycomb 225%
Hybrid Blackberry 338%
wtf?
2.85:1QA : Dev
For every hour spent on development, three has to
be spent in QA.
Simple AppNative Hybrid Mobile Web
iPhone $32,639 $36,719 $24,479
iPad $48,959 $45,899 $30,599
Android $57,118 $73,438 $48,959
Honeycomb $65,278 $73,438 $48,959
Blackberry $97,917 $110,157 $73,438
Total $301,911 $339,650 $226,433
Complex AppNative Hybrid Mobile Web
iPhone $163,200 $183,600 $122,400
iPad $244,800 $229,500 $153,000
Android $285,600 $367,200 $244,800
Honeycomb $326,400 $367,200 $244,800
Blackberry $489,600 $550,800 $367,200
Total $1,509,600 $1,698,300 $1,132,200
web appAn application that runs within a web browser.
p/z universalbuild a website that provided the best possible experience to the context.
iPad
magazineiPhone
web appDesktop
website
Content in Context
MADE WITH LOVE IN SEATTLE BY
1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework3x Javascript Frameworks12x Media-Query-based Layouts
a hexadecimal what?
the hex-grid
Typically when using a grid web designers are typically only using vertical units.
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.
iPad
magazineiPhone
web appDesktop
website
‣ pagination was a nightmare.
‣ had 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.
‣ large image needs for iPad were brutal.
‣ had to add device detection to reduce JS page load per context.
‣ typical navigation had to be scrapped.
‣ design sacrifices had to be made to make it work.
‣ page flow was less than ideal.
2.85:1QA : Dev
sni!er.pinchzoom.com
Simple AppNative Hybrid Mobile Web
iPhone $32,639 $36,719 $24,479
iPad $48,959 $45,899 $30,599
Android $57,118 $73,438 $48,959
Honeycomb $65,278 $73,438 $48,959
Blackberry $97,917 $110,157 $73,438
Total $301,911 $339,650 $226,433
Complex AppNative Hybrid Mobile Web
iPhone $163,200 $183,600 $122,400
iPad $244,800 $229,500 $153,000
Android $285,600 $367,200 $244,800
Honeycomb $326,400 $367,200 $244,800
Blackberry $489,600 $550,800 $367,200
Total $1,509,600 $1,698,300 $1,132,200
That Guy
ask questions.get answers.
native? hybrid? web?
+ +