Using HTML5 to Deliver and Monetize Your Mobile Content
•
0 likes•250 views
This document discusses how HTML5 can be used to deliver and monetize mobile content. It provides an overview of Data Conversion Laboratory (DCL) and their services in converting content. The document then discusses how mobile content consumption continues to grow, especially on smartphones and tablets rather than desktop. It analyzes different routes for delivering HTML5 applications and the results of a survey on HTML5 adoption. The document concludes that HTML5 is the best approach for future-proofing mobile content and that its adoption should increase, though some browser and API limitations remain.
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Using HTML5 to Deliver and Monetize Your Mobile Content
Similar to Using HTML5 to Deliver and Monetize Your Mobile Content (20)
More from dclsocialmedia
More from dclsocialmedia (12)
Recently uploaded
Recently uploaded (20)
Using HTML5 to Deliver and Monetize Your Mobile Content
- 1. Confidential & Proprietarywww.dclab.comwww.dclab.com Using HTML5 to Deliver and Monetize Your Mobile Content Greg Fagan, Sales Director, Data Conversion Laboratory (DCL)
- 2. Confidential & Proprietarywww.dclab.com 2 Valuable Content Transformed • Document Digitization • XML and HTML Conversion • eBook Production • Hosted Solutions • Big Data Automation • Conversion Management • Editorial Services • Harmonizer
- 3. Confidential & Proprietarywww.dclab.com 3 Experience the DCL Difference DCL blends years of conversion experience with cutting-edge technology and the infrastructure to make the process easy and efficient. • World-Class Services • Leading-Edge Technology • Unparalleled Infrastructure • US-Based Management • Complex-Content Expertise • 24/7 Online Project Tracking • Automated Quality Control • Global Capabilities
- 4. Confidential & Proprietarywww.dclab.com We Serve a Very Broad Client Base . . . 4
- 5. Confidential & Proprietarywww.dclab.com 5 . . . Spanning All Industries • Aerospace • Associations • Defense • Distribution • Education • Financial • Government • Libraries • Life Sciences • Manufacturing • Medical • Museums • Periodicals • Professional • Publishing • Reference • Research • Societies • Software • STM • Technology • Telecommunications • Universities • Utilities
- 6. Confidential & Proprietarywww.dclab.com Content Consumption Via Mobile Continues to Grow 6
- 7. Confidential & Proprietarywww.dclab.com Content Consumed on Mobile More Than Desktop • Streaming Radio: Mobile = 95% (79% smartphones and 16% tablets) and Desktop = 5% • Games: Mobile = 85% (79% smartphones and 6% tablets) and Desktop = 15% • Social Media: Mobile = 72% (61% smartphones and 11% tablets) and Desktop = 28% • Weather: Mobile = 70% (61% smartphones and 9% tablets) and Desktop = 31% • Retail: Mobile = 53% (39% smartphones and 14% tablets) and Desktop = 47% 7
- 8. Confidential & Proprietarywww.dclab.com Content Consumed More on Desktop Than Mobile • News: Mobile = 45% (39% smartphones and 6% tablets) and Desktop = 55% • Sports: Mobile = 44% (38% smartphones and 6% tablets) and Desktop = 56% • Food: Mobile = 42% (27% smartphones and 15% tablets) and Desktop = 58% • Business/Finance: Mobile = 38% (36% smartphones and 2% tablets) and Desktop = 62% • TV: Mobile = 33% (22% smartphones and 11% tablets) and Desktop = 67% • Travel: Mobile = 32% (21% smartphones and 11% tablets) and Desktop = 68% • Auto: Mobile = 24% (19% smartphones and 5% tablets) and Desktop = 76% • B2B: Mobile = 20% (12% smartphones and 8% tablets) and Desktop = 80% 8
- 11. Confidential & Proprietarywww.dclab.com Four Main Routes to Market for HTML5 Applications • Mobile Browser – web apps or websites tailored for mobile devices and running in a mobile browser • Native Wrapper – web apps packaged in a native wrapper and delivered through an app store • Web-to-native Converter – apps written in JavaScript and compiled to native code • Native JavaScript API – HTML5 apps written for platforms natively supporting it, such as Firefox OS, Windows 8, Chrome OS 11
- 12. Confidential & Proprietarywww.dclab.com Results of 2013 VisionMobile Survey • 61% of developers write for the mobile browser • 63% of the US Android Play applications cannot be written in HTML5 for the mobile browser because some APIs are not implemented by the browsers yet • The 37% of US Android apps that could be implemented in HTML5 would grow to 58% if the browsers would add support for Power Management and WiFi APIs • 39% of the developers create HTML5 apps for the other 3 routes to market beside the mobile browser • 49% of the US Android apps could be implemented with native wrappers, 63% with web-to-native converters, and 98% with native JavaScript 12
- 14. Confidential & Proprietarywww.dclab.com So What’s Holding HTML5 Back? • HTML5 standard still under development (http://www.w3.org/html/wg/drafts/html/master/single- page.html • Browser and OS behaviors • Need for further APIs • More politics and vested interest than performance 14
- 17. Confidential & Proprietarywww.dclab.com APIs That Would Have Greatest HTML5 Impact Route to market API % of apps Mobile Browser Power management 13% Native Wrapper Power management 12% Web-to-native Converter WiFi 21% Native JavaScript API Calendar 1.4% 17
- 18. Confidential & Proprietarywww.dclab.com Survey Conclusions and Recommendations • Browsers should implement more HTML5 APIs starting with power management and wifi. Content providers should push browser vendors to implement more APIs. • A standardized packaging solution should be developed for native JavaScript apps, allowing such applications to be packaged once and deployed on any supporting platform • A device identity API should be developed to alleviate the fears related to cookies and privacy concerns • Developers should be better educated regarding the possibilities offered by HTML5 – i.e., the real advantages and drawbacks • A debug API should be developed to enable the creation of a set of dedicated HTML 5 debugging tools 18
- 19. Confidential & Proprietarywww.dclab.com So How Should You Prepare Your Mobile Content? • Flash is dead (well, dying anyway) • Long live HTML5 • Consider Web apps (or mobile-optimized websites) over native apps • Possible to bypass the app store, but there are risks 19
- 20. Confidential & Proprietarywww.dclab.com Why Flash Will Go the Way of 8-Tracks 20 • HTML5 offers mobile capabilities and semantic markup • Flash not supported on iOS and many Android devices • Tied to PCs, for which usage is shrinking • Many powerful and advertising firms have thrown their weight behind HTML5 • HTML5 development increasing rapidly in gaming • Aside from mobile, SEO is also a major consideration
- 21. Confidential & Proprietarywww.dclab.com Case Study: JAMA Network Reader • Released JAMA Network Reader in 2013 • HTML5-based reader works across all mobile platforms and devices • Also works across desktop browsers • Uses one code base to deliver app experience for all devices • Preferred HTML5 approach over native app 21
- 22. Confidential & Proprietarywww.dclab.com Challenges • Developing an enjoyable, cohesive reading experience that worked well on all devices • Marketing challenge of explaining to users why reader isn’t in app store • Providing a simple URL to an app initially confusing to users 22
- 23. Confidential & Proprietarywww.dclab.com Results • JAMA future-proofed mobile content by using HTML5 approach • Will work on any current or future device, online or offline • Users have convenience of native app that doesn’t use up precious storage • Web-optimized site allows for single content repository • No need to reconcile user stats from two sources 23
- 24. Confidential & Proprietarywww.dclab.com Top 10 Reasons to Use HTML5 Now • Accessibility • Video/audio support • Doctype • Cleaner code • Smarter storage 24
- 25. Confidential & Proprietarywww.dclab.com Top 10 Reasons to Use HTML (Continued) • Better interactions • Game development • Legacy/cross-browser support • Mobile • It’s the future, dadgummit! 25
- 26. Confidential & Proprietarywww.dclab.com But Wait – There Are More! • Improved semantics • Elegant forms • Consistency • Growth of web apps • Client-side database • Geolocation support 26
- 28. Confidential & Proprietarywww.dclab.com Conclusions • Growth of mobile continues apace • Content providers need to meet mobile demands of users • HTML5 is best option, though a few roadblocks remain (e.g., not yet a standard, browser behavior, more APIs needed) • Flash’s days are numbered • App Store can be bypassed (as JAMA case study showed) • Time to deploy HTML5 is NOW! 28
- 29. Confidential & Proprietarywww.dclab.com Resources • Millennial Media/comScore Report: http://www.millennialmedia.com/press/cross-screen-study- reveals-70-percent-of-digital-users-access-internet-across- multiple-devices • VisionMobile Report: https://www.developereconomics.com/reports/can-html5- compete-native/ • HTML5 standard still under development (http://www.w3.org/html/wg/drafts/html/master/single- page.html 29
- 30. Confidential & Proprietarywww.dclab.com 30 Q&A Greg Fagan Sales Director, Data Conversion Laboratory (908) 723-1884 gfagan@dclab.com @dclaboratory
Editor's Notes
- A 2014 report from Millennial Media and comScore revealed that 56% of online content in the US is now consumed via smartphones (44%) and tablets (12%) while just 44% is consumed on desktop computers. The shift to consuming online content using mobile devices continues to accelerate. In the 12 months leading up to this report, the number of internet users grew by 4% to 201 million. Mobile users grew NINE times faster during the same time period, while desktop users decreased by 45%. The number of digital users accessing the internet using both mobile devices and desktop computers has grown to more than 70%. Cross-platform consumption is the norm today.
- Here is a listing from the survey cited in the previous slide of the various content and media types for which mobile consumption has surpassed desktop, in several cases by a wide margin. Streaming radio and games are almost all mobile, and social media and weather aren’t far behind. The trend will continue to run in mobile’s direction, though I’m guessing that online shopping will continue to have significant desktop component for the foreseeable future. People like to see large images of what they’re buying, and desktop is still the best outlet for that. Social Media like Twitter and Facebook are geared more and more toward mobile as a matter of strategy, so it’s a pretty safe bet that mobile usage will be in the 90% area in the near future, if it’s not there already.
- Here are the media for which desktop usage remains higher than mobile. Mobile usage continues to grow apace, however, so the day when it surpasses desktop consumption for these categories isn’t far off. One category I haven’t mentioned yet is Health, which at the time of this report was split right down the middle in terms of mobile and desktop consumption. My guess is that mobile has now surpassed desktop in this category. Even for media where desktop still dominates, mobile is key strategic component for those content providers, because they realize that demand will continue to grow.
- The latest data for internet usage by device shows that we are now well past the tipping point for mobile usage. Mobile digital media time in the US is now significantly higher at 51% compared to desktop (42%). The implications are clear - if you're not able to reach your audience through mobile search or display, or you're not providing a satisfactory mobile experience, you will miss out compared to competitors who are. As you can see on the graph, the growth measured from 2008 to today in mobile internet usage has outpaced all other means by a wide margin.
- The trend in mobile device usage ('vertical screens') compared to all screen use again shows that we're well past the tipping point. As you’ll note from the graph, the greatest growth in screen time over the past 5 years has been in mobile. Desktop and traditional TV screen time have remained flat, while time spent on mobile devices has grown significantly. Given the growth in mobile usage, along with the continuing use of desktops and laptops, along with the prevalence of apps, it makes sense to consider using a code base that works across all platforms and devices, and that language is HTML5.
- There are native apps with which we’re all familiar, like Angry Birds and Uber, which are written for specific hardware programs and stored locally. They work great, but you need different versions for each operating system (Android and iOS). I want to talk about HTML5 apps, because they work across all platforms and devices. A recent research survey conducted by Vision Mobile identified the four main routes to market used for HTML5 applications, which are as follows:
- Here are some of the results from that survey, which polled more than 6,000 developers worldwide, analyzed more than 30,000 Android Play apps, evaluated 42 HTML5 frameworks and tools, and interviewed 32 top experts on HTML5 vs. native.
- Here are the features of HTML5 that make it attractive to content providers and the developers who write the code. Cross-platform code portability and low-cost development are the top benefits. Developers like to write a single code that will work everywhere, and content providers like the savings that come with not having to develop different versions for different operating system and devices.
- The HTML5 standard is still under development, so it remains a recommendation until it is finalized by the W3C consortium, which creates and maintains these standards.. You can see the latest version at the link URL provided here. Because it’s not a standard, there are differences with how HTML5 works on various browsers and operating systems. In theory, HTML5 should work across all platforms and devices, and it does, but not always in the same way. There’s also a need for more access to hardware APIs, e.g., power management and Wifi.
- Some developers consider performance as HTML5’s main problem, but most HTML5 experts disagree with this view, because performance is automatically improving with each new generation of hardware and better JavaScript compilers. The main culprit in their opinion has to do with politics, more exactly the fact that the major browser vendors are also mobile OS vendors, interested in channeling applications through their respective app stores. Google encourages native Chrome apps, Apple seems to be implementing the latest HTML5 standards but “leaves out performance related APIs, e.g. WebGL.” HTML5 for mobile will continue to grow as these issues are sorted out and overcome, and I’m confident they will be. Note that I’m giving my opinion here, but there are many in the digital content space who agree.
- This graphic shows that the APIs that developers who work with HTML5 have been calling for are still mostly in the drafting stage. Note that only the Geolcation API has been officially released for use, with vibration and battery usage in the candidate release stage. The rest are either being drafted or not being developed at all, with WiFi and power management – both viewed as critically important by developers - falling into the latter category. These roadblocks still need to be overcome, but I have no doubt that they will be, because the pressure from content providers will be strong.
- So in an earlier slide, we detailed the four main routes to market for HTML5 applications. This table indicates the APIs that would make the most difference if implemented for their respective routes to market, showing how many more apps could be implemented in HTML5 if they were available.
- The VisionMobile survey reached several conclusions and recommendations, as follows:
- So how should you prepare your content for mobile going forward? It’s time to abandon Flash, which is dead or dying. It never worked on iOS, and having to continually install updated plug-ins is awkward and annoying. HTML5 is the way to go for mobile. Native apps still have their place in the market and for certain apps are still the best choice, but you should at least consider using HTML5 to create web apps. Because they only have to be developed once, they are less costly, and they give you the option to bypass the App Store altogether. I’ll discuss a real-world example of that in an upcoming slide.
- Cassette tapes, 8-tracks, and Flash. All three of these media need a player to work, and all three media are either dead or dying. Just as CDs replaced tapes as a more efficient means of playing music, and digital files replaced CDs to do the same, HTML5 is making Flash obsolete. The HTML5 versus Flash debate has been a hot topic among Web developers for years – and even more so since Steve Jobs published his now infamous 2010 letter touting HTML5 as the future and Flash as “no longer necessary.” But whether you side with Flash or HTML5, there’s no denying that the implications of HTML5 on video and the Web are real. For online video, HTML5 offers two things Flash does not: mobile capabilities and semantic markup. The growth of mobile engagement; the rise of Interactive Video for entertainment, advertising and shopping; and HTML5’s open structure all combine to create the future of an HTML5-based Web, leaving Flash to eventually shuffle into its place in the Retired Tech Hall of Fame. Those in the advertising, shopping, and enterprise industries are also beginning to focus their attention on mobile’s importance, as well as on Flash’s limitations with online video. A recent open letter to advertisers by the Interactive Advertising Bureau – signed by several major publishers and ad firms, including Conde Nast, Forbes, Google, The New York Times, Time Inc. and the Wall Street Journal – urges marketers to implement the HTML5 standard for their mobile ads so that they can run on different platforms. The letter calls for all ads to be developed in a mobile-compatible format so that they look great on all screens. And to quote it directly, “the one open, industry-standard, universal format for building mobile-ready creative is HTML5.” According to Digital Buzz Blog, 32 percent of time spent on iOS and Android devices is spent playing games. With HTML5, developers can create games that work on all devices. Although mobile is the most obvious advantage of HTML5 over Flash, there’s a feature that lies in semantic structure that’s just as important and especially powerful for Interactive Videos based on HTML5. Web crawlers and search engines can’t see inside of Flash, which is a completely closed container.
- HTML5 makes creating accessible sites easier for two main reasons: semantics and ARIA. New HTML headings like <header>, <footer>, <nav>, <section>, <aside>, etc. allow screen readers to easily access content. With new semantic tags, screen readers can better examine the HTML document and create a better user experience. ARIA is a W3C spec that is mainly used to assign specific “roles” to elements in an HTML document – essentially creating important landmarks on the page: header, footer, navigation or article, via role attributes. Getting your media to play correctly with Flash has always been pretty much a nightmare. You had to use the <embed> and <object> tags and assign a huge list of parameters to make it work correctly. HTML5’s video and audio tags treat media as images. It’s actually that simple; but keep in mind that because old browsers don’t like HTML5, you’ll need to add a bit more code to add parameters like height, width, and autoplay. This code is much simpler than that used for Flash, however. For Doctype, <Doctype html> is all you need; nothing more, nothing less. For developers, this means no more cutting and pasting long unreadable lines of code and no more dirty head tags filled with doctype attributes. They can just type it out and go. If you are passionate about simple, elegant, easy-to-read code, then HTML5 is the format for you. It allows you to write clear and descriptive semantic code, which enables easy separation of meaning from style and content. One of the best features of HTML5 is the new local storage feature. It’s a bit of a cross between session cookies and a client-side database. It’s better than cookies because it allows for storage across multiple windows, it has better security and performance, and data will persist even after the browser is closed. Because it’s essentially a client- side database, you don’t have to worry about the user deleting cookies, and it has been adopted by all the popular browsers.
- HTML5 comes with several useful APIs like drag and drop, offline storage, browser history management, and timed media playback that allow for superior interactions. You can develop games using HTML5’s <canvas> tag. It provides a great, mobile-friendly way to develop interactive games. If your developers have built Flash games before, they’ll love building HTML5 games. Modern, popular browsers all support HTML5 (Chrome, Firefox, Safari IE9 and Opera) and the HTML5 doctype was created so that all browsers, even the really old and annoying ones like IE6, can use it. Note that although old browsers recognize the doctype, they likely can’t use all the new HTML5 tags. Fortunately, HTML5 is built to make things easier and more cross-browser friendly; so in those older IE browsers that don’t like the new tags, adding some simple Javascript will allow them to use the new elements. The adoption of mobile devices continues to grow very rapidly, as we’ve already noted. HTML5 is the most mobile ready tool for developing mobile sites and apps. With Adobe announcing the death of mobile Flash, HTML5 will be the dominant language for mobile web application development.
- HTML5 provides developers with new, meaningful ways to organize content. Using new tags such as <header>, <footer>, <article> and <section>, pages can be organized in a more relevant fashion. What this means for Search Engine Optimization (SEO) is that search engines will have contextual information about the content for indexing, making it easier to present additional relevant results based on context. This move towards a more “Semantic Web” is what many are referring to as “Web 3.0”. Harnessing new semantic technologies will help to improve a Website’s discoverability and interrelationships. HTML5 web forms have introduced new elements, input types, attributes, and other features. Many of these features have been used in interfaces for years: form validation, combo boxes, placeholder text, and the like. The difference is that where before you needed JavaScript to create these behaviors, they’re now available directly in the browser; all you need to do is set an attribute in your markup to make them available. As websites adopt the new HTML5 elements, we will see greater consistency in terms of the HTML used to code a web page on one site compared to another. This will make it easier for designers and developers to immediately understand how a web page is structured. Many new features and standards have emerged as part of HTML 5. Once these features are detected by today’s browsers, they can enhance your application. HTML5 makes it easy to build application with streamlined front-ends, drag and drop tools, discussion boards, wikis, and other useful elements. Although cookies have been used to track unique user data for years, they have serious disadvantages, with the biggest one being that all of your cookie data is added to every HTTP request header. This has a measurable impact on response time, so it’s good practice to reduce cookie size. HTML5 uses session storage and local storage in place of cookies. It’s not a permanent database, so it enables temporary storage of structured data. New HTML5 geolocation APIs make location, whether generated via GPS or other methods, directly available to any HTML5-compatible browser-based application.