HTML5 Animated Banners that Sell: How to Profit from Display Ads & Banners

Website banners have been in use since the earliest days of the internet. And, they stuck around, some 30 years later, even though most of us prefer using an ad blocker to seeing flashy banners popping up everywhere. Yet, website banners wouldn’t remain a viable advertising tool if they didn’t bring the results.

For this reason, we’ll show you the best practices that will make your display ad stand out and convert rather than annoy your potential clients and customers. While the production of different web banners has its unique requirements, a set of connecting elements, both creative and technical, need to come together to produce an attractive banner that will convert well.

 

Banner Ads Examples From The Early Days:

IBM 1996

IBM 2021

So, to give you more confidence when considering web banners for display advertising or even for writing your next website banner design brief, here is a breakdown of essential elements to think about:

The Anatomy Of An Effective Display Ad

Unlike search engine advertising, display advertising has an additional benefit – visual banner ads incorporate images, animation, and text. When producing a new web banner, in-house or outsourced, the ideal starting point is a clear idea of the purpose and functionalities your banner should have. Next, your designers and programmers will look at the storyboard you provide for the technical requirements and enable all the aesthetical elements to fall into place.

In this article, we want to introduce you to essential design practices needed to create a high-quality and well-performing display ad banner. If you plan to use your website banners for advertising, Google Ads, as one major display advertiser, with several display networks including Google AdWords, DoubleClick, AdSense, and AdMob platforms, offer you a range of choices and formats. Facebook, Instagram, and many other social media platforms use ad banners, too.

Before we get to innovative designs and motion graphics ads in the next section; for now, let’s see the essential elements every banner ad should have broken down into three steps you can follow:

Step #1: Define The Purpose Of Your Animated Website Banners

The first step in creating a high-performing web banner is to decide on its unique purpose. Next, you need to define the concrete goal the ad needs to achieve. Your goal, be it generating more sales, lead generation, higher conversion, or brand-building, to name a few standard options, determines what elements your banner should have and how it should behave when it comes to the user’s focus.

Notice a clear focus on sales in this example:

Once you define the purpose of your display ad banner, it’s time to start outlining the creative elements. Let’s start with the four essential elements: the logo, images & animation, description, and a call to action.

Step # 2: Collect Must-Have Creative Elements For Your Next Web Banner:

The Logo

Aside from conveying what your business offers, your logo should always have complete visibility in an ad. For example, if your purpose is brand-building, you might want to go with a more prominent logo. On the other hand, if your offer carries a critical message (i.e., “Grab 25% Off All Inventory Today”), you also need a logo version that is legible and clear on small and large screens.

Images and Animation

A choice between an animated or static website banner depends on the ultimate goal. Further, the choice of your animation style decides on the technical aspects of the images, illustrations, or animations you want to use on your banner. Nowadays, your display banner ads can be lead forms, interactive questionnaires, or playable apps.

Include a Headline & Unique Selling Proposition (USP)

The typical rule of thumb is to keep the banner writing short and sweet. You have a max of two short sentences, 90 characters each (at Google Ads, for example). Ideally, you’d want to use your primary keyword in the headline. Next, ensure your unique selling proposition (USP) fits in the description (e.g., USPs can be as short as “Free Shipping,” “Best Burger in Town,” or whatever is that makes you stand out from the competition.)

See how these two example banners below compare:

Call to Action (CTA)

Depending on what your business does, your banner might work better with classic CTAs, e.g., “Call Us!”, “Subscribe”, or similar. However, if your brand style allows, you can also say the same thing more creatively to catch users’ attention and break their automatic scrolling. For example, if your goal is to get more purchases, CTA’s like “Buy 1 get 1 Free Here!” might work better for your purpose.

Keep the SEO in mind!

An animated web banner with all content needs to be small-sized (no more than 150kb per Google Ads) and load almost instantly. For example, showing an HTML5 banner in a website header will impact how fast your visitors can interact with the rest of your site. The quicker your website loads, your overall SEO score is better. Display ads rely on keywords, so include them in your headline!

Step #3 Create A Storyboard For Animated Banners

