mobile web vs. native apps | design4mobile

104
http://www.flickr.com/photos/hi-phi/54828371 Native vs Web Jason Grigsby • Design4Mobile @grigs on Twitter [email protected] cloudfour.com/blog mobileportand.com SLIDES: bit.ly/grigs-d4m2010

Upload: jason-grigsby

Post on 15-Jan-2015

9.232 views

Category:

Technology


4 download

DESCRIPTION

Presentation given at Design4Mobile conference about choosing between native apps and mobile web.

TRANSCRIPT

Page 1: Mobile Web vs. Native Apps | Design4Mobile

http://www.flickr.com/photos/hi-phi/54828371

Native vs WebJason Grigsby • Design4Mobile@grigs on Twitter • [email protected]/blog • mobileportand.com

SLIDES: bit.ly/grigs-d4m2010

Page 2: Mobile Web vs. Native Apps | Design4Mobile
Page 3: Mobile Web vs. Native Apps | Design4Mobile
Page 4: Mobile Web vs. Native Apps | Design4Mobile
Page 5: Mobile Web vs. Native Apps | Design4Mobile
Page 6: Mobile Web vs. Native Apps | Design4Mobile

Why are we fighting?

http://www.flickr.com/photos/jeff-bauche/2230236391/sizes/o/

Page 7: Mobile Web vs. Native Apps | Design4Mobile

http://www.flickr.com/photos/acaben/541334636/

“We have been trying to come up with a solution to let developers write applications, yet keep the iPhone secure and safe. We’ve come up with a sweet solution.”

Page 8: Mobile Web vs. Native Apps | Design4Mobile

Web Developers

Mac Developers

Web Developers

Mac DevelopersWeb Developers

Mac Developers

Page 9: Mobile Web vs. Native Apps | Design4Mobile

Web Developers

Mac Developers

“That is a bold idea. Very forward

thinking... This is the coming out

party for web apps. We are very

excited about this. These are

exciting times.”

— Jason Fried, 37signals

Page 10: Mobile Web vs. Native Apps | Design4Mobile

Web Developers

Mac Developers

“Perhaps it’s playing well in the

mainstream press, but here at WWDC,

Apple’s “you can write great apps for the

iPhone: they’re called ‘web sites’” —

message went over like a lead balloon.

If all you have to offer is a shit sandwich,

just say it. Don’t tell us how lucky we are

and that it’s going to taste delicious.”

— Jon Gruber, Daring Fireball

Page 11: Mobile Web vs. Native Apps | Design4Mobile

Which is better? Who’s going to win?http://www.flickr.com/photos/jsymmetry/166749290/

Page 12: Mobile Web vs. Native Apps | Design4Mobile
Page 13: Mobile Web vs. Native Apps | Design4Mobile
Page 14: Mobile Web vs. Native Apps | Design4Mobile
Page 15: Mobile Web vs. Native Apps | Design4Mobile

October 2007 AnnouncementAppStore Launch July 2008

Page 16: Mobile Web vs. Native Apps | Design4Mobile

Surprise Story of 2008

Flickr photo by Drift Words: http://www.flickr.com/photos/44124413076@N01/11846265/

Page 17: Mobile Web vs. Native Apps | Design4Mobile

Web 2.0Web-based Apps

Services & MashupsSoftware as ServiceCloud Computing

iPhone App StoreNative Apps

Few APIs between appsNo Recurring Revenue

Local Storage

Flickr photo by Civisi: http://www.flickr.com/photos/civisi/2611679744/

Page 18: Mobile Web vs. Native Apps | Design4Mobile

Carriers App Store

Openness

Entry Cost

Revenue Split

Restrictions

Releases

Micropayments

Closed, Seek permissionOpen to anyone

who signs agreement

Thousands of dollars $99

60/40 to 50/50 70/30

Many Few

Difficult, Timely 1 to 2 weeks

Inconsistent iTunes for every phone

What makes the App Store successful?

Page 19: Mobile Web vs. Native Apps | Design4Mobile

http://blog.wired.com/gadgets/2009/02/shoot-is-iphone.html#c148364123

http://www.newsweek.com/id/174266

http://businessweek.com/@@0M43kIYQYKPISw0A/technology/content/sep2008/tc20080930_257832.htm

120 million devices

315,634 apps

6.5 billiondownloads

Page 20: Mobile Web vs. Native Apps | Design4Mobile
Page 21: Mobile Web vs. Native Apps | Design4Mobile
Page 22: Mobile Web vs. Native Apps | Design4Mobile
Page 24: Mobile Web vs. Native Apps | Design4Mobile

Native Mobile Apps

vs.

Mobile Web Apps

Page 25: Mobile Web vs. Native Apps | Design4Mobile

Mobile is Bigger than Just Apps

Native Mobile Apps

