Creating Animated HTML5 Banner for Google Adwords with Using GSAP

A while ago, Google provided advertisers with opportunity to place HTML banners in its Adwords network. Despite the rather serious technical limitations and requirements, such banners look much more attractive than classic GIF banners.

Here, you can see a banner I created for demonstration (you can’t see it with AdBlock).

The weight of HTML5 banners is their main limitation: the developer must fit all the resources into an archive file with a maximum size of 150Kb. In addition to the .htm document, it may include images, styles and JSs as well.

However, there is good news here: you can connect Google Fonts and JS-libraries hosted on Google servers to the document, and these resources will not be counted in the size of the archive file. You can connect old faithful jQuery, but libraries for animations, such as Greensock (GSAP) and CreateJS, are the most interesting here. You can find links to the libraries here.

The HTML5 banners popularity is gradually growing every day. Very similar banners can be made not only for other advertising platforms. Currently, many masters create such banners in visual editors; however, visual editors do not always allow to fit the 150Kb limit and implement all the visual effects designed.

I like a code and I like to control animations, so I want to build a simple and nice animated banner in such a way I build websites: in a text editing program. For this purpose, I choose Greensock.

There will be no code fragments here, since everything is very simple and all the code can be seen on the banner page.

Particularities of Developing an Animated HTML5 Banner on GSAP for the Google Adwords Network

I’ll not describe in detail the progress of development, as everything is classic here. I’ll just show the main features.

1. First of all, we create .htm and mark up the document in accordance with Google’s technical requirements. It is necessary to specify the document encoding, its size, external files and a link through JS.

2. Styles and scripts can be connected as separate files.

3. You will probably need to use SVG in the banner, but such graphics should be connected as separate files; otherwise, the banner will not pass validation.

4. And now, the most interesting part: the implementation of the designer’s fantasy in the code. Here, you should combine the skills in CSS with the capabilities provided by Greensock. The basic features are well shown on the Get started page; you can find a lot of interesting things in the documentation as well. I note I used namely basic features of Greensock as an example.

5. The ready-made banner should be packaged in .zip and sent for validation. I did not have any mistakes on the first attempt, so I consider the task to be completed.

Sometimes, I see orders for HTML5-banners on Upwork, but I still have not responded to them. Maybe I will do it next time to get experience with such orders.

For the purpose to test the demand for such banners, I created a GIG on Fiverr. By the way, it turned out that currently, only I represent the Greensock technology on this site, the GSAP request also belongs only to me now.

There is a big document with recommendations for HTML5-banners for those who wants to create them.

Leave a Reply