Native vs

Webvs

Hybrid Mobile Development Choices

Jason Grigsby@grigs on Twitter • jason@cloudfour.com

cloudfour.com • userfirstweb.com mobileportand.com

Early 2008

“It’s about usage. Not units”

• Number of queries on Google search from iPhones surpassed those from Symbian-based phones in the days after Christmas. Nokia’s Symbian-based phones are 40% of the market worldwide.

• German iPhone users consume 30 times more data.

• 95% of iPhone customers regularly surf the Internet. Data services revenue increased from $2.7 billion in 2005 to $6.9 billion in 2007.

• Google sees 50 times the number of searches using the iPhone than any other mobile device. They were so surprised, they asked their engineers to check the logs to make sure it was correct.

• This is why major companies, Google, Quicken, etc. are all launching iPhone-optimized services despite the iPhone’s 1% market share.

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/

http://www.readwriteweb.com/archives/top_10_web_platforms_of_2008.php

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

30 million devices

25,000 apps

800 million downloads

Gold Rush was On

Ringtone Apps

(FYI: Justin’s app is out soon. GymRat. $4.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/

Pinch Media’s Conclusions

•Users stop using the average applications quickly.

•Long-term audiences are generally 1% of total downloads

•Paid apps retain users longer, but still steep drop off.

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

iPhone Only Part of World Wide Market

0

5000

10000

15000

20000

17949

7443

47144079

3195

327 437

Symbian RIM Windows Mobile iPhone LinuxPalm OS Other

Q4 2008 Smartphone Sales — Thousands of Unitshttp://www.gartner.com/it/page.jsp?id=910112

3.3BillionMobile phone for half the planet.

Flickr photo by Pingnews: http://www.flickr.com/photos/pingnews/370061022/

3.3 Billion in Perspective

Source: http://communities-dominate.blogs.com/brands/2007/01/putting_27_bill.htmlhttp://communities-dominate.blogs.com/brands/2008/01/when-there-is-a.html

2007 SMS Revenue: 100 billion

Flickr photo by Vlastula: http://www.flickr.com/photos/vlastula/450642954/

2007 SMS Revenue: 100 billion

•Box Office•DVD Sales & Rentals•Music Industry•Video Games

CombinedFlickr photo by Vlastula: http://www.flickr.com/photos/vlastula/450642954/

•Box Office•DVD Sales & Rentals•Music Industry•Video Games

CombinedFlickr photo by Vlastula: http://www.flickr.com/photos/vlastula/450642954/

200 billion for data services in 2008(SMS accounts for 130B)

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.

Daily

Weekly

Ever in Month

0 17500 35000 52500 70000

63182

19283

22369

36870

10312

10821

Jan 08 Jan 09

http://www.comscore.com/press/release.asp?press=2752

Unique Users (000s)

Mobile Web Doubled in 2008

Mobile Internet to Grow Despite Recession

U.S. Europe

Current Users 58% 55%

Non-Users 27% 28%

Average intended usage increase over the next 24 months

http://www.tellabs.com/news/2009/index.cfm/nr/53.cfm

Top Five Services Non-users Intend to Start Using in the Next 24 Months

U.S. Europe

Mobile Internet 49% 34%

MMS 38% 39%

Uploading Photos 34% 27%

Software/app download 30% 30%

Email 28% 32%

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?

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

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

Five Common Reasons for Native Apps

Performance

Offline Mode

Findability

Device Attributes

MonetizationFlickr 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/

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/

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/

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/

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?

http://148apps.com/10000

25,000 Apps

&

Findability?

“It all depends on the application, of course,” says

Mauro Montanaro, [Fox Mobile CEO] “and whether

they are paid or free.” But he also notes that the

“discoverability” of iPhone apps is becoming a bigger

problem, and that some of the marketing tactics that

Fox Mobile has used successfully on other handsets

just don’t work on the iPhone.

“The question, as usual, is placement. Who determines

[editorial placement]? Maybe someone out of Cupertino.”

Geolocation API

Camera

Address Book

Accelerometer

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

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

http://phonegap.com

What Can You Do With PhoneGap?

http://phonegap.com/projects

Phone Gap?

Yes we can

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

Mobile Progressive Enhancement

[content]

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

Mobile Progressive Enhancement

[content]

WURFL

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

Mobile Progressive Enhancement

[content]

WURFL

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

Mobile Progressive Enhancement

[content]

WURFL Phone GapAdd Functionality

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

Mobile Progressive Enhancement

[content]

WURFL Phone GapAdd Functionality

Keys to Successful Hybrid Apps

•Make the experience feel like a native application

•Take advantage of the enhanced features

•Don’t simply release a hybrid version of the mobile web site

•Optimize performance

Flickr photo by MarkKelley: http://www.flickr.com/photos/markkelley/1022720488/

Flickr photo by Pingnews: http://www.flickr.com/photos/pingnews/370061022/

Thank You for Your Time!

Work: http://cloudfour.com • Blog: http://userfirstweb.com • Twitter: @grigs Mobile Concurrency Test: http://cloudfour.com/mobile/