HTML5 Ads and Web Fonts

Greetings! I thought I’d start my first blog post here at Monotype Imaging with one that shares a unique and exciting opportunity for Web fonts and HTML. It’s a bit of a read, but I wanted to provide some initial background for those who may not be as familiar with HTML before getting to the subject matter.

But before I begin, a quick introduction of myself – I’m the new guy, Alan Tam. I’ve just joined Monotype Imaging as the Director of Product Marketing for Fonts.com Web Fonts. Most recently, I led the product marketing efforts at Adobe where I managed and drove the strategic marketing and launch efforts around Flash® Lite, Flash Player and Adobe AIR® technology for mobile phones, tablets, TVs and other consumer electronic devices.

During my tenure at Adobe, and especially working on the Flash platform team, it was impossible not to be involved and excited with the ongoing debates of Flash and HTML5. However, being in the center of it all gave me a broad perspective and enabled me to fully understand the discussions. It’s important to first understand that the issue is not Flash vs. HTML5, but rather Flash AND HTML5. In fact, Flash has always co-existed with HTML – Flash may not have existed without HTML. Flash has always enabled developers to deliver richer, more engaging experiences on top of HTML. Flash is NOT an HTML5 replacement and HTML5 is NOT a Flash replacement. The introduction of HTML5 is a validation that Flash has delivered the right level of capabilities to evolve the Web all along.

Some of the new elements introduced in HTML5 such as video, audio, offline and canvas support have all been available in Flash technologies for a number of years, but it also includes some capabilities that are not available in Flash as well. With HTML5, the standards are being raised and new capabilities are being introduced that will continue to drive further innovation on of technologies built on top of it like Flash. Flash and HTML will continue to co-exist and developers looking to deliver premium experiences above and beyond what HTML offers will do so with proprietary technologies. It is also important to understand that the HTML5 specification is still in a working draft and has not been ratified by the W3C at the time of this blog post (you can learn more about the current state of the HTML5 specification here: (http://www.w3.org/TR/html5/).

Not only does HTML5 open a whole new spectrum of use cases and application for development across platforms and devices, but it also has garnered tremendous industry support from leading technology , platform and tool providers including Google, Microsoft, Yahoo, Apple and Adobe. HTML5 offers opportunities for developers to explore existing and new applications and use cases using new methodologies and techniques to deliver functionality that was not previously possible with HTML. This is extremely exciting because of the potentially broad reach of HTML5, which includes platforms that do not support Flash today, such as Apple’s iOS® platform.

One potential HTML5 application that I’d like to explore today is digital advertising. Specifically, I’d like to discuss how Web fonts can allow advertisers to create ads that deliver more engaging experiences for a broader audience that spans across multi-screen environments. Some key advantages of using HTML and Web Fonts for digital ads include:

• More expressive typography. With a virtually unlimited palette of typefaces to choose from, advertisers can pick designs that support the message of their ad.
• Brand unity: Organizations can keep their communication “on-brand” by implementing their corporate or branded fonts they use in other forms of visual communication.
• Scalable text is a requirement for location or personalized based ads (unpredictable text) when combined with a branding mandate for a specific font.
• Search engine friendly ads. Though Flash has made some progress with SEO text and video, these changes remain still in their infancy and have limited support today.
• Support on iOS apps and devices.
• Broader set of authoring tools available.
• HTML5 ads can not be “turned off” by removing the Flash Player plug-in.

We decided to try it out for ourselves and created an experimental HTML5 ad to be deployed on Google’s Ad Network. We took the following approach:

• Created a Flash-based ad with a simple animation through Google Display Ad Builder utility;
• Recreated the ad in HTML as close as possible using a combination of HTML, CSS and our Fonts.com Web Fonts service with the Futura® and Gill Sans® typefaces. Fonts were loaded through Google’s WebFont Loader.

Take a look at the two ads we experimented with here:

(The HTML5 ad is on the left and the Flash ad is on the right. You can view the interactive versions here: http://wfp.devbridge.com/html5/ – the above images are viewed through the Google Chrome™ browser ver. 12.0.742.112. Since HTML5 has not passed ratification with the W3C, this sample ad will vary in appearance depending on which browser you choose to view them with.)

Here are the key findings from this experiment:

• While we are able to replicate some aspects of the original Flash-based ad, neither the appearance nor the animations of the HTML ad are a one-to-one match.
• The ad actually relies more heavily on CSS3, than it does HTML.
• Gradients and animations are triggered via CSS3 and usable in HTML5, XHTML or even HTML4.
• HTML5 and CSS do offer some advanced and unique capabilities for advertisers. For instance, ads built with HTML5, CSS and Web fonts keep ads light, scalable, machine-readable and compatible for mobile platforms. HTML5 and CSS also address specific use cases such as zooming and predictive text input for dynamic ads.
• We are reminded that HTML5 is inconsistently implemented across browsers today as it has not passed final ratification with the W3C. In fact, analysts like Gartner Group projects that the complete rollout of HTML5 across browsers will not be achieved until 2022 (http://www.scribd.com/doc/56875409/Gartner-html5-and-the-Future-of-Adobe-Flash).
• HTML5 is not a complete replacement for Flash. Flash is dominant and pervasive for ads and other branding elements because of its richness and consistency across a matrix of operating systems and browsers. HTML5 cannot ensure this level of consistency yet. Furthermore, there are Flash capabilities that can’t yet be replicated in CSS and HTML5. For example, it is not possible to replace all the Flash-based Ad Builder templates with HTML5-based templates.

Although we are in the early stages, HTML5 ads are already being developed and deployed. We are submersing ourselves into HTML5 because we see Web fonts and, our broad collection of widely-used typefaces, in particular as supporting technology that will help HTML5 advertising take off (our existing Web fonts EULA on Fonts.com includes supports HTML5 display ads today).

I’d love to hear what you are doing with HTML5 and Web fonts. Are you working on ads? What are some of the other use cases and applications you see fitting for HTML5 and Web fonts?