A storyboard is a simple scenario detailing the order of frames and key animation points. For animated display banners, a storyboard is a must. It breaks down what must happen in each frame of your ad, but it also details how long the entire animation will last, what type of animation will fit the best, and more.

Think of a storyboard as a detailed article outline, and you’ll be close. Storyboards with animation guidance can be PowerPoint presentations, PDFs, PSD, or AI files. Here is one example storyboard from the AGCS projects. Below you’ll see the storyboard for a lead generation banner that captures the user data (i.e., a storyboard for in-banner data capture:)

Display Ads Formats You Should Use In 2022

Google Native Formats: Responsive Display Ads, Store, Video

The default type of display ad Google will offer you to create is the responsive display ad. This type of ad allows you to upload several versions of your logo, images, or videos, and Google will automatically resize them to fit the website that displays the ad. However, most advertisers don’t like this approach because you lose control of how your ad banner will look precisely.

Here is an example of how the native video ad looks:

Animated HTML5 Banner Ads

Since there are cons to letting Google optimise your Ad performance by finding the optimal combination of the assets you uploaded, advertisers typically use banners created outside Google Ads and import them into a campaign. In addition, banners generated with HTML5 offer smaller file sizes. There are currently several methods for creating HTML5 animated banners, from Greensock animation to MorphSVG and DrawSVG.

Below you’ll see an animated banner we created for PayPal using SVG drawing & Morph SVG technique.

Dynamic Banners & Data Feeds

The most significant impact in the 21st century lies in the amount of data we all generate on the internet. And today, getting a personalised ad based on your preferences is the least you can expect. However, data allows you to go one step further when targeting and retargeting your audience.

Here are just some of the data feeds that a programmer can use in display advertisements:

• Time & Date (from the browser)
• Location-based (Lat/Long)
• Weather API
• Pricing Feeds
• Travel Feeds
• Twitter Feeds
• Stock Prices

With Geo-Proximity Ads, for example, your display banner ad targets only the potential local customers. Therefore, if you are a local business offering a fast service near the potential customer, you can expect a higher conversion and a lower ad spend if all other elements of your ad banner are in place.

Below is another example of our banner ads design, this time for the Volvo dynamic campaign based on the geo-proximity targeting.

Interactive, Conversational, And Questionnaire Ads

While it may seem like everything about lead generation has been done and tested (with pop-ups coming out as a champion,) this is not true. Although the “secret” behind lead generation is to offer something for free (a lead magnet, like an e-book, report, audit results… in exchange for an email address), there are other ways to engage people in a less usual way, but more effectively.

Alternatively, you can engage the potential customers with a questionnaire related to their personality, occupation, or preferences and send them a follow-up email after the completion. Similarly, your HTML5 display ad can include a questionnaire and adjust the visuals dynamically depending on your potential customer’s preferences with Conversational Ads. Starting with the basic questions like “Which Colour do You Prefer?” the ad banner displays your product in user-chosen colour.

Here is an example of an interactive, rich-media banner AGCS created for Miele. All interactions were trackable for marketing purposes. At the same time, each questionnaire’s outcome was linked to a dedicated landing page to boost sales and conversions.

 

HTPOs

HTPO is a unique advertising technique. An HTPO or Homepage Takeover (or a Skin add-on) is a display campaign where you add banners throughout the homepage. HPTOs are highly profitable because the homepage will create a lot of impressions.

However, it’s questionable how this tactic will fare against ad-blockers. In addition, the SEO impact of campaigns like these might be costly: if ad code covers your entire homepage, it leaves little room for on-page optimisation. And, if banners don’t load super-fast, user experience as one of the overall website performance metrics will go down.

Here is what a real-life HTPO looks like: HTPO designed for cinema-chain Pathe by AGCS.

Mobile-First Ads

Google doesn’t hide its preference for the mobile-first approach to ads (and much else web-related.) For this reason, AMP display ads (Accelerated Mobile Pages) are gaining popularity. AMP Ads are one of the most effective ways to deliver ads on mobile as they are

lighter, faster, and safer than regular HTML5 ads.

