3 Mistakes to Avoid When Building HTML5 Banners

Banner advertising is currently on the rise. The total spending on banner ads worldwide is expected to reach over $72 million by 2024. This number shows that businesses believe in the power of this promotion method, as it brings them the value they expect.

That said, if we take a look at the average display advertising clickthrough rates (CTR) in the first quarter of 2020, they don’t impress, showing a downward trend in comparison with 2019. One of the reasons why that might be happening is that advertisers ignore essential design guidelines or try to save money by ordering the least expensive types of banners.

David Ogilvy, a British advertising tycoon, once said, “What really decides consumers to buy or not to buy is the content of your advertising, not its form.” However, in the age of the Internet, the type of ad can be just as important as its content. While static ads have their merits, it’s animated banners that contribute to the maximum engagement of the target audience.

We’ve already highlighted the benefits of animated HTML5 banners for businesses in a previous blog post. Today, we would like to talk about 3 mistakes to avoid when building animated banners. Hopefully, this information will help you achieve higher CTRs.

Mistake #1: Messing Up with Colors

Colors are a truly powerful weapon in a graphic designer’s arsenal since they have a direct psychological effect on the audience. Choosing the right colors is important for any type of ad. However, it is absolutely crucial for animated ads owing to their movement and dynamicity.

Misusing colors may negatively impact the outcome of an advertising campaign. A bizarre combination of colors that change in a quick succession invokes only one desire: to close the web page immediately, let alone click the banner.

There is a whole color theory that every professional graphic or web designer must know like the alphabet. Apart from purely aesthetic aspects, you should also consider what emotions a color or color combination normally generates in humans. In addition, you should ensure that your brand colors and/or logo perfectly fit into the overall animated banner design.

Mistake #2: Messing Up with Fonts: Number, Size, Consistency

Choosing the right font and, just as importantly, using the right number of fonts consistently, is another thing that can contribute to higher effectiveness of an ad. As an animated HTML5 banner includes several frames that change successively, it’s important to make sure the same typefaces are used across all of those frames. Otherwise, visitors will have a hard time concentrating on your business message and especially on your call to action.

Text should be easy to read regardless of animation effects and transition times. Make the font size large enough for consumers’ eyes to make out. There should also be a sufficient contrast between words and the background. Keep your brand style in mind as well.

While there are no hard and fast rules as to which or how many typefaces to use in a banner, following the basic principles always pays off.

Mistake #3: Miscalculating How Long a Banner Runs

Picking the right runtime for an animated banner is yet another important factor that determines the success or failure of an advertising campaign. Banner ad creators may generally get two things wrong in this respect:

1. Their banner may run excessively long. When it comes to animated banners, considering essential human qualities is paramount. People are mostly impatient creatures. They want to have everything right then and right there. Just a few seconds too many and your beautifully designed banner may end up being a waste of effort and money. Transition times also matter a lot. The best approach here is to calculate them on a banner-to-banner basis. It’s just common sense. Does the banner have just a couple of frames? Make transition times longer. Does the banner have three to four frames? Make transition times shorter.
2. They may not be aware of the requirements that major advertising networks impose on the time limit for animated banners. It takes all sorts to make the advertising world. Different advertising platforms require businesses to submit animated HTML5 banners with running times limited by specific values. For instance, IAB has set this limit to be a quarter of a minute. Google, on the other hand, is more lenient. It allows half a minute or less for an animated banner to run.

GetDevDone Creates Engaging HTML5 Banners

Building animated HTML5 banners is a complicated process that requires considerable knowledge and skills. Not only should developers be well-versed in HTML, CSS, and graphic design ptinciples but also know what engages consumers and gets them to click the all-important call-to-action button.

To avoid mistakes like those we’ve described in this post, hiring professionals such as top-level GetDevDone banner coders is a wise move. We have built countless simple and complex animated banners tailored to all the principal advertising networks, including AdRoll, Google Ads, Adform, Sizmek, and others.

We also create time-tested static and state-of-the-art interactive banners. The GetDevDone banner coding service guarantees invariably fast delivery (around 1 business day) of high-quality banner ads regardless of their complexity. We’ll help you take your advertising campaigns to the next level. Let’s get in touch!