This study will give mobile app editors the insights they need to fathom the performance of HTML5 - quoted as the new standard of the web - and adjust their multi-platform strategy accordingly.
Crea il tuo assistente AI con lo Stregatto (open source python framework)
HTML5, How to rethink your web strategy
1. HTML5, how to rethink
[ your web strategy ]
licensed using creative commons
2. Table of contents
Introduction
Part I
HTML5, the web evolution p.4
Introduction to How Web Pages Work
The perpetual evolution of HTML
HTML5: buzzword ou real disruption ?
HTML5 vs HTML4: what does it hold?
The state of art
• Which browsers and operating systems are the most compatible with HTML5?
• What are the most used web and mobile browsers in the World ?
Part II
Native applications : threatened by the web mobile ? p.20
Applications model, although dominating the mobile market…
…Is presently questioned
HTML5 in the service of mobility: strenghs and issues
• The websites in HTML5 can do much better than native applications
• The distribution of mobile websites
Part III
Mobile vs Native applications p.25
Technical and functional confrontation
Two design strategies that lead to different user experiences
The big issues related to project development
Decision matrix: what to do in any case ?
• Website vs native applications ?
• What about hybrid applications ?
Partie IV
Our recommendation p.37
Which solutions fit for each type of application ?
• Games and Entertainment
• Media, News and Information
• Social networking
• Traveling and maps
• Utilities (reservation, e-shopping, bank transaction)
• Multimedia
Synthesis
3. Introduction
HMTL5 signs the revival of the web: mobility, interactivity and openness.
Inspired by native applications’ success on connected devices, HTML5 new features provide developers with
solutions to create more easily and quickly richer mobile experience: touch, disconnected mode, audio and
video, use of the device’s GPS and camera.
But HTML5’s vocation is not only to offer an alternative to native applications and closed ecosystems such
as iOS or Android: it is, more broadly, to provide answers to those who want to streamline their digital multi-
platform strategy, without putting aside stores like App Store or Google Play Store.
This study aims to provide companies wishing to develop digital products with:
• An overview of HMTL5 new features;
• A simple analysis of latest trends in web development, mobile, tablet and smart TV;
• A decision grid that will allow for each project, whether single platform or multi-platform, to determine
the best development strategy possible.
................................................................................................................................................................. ...........
Note: Parts 1.1 and 1.2. of this document present basic elements to understand HTML5 issues. Readers already familiar with web
technologies and more precisely HTML5, are invited to proceed directly to Part 1.3.
5. [I]
HTML5, the evolution of the web
• Introduction to How Web Pages Work
• The perpetual evolution of HTML
• HTML5 : buzzword ou real disruption ?
• HTML5 vs HTML4 : what is the advantage?
• The state of art
faberNovel ••• 5
6. Introduction to How Web Pages Work
A web page is a collection of text, images, multimedia objects, files and programs scattered over the web.
Programming languages can be separated into two categories:
Web standards Flash, Silverlight, etc..
= Proprietary technologies
Flash and Silverlight scripting languages are often
The HTML page defines all elements of the used to manage the behavior of multimedia content,
page, and indicates where to find them and how such as videos, animations, 3D objects, etc.
they fit together with each other. This is the basic
component that determines the structure of most These technologies are standardized because they
web pages. originate from a single vendor, who dictates the
writing standards and provides tools to interpret them
The CSS of a page is a document that defines the perfectly.
visual appearance of each element: text font, color
windows, border width, location of items, etc. Example: Flash is published by Adobe. In order to
read a Flash script, a browser must be equipped with
JavaScript is the most common scripting language the plug-in (a piece of software that “branches” on
that is executable by a browser. It is the most the browser to increase capacity). Flash Player is
common choice for managing the behavior of the edited and released only by Adobe.
different “buttons” of a web page, text fields, etc.
A web browser is software (which can be installed
on a computer, mobile device, SmartTV, video game
These languages are ‘basic’ web languages, console, etc.) that is able to read HTML and CSS to
supported by all browsers. They do not belong to display all the website’s elements on the screen. You
any company and therefore are likely to change are probably using one of the following browsers:
depending on the uses and needs of the developer
community. International organizations like W3C
• Internet Explorer
and ECMA are in charge of establishing writing
standards and promoting them via a set of regularly • Firefox
published recommendations. Each website editor • Chrome
and web browser is free to adopt them, or create
• Safari
new ones. Usually, what we refer to as HTML is
actually the trio of HTML + CSS + JavaScript, • Opera
since these languages are very closely related. In
this study we will adopt this usage. Most websites are not static: the behaviour of some
elements may vary depending on user actions. The
way these dynamics elements behave is described
by scripts, that is to say, mini-programs inserted into
the HTML and executed directly in the browser.
A web app is a special type of website that provides a
service directly accessible through the user’s browser
e.g. webmail, search engine, wiki, blog, etc.
7. Elements’ position, the
background color of the
header, fonts, titles, etc. are
described thanks to CSS.
The texts, menus, sections,
etc. are described within the
HTML code.
The dynamic behavior of the
“Les Videos” after clicking the
scroll arrows is described by a
JavaScript code.
Figure 1
Structure of France TV Info website’s home page.
faberNovel ••• 7
8. The perpetual evolution of HTML
The developer community constantly creates new HTML features. But before
reaching end users, these features must go through four levels of adoption :
Use by
Testing by the Implementation
W3C‘s mass-market
developer community on mainstream
recommendation website publishers
browsers
Figure 2
Main stages of the process of integrating new features of HTML
W3C continuously publishes new recommendations to ensure that browsers work
together correctly: the organization encourages browser developers to implement
new features and meet the same standards to facilitate the work of web developers.
Sometimes, when W3C believes that the new features being developed and
tested represent a significant advance for the web, it decides to announce a new
version of HTML.
We must understand that there is no ORIGINAL HTML version: each website and
browser incorporates the newest HTML features at its own pace and according to
its own terms.
Today, the official version recommended by the W3C is HTML4. HTML5 is
still “being specified,” even though many websites and browsers worldwide
support HTML5 features.
9. HTML5 : buzzword or real disruption ?
HTML‘s new features, already developed and implemented in major browsers or Figure 3
HTML5 : the future of the
still under development, gathered under the “HTML5” label, inspire the enthusiasm web ?
of web developers because they can easily reproduce features that were
previously handled by proprietary technologies.
HTML5 vs Flash HTML5 vs native
applications
• HTML5 allows the integration
video and audio tracks in a web Many features of HTML5 mimic native
pages without using Flash. Thus, applications’ behaviour on connected
multimedia contents can be read devices:
by a browser without any plug-in in • The ability to use hardware device
particular.. elements within the web page: camera,
• HTML5 can incorporate animations microphone, keypad, GPS, etc.
and dynamic 2D elements (and soon • Optimization of web page elements for
3D) without using Flash. In particular, multitouch interfaces
it is possible to create games
entirely in HTML5. This is definitely • Data storage on the device to operate
a revolution because most online the web page offline or for automatic
games are based on Flash or other data logging or user preferences storage
proprietary technologies. • Optimization of the web page display
depending on screen size
These are the reason why more and more developers are
considering developing websites accessible via mobile
browsers rather than native applications.
10. 1.4 HTML5 vs. HTML4: what is the advantage?
Recently, new features have appeared for HTML: new tags have been released,
and obsolete ones removed from version 4.0. Here are the main features included
in the fifth version of HTML:
The webdesign revolution
• Formatting is now clearly handled by CSS in a web page
• The web page structure has been simplified with pre-formatted tags for
titles, top, footer, sections, etc. This new structure common to all websites
promotes accessibility and allows, among others, speech synthesizers and
people with visual disabilities to identify content more easily
• Improvement of graphic performance: API “canvas,” new and more
compact fonts, integration of images in vector format
A few examples of new features recently available or soon to be available
through HTML5:
Animations within a page New filters and CSS animations for unique lay-
outs
Today, HTML5 allows the integration of 2D
animations on a web page without having to use
Flash. The next expected step will be to also
incorporate 3D animations.
Figure 4
Example: the luminous lines are drawn by following the path of
the mouse on the screen, they move in and fade progressively.
Figure 5
CSS animation example: the text is aligned with the contours of
the car as it moves across the page
11. A richer user experience
• More interaction possible for the user: complete an online application, use “drag and drop” functionality,
load files from your own computer to the web, geolocation, edit or modify a web page or only certain
parts, highlight the words found in the page when searching
• Integration of rich media: embed video or audio clips
Interaction with the microphone
Speak and your browser reacts. This feature will
soon facilitate web browsing for people with visual
disabilities.
Interaction with the webcam
Now you can take photos directly within a webpage.
Moreover, online video chat will soon be possible,
without downloading any additional application.
Figure 6
Example of interaction with the microphone: When making
noise in front of the computer, the balls start to jump on the
screen.
Figure 7
Example of interaction with the webcam: you can take pictures
and add special filters or effects.
faberNovel ••• 11
12. Interaction with the mouse
When moving the mouse on your screen, you can
animate objects. This feature enriches the browsing
experience, making it more graceful, with among
others the creation of drawing interfaces on the
internet.
Video games fully playable online
Relatively advanced games directly accessible from
a browser already exist. But, soon a joystick will
directly control the action of the mouse on the web
page.
Figure 8
Drawing made using the mouse in a web page
Figure 9
The famous Snake game entirely developed in HTML5
Figure 10
Illustration of a game in HTML5, piloted by a joystick
faberNovel ••• 12
13. An efficient mobile experience
Optimized for responsive design development, data storage during the page
initialization in order to allow offline navigation.
Other features
• Detecting the user’s status : is he connected to Wifi, 3G, the 4G?
Functions of what’s detected, the contents of the page fits and gives
you the best experience.
• Detection of the user’s action: If he watches a video in a tab, the
video will automatically pause if he goes to another tab, and will recover
only when he returns to the the right tab.
• Full Screen: the browser will switch to “full screen” simply by typing the
key “f”.
These features already exist on all browsers tests (such as Chrome Canary) or
the latest versions of web browsers. Soon, the majority of people will have access,
which will allow to imagine new experiences and use of the web.
Remember:
HTML5 is not a brand new technology: it only consists in all the
latest features of HTML, a language that is constantly evolving.
These latest features are a real step forward for HTML and the
web in general because they help make sites more beautiful, more
complex and better adapted to new media online.
faberNovel ••• 13
14. 1.5 The state of art
Which browsers and operating systems are the most
compatible with HTML5?
HTML 5 is not equaly supported by all browsers: while some of them incorporate
the latest innovations proposed by the developer community, others are “late”.
The following figures present a classification of different browsers and their
compatibility with HTML5. The score is obtained on a total of 500 established from
the 500 latest features of HTML.
Web Browsers
Browsers listed below are stable browsers widely used. HTML5 may get a higher
score on versions of unstable browsers under development, but not used by the
mass-market. We can note the bad position of Internet Explorer, far behind other
browsers that integrate rather well HTML5.
Score
Maxthon 3.4.1 422
Chrome 20 414
Figure 11
Opera 12.00 385 Score (out of 500) of the 6
Firefox 13 345 browsers compatible with
HTML5.
Safari 5.1 317
Internet Explorer 9 138 Source
http://html5test.com/
What happens when a HTML functionality (eg a video in HTML5) is not recognized
by the browser?
Three possibilities:
• Nothing happens: the video does not start
• The animation has been damaged: the sound and the image of the video
are shifted
• You do not realize anything: developers have recourse to a “fall back”
version of their site. On browsers that read the HTML5 functionality,
everything will be in HTML5, on the other, they will bypass the problem by
incorporating a piece of Flash or Silverlight example.
15. Smartphones OS
Opera, Firefox et Safari sont très bons, mais les autres sont encore à la traîne,
notamment Android, BlackBerry et Nokia.
On a mobile, web browsing is done on a browser that is directly associated with
the OS version used by the mobile : Safari for iOS, Android for Android, etc.. Other
mobile browsers have also developed independently, and settled slowly on the
market: Opera, Firefox, etc.
On mobile, scores are generally poorer than with a standard Web browser,
because they do not include yet the latest features of HTML5. Opera, Firefox and
Safari are very good, but the others are still lagging behind, including Android,
BlackBerry and Nokia.
Score
RIM Tablet OS 2.0 Blackberry Playbook 373
Chrome All Android 4 devices 371
Opera Mobile 12.00 Multiple platforms 369
Firefox Mobile 10 Multiple platforms 325 Figure 12
Score (out of 500) of 8
IOS 5.1 Apple iPhone, iPad and iPod Touch 324 Smartphones OS allowing
the best compatibility with
Android 4.0 Asus Transformer Prime and others 280
HTML5 features.
WebOS 3.0 HP TouchPad 217
Source
Silk 1.0 Amazon Kindle Fire 174 http://html5test.com/
faberNovel ••• 15
16. Tablets OS
The tablet market being new, browsers are fewer. As we see in the mobile
market, Opera, Firefox and IOS are ahead about HTML5, while Android is hard to
follow developments. However, we note the relatively good performance of RIM
BlackBerry Tablet.
Score
Chrome All Android 4 devices 371
Opera Mobile 12.00 Multiple platforms 369
Firefox Mobile 10 Multiple platforms 325
IOS 5.1 Apple iPhone, iPad and iPod Touch 324
MeeGo/Harmattan Nokia N9 and N950 284
Android 4.0 Samsung Galaxy Nexus 280
Blackberry OS7 Blackberry Bold 9900 and others 273
Bada 2.0 Samsung Wave and others 268
Nokia Belle FP1 S60 5.4 Nokia 603, 700 and 701 226 Figure 13
Score (out of 500) of the 12
webOS 2.2 Palm Pre 2 and HP Pre 3 210 tablet’s OS allowing the best
compatibility with HTML5
Android 2.3 Google Nexus S and others 189 features.
Windows Phone 7.5 Samsung Omnia, W, LG E906 and 138
Source
others http://html5test.com/
As we have seen, HTML is constantly changing and different browsers try to adapt
to these changes.
Even if they’re not at the same point today, all are making efforts to follow the W3C
standard: free browsers such as Firefox or Chrome have attracted more HTML
developers providing researchers unstable versions of their browser (Firefox 14,
Chrome Canary) to enable them to test new HTML features. They are therefore
better placed than Internet Explorer, but all that is changing very rapidly.
faberNovel ••• 16
17. Smart TV
Finally, on Smart TV market, browsers are a less efficient than on mobile and
tablets market. Indeed, this emerging market still concern few users. The scores
are tighter, with four leaders above 300 (60% of HTML5 features compatible):
Sharp Aquos TV Googe, NetTV Philips and Toshiba. Samsung, LG and Sony to
follow shortly.
Score
Sharp Aquos Espial 6.05 Sharp Aquos televisions 342
GoogleTV Sony Internet TV, LOgitech Revue and others 328
Philips NetTV Opera Devices 3.2 Philips televisions 325
Toshiba Espial 6.04 Toshiba L7200 televisions 310
Samsung Smart TV 2012 Samsung televisions 286
LG NetCast 2012 LG televisions 282
Sony Internet TV Opera Devices 3.1 Sony televisions and Bluray players 275
Sharp Aquos Opera Devices 3.0 Sharp Aquos televisions 236
Boxee Boxee Box by D-Link, Iomega TV wit... 214
Panasonic Smart Viera Panasonic Viera televisions 214
Figure 14
Score (out of 500) of the 10
Smart TV OS allowing the best
compatibility with HTML5
Source
http://html5test.com
................................................................................................................................................................. ...........
Note: An exhaustive list of web and mobile browsers is available at this following link: http://fr.wikipedia.org/wiki/Liste_de_
navigateurs_Webdes
faberNovel ••• 17
18. What are the most used web and mobile browsers in the World ?
World’s population’s access to the latest features of HTML5 is still low.
Web browsers
Worldwide, only 33,9% of Internet users have a desktop browser that supports more than 80% of the current
features of HTML5. This is the part of users of Chrome. However, still 31,8% of Internet users are using Internet
Explorer 9, which includes only 27,6% of the current features of HTML5.
Percentage of browsers compatible with HTML5
Percentage of use by browsers in the World, July 2012
100%
82,8%
77%
69%
63,4%
Three giants of web browsers:
Chrome, Firefox and Internet
34% Explorer.
32%
27,6%
24%
Internet Explorer 9.0 is still
widely used whereas it only
7% includes 27,6% of the current
3% features of HTML5
0%
Safari (web browser installed by
default on Apple computers) is
20 9 13 5.1 12.00 struggling to take off but is still
behind the big three
Figure 15
HTML5 compatiblity
pourcentage of most popular
web browsers worldwidly
used.
Source
http://gs.statcounter.com/
faberNovel ••• 18
19. Mobile browsers
Worldwide, only 60% of Internet users have a mobile browser that supports
more than 50% of HTML5 current features.
And only 20% of Internet users have a mobile that supports more than 70% of
HTML5 current features. This ratio corresponds to Opera Mobile’s users,
which is the only mobile browser exceeding 70% compatibility with the
current features of HTML5.
Percentage of mobile browsers compatible with HTML5
Percentage of use by mobile browsers in the World, July 2012
100%
73,8%
64,8%
56% 54,6%
51,2%
23% 21% 20% Other mobile browsers
4,5% are struggling to
10%
emerge.
0%
At European level,
BlackBerry and Opera
stand out in the race.
4.1 iPhone Opera Belle Black-
Two giants in the
IOS 5.1 mobile FP2 berry
market: iPhone and
12.00 OS7 Android.
Figure 16
HTML5 compatiblity
pourcentage of most popular
mobile browsers worldwidly
used.
Source
http://gs.statcounter.com/
faberNovel ••• 19
20. What to remember
Worldwide population is still under equipped to use websites that
support advanced features of HTML5. An application publisher
who wishes to make its website reachible for must people must take
care not to use today’s most advanced HTML5 features, or in this
case to propose systematicaly a fall back * for these features.
................................................................................................................................................................. ...........
* Reminder: A fall back is a “copy” of an HTML5 feature developed with other more common technologies (JavaScript, Flash, Silverlight,
etc.) so that users of less compatible browsers can still make the most of this feature (sometimes in a degraded version).
faberNovel ••• 20
21. [II]
Native applications :
threatened by the web mobile ?
• Applications model, although dominating the mobile market
• …Is presently questioned
• HTML5 in the service of mobility : strenghs and issues
faberNovel ••• 21
22. Applications model, although dominating the
mobile market…
The applications model, popularized by Apple, works so well so far that all the
mobile platforms have adopted it.
Why the application model has it imposed on smartphones?
On the users’ side:
• Saves time for access to content and services: Mobile connectivity are
generally not as fast as fixed connectivity. The web search may take time.
Mobile applications avoid this problem since they are a point of immediate
access to favorite services of the user.
• Improved performance: While a web site must be fully loaded at each
visit in the browser via the Internet, an application can load some of
the features and content “hard”, directly to the phone. This reduces the
bandwidth requirements to use the service properly.
• Better integration of hardware features: Because the application is
developed specifically for a platform and a device type, it can make better
use of the equipment of this unit: use of camera, integrated GPS, value for
money storage or use of the processor, etc..
• Graphical effects and interactions richer: These items are managed
locally in the phone, not online as a website.
On the publishers’ side:
• A means of effective distribution of their service: On the blinds type
applications App Store, all applications are referenced, presented the same
way and easily downloadable. This is a radical departure from web sites
which depend on their ranking in search engines (especially Google).
• Monetization’s outlook more interesting: The distribution system
designed by Apple encourages the creation of content and services with
high added value, for which it is easier to charge the user.
faberNovel ••• 22
23. On the platforms’ side
(iOS, Android, Blackberry, Windows Phone, etc.) :
• A way to keep control on the ecosystem: Apple, Google, etc.. set the
rules on their platforms to ensure their users a certain level of quality and
consistency of the experience when they use applications.
• A new source of revenue: Thanks to stores applications, Apple, Google
etc. control of the supply chain of applications and can afford to take a
commission on sales of each application and each transactions within
applications.
faberNovel ••• 23
24. …Is presently questioned
The applications’ ecosystem, which helped restore value to services and content
that had trouble finding a viable business model on the web (dominated by the
free), also have disadvantages for publishers:
• A loss of control over their service in favor of mobile platforms
• Loss of money related to the commission taken by the platforms at each
application and sale of each transaction within the application
• A loss of efficiency (which translates into loss of money), because each
platform requires to develop a specific application in a specific language,
which may require the intervention of a specific provider.
• No contribution from the open source community
• Very little connection between applications that remain closed objects
• Poor management of display advertising, generally less contextualized
and personalized than on the web
Despite these drawbacks, the editors do not really have an alternative:
• In its current state, HTML5 does not compete with native applications.
• The use of native applications has become a reflex for users. On connected
devices, the use of browsers to access services and to view information
remains marginal
The first point is about to be solved thanks to the new HTML 5 features : soon it
will be possible for certain types of services, to make websites that work equally
well (or almost as well) on mobile browser that a native application. This is only a
matter of months or years (see Part III of the note).
The second point is more delicate : applications offer a way more fluid experience
and is truly entrenched in practice. Therefore, so that users begin to use websites
on their connected devices, these websites will have to do much better than native
applications in certain areas.
25. HTML5 in the service of mobility : strenghs and
issues
The websites in HTML5 can do much better than
native applications
Restore the link between services
Unlike native applications, websites are much more open and interconnected.
It is easier to create complex links between two websites than between two
applications.
A continuous improvement process
The updating process of a native application is long, especially because it involves
monitoring the application by the operator of the platform (Apple’s App Store for
example). The frequency of updates is limited. On the contrary, a website can be
updated as often as its publisher wants.
The distribution of mobile websites
The referencing and distribution model on stores applications is the key of mobile
applications’ success. Mobile users find applications that they need immediately
on their home screen, without using a web search engine.
The challenge HTML5 publishers face is to provide users an easy access on
mobile and other connected devices.
Two tracks to consider:
• Communicate and encourage users to create shortcuts to HTML sites on
the home screen of their device.
• Take advantage of the emergence of “universal stores” listing both
native applications and sites in HTML.
The most promising universal store is certainly the Facebook App Center, which
can tap into the power of its 900 million Facebook users and its viral power.
faberNovel ••• 25
26. [III]
VS
Mobile vs Native application
• Technical and functional confrontation
• Two design strategies that lead to different user experiences
• The big issues related to project development
• Decision matrix: what to do in any case ?
faberNovel ••• 26
27. Technical and functional confrontation
Today, native applications can deliver a better experience for users: graphics
performance, ergonomics, interactions. However, HTML begins to integrate
efficient tools little by little to complete those functionnalities. It only needs a
mobile browser to set HTML5 technolo
Website (= web app) Native application
Graphics rendering Progress is underway thanks to CSS Graphic rendering of high quality,
and HTML evolutions but not yet especially for 3D.
integrated on mobile browsers.
Animations Ability to make 2D animations in Greater computing power for 2D and
some browsers but not on mobile. So 3D animations, which allows to create
far impossible to make 3D animations games, immersive experiences, etc. ..
without the Flash plug-in on the web
Access to the device's Possible on the latest browsers, but Yes
camera they are still not available on mobile.
Access to the devices' Possible on the latest browsers, but Yes
microphone they are still not available on mobile.
Access to the device's Yes, Yes
geolocation feature
Using notifications Push notifications to the home Yes
from the application screen are impossible from an HTML
to the Home screen of website. Developers are working on
the device it.
Advanced user / Possibility to browse like on the web: Possibility to use the accelerometer
machine interactions" scrolling, clicking, etc. With HTML5, to interact with the device: shaking,
microphone interaction is coming flipping, tilting, etc..
soon on mobile browsers.
Offline operation Possible with HTML5 but not Yes
necessarily the most popular
browsers.
User account Yes. Yes
(e-commerce, social
networks ...)
Video embedding Possible with HTML5 Yes, with the device's native player
Games Limited to 2D graphics experiences, 3D design and innovative
and “movement and mouse click” interactions: tilt, shake …
actions.
Application / web site Within the web browser, or from an From an icon on the home screen
access icon on the device's home screen
(shortcut to the website)
Continued on next page>
28. Site web (= web app) Application native
Download of the From the matching web site or from a From the matching Store : AppStore,
application web application platform. Androïd Market, etc.
Application Only if an account registration and The application can be easily
personnalisation differentiation of various profiles are customized from the "settings":
provided. access to location data, notifications,
etc..
E-commerce Possible via websites like PayPal Possible directly with the user's
easily embeddable into a webapps. account on the platform.
Links to other services Easy navigation from one page to Applications communicate very little
another within the browser. between them.
Share on social With one click if the the social Possible if built within the application
networks network's API or widget is added to
the site.
Figure 17
Comparaison des possibilités
techniques et fonctionnelles
entre un site web et une
application native
faberNovel ••• 28
29. Two design strategies that lead to different user
experiences
eBay’s case
eBay is an auction site created online by the end of 1990: since then it has become
the industry standard for e-commerce. More than 270 million users buy and sell all
kinds of objects on this platform.
And yet, eBay is particularly difficult to use: the information is hard to find, poor
ergonomics, etc. At first its bad design was not glaring, but it became so in 2007
with the launch of the eBay application for iPhone, followed later by the launch of
the eBay application for iPad. Indeed, the mobile and tablet versions are far more
simple and faster to use.
Why such a difference?
• Developing a website allows greater freedom of design, sometimes - as is
the case for eBay - to the detriment of the quality of user experience.
• On the contrary, an iPhone application is developed from existing
ergonomic bricks and is designed for a small size screen which forces them
to Basics.
Figure 18
Comparison of Ebay website
and Smartphone application
faberNovel ••• 29
30. What to remember:
Lack of freedom and OS constraints encourage developers
to optimize both the user interface and the ergonomics of the
application, which will also be assessed and confirmed by the
corresponding Store before being put online. Therefore, this
requirement promotes quality.
As a side effect, some suggest adopting a “mobile first design
strategy.”
Mobile development requirements being more restrictive (small
screen, often low connectivity, use the move, etc..), and is indeed a
very good starting point for designing a simple, clear and effective
service.
Designed after the native application, the website will therefore
benefit from its broad principles of design and ergonomics.
For a HTML5 website, it is recommended to start designing the
mobile experience: what information and features are essential to
highlight? How to simplify the user path? Etc..
faberNovel ••• 30
31. The big issues related to project development
The board below brings to light how HTML website development is simpler to
implement than a native application.
HTML being older, there are more skilled developers. Furthermore, the technology
is quite stable, easy to spread and update.
Website (= web app) Native application
Human resources A provider or intern resources for the Most of the time, an OS specialized
development development. Intern resources are provider must be hired, even for
given priority to for maintenance and maintenance.
update. Indeed HTML is a well and
long-time known language, many
companies have built a web division.
Availability of skilled HTML5 development requires Many skilled developers for most
developers very good web skills: last trends common platforms (iOS and Android)
knowledge, responsive design but rarer and more expensive for
mastering, APIs, best practices for other platforms.
CSS, etc.. HTML5 developers are
rarer and more expensive than the
average web developers.
Overall costs of Only one site (in responsive design) A developer specialized in each
development to develop for all platforms. platform for each application.
Update and Performed by the developer, Performed by the developer, and
maintenance automatically synchronized on the manual downloading of the new
web. version of the application: which is
more painful for the user.
Privacy code The code is open (HTML) The code is kept confidential
Development time Only the time required for software Longer because the application must
development. Possibility of rapid be assessed and validated by the
prototyping. corresponding store.
Screen Resolution "Possible use of responsive design Each screen size matches with a
which adapts contents to the screen different and specifically developed
orientation.It also allows developers application.
to build one application and have it
scale up and down to all the different
screen sizes and resolutions.”
Design and Entirely free Standards are imposed by the
appearance corresponding OS
Figure 19
Website development
vs Native application
development
32. Relating to the business models applied, each technology has its own :
• HTML is an open model: no quality control, free service (mostly at least),
universality of reading materials, online distribution and referencing
• The native model is a highly in demand model : each conected device has
its own application. Applications are assessed and validated before being
distributed on a Store which facilitates their distribution in compensation of
cost for the publisher. Users are willing to pay for this quality.
Website (=web app) Native applications
Ranking Like any website, web apps are No web ranking, but only on the
ranked on search engines like device's appropriate Store. There are
Google. They can also be found on only compatible applications with the
web applications Stores. device used, which simplifies users'
experience.
Monetization, Advertising and monetization control You must go through Stores to
advertising according to the web page you add an ad on an application. The
visited. ad is not necessarily related to the
application's theme.
Interoperability An HTML website can be read from An application developed for one
any devices: smartphone, tablet, ... device can not be read from another.
and reach a maximum number of It aims a single category of users.
users.
Sale A web application is usually available A native application is available on
for free, it's a website. Stores, free or not, which takes 30%
of
Distribution No special mean of distribution, Through a Store such as the App
except search engines' ranking Store or Android Market, allowing to
benefit from the platform's image.
However, the Store is the only one
mastering the application's visibility
(only the first 50 really successful).
Change over to the The web will always exist, We do not know which platform
context using HTML W3C standards' will dominate the market in the
recommandations. HTML language is coming years: the rise of Android
a sustainable solution. and Samsung against Apple ...
Developing native application
compatible with today's dominant
platform does not guarantee success
for the future .
Figure 20
Functional and technical
differences between a website
and a native application
faberNovel ••• 32
33. Case Study: Financial Times
In June 2011, the Financial Times launched a web app which greatly accelerated
FT’s access on mobile devices (smartphone and tablets): 12% of registrations
from mobile, and 19% of website traffic is generated by mobile access, which
represents 2M users.
In August 2011, the web app had already attracted more users than the prior
native application. This latter was subsequently removed from the AppStore.
HTML5 has allowed them to reach more users, especially those using an
Android Smartphone, or other browsers. Furthermore, FT wanted to control the
release of Apple and 30% of revenues collected by the Cupertino company.
Furthermore, FT wanted to free themselves of Apple and their 30% revenue share.
Figure 21
Financial Times website read
from a tablet
faberNovel ••• 33
34. Decision matrix: what to do in any case ?
Website vs native applications ?
Native application when the service…
• Uses the hardware’s devices: camera, gyroscope, compass ...
• Allows many possible uses, adjustable in the connected device “preferences”
• Is easily reachable from any other application or from the home page
• Is part of a business model that fits well with the Store applications’ model
• Aims at one person category with only one Smartphone
• Must be highly efficient
• Does not need to connect to the Internet
• Has been developed with a confidential code
• Uses data that must be secured
VS
Web App when the service…
• Must reach the entire population, regardless of the device, and whatever the
Smartphones, tablets or SmartTV market forcecasts.
• …Or on the contrary, will reach a few people (no need to invest less in a language
known as HTML)
• Is accessible by a simple web search
• Will be quickly and frequently updated
• Is free to be put online
• Provides links to other websites
• Will be maintained by someone other than the developer
• Must have a completely original design
• Must allow a perfect control of the monetization system and advertising (analytics)
• Must be developed quickly / can be used to develop other services (reuse of existing
widgets, etc.).
• Will be available soon
• Also refers to an online website
35. What about hybrid applications ?
It is impossible to easily convert a native application from one device to another.
Indeed :
• Development languages are different;
Examples: Objective-C for Apple Java for Android
• The interface changes from platform to platform;
• The OS that support the applications are different.
The one and only solution to develop a native application that runs on different
platforms is to develop a native application for each different platform, with proper
interface, and a specialist developer regarding the OS and language used.
On the contrary, an HTML web application can be read by any Smartphone fitted
with an Internet browser: iPhone, Android, or BlackBerry.
However, some applications need both the ability to:
• Be used on any type of OS: Android, IOS, etc.;
• Access to the Smartphone or Tablet native features : microphone, camera,
accurate geolocation, contacts list, calendars.
In these particular cases, it is possible to pitch an intermediate solution:
hybrid applications.
A hybrid application is based on the same technologies as web applications: the
code is built with HTML standard, CSS and JS. Thus, it has the same performance
and qualities as web applications.
This code is thereafter integrated into “frameworks” which allow access to
the OS native features.
What is a Framework ?
It consists in an empty native application, allowing the HTML contents of a webpage
to be read. The framework’s features are very close to a browser’s.
Figure 22
PhoneGap’s scheme showing
frameworks’ role
faberNovel ••• 35
36. Thus, unlike a native application, a hybrid application will access hardware
devices (camera, GPS, Etc.) and be listed on the corresponding Store. Moreover,
a hybrid application makes the most of its HTML code : ease of updating and
developing, design responsive, long-term stability of the language used.
Which suppliers provide those frameworks ?
Here are two actors who develop frameworks and integrate HTML pages to make
hybrid applications on different platforms.
PhoneGap
supported by the Apache Software Foundation’s incubator
The following are native features supported by PhoneGap’s different frameworks:
Figure 23
Table of different platforms’
native features, supported by
the PhoneGap’s frameworks.
faberNovel ••• 36
37. Sencha Touch
Sencha also provides the framework so that web applications have access to
most the native features: geolocation, compass, accelerometer, etc...
Below,are the list of devices compatible with Sencha’s solution :
Figure 24
The different platforms on
which Sencha Touch can
spread a hybrid application,
from the same HTML5 code
faberNovel ••• 37
38. [IV]
Our recommendation
• Which solutions fit for each type of application ?
Games and Entertainment
Media, News and Information
Social networking
Traveling and maps
Utilities (reservation, e-shopping, bank transaction)
Multimedia
• Synthesis
faberNovel ••• 38
39. Our recommendation
Which solutions fit for each type of application ?
Games and Entertainment
[Native application]
Why ? Such applications require high-end graphics and responsiveness to evoke
a wide new universe, along with possible interactions with innovative hardware
elements (eg accelerometer).
Example 1 : Infinity Blade
This game is extremely similar to those played
on video gaming consoles. Its high quality 3D
graphics requires high computing power to respond
to players’ actions. Impossible to obtain in HTML5
developement so far, native development is
essential.
Example 2 : Angry Birds
One of the most popular games on mobile phones
is now available in HTML5 ..but only on Chrome
19, which is not yet available for a Smartphone or
a tablet. Note that it is a relatively simple game: a
single type of interaction, 2D graphics.
Figure 25
“Infinity Blade”’s illustration, a native gaming application that
uses 3D animations
Figure 26
“Angry Birds”, from now on available in HTML5
on Chrome 19 browser
40. Media, News and Information
[Hybrid now … web app for soon !]
Why? Contents must be constantly consulted, updated ... and all users need this
service. Moreover, there is no particular interactions to imagine but read, share
and comment. Native applications’ advantage is to push notifications: this feature
is expected to arrive shortly on HTML5.
Examples : Financial Times & Le Monde
Financial Times is a web Le Monde is a native
application. application.
Figure 27
Financial Times’ webapp and Le Monde’s native application.
faberNovel ••• 40
41. Social networking
[Native or hybrid]
Why? Social networking applications have characteristics quite similar to news’
application. Frequently updated and modified, they target a wide audience, which
uses various devices. Finally, users need camera and geolocation access to
share those data.
Example 1 : LinkedIn
LinkedIn is a hybrid application.
Example 2 : Facebook
Facebook has abandoned HTML5 and came back
to a native version of its application. Facebook’s
purpose is to make the application more optimal
and fluid in particular when opening and viewing
multimedia content.
Facebook has chosen to promote the efficiency and
speed of a native application rather than developing
an HTML5 application readable on any mobile
platform.
Figure 28
Linkedin’s hybrid application on Smartphones
Figure 29
Facebook’s application, the new native application launched in
August 2012
faberNovel ••• 41
42. Traveling and maps
[Native application and webapp]
Why? For such applications, geolocation is
essential. Webapp geolocation is as accurate as
native application geolocation. It is one of the first Utilities (reservation, e-shopping, bank
features compatible with most common browsers. transaction)
[Native application]
Example : Foursquare Why? For such applications, one need to identify
and make transactions safely. In native applications,
Foursquare is a native application available on both the user is most of the time already identified
Android and iOS. and registered, so he doesn’t need to enter the
username nor the password for each transaction.
Example : eBay
eBay has combined both a native application, and
an optimized website for mobile. Indeed, iPhone’s
features can further enrich eBay’s service on the
web: scan bar code with the camera, notifications
when an item is sold or purchased, etc.. These
features can not yet exist in HTML5.
Figure 30
The Foursquare application, a native application that uses
native geolocation devices
Figure 31
The eBay application, an e-commerce application using
notifications and camera to scan a bar code
faberNovel ••• 42
43. Multimedia
[Native application today … But about to switch for web application !]
Why? For a long time, websites publishers putting forward movies or music
contents online had no other alternative than using native applications. Now,
HTML5 allows the integration of multimedia content on mobile devices, with a
greater responsiveness when the Internet connection is safe.
Example : YouTube
When Smartphones first came out, YouTube had previously developed an
application that used the Smartphone’s native video player. Indeed, adding a
Flash plug-in was then the only way to play videos online. However, Apple refused
to integrate the Flash plug-in into mobile iOS.
More recently, new HTML5 features have allowed YouTube to develop a web
application version that runs on all platforms.
Figure 32
Youtube’s HTML5 application, identical on all platforms
faberNovel ••• 43
44. Synthesis
So far, there have been a lot of debates about which technology is the best to
develop a digital product, but the real debate actually relies on which technology
is the most suitable to a publisher’s needs in terms of quality and speed of the
application.
Whenever an app requires to be very reactive, work offline, or use advanced
features of the device (camera, gyroscope, voice, push, sending by e-mail, address
book, etc..), it must be native. Each app will be optimized for its proper platform.
If instead, the app’s development is driven by a logic of cost and does not require as
advanced features as a native app, HTML5 offers the best compromise possible.
The interest is to have a unique app to develop and update. Costs savings can be
substantial as the number of apps is important.
Although, HMTL5 technology is not fully mature yet …
The most interesting features of HTML5 are not supported by widely used
browsers. They will be in the coming months for desktop browsers, but not
necessarily for mobile browsers, tablets and SmartTV. Actors controlling thoses
devices (Apple, Google, Samsung, etc..) have indeed little interest to encourage
the web apps’ development.
Web apps’ development on the connected devices requires two revolutions that
are quite difficult to predict:
• A shift in strategy for Apple, Google, Samsung, etc.. which would lead
them to improve HTML5 comptatibility on their connected devices
• A revolution in the habits of mobile users who would start reaching their
favorite service from their browser rather than a native application. Given
the current success of native applications, this change will not happen
without a major disruption of the market, supported the world’s giant digital
players.
faberNovel ••• 44
45. ... It is time for players to integrate HTML5 to their multiplatform
strategy...
Browsers for desktop computers integrate faster HTML5 new features. By the end
of 2012 or early 2013 ,HTML5 will be considered as the web standard development
technology.
Even if all are not yet supported by the various browsers, overall, HTML5 new
features let you go through richer and more interative web experience. Beyond
this technological aspect, HTML5 also brings a new concept design:
• Multiplatform strategy: how to adapt a unique web experience to different
devices (mobile, tablet, TV) all-in sharing development costs?
• Updating and running ease: every last changes and web development
versions follow one another seamlessly and transparently. It also allows to
develop new experiences through swift prototyping methodologies, through
an incremental and iterative way
• A logical flow: we do not need to download or store anymore information.
Everything is accessible on the web, via a url.
faberNovel ••• 45
46. This means that new websites’ developments or existing websites’ updates will
have to be done taking into account both HTML5 and web standards in order to
replace proprietary technologies or provide a richer user experience.
Some examples for pluzz.fr:
• For movies, change from Flash to HTML5
• Provide a full screen mode for more immersion
…And explore the field of hybrid applications.
A service like Pluzz should be reachable by the largest number of possible
devices: Smartphones, tablets, SmartTV. In order to reduce the high developing
costs implied by the development of a native application for each different platform,
one should use a common heart in HTML5. An example is the strategy chosen by
Netflix. Advantages are many:
The advantages:
• The heart can be updated at any time, without having to go through Apple,
Google, Samsung, etc..
• It is possible to make dynamic testing (A / B testing) to quickly improve the
interface.
• The development cost for each application is significantly reduced.
This strategy is an opportunity to think out globally services for an easier
management, more efficient and rational (systematic use of APIs, better structure
its data, better “talk to each other” the various services, etc..).
faberNovel ••• 46
47. Sources
Figure 3 Figure 9
HTML5 : the futur of web ? The famous Snake game entirely
http://www.w3.org/html/logo/ developed in HTML5
http://neave.com/fr/serpent/
Figure 4
Exemple d’animation : les traits Figure 10
lumineux se dessinent en suivant Illustration of a game in HTML5,
le trajet de la souris sur l’écran, ils piloted by a joystick
bougent et s’effacent au fur et à http://hacks.mozilla.org/2011/12/
mesure. gaming-and-the-mozilla-labs-apps-
http://neave.com/fr/imagination/ project
Figure 5 Figure 11
CSS animation example: the text is Score (out of 500) of the 6 browsers
aligned with the contours of the car compatible with HTML5.
when this latter moves http://html5test.com/results/desktop.
http://www.adobe.com/fr/devnet/ html
html5/articles/css3-regions.html
Figure 12
Figure 6 Score (out of 500) of 8 Smartphones
Example of interaction with the OS allowing the best compatibility with
microphone: When making noise in HTML5 features
front of the computer, the balls start to http://html5test.com/results/mobile.
jump on the screen. html
http://neave.com/fr/balles-
sauteuses/ Figure 13
Score (out of 500) of the 12 tablet’s
Figure 7 OS allowing the best compatibility with
Example of interaction with the HTML5 features
webcam: you can take pictures and http://html5test.com/results/tablet.
add special filters or effects. html
http://neave.com/fr/webcam/
Figure 14
Figure 8 Score (out of 500) of the 10 Smart TV
Drawing made using the mouse in a OS allowing the best compatibility with
web page HTML5.
http://harmoniousapp.com/ http://html5test.com/results/
television.html
faberNovel ••• 47
48. Figure 15 Figure 23
HTML5 compatiblity pourcentage of Table of different platforms’
most popular web browsers worldwidly native features, supported by the
used PhoneGap’s frameworks
http://gs.statcounter.com/ www.phonegap.com
Figure 16 Figure 24
HTML5 compatiblity pourcentage Different platforms on which Sencha
of most popular mobile browsers Touch can spread a hybrid application,
worldwidly used from the same HTML5 code
http://gs.statcounter.com/ www.sencha.com
Figure 22 Figure 29
PhoneGap’s scheme showing Facebook’s application, the new native
frameworks’ role application launched in August 2012
https://build.phonegap.com/ www.igeneration.fr
faberNovel ••• 48
49. Acknowledgments
Bruno Patino
Executive Vice President, Strategy & Digital of France
Télévisions Group,
Director of France 5
Eric Scherer
Director of Future Media
Philippe Deloeuvre
Strategic Marketing Director
Aurélien Fache
Technical Director
Romain Goyet
Co-fondateur et CTO
faberNovel ••• 49
50. Contact
17 rue du Faubourg du Temple
75010 Paris
+33 1 42 72 20 04
www.fabernovel.com
Marie-Caroline Lanfranchi
Project Director
marie-caroline.lanfranchi@fabernovel.com
Maxime Coupez
Senior Project Manager
maxime.coupez@fabernovel.com
Marguerite Meunier
Junior Project Manager
marguerite.meunier@fabernovel.com
faberNovel ••• 50
51. We are faberNovel
We help large organizations think and act like startups!
We help our clients make the most of digital opportunities and
emerging partices. We build on tomorrow’s challenges to deliver
significant impact.
We are designers, business analysts, and engineers.
With a strong expertise in design and execution of digital experiments
using HTML5, we are able to assist organizations in:
• Building their innovation abilities thanks to our training and
coaching team: digital deep dive for senior managers, custom
workshops design, Innovation Labs
• Defining a digital multi-platform strategy, clear and customer-
orientated
• Designing products, services and innovative experiences
• Supporting innovative projects with the ability to offer turnkey
service: vendor and technology sourcing and assessment,
operational run and post-launch management
• The development of transmedia projects with design and
execution of multichannel experiments.
•••
We work ideas into successful project.
We make innovation happen.
facebook.com/faberNovel @faberNovel www.fabernovel.com
52. We are faberNovel
References
SFR PLAYER
In 2011, as part of the SFR PLAYER event, faberNovel was in
charge of the design and animation of a digital experience about
technological innovations.
http://sfrplayer.sfr.com/
INSIDE ENGRENAGES
In collaboration with Canal +, faberNovel was in charge of designing
and developing an interactive web experience called “Inside
Engrenages”, a new webserie deriving from the original French
police procedural television series called “Engrenages”.
“Put yourself in a webreporter’s shoes allowed to follow Captain
Laure Berthaud’s group the time of an investigation of a forged
documents traffic and clandestine network.”
During seven days, the user will follow in real-time the investigation’s
progress and will be notified by email or social networks for twists
and new evidence’s discovery.
http://engrenages.canalplus.fr/
facebook.com/faberNovel @faberNovel www.fabernovel.com