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

 SLIDES: bit.ly/grigs-d4m2010


  http://www.flickr.com/photos/hi-phi/54828371
Why are we fighting?




http://www.flickr.com/photos/jeff-bauche/2230236391/sizes/o/
“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.”




                                          http://www.flickr.com/photos/acaben/541334636/
Web Developers
    Web Developers
    Mac Developers


Mac Developers
Web Developers
    Mac Developers
Web aDevelopers
     “That is bold idea. Very forward
     thinking... This is the coming out
     party for web apps. We are very
Macexcited about this. These are
    Developers
     exciting times.”
                — Jason Fried, 37signals
“Perhaps it’s playing well in the
mainstream press, but here at WWDC,
Apple’s “you can write great apps for the
                 Mac Developers
iPhone: they’re called ‘web sites’” —
message went over like a lead balloon.

        Web Developers
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 Announcement
 AppStore Launch July 2008
Surprise Story of 2008




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




      Web 2.0                                            iPhone App Store
 Web-based Apps                                             Native Apps
Services & Mashups                                     Few APIs between apps
Software as Service                                     No Recurring Revenue
 Cloud Computing                                           Local Storage
What makes the App Store successful?
                       Carriers                App Store

                                            Open to anyone
  Openness      Closed, Seek permission
                                          who signs agreement

  Entry Cost     Thousands of dollars              $99


Revenue Split       60/40 to 50/50                70/30


 Restrictions            Many                     Few


  Releases          Difficult, Timely          1 to 2 weeks


Micropayments        Inconsistent         iTunes for every phone
120 million
http://blog.wired.com/gadgets/2009/02/shoot-is-iphone.html#c148364123
                                                                                               devices

                                                                                               315,634
http://www.newsweek.com/id/174266
                                                                                                apps

                                                                                              6.5 billion
http://businessweek.com/@@0M43kIYQYKPISw0A/technology/content/sep2008/tc20080930_257832.htm   downloads
http://www.flickr.com/photos/digobaptista/3270435022/
Native Mobile Apps


       vs.


Mobile Web Apps
Native Mobile Apps


             vs.


     Mobile Web Apps


Mobile is Bigger than Just 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/
More ways
                                            iPhone
                                            AppStore
                                            skews
                                            perceptions




http://www.flickr.com/photos/earlysound/2710970750/ Creative Commons
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.

                                  http://www.flickr.com/photos/fxp/2374147405/sizes/l/
Do Apps REALLY Create Platform Lock-in?

              App                   Cost

        Twitter for iPhone           Free

             Reeder                 $2.99

           Instapaper               $4.99

           Facebook                  Free

           1Password                $9.99

              Total                 $17.97


        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
Symbian   RIM         Android         iPhone          Windows   Linux
Others

                            2%2%
                       5%

            14%
                                                   41%




           17%



                              18%


              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/1210786170
                 http://furbo.org/2008/12/09/ring-tone-apps/
                  http://furbo.org/2009/02/16/raising-prices/
Ringtone Apps

15000



11250



7500



3750



    0
        0   1.99   3.99     5.99       7.99          9.99   11.99   13.99   15.99+


                          http://148apps.com/10000
Brutally Honest iPhone App Sales:
     $32k Spent vs. $535 Revenue
Dapple




 http://www.streamingcolour.com/blog/2009/03/09/the-numbers-post-aka-brutal-honesty/
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
                                                              •   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




http://www.pcworld.com/article/159887-2/rejected_10_iphone_apps_that_didnt_make_apples_app_store.html
“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
Where is the scale & recurring revenue?




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

Objective C              WebOS
                                                                     C


        Java ME                 Dalvik
                                                                            Palm
                        Visual Basic
  C++

        .NET Compact
                                             BREW
              Flickr photo by André-Batista: http://www.flickr.com/photo_zoom.gne?id=408700622&size=o
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/
Fragmentation:
      This is what the
      web is supposed
          to solve.