If you are a mobile developer advertising your app, Google Play Store features Playable Ads. These are apps you can play instantly without downloading. In addition, playable ads offer an interactive preview of your app without installing it first: when users tap on a playable ad, they can play a short, interactive, full-screen demo of your game.

A Mobile-first animated ad AGCS designed for Nissan.

How To Design Attractive Display Ad Banners?

All website banners have one thing in common: they must convey your purpose with images, animation, and text in a limited screen real estate. Therefore, cramming a paragraph of text is rarely a good option for smaller banners. Besides, if you also use visual elements to convey your message about the products or services, you don’t need to “show and tell.”

Instead, your banner design should convey your purpose using all these elements so that they are attractive enough to grab the attention of your potential lead or a customer in just a glance.

If you are not a professional designer, display ad banner design is best left to the professionals. You’ll still encounter many design questions even with a fully developed brand guide that includes your colour set, fonts, and logo variants. Starting from a choice of tools – design programs and code – if you’re producing an animated ad, designers are versed in colour and font pairings, best design practices, and current trends.

Producing Attractive Web Banners: Do’s & Don’ts

Display Ad Banner Do’s

• Creative Logo Design

Your logo has the power to say a lot about your business in a single image, thus saving you precious ad banner space. So while it might look fancy to have a minimalistic logo with no ties to what your business does, if an ordinary user can say what your company does only by looking at your logo – you have a winner!

• Choose An Effective Font

One of the significant differences between amateur and professional designers comes into the spotlight when you compare their font use. Aside from font pairings, a professional also avoids using more than two fonts in combination. Also, the custom banner fonts can sometimes be a focal point of creative design. However, it’s typically enough to stick to free Web fonts like Google Fonts.

• Choose Attractive Colours

Bright colours, when combined tastefully, can be all you need for your display ad banner to be catchy. Whether by contrast, complementing each other, or by their uniqueness, colours can say a lot about your brand – and impact your display ad performance. A general rule of thumb to remember: don’t use more than two or three colours in your banner design. Ideally, the colours you use would match your brand style guide.

• Use Images & Animation To Display Your Products And Services

Whenever it’s possible to show your products or services in a display banner ad, that is the way to go. However, the fact remains: images speak faster than words. A visual explanation of who you are and what you do leaves you in a fantastic spot to use the ad headline and description to the fullest.

• Be Creative With Images

While your ad copy can do many things – be direct, full of creativity, or plain & functional, images can do plenty to add to your animated HTML5 display banner. Photos can add an element of surprise, tell a story in a brief animation and, most importantly, images can evoke emotions much quicker than words.

Here is a catchy and appealing video and animated HTML5 banner ad AGCS created for the Phillips campaign.

• Use Text To Include Your Primary Keyword And USP

Every ad campaign begins with keyword research. Then, a successful ad campaign manages to cleverly spread the relevant keywords both in the animated HTML5 banner ad, the ad copy and on the product or a service landing page. For example, in Google Ads, this is one of the factors that determines your Ad Relevancy.

Your USP, unique selling proposition, on the other hand, has one purpose – to attract customers. So, if you offer something that makes a customer’s life easier, e.g. free shipping, discounts, fast or local delivery, make it clear in your ad banner message.

• Create A Sense Of Urgency Or FOMO

A sense of urgency and the fear of missing out can be a powerful click-generator if you correctly convey the sense of urgency. For example, if you have a timed offer, a significant discount with a short duration, that you offer rarely generates urgency, unlike having constant discounts available every other day. Or, you can tone down a sense of urgency but still have it present by counting down how many items you have left in stock.

• Use Narrow Targeting & Dynamic Content

Launching a display ad campaign, again, regardless of the ad network you’re using, involves some preparation. Aside from keyword research, there is equally essential research. If you can narrow down your audience to people who are very likely to be interested in your offer, you can get a higher conversion rate and a lower ad spend.

Dynamic content is a cherry on the cake because it allows you to personalise further the ad banner with information relevant to your customer. Typically, shipping costs and time, i.e., emphasise how fast a customer can get the item, alongside showing off customisable product options, boost conversions.

• Create Several Ad Formats

