HTML5 for Mobile - When and Why

HTML5 for Mobile – When and Why

About Golden GekkoWho we are and what we do. 2

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

About Us Pásala bien.More than 100 brands and agencies have put their trust in us. 4

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 ﬂexibility to do Higher cost for cross- Blackberry, Symbian, anything the native SDK platform development WP7 and Bada allows Published on appstores No SEO 5

HTML5When and why? 6

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

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

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

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: http://www.brucelawson.co.uk/2011/html5-notes-for-analysts-and-journalists/Browser 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: http://www.slideshare.net/sevenval/why-html5-is-getting-on-my-nerves 10

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

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: ofﬂine caching, data storage, video & audio streaming, Geolocation API and 2D animation 12

HTML5 ConsWhy HTML5 might not be a good idea!  Still a work in progress. Has not yet been standardized. The W3C expects ofﬁcial completion of the HTML5 set of standards in 2014 and ﬁnal 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

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

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! YesNotiﬁcations (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

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 ﬁle management!   Use any kind of Fonts!   Augmented realityEasier with native!   In-app payments through the appstore!   Social Network integration with native apps 16

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 conﬁguration requires additional optimisation and testing which adds cost. 17

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 ﬁnal 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

Additional insightsGet to know the differences. 19

Difference betweenHTML5 and native appsSource: Brightcove 20

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

When choose what? As a base for your For ﬁrst 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

What do customers prefer? 23

HTML5 examplesGolden Gekko Case studies""Note: For more, see appendix! 24

30+ HTML5 apps for leading Case studiesglobal brands

Case StudiesVW Passat Mobile Web!   VW chose HTML5 Mobile Web only 26

Case StudiesYellow Pages in 8 countries!   The Yellow Pages are available and optimised for every single channel including a HTML5 optimised version 27

AppendixMore examples of HTML5 apps/sites:"Financial Times"Best Buy"Amazon"Box.net"Facebook"Walmart"Citibank"RBS"Youtube 28

FT uses HTML5 web on iPadand HTML5 app on Android Native Android App using HTML5iPad web app 29

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

Walmart VuduiPad web appLaunched Aug 2011!   Entirely based on HTML5!   Launched as web app to get around Apple’s revenue sharing 31

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 m.facebook.com is HTML5 32

Citi bankLaunched in the USspring 2011!   UI developed by Fjord!   Core based on HTML5!   App developed by Citibanks in-house mobile team 33

RBS iPad appLaunched July 2011!   RBS decided on an agnostic app approach!   Launched iPad and Blackberry tablet app based on HTML5 34

Youtube iPad AppLaunched April 2011!   Looks like a native app!   All developed based on HTML5 35

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

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

http://www.scoop.it	582
http://www.mobilemarketinguniverse.com	268
http://translate.googleusercontent.com	4

HTML5 for Mobile - When and Why

by Golden Gekko

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 854

Statistics

HTML5 for Mobile - When and Why Presentation Transcript