Flickr photo by .Hessam: http://www.flickr.com/photos/essamo/1070527547/
WebKit & HTML5: Dominant Mobile Platform

 2009 Smartphone Market
 Share (Gartner)
                                        14%
       Symbian                     1%
       Blackberry                 4%
       iPhone
       Android                                    47%
       WebOS                     14%
       Windows/Others

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




       By contrast, 10 smartphone operating systems.
The reports of my death are greatly exaggerated




                           http://www.flickr.com/photos/stuckincustoms/2743756315/sizes/l/
CHALLENGE:
Find a single report that doesn’t show
 exponential growth for mobile web.
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/
Mobile Web Distribution
                     Carriers               App Store            Mobile Web

                   Closed, Seek          Open to anyone
  Openness                                                      Completely Open
                    permission         who signs agreement

  Entry Cost    Thousands of dollars            $99                  None


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


 Restrictions          Many                    Few                   None


  Releases        Difficult, Timely         1 to 2 weeks          Instantaneous


Micropayments       Inconsistent       iTunes for every phone       Not yet
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

                             Experience
  Flickr photo by John Wardell (Netinho): http://www.flickr.com/photo_zoom.gne?id=760902403&size=l
Not for all applications

Good enough for many applications

Javascript Performance improving

   Hardware Accelerated CSS

  Web developers must improve



                         Flickr: Uploaded February 11, 2007 by hawridger
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.html
            http://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                          8. Make JavaScript and CSS External


2. Use a Content Delivery Network                    9. Reduce DNS Lookups


3. Add an Expires Header                             10.Minify JavaScript


4. Gzip Components                                   11.Avoid Redirects


5. Put Stylesheets at the Top                        12.Remove Duplicate Scripts


6. Move Scripts to the Bottom                        13.Configure ETags


7. Avoid CSS Expressions                             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
315,000 Apps

          &

  Findability?


http://148apps.com/10000
Geolocation API

   Camera

Address Book

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




                       http://www.flickr.com/photos/esi_design/4548281713/sizes/l/
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
Mobile Progressive Enhancement
                               [content]

Device Detection                                                          Phone Gap
                                                                              Add Functionality




     http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
Apps for Your Most Loyal Customers




   iPhone App Generated $400M in 2009
Reward People for Downloading Your App
   Take Advantage of Mobile Capabilities
Native vs Web
We’re all brothers here.
Overtime Debate Format: Battle Rap




 Matthias Shapiro & Jason Alderman, Ignite Salt Lake
Mobile Web vs. Native vs. Hybrid? Yes.




Jason Grigsby
Slides: bit.ly/grigs-d4m2010
@grigs • jason@cloudfour.com
cloudfour.com • mobileportand.com

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

