The many tools available to build HTML5 Display Ads in…decisions decisions…

I assume by now you know that Adobe Flash swf banners will be paused by default everywhere in the world come September 1st.  We got a small taste of it in July when firefox blocked ALL Flash ads on their browsers for 2 days without warning any advertisers.  Billions of ads were blocked in an instant and clients lost a fortune in media purchases to dead ads. Worse than dead ads actually, when they blocked the ads it looked scary like you were going to get a virus on your machine if you clicked on it with a BIG FAT red warning button that said DANGER flash player has been compromised by a severe security breach!

Well the advertising community weathered that storm and now we’re preparing for the next more permanent one.  No more flash in advertising.

So, what are advertisers to do?

Well there are a ton of options, I’m only going to gloss over them today, but I will be reviewing them in greater detail so that you can get a good idea of the benefits and pitfalls of them all and believe me there are challenges with all of 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? So many choices 🙂

Option 2: Be stubborn and continue to build swf ads in Flash and convert them with the handy dandy Google Swiffy conversion tool which will spit out an html5 ad.

Option 3: Be less stubborn and use Adobe Flash CC 2015’s new handy dandy Canvas environment. No more actionscript ladies and gentlemen. You have to code in Javascript.

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

Option 5: Use Google Web Designer

Option 6: Use something like Sencha Animator a CSS animation tool which I kinda liked but it looks like Sencha has dropped support for!  Why, why did they choose NOW to drop support for it when our industry is finally moving into CSS/JS animating?!

Option 7: Use Tumult’s Hype CSS animation tool, and hand code the rest, or perhaps integrate it with one of the other tools (spoilers!).

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.

Ok that’s it for now, tune in next week for a more detailed overview of your options in HTML5 animation land!

One Comment

  1. Adobe’s suite of designer and developer products includes tools for creating animations, responsive layouts, hand-coding, mobile device previews, web fonts, and hybrid app building.

Leave a Reply

Your email address will not be published. Required fields are marked *