vs.

Mobile Web Apps

Page 26: Mobile Web vs. Native Apps | Design4Mobile
Page 27: Mobile Web vs. Native Apps | Design4Mobile
Page 28: Mobile Web vs. Native Apps | Design4Mobile
Page 29: Mobile Web vs. Native Apps | Design4Mobile
Page 30: Mobile Web vs. Native Apps | Design4Mobile
Page 31: Mobile Web vs. Native Apps | Design4Mobile
Page 32: Mobile Web vs. Native Apps | Design4Mobile

Plants vs. Zombies

Page 33: Mobile Web vs. Native Apps | Design4Mobile
Page 34: Mobile Web vs. Native Apps | Design4Mobile
Page 35: Mobile Web vs. Native Apps | Design4Mobile

URLs Don’t Open Apps

Page 36: Mobile Web vs. Native Apps | Design4Mobile

The ‘U’ in URL stands for Universal*

* it actually stands for ‘uniform.’ close enough ;-) http://www.flickr.com/photos/laughingsquid/255852260/sizes/o/

Page 37: Mobile Web vs. Native Apps | Design4Mobile

A mobile

website

for every

iPhone

app.

http://www.flickr.com/photos/fotoosvanrobin/4932854288/sizes/l/

Page 38: Mobile Web vs. Native Apps | Design4Mobile

http://www.flickr.com/photos/earlysound/2710970750/ Creative Commons

More ways iPhone AppStore skews perceptions

Page 39: Mobile Web vs. Native Apps | Design4Mobile

http://www.flickr.com/photos/fxp/2374147405/sizes/l/

Do Apps Create Platform Lock-in?

If you've bought $200 worth of applications for your smartphone, you're much less likely to switch to a different model in the future.

In short, high spending on smartphone apps ensures long-term platform loyalty.

Page 40: Mobile Web vs. Native Apps | Design4Mobile

App Cost

Twitter for iPhone Free

Reeder $2.99

Instapaper $4.99

Facebook Free

1Password $9.99

Total $17.97

Do Apps REALLY Create Platform Lock-in?

Switching Costs are Lower

Page 41: Mobile Web vs. Native Apps | Design4Mobile

Are App Stores Essential to a Platform’s Success?

Page 43: Mobile Web vs. Native Apps | Design4Mobile
Page 44: Mobile Web vs. Native Apps | Design4Mobile

Android Outsold iPhone in Q2 2010

2%2%5%

14%

17%

18%

41%

Symbian RIM Android iPhone Windows LinuxOthers

Android 17%, iPhone 14%http://www.gartner.com/it/page.jsp?id=1421013

Page 45: Mobile Web vs. Native Apps | Design4Mobile

Why compare mobile to the PC market?

http://www.flickr.com/photos/mesq/413104380/sizes/o/

Page 46: Mobile Web vs. Native Apps | Design4Mobile
Page 47: Mobile Web vs. Native Apps | Design4Mobile
Page 48: Mobile Web vs. Native Apps | Design4Mobile

Ringtone Apps

(FYI: Justin’s app is out soon. FitnessTrack. $2.99)

http://twitter.com/justin/status/1210786170http://furbo.org/2008/12/09/ring-tone-apps/http://furbo.org/2009/02/16/raising-prices/

Page 49: Mobile Web vs. Native Apps | Design4Mobile

0

3750

7500

11250

15000

0 1.99 3.99 5.99 7.99 9.99 11.99 13.99 15.99+

Ringtone Apps

http://148apps.com/10000

Page 50: Mobile Web vs. Native Apps | Design4Mobile

Brutally Honest iPhone App Sales:$32k Spent vs. $535 Revenue

http://www.streamingcolour.com/blog/2009/03/09/the-numbers-post-aka-brutal-honesty/

Dapple

Page 51: Mobile Web vs. Native Apps | Design4Mobile

Throwaway Apps

http://www.pinchmedia.com/appstore-secrets/

Page 52: Mobile Web vs. Native Apps | Design4Mobile

Throwaway Apps

http://www.pinchmedia.com/appstore-secrets/

Page 53: Mobile Web vs. Native Apps | Design4Mobile

Success Determined by Top Lists & Features

http://appcubby.com/blog/files/financial_realities.html

Page 54: Mobile Web vs. Native Apps | Design4Mobile

More Open ≠ No Gatekeeper

96%Approved

(what about that 4%?)

Page 55: Mobile Web vs. Native Apps | Design4Mobile

10 Rejected Applications

http://www.pcworld.com/article/159887-2/rejected_10_iphone_apps_that_didnt_make_apples_app_store.html

• Obama Trampoline

• MyShoe

• I Am Poor

• The South Park App

• Pull My Finger

• iBoobs

• Slasher

• Murderdome

• Podcaster

• Freedom Time

