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.

1. HTML5 for Mobile – When and Why

2. About Golden Gekko
Who we are and what we do.
2

3. About Us
Cross platform specialists since 2005
Team of 140+ people across 5 countries
400+ apps in the past 12 months
+
+
+
Your business is here…! And Here And also
here…! too…! here.!
3

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

5. Technology
You chose the 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” 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
SEO
Mobile Web App – " iOS, Android, Rich user interface by Customisation needed to
Blackberry, Symbian, using web standards.
get native look and feel
HTML5 wrapped in PhoneGap
WP7 and BadaiOS,
Android, Blackberry,
Symbian, WP7 and
Bada
Many native features
No SEO
Published on appstores
Native 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. HTML5
When and why?
6

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

8. HTML5 Commitment
The 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. HTML5 forecasts
It’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. HTML5 compliant browsers
Which browsers are HTML5 compliant?
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/
Browser compliance
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
10

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. HTML5 Pros
Why 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. HTML5 Cons
Why 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. What about Hybrids?
The hybrid approach can help bridge the gap
between 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. Feature matrix - overview
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, No! Yes! Yes
Alert, Push, Sound)
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
15

16. Only with native
Some examples of things that are always better or
easier when with native apps
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
16

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. Conclusion
So 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 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.
18

19. Additional insights
Get to know the differences.
19

20. Difference between
HTML5 and native apps
Source: Brightcove
20

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. 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. What do customers prefer?
23

24. HTML5 examples
Golden Gekko Case studies"
"
Note: For more, see appendix!
24

25. 30+ HTML5 apps for leading Case studies
global brands

26. Case Studies
VW Passat Mobile Web
! VW chose HTML5 Mobile Web only
26

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

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

29. FT uses HTML5 web on iPad
and HTML5 app on Android
Native Android App using HTML5
iPad web app
29

30. Best Buy
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
30

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

32. Facebook
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
32

33. Citi bank
Launched in the US
spring 2011
! UI developed by Fjord
! Core based on HTML5
! App developed by
Citibanks in-house mobile
team
33

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

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

36. Amazon Kindle
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
36

37. Box.net
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
37