HTML5, How to rethink your web strategy

licensed using creative commons

HTML5, how to rethink your web strategy[ ]

Introduction

Part I

HTML5, the web evolution Introduction to How Web Pages WorkThe perpetual evolution of HTMLHTML5: 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 ?

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

Technical and functional confrontation Two design strategies that lead to different user experiencesThe big issues related to project developmentDecision matrix: what to do in any case ?

• Website vs native applications ? • What about hybrid applications ?

Partie 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

Table of contents

p.4

p.20

p.25

p.37

Introduction

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

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.

4faberNovel •••


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

[I]

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:

Flash, Silverlight, etc.. = Proprietary technologies

Flash and Silverlight scripting languages are often used to manage the behavior of multimedia content, such as videos, animations, 3D objects, etc.

These technologies are standardized because they originate from a single vendor, who dictates the writing standards and provides tools to interpret them perfectly.

Example: Flash is published by Adobe. In order to read a Flash script, a browser must be equipped with the plug-in (a piece of software that “branches” on the browser to increase capacity). Flash Player is edited and released only by Adobe.

A web browser is software (which can be installed on a computer, mobile device, SmartTV, video game console, etc.) that is able to read HTML and CSS to display all the website’s elements on the screen. You are probably using one of the following browsers:

• Internet Explorer

• Firefox

• Chrome

• Safari

• Opera

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.

Web standards

The HTML page defines all elements of the page, and indicates where to find them and how they fit together with each other. This is the basic component that determines the structure of most web pages.

The CSS of a page is a document that defines the visual appearance of each element: text font, color windows, border width, location of items, etc.

JavaScript is the most common scripting language that is executable by a browser. It is the most common choice for managing the behavior of the different “buttons” of a web page, text fields, etc.

These languages are ‘basic’ web languages, supported by all browsers. They do not belong to any company and therefore are likely to change depending on the uses and needs of the developer community. International organizations like W3C and ECMA are in charge of establishing writing standards and promoting them via a set of regularly published recommendations. Each website editor and web browser is free to adopt them, or create new ones. Usually, what we refer to as HTML is actually the trio of HTML + CSS + JavaScript, since these languages are very closely related. In this study we will adopt this usage.


Figure 1 Structure of France TV Info website’s home page.

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.

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 :

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.

Testing by the developer community

W3C‘srecommendation

Implementationon mainstream

browsers

Use by mass-market

website publishers

Figure 2Main stages of the process of integrating new features of HTML

HTML5 : buzzword or real disruption ?

Figure 3HTML5 : the future of the web ?

HTML5 vs Flash

• HTML5 allows the integration video and audio tracks in a web pages without using Flash. Thus, multimedia contents can be read by a browser without any plug-in in particular..

• HTML5 can incorporate animations and dynamic 2D elements (and soon 3D) without using Flash. In particular, it is possible to create games entirely in HTML5. This is definitely a revolution because most online games are based on Flash or other proprietary technologies.

HTML‘s new features, already developed and implemented in major browsers or still under development, gathered under the “HTML5” label, inspire the enthusiasm of web developers because they can easily reproduce features that were previously handled by proprietary technologies.

These are the reason why more and more developers are considering developing websites accessible via mobile browsers rather than native applications.

HTML5 vs native applications

Many features of HTML5 mimic native applications’ behaviour on connected devices:

• The ability to use hardware device elements within the web page: camera, microphone, keypad, GPS, etc.

• Optimization of web page elements for multitouch interfaces

• Data storage on the device to operate the web page offline or for automatic data logging or user preferences storage

• Optimization of the web page display depending on screen size

1.4 HTML5 vs. HTML4: what is the advantage?

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

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 4Example: the luminous lines are drawn by following the path of the mouse on the screen, they move in and fade progressively.

Figure 5CSS animation example: the text is aligned with the contours of the car as it moves across the page

New filters and CSS animations for unique lay-outs

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:


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

Figure 7Example of interaction with the webcam: you can take pictures and add special filters or effects.

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.

Interaction with the microphone

Speak and your browser reacts. This feature will soon facilitate web browsing for people with visual disabilities.

Figure 6 Example of interaction with the microphone: When making noise in front of the computer, the balls start to jump on the screen.


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.

Figure 8Drawing made using the mouse in a web page

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 9The famous Snake game entirely developed in HTML5

Figure 10 Illustration of a game in HTML5, piloted by a joystick


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.

An efficient mobile experience

Optimized for responsive design development, data storage during the page initialization in order to allow offline navigation.

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.

Figure 11Score (out of 500) of the 6 browsers compatible with HTML5. Sourcehttp://html5test.com/

