How to quickly create effective banner ads in HTML5 and have fun at the same time? It’s not easy, but luckily I know a few ways that will change your approach to work (and maybe also to life, who knows).


Piotr Bielecki

Big hothead of banners, banner animations and interactions. He loves to explore it’s new usage. Founder of Trzask. Master animator, certified RichMedia programmer, general director of production. 15 years experienced for banner realizations for big brands (Microsoft, Sony, Toyota, Visa, Ikea, Nestle and other).


Internet advertising has been close to my heart for over 10 years. I have always been intrigued by these small forms of advertising and the great opportunities that Flash provided not so long ago, which currently are being provided by HTML5. For many years, during the realization of animations for experienced creative directors, demanding accounts, and for many large brands, I learned a lot of techniques that allow me to act effectively and save time. I decided to share with you a list of rules that are worth following.



Get inspired whenever you can

Creativity does not arise by itself. Get inspired by others, follow the news on the market, take a moment to awaken internal expression. It really helps when carrying out creative projects. Remember that you inspire not only yourself, but at the same time you create a positive aura that is enjoyed by others.

There are many different places that will provide you with this boost of energy – from social media channels of companies that deal with internet advertising, to well-organized websites with contests and catalogs of inspirational ads from large advertising platforms. It is worth following the actions of brands such as: Biborg (Paris), Joystick Interactive (New York), Appetite Creative (Madrid), and BannerBoy (Amsterdam). The catalogs of best implementations on platforms: Richmedia Gallery Doubleclick, Sizmek Showcase, Adform Showroom, and Facebook Inspiration Gallery also develop great imagination. There are a lot of ads that have just recently gone out and can inspire you to do something unusual. Sorting filters will help you find the right group of brands or specific functionalities. These places have helped me to develop effective projects more than once or twice.



Higher file culture

The order of work is extremely important. Starting from the culture of naming files and folders in which you work, to a properly prepared production plan. When you have order, you work faster and know where the right data is waiting for you.

Yes, I mean mediaplans – they are always in a mess. Take a moment to analyze them and translate them into your work plan. Remember to find the main advertisement’s weight, it will help you later to adjust to all required specifications. If you feel that one of the publishers is less known to you, call him or her and talk to them. Or search for the right specifications on the web. It will only take you a moment, so you will gain time, and you won’t have to bother the project coordinator. Oh, and of course I won’t mention the fonts – they just have to be the key ones ?


Do research

Imagine the following situation:

You create the main advertising format for a customer who sells premium cars. Your ideas are great, the brand seems to have a modern approach. You offer great possibilities and create a driving-in animation where the car’s wheels perfectly reflect those visible in the real TV commercial. You are proud of yourself. And what is the customer’s opinion? “We don’t like it.”

Well, maybe you missed something? The first principle of ad design is to exactly recognize the brand. Check the files that the client sent at the beginning, look at their previous campaign, see what they like and how the call to action button is animated in the ads.

Indeed, even such little things are important. You should also do the research on your own. You’ve got YouTube, where you will find TV spots, you’ve also got Google and Ads of the World, where you will find Key Visuals from recent years. Additionally, you have the ad catalogs mentioned above, from which you can learn how a particular brand advertised itself not only in Europe but also in America. You will benefit greatly from the frequently updated Moat database, where you’ll see how others are doing it for the same brand.



Remember – it is not obvious that an advertisement should ideally animate. In the above described case, the customer did not care about the car wheel animation. He claimed that thanks to the reduction of expression, his target group would better see the car’s offer.

It is well known that everyone has a different approach to work and so, it’s worth talking about it. Ask the client about their requirements, what they like and what is important for them? You should also get to know how many amendments there were in the last project and what the key message of the campaign was. Furthermore, you should know what the previous campaign looked like. All of the above will give you a large boost of useful knowledge, which can later be more easily translated into a properly implemented project.


Always take care of your time

If you deal with time professionally, then you know that your time is precious. But you also know that projects like to overlap at the least expected moments due to the usual delays related to acceptance. It’s normal, don’t worry about it but you’d better find a way to deal with it. Create procedures that will make your day easier. Write them down and start implementing them. Think prospectively, but also make sure that you’ve got support during the implementation in case time runs out.

Think what would happen if you were creating ads in such a manner, that reformatting them later into subsequent sizes would be 10 times faster? Impossible? Possible! It’s enough to plan it well. Write down the rules and follow the steps in the selected operations schedule, not forgetting about updating it. It is especially important to respond to errors on an ongoing basis, because the most valuable knowledge stems from them. It works, and to be fair and square, it works great.


Specification is not your enemy

It sounds like fun, but when talking with our industry partners we often laugh at the absurdities that can be found in the specifications. From non-updated entries in which Flash still appears, to requirements that demand counting animation component files. Madness.

How do you find yourself in all this? In my opinion, the initial recognition during which you make a decision on your production plan will allow you to find the time for additional questions or identify the area in the network. When you’re involved in the implementation, it is possible that there are arrangements that will help you to embed the specifications in your ads.



A great trick when nobody is able to provide you with specifications or when you just want to know in advance, is to check out ads on the publisher’s site. HTML5 gives us the ability to see through the ad that appeared on the site. The information you find in this ad will tell you how to connect more ads without having to look at the specification. This method always works. Unfortunately, there is one condition concerning ads made by large sales platforms such as Google GDN, Doubleclick, Sizmek, Adform and many more. If you know their specification, you are able to distinguish them from the key one and implement it well.


Summarize your work

You implement a huge plan in which you have a lot of publishers and related requirements. Take care of the structure of directories and proper naming, so that publishers can easily find materials that are intended for them.

If you have unusual formats, create their visualizations. Often, publishers do not know the campaign plan and do not know how to install the ad on a given page. This is especially true for ads covering the entire site or for the more advanced ones like Canvas on Facebook. In their case, the publishers need to know the order of the modules. If you have done something exceeding the plan, explain the reason for more files. Make the other party aware – this will allow them to understand the situation faster and reduce the time for unnecessary e-mails.

I could provide you with a lot of similar advice, but everyone has their way to achieve perfect implementation. For me, the implementation process is always important – I prepare it so that it is optimal and based on the knowledge from previous projects. Thanks to my cooperation with the best, I have collected some very good highly valuable feedback. But I’m still looking for places where I could optimize processes. This not only improves well-being, but significantly increases productivity, all of which translates into revenue.

If you have a different approach, I will be more than happy to find out how others deal with it. In our field, things can be done in many ways – the internet and our creativity is unlimited.


Author /
Big hothead of banners, banner animations and interactions. He loves to explore it’s new usage.
Founder of Trzask. Master animator, certified RichMedia programmer, general director of production. 15 years experienced for banner realizations for big brands (Microsoft, Sony, Toyota, Visa, Ikea, Nestle and other).


Leave a reply

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

Reload Image