Using HTML5 to Deliver and Monetize Your Mobile Content

Editor's Notes

• #7: 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.
• #8: 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.
• #9: 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.
• #10: 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.
• #11: 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.
• #12: 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:
• #13: 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.
• #14: 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.
• #15: 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.
• #16: 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.
• #17: 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.
• #18: 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.
• #19: The VisionMobile survey reached several conclusions and recommendations, as follows:
• #20: 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.
• #21: 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.
• #25: 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.
• #26: 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.
• #27: 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.