David Edeburn reviews critical strengths and weaknesses of various technologies to build HTML5 Banner Ads.

So continuing our discussion about the many tools, libraries and languages available to build HTML5 ads, David Edeburn will now provide you with a breakdown of their strengths and weaknesses and to give you examples of when to use them.

Option 1: handcode everything, you’re a crack coder you can add all the tracking and analytics and connect to all of the major trafficking API’s but you still have to decide do I animate in CSS, Javascript, both? Should I use CSS libraries?  Should I use createJS, TweenLite, TweenMax?

Strengths: When you need to create banner ads at a very small file size hand-coding is really your only option.  It also is required if you want to create really unique ads for rich media such as creatives that take advantage of video with alpha transparency, really cool high level interactive media, or animations that involve physics sine waves or other complex math.

Weaknesses: The biggest drawback for animators is that the learning curve is incredibly steep.  You will need a solid understanding of at least three languages, be proficient enough to  connect to various trafficking API’s (like doubleclick, sizemek, pointroll, flash talking, conversant, addroid etc.), add the event tracking, be able to animate / code for all of the major browsers  (chrome, firefox, safari, opera, IE).  You’ll need to head over to CanIUse.com to confirm that the browsers are all compatible with what you’re trying to do.

The other major weakness with coding a banner is the difficulty with creating complex nested animations. A sophisticated walk cycle or complex logo or product animation that involves dozens or even hundreds of nested symbols and shapes to create the truly exquisite and unique ads that wow users.

Option 2: Convert Flash to HTML5 with Google SWIFFY

Strengths: It’s fast and you won’t have to code in HTML5.  It handles complex animations pretty well.

Weaknesses: It’s bloated, the file size that it spits out is usually triple that of the flash file you converted PLUS the user has to download a 120kb file from Google to play the ad.  You can’t edit the code. It’s extremely buggy and unpredictable. Which leads me back to ‘you can’t edit the code.’ So if it turns out buggy you can’t fix it.  It’s not supported by several of the major traffickers and when I inquired, DoubleClick recommended to me that I don’t use it.

Option 3: Adobe Flash CC 2015’s new Canvas environment.

Strengths: You get to keep using Flash, the best tool on the market for creating complex timeline based animations that are visually impressive. Uses the canvas environment which is supported by the major browsers.  Is less of the resource hog than it’s .swf output and it works well on mobile.

Weaknesses: File size is bigger than hand-coding.  Editing the canvas output is challenging.  You have to code in Javascript inside the flash environment and there is a serious lack of documentation right now for how to manage complex user interactions.

 Option 4: Use Adobe Edge Animate CC 2015 to create your ads.

 Strengths: It’s got built in templates that will connect to the DoubleClick api for rich media ads. There’s a decent amount of online tutorials and support for the product.

Weakenesses: Animating complex and beautiful creatives will be an extreme challenge. It’s clunky compared to flash. I’ve been working with it since it was in beta and it’s gotten MUCH BETTER but still has a long way to go before it is as effective an animation tool as flash.

Option 5: Use Google Web Designer

Strengths: It’s got built in templates that will connect to the DoubleClick api for rich media ads. There’s a decent amount of online tutorials and support for the product.  The templates can also be used for non-doubleclick rich media ads. A lot of it is drag and drop and fairly quick to set up.  It auto generates tags for DoubleClick which is awesome!

Weakenesses:  Animating in it is impossible. I’d be very surprised to see any sophisticated animations coming out of the tool. There’s some serious bugs with it as well I’ve lost work and had to start over a couple of times while building ads with it.  It’s been in Beta for two years.  I believe an update is coming this fall so hopefully there will be some big improvements then.

It’s worth noting that not all code libraries are supported and not all code and tags are supported by all browsers. I’ll give you two examples: As of my last conversation with DoubleClick (7/27/15) they will not allow the use of JQuery and as of this time many older browsers don’t support the @keyframes and transitions: CSS3 animation functionality. So it becomes imperative to identify what browsers you need to support based on the media buy for the campaign creative. It will save you a ton of time and money if you get all the specs upfront and build the ads from the ground up with the correct languages and libraries rather than finding out your ads have to run on IE 8 and trying to rip them apart and rebuild or retrofit your HTML5 banner ads.

 

Learn more about how to build html5 ads for mobile by Dave Edeburn.