Mobile Web vs. Native Apps | Design4Mobile

  • 1.
    Native vs Web JasonGrigsby • Design4Mobile @grigs on Twitter • jason@cloudfour.com cloudfour.com/blog • mobileportand.com SLIDES: bit.ly/grigs-d4m2010 http://www.flickr.com/photos/hi-phi/54828371
  • 6.
    Why are wefighting? http://www.flickr.com/photos/jeff-bauche/2230236391/sizes/o/
  • 7.
    “We have beentrying 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.” http://www.flickr.com/photos/acaben/541334636/
  • 8.
    Web Developers Web Developers Mac Developers Mac Developers Web Developers Mac Developers
  • 9.
    Web aDevelopers “That is bold idea. Very forward thinking... This is the coming out party for web apps. We are very Macexcited about this. These are Developers exciting times.” — Jason Fried, 37signals
  • 10.
    “Perhaps it’s playingwell in the mainstream press, but here at WWDC, Apple’s “you can write great apps for the Mac Developers iPhone: they’re called ‘web sites’” — message went over like a lead balloon. Web Developers 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
  • 11.
    Which is better?Who’s going to win? http://www.flickr.com/photos/jsymmetry/166749290/
  • 15.
    October 2007 Announcement AppStore Launch July 2008
  • 16.
    Surprise Story of2008 Flickr photo by Drift Words: http://www.flickr.com/photos/44124413076@N01/11846265/
  • 17.
    Flickr photo byCivisi: http://www.flickr.com/photos/civisi/2611679744/ Web 2.0 iPhone App Store Web-based Apps Native Apps Services & Mashups Few APIs between apps Software as Service No Recurring Revenue Cloud Computing Local Storage
  • 18.
    What makes theApp Store successful? Carriers App Store Open to anyone Openness Closed, Seek permission who signs agreement Entry Cost Thousands of dollars $99 Revenue Split 60/40 to 50/50 70/30 Restrictions Many Few Releases Difficult, Timely 1 to 2 weeks Micropayments Inconsistent iTunes for every phone
  • 19.
    120 million http://blog.wired.com/gadgets/2009/02/shoot-is-iphone.html#c148364123 devices 315,634 http://www.newsweek.com/id/174266 apps 6.5 billion http://businessweek.com/@@0M43kIYQYKPISw0A/technology/content/sep2008/tc20080930_257832.htm downloads
  • 23.
  • 24.
    Native Mobile Apps vs. Mobile Web Apps
  • 25.
    Native Mobile Apps vs. Mobile Web Apps Mobile is Bigger than Just Apps
  • 32.
  • 35.
  • 36.
    The ‘U’ inURL stands for Universal* * it actually stands for ‘uniform.’ close enough ;-) http://www.flickr.com/photos/laughingsquid/255852260/sizes/o/
  • 37.
    A mobile website for every iPhone app. http://www.flickr.com/photos/fotoosvanrobin/4932854288/sizes/l/
  • 38.
    More ways iPhone AppStore skews perceptions http://www.flickr.com/photos/earlysound/2710970750/ Creative Commons
  • 39.
    Do Apps Create PlatformLock-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. http://www.flickr.com/photos/fxp/2374147405/sizes/l/
  • 40.
    Do Apps REALLYCreate Platform Lock-in? App Cost Twitter for iPhone Free Reeder $2.99 Instapaper $4.99 Facebook Free 1Password $9.99 Total $17.97 Switching Costs are Lower
  • 41.
    Are App StoresEssential to a Platform’s Success?
  • 42.
  • 44.
    Android Outsold iPhonein Q2 2010 Symbian RIM Android iPhone Windows Linux Others 2%2% 5% 14% 41% 17% 18% Android 17%, iPhone 14% http://www.gartner.com/it/page.jsp?id=1421013
  • 45.
    Why compare mobileto the PC market? http://www.flickr.com/photos/mesq/413104380/sizes/o/
  • 48.
    Ringtone Apps (FYI: Justin’sapp is out soon. FitnessTrack. $2.99) http://twitter.com/justin/status/1210786170 http://furbo.org/2008/12/09/ring-tone-apps/ http://furbo.org/2009/02/16/raising-prices/
  • 49.
    Ringtone Apps 15000 11250 7500 3750 0 0 1.99 3.99 5.99 7.99 9.99 11.99 13.99 15.99+ http://148apps.com/10000
  • 50.
    Brutally Honest iPhoneApp Sales: $32k Spent vs. $535 Revenue Dapple http://www.streamingcolour.com/blog/2009/03/09/the-numbers-post-aka-brutal-honesty/
  • 51.
  • 52.
  • 53.
    Success Determined byTop Lists & Features http://appcubby.com/blog/files/financial_realities.html
  • 54.
    More Open ≠No Gatekeeper 96% Approved (what about that 4%?)
  • 55.
    10 Rejected Applications • 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 http://www.pcworld.com/article/159887-2/rejected_10_iphone_apps_that_didnt_make_apples_app_store.html
  • 56.
    “We view Appsdifferent 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
  • 58.
    Where is thescale & recurring revenue? http://bits.blogs.nytimes.com/2009/04/30/the-hundred-million-dollar-mobile-app-question/
  • 60.
    Symbian Windows Mobile Objective C WebOS C Java ME Dalvik Palm Visual Basic C++ .NET Compact BREW Flickr photo by André-Batista: http://www.flickr.com/photo_zoom.gne?id=408700622&size=o
  • 61.
    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/
  • 62.
    Fragmentation: This is what the web is supposed to solve. Flickr photo by .Hessam: http://www.flickr.com/photos/essamo/1070527547/
  • 63.
    WebKit & HTML5:Dominant Mobile Platform 2009 Smartphone Market Share (Gartner) 14% Symbian 1% Blackberry 4% iPhone Android 47% WebOS 14% Windows/Others Phones currently shipping or projected to ship using 20% WebKit in blue (85%). By contrast, 10 smartphone operating systems.
  • 67.
    The reports ofmy death are greatly exaggerated http://www.flickr.com/photos/stuckincustoms/2743756315/sizes/l/
  • 68.
    CHALLENGE: Find a singlereport that doesn’t show exponential growth for mobile web.
  • 71.
    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
  • 72.
    Our iPhone apphas 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/
  • 73.
    Mobile Web Distribution Carriers App Store Mobile Web Closed, Seek Open to anyone Openness Completely Open permission who signs agreement Entry Cost Thousands of dollars $99 None Revenue Split 60/40 to 50/50 70/30 100% Restrictions Many Few None Releases Difficult, Timely 1 to 2 weeks Instantaneous Micropayments Inconsistent iTunes for every phone Not yet
  • 74.
    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
  • 75.
    Six Common Reasonsfor Native Apps Performance Offline Mode Findability Device Attributes Monetization Experience Flickr photo by John Wardell (Netinho): http://www.flickr.com/photo_zoom.gne?id=760902403&size=l
  • 76.
    Not for allapplications Good enough for many applications Javascript Performance improving Hardware Accelerated CSS Web developers must improve Flickr: Uploaded February 11, 2007 by hawridger
  • 77.
    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.html http://webkit.org/blog/214/introducing-squirrelfish-extreme/
  • 79.
    We’ve Become BandwidthGluttons 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/
  • 80.
    Yahoo!’s 14 PerformanceRules (Now 34!) 1. Make Fewer HTTP Requests 8. Make JavaScript and CSS External 2. Use a Content Delivery Network 9. Reduce DNS Lookups 3. Add an Expires Header 10.Minify JavaScript 4. Gzip Components 11.Avoid Redirects 5. Put Stylesheets at the Top 12.Remove Duplicate Scripts 6. Move Scripts to the Bottom 13.Configure ETags 7. Avoid CSS Expressions 14.Make AJAX Cacheable Source: http://developer.yahoo.com/performance/rules.html
  • 81.
    Offline Support • HTML5 • Client-side Database Storage API • Application Cache • Essentially SQLite in browser • Available on iPhone since 2.0 • Google Gears, Android, Nokia soon?
  • 82.
  • 83.
    315,000 Apps & Findability? http://148apps.com/10000
  • 85.
    Geolocation API Camera Address Book Accelerometer
  • 86.
    Flickr photo byLyza Gardner: http://www.flickr.com/photos/lyza/49545547/
  • 87.
    Immersive Experience http://www.flickr.com/photos/esi_design/4548281713/sizes/l/
  • 90.
    Mobile Web ExperienceBiggest Challenges Position: Fixed Accelerated Scrolling
  • 91.
    Flickr photo byThomas Purves: http://www.flickr.com/photos/thomaspurves/744225198/
  • 93.
    What Can YouDo With PhoneGap? http://phonegap.com/projects
  • 98.
  • 99.
    Mobile Progressive Enhancement [content] Device Detection Phone Gap Add Functionality http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
  • 100.
    Apps for YourMost Loyal Customers iPhone App Generated $400M in 2009
  • 101.
    Reward People forDownloading Your App Take Advantage of Mobile Capabilities
  • 102.
    Native vs Web We’reall brothers here.
  • 103.
    Overtime Debate Format:Battle Rap Matthias Shapiro & Jason Alderman, Ignite Salt Lake
  • 104.
    Mobile Web vs.Native vs. Hybrid? Yes. Jason Grigsby Slides: bit.ly/grigs-d4m2010 @grigs • jason@cloudfour.com cloudfour.com • mobileportand.com http://www.flickr.com/photos/jphilipson/2100627902/