"Even though my personal political leanings are Democratic, I think this app will be offensive to roughly half our customers. What's the point?" — Steve Jobs

Page 56: Mobile Web vs. Native Apps | Design4Mobile

“We view Apps different than books or

songs, which we do not curate. If you

want to criticize a religion, write a book. If

you want to describe sex, write a book or

a song, or create a medical app.”

— Apple AppStore Guidelines

Page 57: Mobile Web vs. Native Apps | Design4Mobile
Page 58: Mobile Web vs. Native Apps | Design4Mobile

http://bits.blogs.nytimes.com/2009/04/30/the-hundred-million-dollar-mobile-app-question/

Where is the scale & recurring revenue?

Page 59: Mobile Web vs. Native Apps | Design4Mobile
Page 60: Mobile Web vs. Native Apps | Design4Mobile

Flickr photo by André-Batista: http://www.flickr.com/photo_zoom.gne?id=408700622&size=o

Objective C

Java ME

WebOS

C++

.NET Compact

BREW

Dalvik

Visual Basic

C

Symbian Windows Mobile

Palm

Page 61: Mobile Web vs. Native Apps | Design4Mobile

Google Mobile — App Challenges

•Pressure from CEO for rapid releases

•10+ platforms to support

•Over 100 different builds

http://www.flickr.com/photos/83731031@N00/445924458/ • http://www.flickr.com/photos/mcdave/142758127/http://www.flickr.com/photos/nataliejohnson/290541732/

Page 62: Mobile Web vs. Native Apps | Design4Mobile

Flickr photo by .Hessam: http://www.flickr.com/photos/essamo/1070527547/

Fragmentation:This is what the

web is supposed to solve.

Page 63: Mobile Web vs. Native Apps | Design4Mobile

14%

1%4%

14%

20%

47%

SymbianBlackberryiPhoneAndroidWebOSWindows/Others

2009 Smartphone Market Share (Gartner)

Phones currently shipping or projected to ship using WebKit in blue (85%).

WebKit & HTML5: Dominant Mobile Platform

By contrast, 10 smartphone operating systems.

Page 64: Mobile Web vs. Native Apps | Design4Mobile
Page 65: Mobile Web vs. Native Apps | Design4Mobile
Page 66: Mobile Web vs. Native Apps | Design4Mobile
Page 67: Mobile Web vs. Native Apps | Design4Mobile

The reports of my death are greatly exaggerated

http://www.flickr.com/photos/stuckincustoms/2743756315/sizes/l/

Page 68: Mobile Web vs. Native Apps | Design4Mobile

Find a single report that doesn’t showexponential growth for mobile web.

CHALLENGE:

Page 69: Mobile Web vs. Native Apps | Design4Mobile
Page 70: Mobile Web vs. Native Apps | Design4Mobile
Page 71: Mobile Web vs. Native Apps | Design4Mobile

Flirtomatic $15M in Revenue

• $12 per month from 175,000 paying customers

• 30% use the service seven times a day

• Sold 28,000 virtual gifts in the five days between Boxing Day and New Year’s Eve

Source: http://bit.ly/cck1xE | http://bit.ly/dpHbak

Page 72: Mobile Web vs. Native Apps | Design4Mobile

Our iPhone app has been a Top 10 iPhone

reference application for almost two years with

almost six million downloads, and even with

all of the great chart positions and visibility –

just as many iPhone consumers use our

mobile website as the application.—Kevin Nakao, Chief Operating Officer, Whitepages.com

http://mashable.com/2010/06/10/why-you-may-not-need-a-mobile-app/

Page 73: Mobile Web vs. Native Apps | Design4Mobile

Carriers App Store Mobile Web

Openness

Entry Cost

Revenue Split

Restrictions

Releases

Micropayments

Closed, Seek permission

Open to anyone who signs agreement

Completely Open

Thousands of dollars $99 None

60/40 to 50/50 70/30 100%

Many Few None

Difficult, Timely 1 to 2 weeks Instantaneous

Inconsistent iTunes for every phone Not yet

Mobile Web Distribution

Page 74: Mobile Web vs. Native Apps | Design4Mobile

Ok Hot Shot, How are You Going to Create Super Monkey Ball with HTML?

<div id=”bridge” class=”rope”>

<div id=”bubble”><span id=”monkey sprite-replace”>Monkey</span>

jquery-banana.js

Some Applications Have to Be Native

Page 75: Mobile Web vs. Native Apps | Design4Mobile

Six Common Reasons for Native Apps

Performance

Offline Mode

Findability

Device Attributes

Monetization

ExperienceFlickr photo by John Wardell (Netinho): http://www.flickr.com/photo_zoom.gne?id=760902403&size=l

Page 76: Mobile Web vs. Native Apps | Design4Mobile

Flickr: Uploaded February 11, 2007 by hawridger

