HTML5 for Mobile – When and Why

2

Who we are and what we do.

About Golden Gekko

3

About Us

400+ apps in the past 12 months Team of 140+ people across 5 countries Cross platform specialists since 2005

+ + +

Your business is here…! And here…!

Here too…!

And also here.!

4

About Us

More than 100 brands and agencies have put their trust in us.

Pásala bien.

5

Technology

Description Reach Pros Cons Mobile Web – XHTML All mobile browsers

Great reach

Basic user interface and functionality

Limited fragmentation No app store presence

Simpler, lower cost

SEO

Mobile Website/Web App – HTML5 HTML5 “compatible” browsers (iOS, Android and partially BB, WP7)

Rich User interface No app store presence

Many native like features

Missing many native features

Can be wrapped as a web app for distribution on app stores, see PhoneGap.

Still needs to be tested and optimised per OS version and device as they all behave differently

SEO

Mobile Web App – "HTML5 wrapped in PhoneGap

iOS, Android, Blackberry, Symbian, WP7 and BadaiOS, Android, Blackberry, Symbian, WP7 and Bada

Rich user interface by using web standards.

Customisation needed to get native look and feel

Many native features No SEO

Published on appstores

Native App iOS, Android, Blackberry, Symbian, WP7 and Bada

Full flexibility to do anything the native SDK allows

Higher cost for cross-platform development

Published on appstores No SEO

You chose the technology

6

When and why?

HTML5

A mobile website is the basis of any mobile presence... …and HTML5 has vastly improved the user experience and richness of mobile web… ..but cutting edge innovation comes from mobile apps thanks to the fast phase of development from Google, Apple, Microsoft and others...

7

HTML5 Commitment

The mobile vendors have already embraced HTML5

8

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

HTML5 forecasts

It’s early days but HTML5 will be huge

9

!   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)

HTML5 compliant browsers Which browsers are HTML5 compliant?

10

If you define an "HTML5 browser" as one that supports all features of HTML5 then there 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/

iOS5 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

Browser compliance

11

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

Apps vs mobile web apps

HTML5 Pros

12

!   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

Why do brands and developers chose HTML5?

HTML5 Cons

13

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

Why HTML5 might not be a good idea

What about Hybrids?

14

!   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."

The hybrid approach can help bridge the gap between native and HTML5

Feature matrix - overview

15

HTML5 PhoneGap+Sencha* Native Apps

Web view Yes! Yes! Yes

Media - Video/Audio Yes! Yes! Yes

Location Yes! Yes! Yes

Local storage Yes! Yes! Yes

Camera No! Yes! Yes

Native menus No! Yes! Yes

Contacts No! Yes! Yes

Accelerometer No! Yes! Yes

File access No! Yes! Yes

Notifications (Local, Alert, Push, Sound)

No! Yes! Yes

Compass No! Yes! Yes

Native UI No! No! Yes

Access to full API/SDK No! No! Yes

*  Example  as  there  are  also  other  frameworks  that  can  be  used  

Only with native Some examples of things that are always better or easier when with native apps

16

Only 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 reality Easier with native

!   In-app payments through the appstore !   Social Network integration with native apps

The real cost of HTML5? Browser fragmentation means that the cost depends on your target platforms

17

iOS but iPhone and/or iPad and which versions?

Android but which versions and devices?

Other – Windows Phone, Mozilla, Symbian, Blackberry, Bada, etc

Each new browser / device configuration requires additional optimisation and testing which adds cost.

So should you build your app using Web technologies?

18

!   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 Web view. If you need native for only part of a cross-platform app, there’s no reason you can’t code other parts of it in HTML.

Conclusion

19

Get to know the differences.

Additional insights

Difference between HTML5 and native apps

20 Source: Brightcove

Key differences

21

Good base

!   Open standard !   Broadest support &

reach !   Unclear discovery !   Instant gratification

Competent standard

!   Open standard !   Fragmentation

among browsers creates higher cost than XHTML

!   Unclear discovery !   Instant gratification

Most advanced design & U.E.

!   Access to more phone functionality

! Appstore: Clear discovery, updates & reviews

!   Instant gratification on homescreen (Android)

As a base for your mobile presence. Mass reach for basic info. Cheapest option.

For first movers investing in the future base for mobile presence. Invest in User Experience and cross-platform support

For best performance and PR for your brand. Higher cost due to more advanced features and more fragmentation.

When choose what?

22

23

What do customers prefer?

24

Golden Gekko Case studies""Note: For more, see appendix!

HTML5 examples

30+ HTML5 apps for leading global brands

Case studies

VW Passat Mobile Web

26

Case Studies

!   VW chose HTML5 Mobile Web only

Yellow Pages in 8 countries

27

Case Studies

!   The Yellow Pages are available and optimised for every single channel including a HTML5 optimised version

28

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

Appendix

FT uses HTML5 web on iPad and HTML5 app on Android

iPad web app

29

Native Android App using HTML5

Best Buy

30

Launched iPad web apps April and Oct 2011

!   HTML5 web app for full buying experience on iPad

!   HTML5 based movie service app using Phone Gap as wrapper

Walmart Vudu

31

iPad web app Launched Aug 2011

!   Entirely based on HTML5

!   Launched as web app to get around Apple’s revenue sharing

Facebook

32

Launched 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

Citi bank

33

Launched in the US spring 2011

!   UI developed by Fjord

!   Core based on HTML5

!   App developed by Citibanks in-house mobile team

RBS iPad app

34

Launched July 2011

!   RBS decided on an agnostic app approach

!   Launched iPad and Blackberry tablet app based on HTML5

Youtube iPad App

35

Launched April 2011

!   Looks like a native app

!   All developed based on HTML5

Amazon Kindle

36

Launched for iPad August 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

Box.net

37

Launch on iPad Aug 2011 !   Cloud storage service

!   HTML5 web site and native app using HTML5 wrapper

!   Look and feel and performance the exact same