HTML5, How to rethink your web strategy


Published on

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.

Published in: Technology, Design
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML5, How to rethink your web strategy

  1. 1. HTML5, how to rethink[ your web strategy ] licensed using creative commons
  2. 2. Table of contentsIntroduction Part IHTML5, the web evolution p.4 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 IINative applications : threatened by the web mobile ? p.20Applications 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 websitesPart IIIMobile vs Native applications p.25Technical 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 IVOur recommendation p.37Which 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. 3. IntroductionHMTL5 signs the revival of the web: mobility, interactivity and openness.Inspired by native applications’ success on connected devices, HTML5 new features provide developers withsolutions to create more easily and quickly richer mobile experience: touch, disconnected mode, audio andvideo, 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 suchas  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 webtechnologies and more precisely HTML5, are invited to proceed directly to Part 1.3.
  4. 4. faberNovel ••• 4
  5. 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. 6. Introduction to How Web Pages WorkA 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 oftenThe 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 basiccomponent that determines the structure of most These technologies are standardized because theyweb pages. originate from a single vendor, who dictates the writing standards and provides tools to interpret themThe CSS of a page is a document that defines the perfectly.visual appearance of each element: text font, colorwindows, border width, location of items, etc. Example: Flash is published by Adobe. In order to read a Flash script, a browser must be equipped withJavaScript is the most common scripting language the plug-in (a piece of software that “branches” onthat is executable by a browser. It is the most the browser to increase capacity). Flash Player iscommon 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 gameThese languages are ‘basic’ web languages, console, etc.) that is able to read HTML and CSS tosupported by all browsers. They do not belong to display all the website’s elements on the screen. Youany company and therefore are likely to change are probably using one of the following browsers:depending on the uses and needs of the developercommunity. International organizations like W3C • Internet Explorerand ECMA are in charge of establishing writingstandards and promoting them via a set of regularly • Firefoxpublished recommendations. Each website editor • Chromeand web browser is free to adopt them, or create • Safarinew ones. Usually, what we refer to as HTML isactually the trio of HTML + CSS + JavaScript, • Operasince these languages are very closely related. Inthis 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. 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 1Structure of France TV Info website’s home page. faberNovel ••• 7
  8. 8. The perpetual evolution of HTMLThe developer community constantly creates new HTML features. But beforereaching 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 browsersFigure 2Main stages of the process of integrating new features of HTMLW3C continuously publishes new recommendations to ensure that browsers worktogether correctly: the organization encourages browser developers to implementnew features and meet the same standards to facilitate the work of web developers.Sometimes, when W3C believes that the new features being developed andtested represent a significant advance for the web, it decides to announce a newversion of HTML.We must understand that there is no ORIGINAL HTML version: each website andbrowser incorporates the newest HTML features at its own pace and according toits own terms.Today, the official version recommended by the W3C is HTML4. HTML5 isstill “being specified,” even though many websites and browsers worldwidesupport HTML5 features.
  9. 9. HTML5 : buzzword or real disruption ?HTML‘s new features, already developed and implemented in major browsers or Figure 3 HTML5 : the future of thestill under development, gathered under the “HTML5” label, inspire the enthusiasm web ?of web developers because they can easily reproduce features that werepreviously handled by proprietary technologies.HTML5 vs Flash HTML5 vs native applications• HTML5 allows the integrationvideo and audio tracks in a web Many features of HTML5 mimic nativepages without using Flash. Thus, applications’ behaviour on connectedmultimedia contents can be read devices:by a browser without any plug-in in • The ability to use hardware deviceparticular.. 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 for3D) without using Flash. In particular, multitouch interfacesit is possible to create gamesentirely in HTML5. This is definitely • Data storage on the device to operatea revolution because most online the web page offline or for automaticgames are based on Flash or other data logging or user preferences storageproprietary 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. 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 includedin 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 formatA few examples of new features recently available or soon to be availablethrough HTML5:Animations within a page New filters and CSS animations for unique lay- outsToday, HTML5 allows the integration of 2Danimations on a web page without having to useFlash. The next expected step will be to alsoincorporate 3D animations.Figure 4Example: the luminous lines are drawn by following the path ofthe 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. 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 clipsInteraction with the microphoneSpeak and your browser reacts. This feature willsoon facilitate web browsing for people with visualdisabilities. 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 6Example of interaction with the microphone: When makingnoise in front of the computer, the balls start to jump on thescreen. Figure 7 Example of interaction with the webcam: you can take pictures and add special filters or effects. faberNovel ••• 11
  12. 12. Interaction with the mouseWhen moving the mouse on your screen, you cananimate objects. This feature enriches the browsingexperience, making it more graceful, with amongothers the creation of drawing interfaces on theinternet. 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 8Drawing 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. 13. An efficient mobile experienceOptimized for responsive design development, data storage during the pageinitialization 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) orthe 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 thelatest features of HTML, a language that is constantly evolving.These latest features are a real step forward for HTML and theweb in general because they help make sites more beautiful, morecomplex and better adapted to new media online. faberNovel ••• 13
  14. 14. 1.5 The state of artWhich browsers and operating systems are the mostcompatible with HTML5?HTML 5 is not equaly supported by all browsers: while some of them incorporatethe latest innovations proposed by the developer community, others are “late”.The following figures present a classification of different browsers and theircompatibility with HTML5. The score is obtained on a total of 500 established fromthe 500 latest features of HTML.Web BrowsersBrowsers listed below are stable browsers widely used. HTML5 may get a higherscore on versions of unstable browsers under development, but not used by themass-market. We can note the bad position of Internet Explorer, far behind otherbrowsers that integrate rather well HTML5. ScoreMaxthon 3.4.1 422Chrome 20 414 Figure 11Opera 12.00 385 Score (out of 500) of the 6Firefox 13 345 browsers compatible with HTML5.Safari 5.1 317Internet Explorer 9 138 Source happens when a HTML functionality (eg a video in HTML5) is not recognizedby 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. 15. Smartphones OSOpera, 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 withthe OS version used by the mobile : Safari for iOS, Android for Android, etc.. Othermobile browsers have also developed independently, and settled slowly on themarket: 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 andSafari 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 325 Figure 12 Score (out of 500) of 8IOS 5.1 Apple iPhone, iPad and iPod Touch 324 Smartphones OS allowing the best compatibility withAndroid 4.0 Asus Transformer Prime and others 280 HTML5 features.WebOS 3.0 HP TouchPad 217 SourceSilk 1.0 Amazon Kindle Fire 174 faberNovel ••• 15
  16. 16. Tablets OSThe tablet market being new, browsers are fewer. As we see in the mobilemarket, Opera, Firefox and IOS are ahead about HTML5, while Android is hard tofollow developments. However, we note the relatively good performance of RIMBlackBerry Tablet. 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 226 Figure 13 Score (out of 500) of the 12webOS 2.2 Palm Pre 2 and HP Pre 3 210 tablet’s OS allowing the best compatibility with HTML5Android 2.3 Google Nexus S and others 189 features.Windows Phone 7.5 Samsung Omnia, W, LG E906 and 138 Source others we have seen, HTML is constantly changing and different browsers try to adaptto these changes.Even if they’re not at the same point today, all are making efforts to follow the W3Cstandard: free browsers such as Firefox or Chrome have attracted more HTMLdevelopers providing researchers unstable versions of their browser (Firefox 14,Chrome Canary) to enable them to test new HTML features. They are thereforebetter placed than Internet Explorer, but all that is changing very rapidly. faberNovel ••• 16
  17. 17. Smart TVFinally, on Smart TV market, browsers are a less efficient than on mobile andtablets market. Indeed, this emerging market still concern few users. The scoresare tighter, with four leaders above 300 (60% of HTML5 features compatible):Sharp Aquos TV Googe, NetTV Philips and Toshiba. Samsung, LG and Sony tofollow 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 ...........Note: An exhaustive list of web and mobile browsers is available at this following link: faberNovel ••• 17
  18. 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 2012100% 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 faberNovel ••• 18
  19. 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 2012100% 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 faberNovel ••• 19
  20. 20. What to rememberWorldwide population is still under equipped to use websites thatsupport advanced features of HTML5. An application publisherwho wishes to make its website reachible for must people must takecare not to use today’s most advanced HTML5 features, or in thiscase 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. 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. 22. Applications model, although dominating themobile market…The applications model, popularized by Apple, works so well so far that all themobile 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. 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. 24. …Is presently questionedThe applications’ ecosystem, which helped restore value to services and contentthat had trouble finding a viable business model on the web (dominated by thefree), 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 webDespite 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 marginalThe first point is about to be solved thanks to the new HTML 5 features : soon itwill be possible for certain types of services, to make websites that work equallywell (or almost as well) on mobile browser that a native application. This is only amatter of months or years (see Part III of the note).The second point is more delicate : applications offer a way more fluid experienceand is truly entrenched in practice. Therefore, so that users begin to use websiteson their connected devices, these websites will have to do much better than nativeapplications in certain areas.
  25. 25. HTML5 in the service of mobility : strenghs andissuesThe websites in HTML5 can do much better thannative applicationsRestore 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 twoapplications.A continuous improvement processThe updating process of a native application is long, especially because it involvesmonitoring the application by the operator of the platform (Apple’s App Store forexample). The frequency of updates is limited. On the contrary, a website can beupdated as often as its publisher wants.The distribution of mobile websitesThe referencing and distribution model on stores applications is the key of mobileapplications’ success. Mobile users find applications that they need immediatelyon their home screen, without using a web search engine.The challenge HTML5 publishers face is to provide users an easy access onmobile 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, whichcan tap into the power of its 900 million Facebook users and its viral power. faberNovel ••• 25
  26. 26. [III] VSMobile 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. 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 applicationGraphics 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 webAccess to the devices Possible on the latest browsers, but Yescamera they are still not available on mobile.Access to the devices Possible on the latest browsers, but Yesmicrophone they are still not available on mobile.Access to the devices Yes, Yesgeolocation featureUsing notifications Push notifications to the home Yesfrom the application screen are impossible from an HTMLto the Home screen of website. Developers are working onthe device it.Advanced user / Possibility to browse like on the web: Possibility to use the accelerometermachine 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, socialnetworks ...)Video embedding Possible with HTML5 Yes, with the devices native playerGames 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 screenaccess icon on the devices home screen (shortcut to the website) Continued on next page>
  28. 28. Site web (= web app) Application nativeDownload 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 easilypersonnalisation 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 users 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 applicationnetworks networks 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. 29. Two design strategies that lead to different userexperienceseBay’s caseeBay is an auction site created online by the end of 1990: since then it has becomethe industry standard for e-commerce. More than 270 million users buy and sell allkinds of objects on this platform.And yet, eBay is particularly difficult to use: the information is hard to find, poorergonomics, etc. At first its bad design was not glaring, but it became so in 2007with the launch of the eBay application for iPhone, followed later by the launch ofthe eBay application for iPad. Indeed, the mobile and tablet versions are far moresimple 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. 30. What to remember:Lack of freedom and OS constraints encourage developersto optimize both the user interface and the ergonomics of theapplication, which will also be assessed and confirmed by thecorresponding Store before being put online. Therefore, thisrequirement promotes quality.As a side effect, some suggest adopting a “mobile first designstrategy.”Mobile development requirements being more restrictive (smallscreen, often low connectivity, use the move, etc..), and is indeed avery good starting point for designing a simple, clear and effectiveservice.Designed after the native application, the website will thereforebenefit from its broad principles of design and ergonomics.For a HTML5 website, it is recommended to start designing themobile experience: what information and features are essential tohighlight? How to simplify the user path? Etc.. faberNovel ••• 30
  31. 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 applicationHuman resources A provider or intern resources for the Most of the time, an OS specializeddevelopment 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 mostdevelopers 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 eachdevelopment to develop for all platforms. platform for each application.Update and Performed by the developer, Performed by the developer, andmaintenance 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 confidentialDevelopment 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 theappearance corresponding OS Figure 19 Website development vs Native application development
  32. 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 applicationsRanking Like any website, web apps are No web ranking, but only on the ranked on search engines like devices 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 toadvertising according to the web page you add an ad on an application. The visited. ad is not necessarily related to the applications 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, its a website. Stores, free or not, which takes 30% ofDistribution 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 platforms image. However, the Store is the only one mastering the applications visibility (only the first 50 really successful).Change over to the The web will always exist, We do not know which platformcontext 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 todays 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. 33. Case Study: Financial TimesIn June 2011, the Financial Times launched a web app which greatly acceleratedFT’s access on mobile devices (smartphone and tablets): 12% of registrationsfrom mobile, and 19% of website traffic is generated by mobile access, whichrepresents 2M users.In August 2011, the web app had already attracted more users than the priornative application. This latter was subsequently removed from the AppStore.HTML5 has allowed them to reach more users, especially those using anAndroid Smartphone, or other browsers. Furthermore, FT wanted to control therelease 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. 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. 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 differentplatforms is to develop a native application for each different platform, with properinterface, and a specialist developer regarding the OS and language used.On the contrary, an HTML web application can be read by any Smartphone fittedwith 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: thecode is built with HTML standard, CSS and JS. Thus, it has the same performanceand qualities as web applications.This code is thereafter integrated into “frameworks” which allow access tothe OS native features.What is a Framework ?It consists in an empty native application, allowing the HTML contents of a webpageto be read. The framework’s features are very close to a browser’s. Figure 22 PhoneGap’s scheme showing frameworks’ role faberNovel ••• 35
  36. 36. Thus, unlike a native application, a hybrid application will access hardwaredevices (camera, GPS, Etc.) and be listed on the corresponding Store. Moreover,a hybrid application makes the most of its HTML code : ease of updating anddeveloping, 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 makehybrid applications on different platforms.PhoneGapsupported by the Apache Software Foundation’s incubatorThe 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. 37. Sencha TouchSencha also provides the framework so that web applications have access tomost 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. 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. 39. Our recommendationWhich solutions fit for each type of application ?Games and Entertainment[Native application]Why ? Such applications require high-end graphics and responsiveness to evokea wide new universe, along with possible interactions with innovative hardwareelements (eg accelerometer).Example 1 : Infinity BladeThis game is extremely similar to those playedon video gaming consoles. Its high quality 3Dgraphics requires high computing power to respondto players’ actions. Impossible to obtain in HTML5developement so far, native development isessential. 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 thatuses 3D animations Figure 26 “Angry Birds”, from now on available in HTML5 on Chrome 19 browser
  40. 40. Media, News and Information[Hybrid now … web app for soon !]Why? Contents must be constantly consulted, updated ... and all users need thisservice. Moreover, there is no particular interactions to imagine but read, shareand comment. Native applications’ advantage is to push notifications: this featureis expected to arrive shortly on HTML5.Examples : Financial Times & Le MondeFinancial Times is a web Le Monde is a nativeapplication. application.Figure 27Financial Times’ webapp and Le Monde’s native application. faberNovel ••• 40
  41. 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, whichuses various devices. Finally, users need camera and geolocation access toshare those data.Example 1 : LinkedInLinkedIn 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 28Linkedin’s hybrid application on Smartphones Figure 29 Facebook’s application, the new native application launched in August 2012 faberNovel ••• 41
  42. 42. Traveling and maps[Native application and webapp]Why? For such applications, geolocation isessential. Webapp geolocation is as accurate asnative application geolocation. It is one of the first Utilities (reservation, e-shopping, bankfeatures 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 identifiedAndroid 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 30The Foursquare application, a native application that usesnative geolocation devices Figure 31 The eBay application, an e-commerce application using notifications and camera to scan a bar code faberNovel ••• 42
  43. 43. Multimedia[Native application today … But about to switch for web application !]Why? For a long time, websites publishers putting forward movies or musiccontents online had no other alternative than using native applications. Now,HTML5 allows the integration of multimedia content on mobile devices, with agreater responsiveness when the Internet connection is safe.Example : YouTubeWhen Smartphones first came out, YouTube had previously developed anapplication that used the Smartphone’s native video player. Indeed, adding aFlash plug-in was then the only way to play videos online. However, Apple refusedto integrate the Flash plug-in into mobile iOS.More recently, new HTML5 features have allowed YouTube to develop a webapplication version that runs on all platforms.Figure 32Youtube’s HTML5 application, identical on all platforms faberNovel ••• 43
  44. 44. SynthesisSo far, there have been a lot of debates about which technology is the best todevelop a digital product, but the real debate actually relies on which technologyis the most suitable to a publisher’s needs in terms of quality and speed of theapplication.Whenever an app requires to be very reactive, work offline, or use advancedfeatures of the device (camera, gyroscope, voice, push, sending by e-mail, addressbook, 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 asadvanced 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 besubstantial 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 usedbrowsers. They will be in the coming months for desktop browsers, but notnecessarily for mobile browsers, tablets and SmartTV. Actors controlling thosesdevices (Apple, Google, Samsung, etc..) have indeed little interest to encouragethe web apps’ development.Web apps’ development on the connected devices requires two revolutions thatare 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. 45. ... It is time for players to integrate HTML5 to their multiplatformstrategy...Browsers for desktop computers integrate faster HTML5 new features. By the endof 2012 or early 2013 ,HTML5 will be considered as the web standard developmenttechnology.Even if all are not yet supported by the various browsers, overall, HTML5 newfeatures let you go through richer and more interative web experience. Beyondthis 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. 46. This means that new websites’ developments or existing websites’ updates willhave to be done taking into account both HTML5 and web standards in order toreplace proprietary technologies or provide a richer user experience.Some examples for • 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 possibledevices: Smartphones, tablets, SmartTV. In order to reduce the high developingcosts 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 byNetflix. 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 easiermanagement, more efficient and rational (systematic use of APIs, better structureits data, better “talk to each other” the various services, etc..). faberNovel ••• 46
  47. 47. SourcesFigure 3 Figure 9HTML5 : the futur of web ? The famous Snake game entirely developed in HTML5 4Exemple d’animation : les traits Figure 10lumineux se dessinent en suivant Illustration of a game in HTML5,le trajet de la souris sur l’écran, ils piloted by a joystickbougent et s’effacent au fur et à gaming-and-the-mozilla-labs-apps- projectFigure 5 Figure 11CSS animation example: the text is Score (out of 500) of the 6 browsersaligned with the contours of the car compatible with HTML5.when this latter moves htmlhtml5/articles/css3-regions.html Figure 12Figure 6 Score (out of 500) of 8 SmartphonesExample of interaction with the OS allowing the best compatibility withmicrophone: When making noise in HTML5 featuresfront of the computer, the balls start to on the screen. html Figure 13 Score (out of 500) of the 12 tablet’sFigure 7 OS allowing the best compatibility withExample of interaction with the HTML5 featureswebcam: you can take pictures and special filters or effects. html Figure 14Figure 8 Score (out of 500) of the 10 Smart TVDrawing made using the mouse in a OS allowing the best compatibility withweb page HTML5. television.html faberNovel ••• 47
  48. 48. Figure 15 Figure 23HTML5 compatiblity pourcentage of Table of different platforms’most popular web browsers worldwidly native features, supported by theused PhoneGap’s frameworks www.phonegap.comFigure 16 Figure 24HTML5 compatiblity pourcentage Different platforms on which Senchaof most popular mobile browsers Touch can spread a hybrid application,worldwidly used from the same HTML5 code www.sencha.comFigure 22 Figure 29PhoneGap’s scheme showing Facebook’s application, the new nativeframeworks’ role application launched in August 2012 faberNovel ••• 48
  49. 49. AcknowledgmentsBruno PatinoExecutive Vice President, Strategy & Digital of FranceTélévisions Group,Director of France 5Eric SchererDirector of Future MediaPhilippe DeloeuvreStrategic Marketing DirectorAurélien FacheTechnical DirectorRomain GoyetCo-fondateur et CTO faberNovel ••• 49
  50. 50. Contact17 rue du Faubourg du Temple75010 Paris+33 1 42 72 20 04www.fabernovel.comMarie-Caroline LanfranchiProject Directormarie-caroline.lanfranchi@fabernovel.comMaxime CoupezSenior Project Managermaxime.coupez@fabernovel.comMarguerite MeunierJunior Project faberNovel ••• 50
  51. 51. We are faberNovelWe help large organizations think and act like startups!We help our clients make the most of digital opportunities andemerging partices. We build on tomorrow’s challenges to deliversignificant impact.We are designers, business analysts, and engineers.With a strong expertise in design and execution of digital experimentsusing 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. @faberNovel
  52. 52. We are faberNovelReferencesSFR PLAYERIn 2011, as part of the SFR PLAYER event, faberNovel was incharge of the design and animation of a digital experience abouttechnological innovations. ENGRENAGESIn collaboration with Canal +, faberNovel was in charge of designingand   developing an interactive web experience called “InsideEngrenages”, a new webserie deriving from the original Frenchpolice procedural television series called “Engrenages”.“Put yourself in a webreporter’s shoes allowed to follow CaptainLaure Berthaud’s group the time of an investigation of a forgeddocuments traffic and clandestine network.”During seven days, the user will follow in real-time the investigation’sprogress and will be notified by email or social networks for twistsand new evidence’s discovery. @faberNovel