Mobile Web vs. Native Apps | Design4Mobile

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

Native vs WebJason Grigsby • Design4Mobile@grigs on Twitter • jason@cloudfour.comcloudfour.com/blog • mobileportand.com

SLIDES: bit.ly/grigs-d4m2010

Why are we fighting?

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

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.”

Web Developers

Mac Developers

Web Developers

Mac DevelopersWeb Developers

Mac Developers

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

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

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

October 2007 AnnouncementAppStore Launch July 2008

Surprise Story of 2008

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

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/

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?

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

http://www.flickr.com/photos/digobaptista/3270435022/

Native Mobile Apps

vs.

Mobile Web Apps

Mobile is Bigger than Just Apps

Native Mobile Apps

vs.

Mobile Web Apps

Plants vs. Zombies

URLs Don’t Open Apps

The ‘U’ in URL stands for Universal*

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

A mobile

website

for every

iPhone

app.

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

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

More ways iPhone AppStore skews perceptions

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.

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

Are App Stores Essential to a Platform’s Success?

http://www.techpaparazzi.com/wp-content/uploads/2010/07/apps.jpg

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

Why compare mobile to the PC market?

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

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/

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

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

Throwaway Apps

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

Throwaway Apps

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

Success Determined by Top Lists & Features

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

More Open ≠ No Gatekeeper

96%Approved

(what about that 4%?)

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

“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

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

Where is the scale & recurring revenue?

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

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/

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

Fragmentation:This is what the

web is supposed to solve.

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.

The reports of my death are greatly exaggerated

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

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

CHALLENGE:

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

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/

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

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

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

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

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/

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/

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

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?

Gmail Using HTML5

http://148apps.com/10000

315,000 Apps

&

Findability?

Geolocation API

Camera

Address Book

Accelerometer

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

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

Immersive Experience

Mobile Web Experience Biggest Challenges

Position: Fixed

Accelerated Scrolling

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

What Can You Do With PhoneGap?

http://phonegap.com/projects

Hybrid Apps?

Yes we can

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

Mobile Progressive Enhancement

[content]

Device Detection Phone GapAdd Functionality

iPhone App Generated $400M in 2009

Apps for Your Most Loyal Customers

Reward People for Downloading Your AppTake Advantage of Mobile Capabilities

Native vs WebWe’re all brothers here.

Overtime Debate Format: Battle Rap

Matthias Shapiro & Jason Alderman, Ignite Salt Lake

Mobile Web vs. Native vs. Hybrid? Yes.

Jason GrigsbySlides: bit.ly/grigs-d4m2010 @grigs • jason@cloudfour.comcloudfour.com • mobileportand.com

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