Over the past few weeks we have explored some of the exciting opportunities but also limitations of being creative in a programmatic world. The potential for delivering a perfect ad is there. Who knows what the future really holds? But today I want to get real and look at actually making an ad. Specifically an animated banner ad.
In the past, there was really only one option, Adobe Flash. If you ever wanted to do anything more advanced than a static image, or animated GIF, then Flash was where you went. Today, HTML5 is the default and things aren’t so simple.
One of the greatest benefits of HTML5 is that it is totally open and uses web standards of HTML, JS and CSS. Each HTML5 banner ad is essentially a little self-contained webpage. As such it can be authored in any way that you would make a standard web page. This naturally brings a lot of benefits, but also challenges. There are so many options for creating HTML that it can become overwhelming to know the best way to do it.
The Construct of an HTML5 ad
Before getting into some of the options for producing an ad, it is worth explaining exactly what goes into making one. From a tech POV there are four main elements: HTML, CSS, Java Script and Images.
Typically named index.html — this is the core structure for the ad. This is the file that is initially loaded and all other components are pulled into this file. Learn more here.
Cascading Style Sheets are the rules that are applied to the HTML content to give it its look and feel or ‘style’. Everything from font size, family, weight, color, positioning, line height through to page positioning, image placement and all other visual rules are defined by the CSS file. Learn more here.
- Java Script
The interactive functionality and animation of elements is typically handled by the JS file. Typically, the content of the HTML and the styles of the CSS can be controlled and manipulated by the JS file. (I say typically as JS can inject content, and CSS can also handle some animation). JS is really the code that makes the ads do something more than just be a static page layout. Learn more here.
While you can achieve a lot with just code in HTML, CSS and JS, more often than not you do require some kind of image in your ad. Typically a JPG, GIF or PNG. A lot of what makes building ads hard is file size requirements and limitations, most of which comes from images. The IAB has standards that ad servers adhere to, so always worth checking what the latest is, but as a rule of thumb it needs to be under 200kb. For photography, and images with gradients or a lot of colors, I use JPG. For anything with just a few colors, use GIF and if you need the image to have transparency, then you have to use a PNG. Learn more here.
So, that covers the technical building blocks. But when it comes to making a good ad, you also need the ad to work creatively. At a minimum, this includes a well-written headline, compelling supporting imagery and a strong CTA (Call to action). An ad creator won’t always have control over all components, but as stated in previous posts, the importance of having the creative as part of the discussion as early as possible is paramount to the campaign’s success.
Great, now we know what we need. What do we use to put it together? I see three main options for the production:
- Free software
You can make HTML5 ads in a text editor, but honestly that would be silly. If you want to make an ad, you can get started with Google’s free Web Designer Software. It is an open Beta project and offers users a familiar interface to generate the required code. It is built very much with Google’s own products in mind, as most of the widgets and options are designed for use with their own ad tech. But you can produce pretty sophisticated HTML5 ads, and export them for use on any ad server.
- Paid software
As you may have read, I am a self-confessed Flash lover. So, if you spent a lot of time with Flash and wish to continue, then Adobe Animate is available. You will of course need a subscription to Adobe Creative Cloud, but Adobe Animate brings the well-established and powerful Flash authoring environment to modern standards, allowing you to build very sophisticated ads and export to HTML5.
- Ad Platforms
If you are making lots of ads consistently, then ad platforms offer huge benefits to designers. There are a number of ad platforms available, but essentially all offer the ability to streamline the process of building ads, especially when it comes to making variations of sizes and messages. This leads onto DCO, which you really have to use a platform for to offer any kind of sophistication. At MediaMath we use SpongeCell and its self-service platform allows for easy creation of ads, multiple variations and additional functionality to all be built in the platform. To get access to these advanced tools there is of course a cost, and often they have associated ad-serving fees, but when you need to support a campaign with a dozen different variations in a dozen different sizes, then this cost quickly becomes irrelevant!
In part two of Let’s Make an Ad, I will do a screen capture of making a simple, animated HTML5 ad in Google Web Designer. This will hopefully show people unfamiliar with the process what it actually takes to make an ad!