Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 for Mobile - When and Why


Published on

When should you use HTML5 vs native apps for mobile app development? What are the pros and cons of HTML5? What are the advantages of native apps? What is the cost of HTML5 app development?

This presentation contains the facts based on 6+ years of mobile app development and more recently HTML5 experience.

We look forward to your feedback.

Published in: Technology

HTML5 for Mobile - When and Why

  1. 1. HTML5 for Mobile – When and Why
  2. 2. About Golden GekkoWho we are and what we do. 2
  3. 3. About UsCross platform specialists since 2005Team of 140+ people across 5 countries400+ apps in the past 12 months + + +Your business is here…! And Here And also here…! too…! here.! 3
  4. 4. About Us Pásala bien.More than 100 brands and agencies have put their trust in us. 4
  5. 5. TechnologyYou chose the technologyDescription Reach Pros ConsMobile Web – XHTML All mobile browsers Great reach Basic user interface and functionality Limited fragmentation No app store presence Simpler, lower cost SEOMobile Website/Web App – HTML5 HTML5 “compatible” Rich User interface No app store presence browsers (iOS, Android and partially BB, WP7) Many native like Missing many native features features Can be wrapped as a Still needs to be tested web app for distribution and optimised per OS on app stores, see version and device as PhoneGap. they all behave differently SEOMobile Web App – " iOS, Android, Rich user interface by Customisation needed to Blackberry, Symbian, using web standards. get native look and feelHTML5 wrapped in PhoneGap WP7 and BadaiOS, Android, Blackberry, Symbian, WP7 and Bada Many native features No SEO Published on appstoresNative App iOS, Android, Full flexibility to do Higher cost for cross- Blackberry, Symbian, anything the native SDK platform development WP7 and Bada allows Published on appstores No SEO 5
  6. 6. HTML5When and why? 6
  7. 7. A mobile website isthe basis of anymobile presence...…and HTML5 has vastly improvedthe user experience and richness ofmobile web… ..but cutting edge innovation comesfrom mobile apps thanks to the fastphase of development from Google,Apple, Microsoft and others... 7
  8. 8. HTML5 CommitmentThe mobile vendors have already embraced HTML5 Apple: “Apple created WebKit, a complete open-source HTML5 rendering engine that is the heart of the Safari web browser used in all our products. Google: "It looks to me like HTML5 will eventually become a way almost all applications are built, including those on new phones.” – Eric Schmidt, Feb 2011 RIM: "Our commitment to supporting HTML5 and Adobe AIR development has resonated and spurred developers to create fun and innovative applications for BlackBerry PlayBook users” – David Yach (CTO), Apr 2010 Microsoft: "IE9 is a great example of bringing assets together from across Microsoft to improve the Windows Phone experience. We need to give people the full web, the full internet... like they expect with the PC.” – Steve Balmer, Feb 2011 8
  9. 9. HTML5 forecastsIt’s early days but HTML5 will be huge!   There are currently 100m real HTML5 enabled phones/tablets (ABI)!   There will be one billion HTML5-capable phones sold in 2013 (Strategy Eye)!   There will be more than 2.1 billion mobile devices with HTML5 browsers by 2016 (ABI) 9
  10. 10. HTML5 compliant browsersWhich browsers are HTML5 compliant?If you define an "HTML5 browser" as one that supports all features of HTML5 thenthere are precisely zero in existence. If you define an "HTML5 browser" as one that can consume some HTML5 features,then all browsers are "HTML5 compliant”.Source: complianceiOS5 is currently the top mobile HTML5 browser followed by Blackberry OS7.Android 2.3, 3.0 and 4.0 still has major deficiencies.Source: 10
  11. 11. Apps vs mobile web apps!  HTML is a markup language for web pages, the next generation HTML!  Some of the new features in HTML5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents. 11
  12. 12. HTML5 ProsWhy do brands and developers chose HTML5?!  Multi-platform – One core code base for multiple platforms making it easier to develop and maintain!   Multi-channel – One code base reusable for mobile web and apps!   Web standard / Open source technology!   Install through a weblink/bookmark, no dependency on app stores!   HTML5 can interact with device capabilities: offline caching, data storage, video & audio streaming, Geolocation API and 2D animation 12
  13. 13. HTML5 ConsWhy HTML5 might not be a good idea!  Still a work in progress. Has not yet been standardized. The W3C expects official completion of the HTML5 set of standards in 2014 and final recommendation by 2022 !  Without app store visibility, your app won’t get the consistent visibility through web that it can through app stores Only good for apps that don’t depend on app stores for visibility!  Fragmentation - It isn’t really cross platform yet: Differences across platforms for fonts, form widgets (such as check boxes), video encoding, cache size, screen resolutions. (webkit helps with this)!  A rethink of the UI is needed to work cross platform!  Native UI – Almost impossible to deliver a native UI experience!  To succeed in an ever changing market your app should keep up with the newest coolest hardware of the device – meaning a native app. 13
  14. 14. What about Hybrids?The hybrid approach can help bridge the gapbetween native and HTML5!  Frameworks can help you build a “a cross-platform, native-like” web app!  Frameworks = Sencha Touch, jQuery Mobile, jQTouch, and Titanium Mobile!  Deploy a Web app inside a native wrapper. The easiest way to do this is via Phone Gap. This allows you to use web technology AND release to app store.Steve Jobs: "We know from painful experience that letting a third party layer of software come between the platform and the developer ultimately results in sub-standard apps and hinders the enhancement and progress of the platform." 14
  15. 15. Feature matrix - overview HTML5 PhoneGap+Sencha* Native AppsWeb view Yes! Yes! YesMedia - Video/Audio Yes! Yes! YesLocation Yes! Yes! YesLocal storage Yes! Yes! YesCamera No! Yes! YesNative menus No! Yes! YesContacts No! Yes! YesAccelerometer No! Yes! YesFile access No! Yes! YesNotifications (Local, No! Yes! YesAlert, Push, Sound)Compass No! Yes! YesNative UI No! No! YesAccess to full API/SDK No! No! Yes*  Example  as  there  are  also  other  frameworks  that  can  be  used   15
  16. 16. Only with nativeSome examples of things that are always better oreasier when with native appsOnly with native!   Full native UI components!   Video/audio editing!   OpenGL graphics for advanced Uis and games, etc!   On-device file management!   Use any kind of Fonts!   Augmented realityEasier with native!   In-app payments through the appstore!   Social Network integration with native apps 16
  17. 17. The real cost of HTML5? Browser fragmentation means that the cost depends on your target platforms Other – Windows Phone,iOS but iPhone and/or Android but which versions Mozilla, Symbian,iPad and which versions? and devices? Blackberry, Bada, etc Each new browser / device configuration requires additional optimisation and testing which adds cost. 17
  18. 18. ConclusionSo should you build your app using Web technologies?!  No, if you’re invested in native technologies already and don’t need to expand to new mobile platforms, stick with native.!  No, if your app is complex and highly interactive (and especially if you don’t need to customize the look & feel heavily) — or if any performance issue is going to drive you nuts – consider native.!  Yes, if you’re app has fairly simple functionality and you are ok to compromise somewhat on the user experience and design!  Yes, if you’re targeting multiple platforms, or your expertise is largely Web-centric — and if you’re willing to spend some time optimizing — then we certainly recommend Web technologies.!  And always consider a mobile website as a compliment to any mobile app.And one final note: this isn’t an either/or decision. Any native app can contain a Webview. If you need native for only part of a cross-platform app, there’s no reason youcan’t code other parts of it in HTML. 18
  19. 19. Additional insightsGet to know the differences. 19
  20. 20. Difference betweenHTML5 and native appsSource: Brightcove 20
  21. 21. Key differences Good base Competent Most advanced standard design & U.E. !   Open standard !   Open standard !   Access to more !   Broadest support & !   Fragmentation phone functionality reach among browsers ! Appstore: Clear !   Unclear discovery creates higher cost discovery, updates !   Instant gratification than XHTML & reviews !   Unclear discovery !   Instant gratification !   Instant gratification on homescreen (Android) 21
  22. 22. When choose what? As a base for your For first movers For best mobile presence. investing in the performance and future base for PR for your brand. Mass reach for mobile presence. basic info. Higher cost due to Invest in User more advanced Cheapest option. Experience and features and more cross-platform fragmentation. support 22
  23. 23. What do customers prefer? 23
  24. 24. HTML5 examplesGolden Gekko Case studies""Note: For more, see appendix! 24
  25. 25. 30+ HTML5 apps for leading Case studiesglobal brands
  26. 26. Case StudiesVW Passat Mobile Web!   VW chose HTML5 Mobile Web only 26
  27. 27. Case StudiesYellow Pages in 8 countries!   The Yellow Pages are available and optimised for every single channel including a HTML5 optimised version 27
  28. 28. AppendixMore examples of HTML5 apps/sites:"Financial Times"Best Buy"Amazon""Facebook"Walmart"Citibank"RBS"Youtube 28
  29. 29. FT uses HTML5 web on iPadand HTML5 app on Android Native Android App using HTML5iPad web app 29
  30. 30. Best BuyLaunched iPad web appsApril and Oct 2011!   HTML5 web app for full buying experience on iPad!   HTML5 based movie service app using Phone Gap as wrapper 30
  31. 31. Walmart VuduiPad web appLaunched Aug 2011!   Entirely based on HTML5!   Launched as web app to get around Apple’s revenue sharing 31
  32. 32. FacebookLaunched Oct 2011!   Facebook is a big proponent of HTML5!   Latest iPad app is hybrid of native and HTML5 but the web app for Facebook on is HTML5 32
  33. 33. Citi bankLaunched in the USspring 2011!   UI developed by Fjord!   Core based on HTML5!   App developed by Citibanks in-house mobile team 33
  34. 34. RBS iPad appLaunched July 2011!   RBS decided on an agnostic app approach!   Launched iPad and Blackberry tablet app based on HTML5 34
  35. 35. Youtube iPad AppLaunched April 2011!   Looks like a native app!   All developed based on HTML5 35
  36. 36. Amazon KindleLaunched for iPadAugust 2011!   Amazon has developed an HTML5 version of the iPad Kindle app!   The web app has a slightly different design but the exact same functionality as the native app 36
  37. 37. Box.netLaunch on iPad Aug2011!   Cloud storage service!   HTML5 web site and native app using HTML5 wrapper!   Look and feel and performance the exact same 37