Regardless of the platform your HLTM5 animated banner ads will run, your campaign shouldn’t rely on only one creative. Remember that your ad can be displayed in various sizes with different visual and copy creative combinations. By comparing several alternatives, you’ll find the one that performs the best.

• Test Several Banner Ad Designs

Testing, gathering data, analysis, and testing again are the basis of successful display ad campaigns. While you may be so lucky and get an ultra-high conversion rate with your first ad creative, in 99% of cases, you’ll need to test and optimise Ad Design, same as the ad format, to find the one that performs best.

Display Ad Banner Don’ts

Now, let’s look at this banner. As you can see, it has too much information and many small images. There is no clear logo. No Call to Action. On top of it all, the colours are distractive.

• Lose Sight Of Your Target Audience

Knowing your audience (and being able to describe it in as much detail as possible) is essential in informing the design and production teams. The logic behind this is simple. For example, if you sell tickets to country music performances, it makes little sense to use heavy metal imagery. Remember that your audience needs to be attracted by the ad, not necessarily yourself.

• Add Too Many Elements To Your Banner Design

As we already established, your ad banner has only milliseconds to grab your potential customer’s attention. If you bombard them with images, music, colours and text all at once, none of it will be noticed and processed. You don’t want your customers to struggle to read a banner ad.

• Don’t Forget To Frame The Banner If The Background Is White.

Framing your banner helps it stand out. Some ad networks, Google Ads, for example, don’t allow borderless white ads to appear on a publisher’s website. Besides, even if they did allow it, your ad would melt in with the content and the chances of anyone noticing it fall.

• No Need To Go Wild With The Colours

Unless you’re specifically aiming to revive the spirit of 1997, flashy, high-contrast, brightly coloured display banners are a thing of the past. And for a simple reason – they annoy people and detract from the message you are conveying. So two, or three colours max, chosen by their optical value by a designer, is a way to go.

• Avoid Fonts That Are Difficult To Read

Comic Sans font is probably the most famous example of a font you should avoid in any business matter. Any font in heavy italics is almost guaranteed to be missed on your animated ad banner. It’s too tricky for fast reading.

• Avoid Flashing Ad Banners

You should avoid making animated banners in, now dead, Adobe Flash. Also, you should respect the fact that flashing images and colours can trigger epileptic seizures. Furthermore, flashing will only annoy and distract anyone who sees your banner unless done superbly. An opposite of this, a pastel, toned-down banner with bland copy is not a good way to go either.

• Avoid Ads That Are Far Off The Landing Page Experience

When we talked about keyword research, your banner ad should follow the experience your potential customers will have in your online store or a website. For example, you can use a similar palette for continuous experience and avoid something that is too far off. Or, imagine if you advertised a cloud service that boasts a high-tech look on their website with a child’s drawing.

• Never Forget To Include A Campaign-Related CTA

Big brands like Coca Cola, Chanel or IBM can get away without calls to action. But, in reality, most other businesses can’t. So you need to be specific but brief with your CTA. And avoid seemingly fit but too ambiguous CTAs like “Learn More.”

• Don’t Risk Ad Quality For Smaller File Size

There is one purely technical after all the potential issues with the animated HTML display ads we covered. Ensure you find out the maximum file size for your animated banner your chosen network allows. For example, Google Display Ads has a file size limit of 150kB.

•  Display Ad Campaigns Are Not A “Set It And Forget It” Deal

As with any advertising campaign, publishing one animated HTML banner once, setting a daily budget and letting it go is not the best way to advertise. For this reason, the Display Ads dashboard and analytics tools allow you to tweak and optimise your ad as much as you need to. So, it’s best to create several variations immediately and see which one performs the best.

Should You Run Display Ads with Animated HTML5 Banners?

Now that you know more about display ads, it’s time to stop thinking about them as “cheap and annoying,” as one of my clients said. On the contrary, display advertising investments are growing. Compared to pre-pandemic 2019, when total spending reached £14.38bn, the United Kingdom alone saw an increase in display ad spend in 2022 when it jumped to £16.35bn. Moreover, in 2021, Google Ads seemed to have kept its advantage over Facebook Ads. (source.) The rising trend continues into 2023, so there’s no doubt that display ads and banner ads are here to stay.