Not for all applications

Good enough for many applications

Javascript Performance improving

Hardware Accelerated CSS

Web developers must improve

Page 77: Mobile Web vs. Native Apps | Design4Mobile

Javascript Speed Wars

http://webkit.org/blog/189/announcing-squirrelfish/http://news.cnet.com/8301-1001_3-10030888-92.html

http://weblogs.mozillazine.org/roadmap/archives/2008/09/tracemonkey_update.htmlhttp://webkit.org/blog/214/introducing-squirrelfish-extreme/

Page 78: Mobile Web vs. Native Apps | Design4Mobile
Page 79: Mobile Web vs. Native Apps | Design4Mobile

We’ve Become Bandwidth Gluttons

Since 2003:

• Web Page Size Tripled• # of Objects Doubled

Since 1995:

• Web Page Size: 22x• # of Objects: 21x

Source: http://www.websiteoptimization.com/speed/tweak/average-web-page/

Page 80: Mobile Web vs. Native Apps | Design4Mobile

Yahoo!’s 14 Performance Rules (Now 34!)

1. Make Fewer HTTP Requests

2. Use a Content Delivery Network

3. Add an Expires Header

4. Gzip Components

5. Put Stylesheets at the Top

6. Move Scripts to the Bottom

7. Avoid CSS Expressions

8. Make JavaScript and CSS External

9. Reduce DNS Lookups

10.Minify JavaScript

11.Avoid Redirects

12.Remove Duplicate Scripts

13.Configure ETags

14.Make AJAX Cacheable

Source: http://developer.yahoo.com/performance/rules.html

Page 81: Mobile Web vs. Native Apps | Design4Mobile

Offline Support

• HTML 5

• Client-side Database Storage API

• Application Cache

• Essentially SQLite in browser

• Available on iPhone since 2.0

• Google Gears, Android, Nokia soon?

Page 82: Mobile Web vs. Native Apps | Design4Mobile

Gmail Using HTML5

Page 83: Mobile Web vs. Native Apps | Design4Mobile

http://148apps.com/10000

315,000 Apps

&

Findability?

Page 84: Mobile Web vs. Native Apps | Design4Mobile
Page 85: Mobile Web vs. Native Apps | Design4Mobile

Geolocation API

Camera

Address Book

Accelerometer

Page 86: Mobile Web vs. Native Apps | Design4Mobile

Flickr photo by Lyza Gardner: http://www.flickr.com/photos/lyza/49545547/

Page 87: Mobile Web vs. Native Apps | Design4Mobile

http://www.flickr.com/photos/esi_design/4548281713/sizes/l/

Immersive Experience

Page 88: Mobile Web vs. Native Apps | Design4Mobile
Page 89: Mobile Web vs. Native Apps | Design4Mobile
Page 90: Mobile Web vs. Native Apps | Design4Mobile

Mobile Web Experience Biggest Challenges

Position: Fixed

Accelerated Scrolling

Page 91: Mobile Web vs. Native Apps | Design4Mobile

Flickr photo by Thomas Purves: http://www.flickr.com/photos/thomaspurves/744225198/

Page 92: Mobile Web vs. Native Apps | Design4Mobile
Page 93: Mobile Web vs. Native Apps | Design4Mobile

What Can You Do With PhoneGap?

http://phonegap.com/projects

Page 94: Mobile Web vs. Native Apps | Design4Mobile
Page 95: Mobile Web vs. Native Apps | Design4Mobile
Page 96: Mobile Web vs. Native Apps | Design4Mobile
Page 97: Mobile Web vs. Native Apps | Design4Mobile
Page 98: Mobile Web vs. Native Apps | Design4Mobile

Hybrid Apps?

Yes we can

Page 99: Mobile Web vs. Native Apps | Design4Mobile

http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

Mobile Progressive Enhancement

[content]

Device Detection Phone GapAdd Functionality

Page 100: Mobile Web vs. Native Apps | Design4Mobile

iPhone App Generated $400M in 2009

Apps for Your Most Loyal Customers

Page 101: Mobile Web vs. Native Apps | Design4Mobile

Reward People for Downloading Your AppTake Advantage of Mobile Capabilities

Page 102: Mobile Web vs. Native Apps | Design4Mobile

Native vs WebWe’re all brothers here.

Page 103: Mobile Web vs. Native Apps | Design4Mobile

Overtime Debate Format: Battle Rap

Matthias Shapiro & Jason Alderman, Ignite Salt Lake

Page 104: Mobile Web vs. Native Apps | Design4Mobile

Mobile Web vs. Native vs. Hybrid? Yes.

Jason GrigsbySlides: bit.ly/grigs-d4m2010 @grigs • [email protected] • mobileportand.com

http://www.flickr.com/photos/jphilipson/2100627902/