ScoreMaxthon 3.4.1 422Chrome 20 414Opera 12.00 385Firefox 13 345Safari 5.1 317Internet Explorer 9 138

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.

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.


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.

ScoreRIM Tablet OS 2.0 Blackberry Playbook 373Chrome All Android 4 devices 371Opera Mobile 12.00 Multiple platforms 369Firefox Mobile 10 Multiple platforms 325IOS 5.1 Apple iPhone, iPad and iPod Touch 324Android 4.0 Asus Transformer Prime and others 280WebOS 3.0 HP TouchPad 217Silk 1.0 Amazon Kindle Fire 174

Figure 12 Score (out of 500) of 8 Smartphones OS allowing the best compatibility with HTML5 features.

Source http://html5test.com/


Figure 13 Score (out of 500) of the 12 tablet’s OS allowing the best compatibility with HTML5 features.

Source http://html5test.com/

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.

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.

ScoreChrome All Android 4 devices 371Opera Mobile 12.00 Multiple platforms 369Firefox Mobile 10 Multiple platforms 325IOS 5.1 Apple iPhone, iPad and iPod Touch 324MeeGo/Harmattan Nokia N9 and N950 284Android 4.0 Samsung Galaxy Nexus 280Blackberry OS7 Blackberry Bold 9900 and others 273Bada 2.0 Samsung Wave and others 268Nokia Belle FP1 S60 5.4 Nokia 603, 700 and 701 226webOS 2.2 Palm Pre 2 and HP Pre 3 210Android 2.3 Google Nexus S and others 189Windows Phone 7.5 Samsung Omnia, W, LG E906 and

others138


Figure 14 Score (out of 500) of the 10 Smart TV OS allowing the best compatibility with HTML5 Source http://html5test.com

ScoreSharp Aquos Espial 6.05 Sharp Aquos televisions 342GoogleTV Sony Internet TV, LOgitech Revue and others 328Philips NetTV Opera Devices 3.2 Philips televisions 325Toshiba Espial 6.04 Toshiba L7200 televisions 310Samsung Smart TV 2012 Samsung televisions 286LG NetCast 2012 LG televisions 282Sony Internet TV Opera Devices 3.1 Sony televisions and Bluray players 275Sharp Aquos Opera Devices 3.0 Sharp Aquos televisions 236Boxee Boxee Box by D-Link, Iomega TV wit... 214Panasonic Smart Viera Panasonic Viera televisions 214

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.

................................................................................................................................................................. ...........

Note: An exhaustive list of web and mobile browsers is available at this following link: http://fr.wikipedia.org/wiki/Liste_de_

navigateurs_Webdes

http://fr.wikipedia.org/wiki/Liste_de_navigateurs_Webdes

http://fr.wikipedia.org/wiki/Liste_de_navigateurs_Webdes


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.

100%

82,8%

27,6%

69%63,4%

77%

34% 32%24%

7%3%

0%

Percentage of browsers compatible with HTML5 Percentage of use by browsers in the World, July 2012

Figure 15HTML5 compatiblity pourcentage of most popular web browsers worldwidly used.

Source http://gs.statcounter.com/

Three giants of web browsers: Chrome, Firefox and Internet Explorer.

Internet Explorer 9.0 is still widely used whereas it only includes 27,6% of the current features of HTML5

Safari (web browser installed by default on Apple computers) is struggling to take off but is still behind the big three

20 9 13 5.1 12.00


Figure 16HTML5 compatiblity pourcentage of most popular mobile browsers worldwidly used.

Source http://gs.statcounter.com/

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.

Two giants in the market: iPhone and Android.

At European level, BlackBerry and Opera stand out in the race.

Other mobile browsers are struggling to emerge.

100%

0%

Percentage of mobile browsers compatible with HTML5 Percentage of use by mobile browsers in the World, July 2012

56%64,8%

73,8%

51,2% 54,6%

23% 21% 20%

10%4,5%

4.1 iPhoneIOS 5.1

Operamobile 12.00

Belle FP2

Black-berryOS7


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


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

[II]


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.


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.

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


HTML5 in the service of mobility : strenghs and issues

The websites in HTML5 can do much better than native applications

Restore the link between servicesUnlike 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.


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 ?

[III]

VS

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 applicationGraphics rendering Progress is underway thanks to CSS

and HTML evolutions but not yet integrated on mobile browsers.

Graphic rendering of high quality, especially for 3D.

Animations Ability to make 2D animations in some browsers but not on mobile. So far impossible to make 3D animations without the Flash plug-in on the web

Greater computing power for 2D and 3D animations, which allows to create games, immersive experiences, etc. ..

Access to the device's camera

Possible on the latest browsers, but they are still not available on mobile.

