Banner development using pure HTML/CSS and Animate CC

The purpose of this post is to see which method, from my professional experience, is currently best for designing and developing standard banner ads. I will be comparing these megabanners – one uses pure CSS/HTML and GreenSock’s incredible javascript animation library; the other banner uses Animate CC with Greensock.

Let’s go back a few months, after Flash was disabled in Google Chrome with other browsers following suit ad developers needed to look for new methods for creating banner ads. Let’s face it, it was a bit of a nightmare with banner development now taking twice as long and amends not simply a question of amending text and republishing. Now you had to amend the Photoshop file swap out images and text and upload.

I started using Adobe Edge Animate which as far as I was concerned provided a pretty decent solution. The timeline was pretty intuitive, a huge improvement on Flash’s timeline and although the code was a little quirky it didn’t take too long to get your head around it. But there were a couple of problems – including external javascript would sometimes need to be modified to get it to work natively within Edge Animate. Routine tasks like adding a YouTube player were simple but anything more complex then you might be better to create the code from scratch. Furthermore, Edge Animate creates a load of extra javascript which totals approximately 100kb and will add to the banners total file fize. So if you ever want to create banners under 150kb you better find an alternative method because this will be impossible once you have added a backup jpeg and other image assets. Creating banners for the Google Display Network became almost impossible with Edge Animate. But it wasn’t all doom and gloom and I managed to create some pretty nice looking banners for a range of high profile clients for which here are some examples:

Edge Animate Example 1
Edge Animate Example 2

After using Edge Animate for a few months my go to method for creating banners changed when Adobe dropped its support for the product and subsequently replaced it with Animate CC which is effectively a renamed version of Flash exporting to WebGL and HTML5 Canvas.

Frankly, it was too early to start using Animate CC, our ad serving platform Sizmek wasn’t supporting it yet so we looked at a method of banner development using pure HTML/CSS and javascript and building banners from scratch. God, what a headache I thought, we had to write the HTML, then the CSS and get everything to animate using Greensock. But you know after a few weeks I started to get to really like this new workflow. Our developers liked it too because it meant you could pass on the project files and everyone could work with the code. I mean, have you ever tried amending Edge Animate code if you have no familiarity with the program?! It’s a complete nightmare. So, in this respect our developers gave this new workflow the thumbs up. Building a set of banners is also much quicker and amends are a breeze. I mean the first banner will always take a bit of time but after this template is built you only have to make size amends to the banner and structural modifications. You could also use Javascript code to build video players and photo galleries and text scrollers so prewritten code was at your disposal to use as you please. This not being the case with Edge Animate.

Here are some examples of pure HTML/CSS banner examples:

Pure HTML/CSS Example 1
Pure HTML/CSS Example 2
Pure HTML/CSS Example 3

At this time circa March 2016, Adobe was now pushing Animate CC big time and even set up a blog to support their new application.It’s around this time too that I’m looking at it to provide a better solution to my banner development workflows. So, how does it fare?

Well, scoping in Animate CC is a bit of a bother and forget about importing videos right now like you could with Flash because you can’t. There is however, a work around which you can adopt until Adobe provides us with better tools to do the job. Looking at the file size of the resulting project files the pure HTML/CSS approach is 30kb lighter when the project files are compressed. This might not sound like much but can be quite depressing when you have to account for every last kb. In terms of speed in putting the banners together, the Greensock code, is virtually identical you just have to be mindful in adding ‘this’ to prefix your variable, function and object names – ‘this’ being the timeline where your objects are displaying. The publish settings area is where most of the time saving tricks can be found which you cannot really do with the pure HTML/CSS approach. Here you can create templates which are ready to go for the Sizmek or Double Click platforms or create profiles based upon templates and a variety of other settings. If you have a really complex animation using masks you might like to use Animate CC it will speed up your workflow but for anything less complicated I feel you are better off using the create from scratch approach where you have much more control over the resulting file size and code output.  Animate CC will also speed up text amends that you might be faced with because it will outline static text for you upon publish – something which you can’t do currently with the pure HTML/CSS approach – any text amends which do not use web safe fonts mean updating the Photoshop file reexporting the text and uploading to the server.

Like with Edge Animate using external javascript files to create galleries and text scrollers is also a problem and will mean creating these modules from scratch or accessing javascript files by calling functions from the root timeline in Animate CC, which looks like being a ball ache.

Animate CC publishes to WebGL and Canvas so in terms of browser support it is limited to the most modern browsers. With pure HTML/CSS you have the most widespread browser support available.

To conclude, I am eagerly looking to see where Animate CC will take banner development in the future. I am sure that in the next 6 months it will be the ‘go to program’ for banner builds but in the meantime I’m sticking to developing banners from scratch.


Got something to say?

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

Some html is okay