With the growing need for mobile-compatible online media, we have experienced an increase in requests for HTML5 banners. The result is a series of questions we must answer for producers. Can we make this banner in HTML5? Yes. Can we make it in 40k? Not likely. Although we pride ourselves in our ability to squeeze a whole lot of high-quality content in a tiny package with regards to Flash, the available technology for HTML5 development is simply not at the same level. Consequently, specifications set by publishers for Flash units cannot and should not be applied to HTML5 units as well.
In July of 2013, the IAB Ad Operations Council and Mobile Marketing Center of Excellence released a publication titled HTML5 for Digital Advertising that addresses the technical hurdles of HTML5 units, and attempts to provide a set of guidelines for designing and developing them. As the IAB points out, HTML5-formatted ads rely heavily on code rather than visual platforms like Flash, and as a result increases operational overhead. In addition, a lack of a common HTML5 framework across publishers and ad developers magnifies these costs (IAB, 5).
It is our goal to provide our clients with the biggest bang for their buck, and so we are dedicated to finding the best methods for developing and delivering all our ad units. With the current deficit of testing data regarding HTML5 banner creation, we took it upon ourselves to research many of the prevalent platforms for building HTML5 ads. Our study involved the design and creation of a simple banner using six methods of development, looking closely at metrics such as build time, device compatibility, file size, and the complexity of each platform. We selected platforms that vary greatly in process to obtain a well-rounded understanding of HTML5 capabilities.
Flash Baseline & Optimized
As a first step in our study, we created a banner in Flash using timeline animations to serve as our base for comparison. The banner isn’t particularly complex, but utilized some Flash technologies that are currently unavailable via HTML5 such as blend modes and vector masks. These enabled us to save a significant amount of file size by using an overlay JPG for the orb lighting/reflection with a vector-based color fill. For all the HTML5 units, we had to bake the orb details into a PNG instead.
To further our analysis, we then recreated the banner, still in Flash, but using the GreenSock Animation Platform (GSAP) for code-driven animations. This optimized version reduced the file size by 24%, and also provided us with some animation data that could be re-purposed in one of our HTML5 tests.
HTML5 Trial 1: CreateJS
HTML5 Trial 2: GreenSock Animation Platform
HTML5 Trial 3: Adobe Edge Animate
Our third test took a stab at Adobe Edge Animate: a part of Adobe’s Creative Cloud that brings a familiar user interface to web animation. Edge allows developers to create animated web content without code in a similar manner to Flash timeline.
We found animating in Edge to be slightly more robust than Flash. In particular, each animatable property recieves its own timeline (similar to Premiere & After Effects). This allows for more complex easing combinations as well as easier fine-tuning of animation timing. Many of the naming conventions and aspects of the UI paralleled Flash well, so we were able to familiarize ourselves with the interface quickly.
HTML5 Trial 4: CSS3 Animations
The results were acceptable, and likely most pleasing to a publisher, but also the most difficult to complete. Development took twice as long as our base unit, and the overall quality of the animation fell short of all the other trials. As animation complexity increased, the style script grew exponentially, and it was a nuisance to maintain identical sets of -webkit and standard keyframes. The overall size of the code (js, css, html) was twice that of the GSAP version (sans API), and for creatives that push the envelope animation-wise, that size could easily overtake that of APIs like GSAP.
||Code & Tweens
*CreateJS requires the unit to first be built in Flash as a timeline-animated banner, which is included in the development timing.
Interactive Advertising Bureau. (2013, July 15). HTML5 for digital advertising. Retrieved from http://www.iab.net/media/file/HTML5DAv101.pdf.