Yes

Access to the devices' microphone

Possible on the latest browsers, but they are still not available on mobile.

Yes

Access to the device's geolocation feature

Yes, Yes

Using notifications from the application to the Home screen of the device

Push notifications to the home screen are impossible from an HTML website. Developers are working on it.

Yes

Advanced user / machine interactions"

Possibility to browse like on the web: scrolling, clicking, etc. With HTML5, microphone interaction is coming soon on mobile browsers.

Possibility to use the accelerometer to interact with the device: shaking, flipping, tilting, etc..

Offline operation Possible with HTML5 but not necessarily the most popular browsers.

Yes

User account (e-commerce, social networks ...)

Yes. Yes

Video embedding Possible with HTML5 Yes, with the device's native player

Games Limited to 2D graphics experiences, and “movement and mouse click” actions.

3D design and innovative interactions: tilt, shake …

Application / web site access

Within the web browser, or from an icon on the device's home screen (shortcut to the website)

From an icon on the home screen

Continued on next page>


Site web (= web app) Application nativeDownload of the application

From the matching web site or from a web application platform.

From the matching Store : AppStore, Androïd Market, etc.

Application personnalisation

Only if an account registration and differentiation of various profiles are provided.

The application can be easily customized from the "settings": access to location data, notifications, etc..

E-commerce Possible via websites like PayPal easily embeddable into a webapps.

Possible directly with the user's account on the platform.

Links to other services Easy navigation from one page to another within the browser.

Applications communicate very little between them.

Share on social networks

With one click if the the social network's API or widget is added to the site.

Possible if built within the application

Figure 17Comparaison des possibilités techniques et fonctionnelles entre un site web et une application native


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.

Two design strategies that lead to different user experiences

Figure 18Comparison of Ebay website and Smartphone application


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

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.

Figure 19Website development vs Native application development

Website (= web app) Native applicationHuman resources development

A provider or intern resources for the development. Intern resources are given priority to for maintenance and update. Indeed HTML is a well and long-time known language, many companies have built a web division.

Most of the time, an OS specialized provider must be hired, even for maintenance.

Availability of skilled developers

HTML5 development requires very good web skills: last trends knowledge, responsive design mastering, APIs, best practices for CSS, etc.. HTML5 developers are rarer and more expensive than the average web developers.

Many skilled developers for most common platforms (iOS and Android) but rarer and more expensive for other platforms.

Overall costs of development

Only one site (in responsive design) to develop for all platforms.

A developer specialized in each platform for each application.

Update and maintenance

Performed by the developer, automatically synchronized on the web.

Performed by the developer, and manual downloading of the new 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 development. Possibility of rapid prototyping.

Longer because the application must be assessed and validated by the corresponding store.

Screen Resolution "Possible use of responsive design which adapts contents to the screen orientation.It also allows developers to build one application and have it scale up and down to all the different screen sizes and resolutions.”

Each screen size matches with a different and specifically developed application.

Design and appearance

Entirely free Standards are imposed by the corresponding OS


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 applicationsRanking Like any website, web apps are

ranked on search engines like Google. They can also be found on web applications Stores.

No web ranking, but only on the device's appropriate Store. There are only compatible applications with the device used, which simplifies users' experience.

Monetization, advertising

Advertising and monetization control according to the web page you visited.

You must go through Stores to add an ad on an application. The ad is not necessarily related to the application's theme.

Interoperability An HTML website can be read from any devices: smartphone, tablet, ... and reach a maximum number of users.

An application developed for one device can not be read from another. It aims a single category of users.

Sale A web application is usually available for free, it's a website.

A native application is available on Stores, free or not, which takes 30% of

Distribution No special mean of distribution, except search engines' ranking

Through a Store such as the App 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 context

The web will always exist, using HTML W3C standards' recommandations. HTML language is a sustainable solution.

We do not know which platform will dominate the market in the coming years: the rise of Android 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


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 21Financial Times website read from a tablet

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

Decision matrix: what to do in any case ?

Website vs native applications ?

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


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 22PhoneGap’s scheme showing frameworks’ role


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 23Table of different platforms’ native features, supported by the PhoneGap’s frameworks.


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 24The different platforms on which Sencha Touch can spread a hybrid application, from the same HTML5 code


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

[IV]

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.

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

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.


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

Figure 27Financial Times’ webapp and Le Monde’s native application.

Financial Times is a web application.

Le Monde is a native application.


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.

Figure 28Linkedin’s hybrid application on Smartphones

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 29Facebook’s application, the new native application launched in August 2012


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 features compatible with most common browsers.

Example : Foursquare

Foursquare is a native application available on both Android and iOS.

