8 Best Design Practices To Create HTML5 Banner Ads

ViewPro offers handcrafted banner ads for all platforms.

Get a Quote
Share this article

Ads are everywhere. They are on your way to the office in the form of larger than life billboards staring at you. You see them on your phone screen before watching a video or ordering food for yourself. They even pop up on your desktop while you’re reading an article. Anywhere and everywhere, right?

Needless to say, ads have become a large part of our lives. Now, this brings both opportunities and disadvantages to the businesses. You can reach millions of people with your advertisements. On the downside, it’s extremely challenging to cut through the clutter and make your ad stand out.

Therefore, to reach a greater audience without getting lost into the clutter, display ads are a very powerful form of advertising. Google Display’s Network alone has 90% reach across all the internet users worldwide. And among different forms of display ads, rich media ads have 267% more click through rates than static ads, including interactive HTML5 Ads.

So how to make your rich media banner ads stand out? Here are 8 best practices to keep in mind, when designing your next HTML banner ads.

1. Steal the ‘15 SECONDS’ of Your Viewer’s Life

15 seconds or even less than that!

You probably have a lot to talk about your brand— offers, features, USP and the list goes on. And definitely, you have dozens of ideas and designs to say that. But wait! Have you ever come across anyone (apart from creative designers and advertising agencies) saying this-

But wait! Have you ever come across anyone (apart from creative designers and advertising agencies) saying this-

I WANT TO WATCH AN AD TODAY.

No one, right?

Because everyone agrees— ‘ads are distracting’ and ‘ads are a waste of time’. So remember two things -:

  1. Create HTML5 ads that are short and crisp with your storyboard under 15 seconds.
  2. If ads are distracting, make them distracting enough that people watch them.

Quick Tips

  • Keep consistency in the color, fonts and design used in every asset for the rich media banner ads.
  • Don’t overload the assets with a lot of information. If you’ve different messaging on every asset, keep it short and make it readable in a fraction of second.

2. Create Multiple Sizes of Your Banner Ads

Your potential customer might come across your ad when they are browsing the web on their phone while waiting for a friend in a cafe or your ad might register in their brain when they’re working on a big screen in the office.

The catch is- Why would you want to miss out your chances by just displaying your ad on a big screen for advertising?

As a matter of fact, brands are switching their focus from ads that target users on desktop to mobile phones as mobile is the future of digital advertising. Also, Google Network has over 40 display ad formats, so you don’t miss out on any opportunity to reach a larger audience. Test different sizes and see what works best for you!

Quick Tip

  • Creating multiple variations for a banner ad consumes a lot of time and resources for brands, however, outsourcing to a creative agency can save both time and resources.
Dell-HTML5-banner-ads-format
Image Source

3. Is Your ‘Call to Action’ Generating Any Action?

Imagine, everything from aesthetics to compelling copy is in place for your creative banner ads. You thought through all of it for days, and now you’re ready to roll the ad! But CTA, the main hero of the banner, did you pay enough attention to it or did you just randomly pick one CTA out of a long list?

What should the appropriate CTA be? Will it excite people to click on it or dissuade them? Is it visible enough or getting mixed with the image?

Spotify-premium-banner-ad
Image Source

Look at the CTA copy of this ad by spotify. It has all the elements that make a good CTA—enticing, crisp and provides an offer. People get attracted towards ‘FREE’ stuff and that too, for 30 days! Isn’t it reason enough for them to click on the CTA?

Quick Tips

  • If you’re running an offer, promote it with ‘Click here to get an offer’ or something similarly captivating.
  • Make sure that the CTA placement should be chosen carefully. Some CTAs work best when they are placed above the fold, i.e, at the top while others work best when they are placed below the fold, i.e, at the bottom.
  • There should be minimum distractions near the CTA button. For instance, too much copy near the CTA could confuse the reader and delay their decision.
  • It’s a good practice to frame the CTA so that it stands out, but again, it’s not a hard and fast rule.

4. Image That Speaks Louder Than Words

A balanced mix of compelling copy and strong imagery makes an ideal display ad. Sometimes a clever copy steals the show and at times, a silent script with strong imagery is enough to intrigue the audience.

Strong image that resonates with the message that you want to send across with your ad catches instant attention and evokes trust among the viewers. Viewers would be more interested in looking at the design of a pandora ring than knowing about its features. Similarly, features of a speaker would entice the consumer to purchase it more than just its design.

Before designing any banner ad, ask yourself- What are you selling? Check out this banner ad by Kind. They have used minimal copy with a clever use of their products. To show the different flavors of bars, instead of writing their names individually and filling the space, they have shown ingredients next to each bar indicating the flavor of each bar.

Kind-html5-banner-ad
Image Source

Quick Tips

  • Maintain a proper hierarchy between your product, logo, CTA, copy, and all other elements to create best banner ads.
  • Don’t place your copy on the top of your product. Don’t hide what you want to sell.

5. Choose Your Fonts Wisely

can you read this

It’s written: Can you read this?

Yes, that’s the point.

We all get allured by a myriad of fancy fonts with curvy alphabets, but at the end of the day text should be legible more than fancy, right?

You wouldn’t want the viewer to squint their eyes to read your copy especially when you have a maximum of 15 seconds to send your message across.

Quick Tips

  • Use distinctive fonts and sizes for headers and descriptions.
  • Make sure your font choice is in sync with your brand identity.
  • Keep your font palette limited to 3 fonts.
  • Keep proper spacing between the lines.
principal-financial-html5-banner-ad
Image Source

Now, this ad doesn’t have any visuals but the copy is clear, precise and delivers exactly what needs to be conveyed. And that’s the power of typography!

6. Tailor Your Message To Your Target Audience

Your messaging should target the user based on the phase of their consumer journey. In a prospecting ad, the target audience are the new users who aren’t aware of your brand and are being introduced for the first time. On the other hand, in a remarketing ad, you are targeting an existing user.

Also, don’t let location and language become a barrier between your brand and the viewer. Banner ads with personalized touch makes the user feel important and valued. For instance, you can design your banner ads in different languages and make it responsive as per your viewer’s location.

7. What Sets You Apart From Your Competition?

Amidst the flood of banner ad campaigns, how will your ad swim to the shore of your viewer’s mind?

To cut through the clutter is the biggest challenge every brand and agency faces. You can be clever with your designs and everything, but it all comes down to what value you’re providing to the viewers. Is it your affordable pricing, unmatched quality, free delivery across the globe, or 24*7 customer support. Whatever it is, it could attract your customers and be the reason why they click on your ad and choose you over others.

8. Is Your Rich Media Banner Ad Running on Every Browser?

An HTML5 banner ad can play tricks in running on different browsers, if not coded precisely. Their performance depends largely on the capabilities of different browsers.

If your banner ad wouldn’t run on any particular browser, the reach will drop dramatically, directly impacting the CTR. Moreover, all your resources and efforts in designing the ad will be wasted. A nightmare for any brand or agency!

Make sure the designers have chosen the elements used in creating the banner ad wisely and the code is compatible for different browsers. And before running the ad, ensure to test the ad on different browsers.

Lastly, keeping these few practices in mind, don’t forget to keep experimenting with different formats, ad copies, colors, CTAs, and everything else to find out what works best for your brand and what doesn’t.

Related Posts