Building an HTML5 ad from scratch doesn't have to be a nightmare!

“Can you design some ads for us?”

“Of course!”

“Once they’re designed, make them with HTML5 please.”

And then it landed on my desk. I’ve been programming since the late 90s, and I’ve watched the web evolve from shoddy hacked together nonsense to sophisticated hacked together nonsense. Throughout my career I’ve built everything from websites, to mobile apps, to multi-million dollar enterprise level software… but I’ve never programmed an ad. In fact, it had been at least five years since I had even seen an ad online, thanks to adblock plugins. I needed to do research.

It turns out that the online advertising world is churning a bit. Flash is dead and everybody knows it, but there are entire companies built on producing Flash ads. Those companies are desperately scrambling to turn their employees who are sophisticated at using Adobe’s tools into employees who are sophisticated at building HTML5 ads. Which means that right now, when you search for help developing ads, you get a LOT of products and advice geared towards people who are not familiar with web development. It’s an incredibly weird mish-mash of advice, musings, and thoughts that give almost zero practical advice that a traditional programmer can use.

Here are the important bits that I gleaned over the course of about three weeks of trying to figure out what the hell is going on.

The Interactive Advertising Bureau (IAB) seems to be the smartest guys in the room. Their HTML5 Guidelines draft was incredibly helpful. Read it. Check to see if there’s a newer version first. Browser compatibility is just as big of a pain with ads as it ever was with building websites. Take all the lessons you’ve learned from that and use them when you make an ad. Research your ad network before you create your ad. They’re all different and they all have different rules for how your HTML5 ads can work. For example, some of them require you to include ALL of your assets (including JS, fonts, and images) and you can’t link to any CDNs. You’re going to create a lot of versions of your ad. There’s almost zero chance that your one size will work on every site the ad is served to. The relatively “standard” sizes that I used were 300x250px, 300x50px, 320x50px, 320x480px, 728x90px, and 160x600px.

Eventually I felt comfortable enough with the landscape to actually start building something. Our ad network required ad file sizes to be under 100kb. That is to say, after zipping all of the files together, that zip file must be under 100kb. It also required us to refrain from using any third party resources which means all javascript, assets, etc had to be in that zip. When you look for javascript libraries to help you with animation and motion you come across a few choices.

jQuery - latest compressed version balloons your zip by 35kb. No good.

GreenSock - latest compressed version balloons your zip by 115kb. Ridiculous.

That’s, uh… that’s it. Not even the IAB wiki could come up with anything else.

The ad A3 designed ended up looking something like this (may not appear if adblock is enabled):



To make it work, I ended up using the extremely lightweight Tween library which weighs in at a mere 6kb uncompressed. Then I wrote a simple javascript library that let me break my javascript into scenes. Scene one loads the logo, scene two bounces in the copy, scene three brings in the call to action, scene four hides everything, and then it (for this blog only) loops. Watch out, most networks don’t allow infinite looping!

If you need to make a “simple” HTML5 ad, you are welcome to use the library I built or at the very least see the basic example in the repo. Good luck, and I hope your ads don’t give you as much of a headache as they gave me!