Figure 30The Foursquare application, a native application that uses native geolocation devices

Utilities (reservation, e-shopping, bank transaction)

[Native application]

Why? For such applications, one need to identify and make transactions safely. In native applications, the user is most of the time already identified 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 31The eBay application, an e-commerce application using notifications and camera to scan a bar code


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 32Youtube’s HTML5 application, identical on all platforms


Synthesis

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.

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.


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


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


Figure 3HTML5 : the futur of web ?http://www.w3.org/html/logo/

Figure 4Exemple d’animation : les traits lumineux se dessinent en suivant le trajet de la souris sur l’écran, ils bougent et s’effacent au fur et à mesure.http://neave.com/fr/imagination/

Figure 5 CSS animation example: the text is aligned with the contours of the car when this latter moveshttp://www.adobe.com/fr/devnet/html5/articles/css3-regions.html

Figure 6 Example of interaction with the microphone: When making noise in front of the computer, the balls start to jump on the screen.http://neave.com/fr/balles-sauteuses/

Figure 7 Example of interaction with the webcam: you can take pictures and add special filters or effects.http://neave.com/fr/webcam/

Figure 8 Drawing made using the mouse in a web page http://harmoniousapp.com/

Figure 9 The famous Snake game entirely developed in HTML5http://neave.com/fr/serpent/

Figure 10 Illustration of a game in HTML5, piloted by a joystick http://hacks.mozilla.org/2011/12/gaming-and-the-mozilla-labs-apps-project

Figure 11 Score (out of 500) of the 6 browsers compatible with HTML5. http://html5test.com/results/desktop.html

Figure 12 Score (out of 500) of 8 Smartphones OS allowing the best compatibility with HTML5 featureshttp://html5test.com/results/mobile.html

Figure 13 Score (out of 500) of the 12 tablet’s OS allowing the best compatibility with HTML5 features http://html5test.com/results/tablet.html

Figure 14 Score (out of 500) of the 10 Smart TV OS allowing the best compatibility with HTML5.http://html5test.com/results/television.html

Sources

http://www.w3.org/html/logo/

http://neave.com/fr/imagination/

http://www.adobe.com/fr/devnet/html5/articles/css3-regions.html

http://www.adobe.com/fr/devnet/html5/articles/css3-regions.html

http://neave.com/fr/balles-sauteuses/

http://neave.com/fr/balles-sauteuses/

http://neave.com/fr/webcam/

http://harmoniousapp.com/

http://neave.com/fr/serpent/

http://hacks.mozilla.org/2011/12/gaming-and-the-mozilla-labs-apps-project



http://html5test.com/results/desktop.html

http://html5test.com/results/desktop.html

http://html5test.com/results/mobile.html

http://html5test.com/results/mobile.html

http://html5test.com/results/tablet.html

http://html5test.com/results/tablet.html

http://html5test.com/results/television.html

http://html5test.com/results/television.html


Figure 15 HTML5 compatiblity pourcentage of most popular web browsers worldwidly used http://gs.statcounter.com/

Figure 16 HTML5 compatiblity pourcentage of most popular mobile browsers worldwidly used http://gs.statcounter.com/

Figure 22PhoneGap’s scheme showing frameworks’ role https://build.phonegap.com/

Figure 23 Table of different platforms’ native features, supported by the PhoneGap’s frameworks www.phonegap.com

Figure 24Different platforms on which Sencha Touch can spread a hybrid application, from the same HTML5 codewww.sencha.com

Figure 29Facebook’s application, the new native application launched in August 2012www.igeneration.fr

http://gs.statcounter.com/

http://gs.statcounter.com/

https://build.phonegap.com/

http://www.phonegap.com

http://www.sencha.com

http://www.igeneration.fr


Acknowledgments

Eric SchererDirector of Future Media

Bruno PatinoExecutive Vice President, Strategy & Digital of France Télévisions Group, Director of France 5

Philippe DeloeuvreStrategic Marketing Director

Aurélien FacheTechnical Director

Romain GoyetCo-fondateur et CTO


Marie-Caroline LanfranchiProject Director [email protected]

Maxime Coupez Senior Project [email protected]

Marguerite MeunierJunior Project [email protected]

17 rue du Faubourg du Temple75010 Paris+33 1 42 72 20 04

www.fabernovel.com

Contact

mailto:[email protected]



http://www.fabernovel.com

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

We are faberNovel

facebook.com/faberNovel @faberNovel www.fabernovel.com

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/

http://html5test.com/



http://sfrplayer.sfr.com/

http://engrenages.canalplus.fr/

HTML5, How to rethink your web strategy

Technology

Transcript of HTML5, How to rethink your web strategy