The Site Slinger Blog

Web Development, Design, and everything PSD to HTML
By Jeremy H.

7 Tips on Creating an HTML5 Banner Ad None of Your Prospects Will Miss


Tips on creating effective HTML 5 banners

No business can survive without advertising, obviously. Banner ads are among the most effective means of attracting new customers on the Internet. Just open any serious website and you’re bound to see enticing banners for products or services on almost every page. 

Banner advertising pursues several goals:

  • drive more traffic to a website 
  • make a product or service more popular and recognizable 
  • create a positive brand image

Banner ads have another important benefit. If a visitor clicks on an ad and lands on the advertiser’s website, it means that they’re truly interested in the offer. Thus, their status is close to that of a prospective customer.

To judge how effective banner advertising is, the Click-Through Rate (CTR) indicator has been introduced. It measures how many people have clicked on a banner per one thousand times it has been viewed. For instance, 20 clicks/1,000 views = CTR of 2 percent.

How can you achieve a higher CTR? By choosing the right type of banner for your specific case and applying certain time-tested techniques. We’ve collected 7 best tips to help you boost the CTR for your banner ads. Follow these guidelines and you should soon notice a steady increase in your website traffic.

  1. Choose the Right Technology

It’s simple: HTML5 is the King of Kings when it comes to building banner ads. HTML5 has outperformed the previous leader in this field ― Flash ― by the widest of margins:

HTML 5 benefits

The latest version of the markup language is particularly valuable for building responsive websites that perfectly render on mobile devices. Result: a much wider audience coverage. 

In addition, you can edit your HTML5 banner ad as if it were an ordinary web page. Changing the text, videos, or images inside your banner is a breeze (if you know how). Flash-based banners are much harder to modify. 

  1. Pick the Optimal Banner Size 

Mark Twain famously said, “It’s not the size of the dog in the fight, it’s the size of the fight in the dog.” When talking about banner ads, though, “the size of the dog” matters no less than its fighting spirit. 

Visit the Interactive Advertising Bureau (IAB) website. There, you can find the main requirements for banner sizes that various advertising networks have put in place. The list contains 15 different formats. Which is yours? 

Your ad design and business goals determine the answer. Vertical or horizontalit’s all case-specific. Still, AdSense has found these five formats to be undisputed leaders in terms of performance:

The leading banner sizes

Play around with them before you look to the underdogs. You may also be interested to know that wider banners have shown better click-through rates than narrow ones. Why? 

As is often the case, it all boils down to UX. Most people feel more comfortable reading longer lines from left to right. A thin banner, by contrast, mostly contains one or two-word lines. That makes the reader’s eyes jump from line to line far too often.

  1. Put Your Brand Above All 

When you start designing a banner ad, the first thing to keep in mind is your brand. People should know what company is advertising the goods or services. Otherwise, they may not even consider pointing the mouse cursor at your banner.

You can establish a connection between your company and the ad in two main ways: 

  • By displaying your logo or brand name within the banner. The most typical location for a brand logo is the uppermost or lowermost portion of an ad. However, you can be more creative in this respect. No logo available? Place your brand name somewhere on the ad at least. Whichever option you select, website visitors will be aware of your business even if they don’t click on the banner in the end.

Put your brand above all

  • By following the pattern common for all your marketing materials. That includes fonts, colors, and visuals. Giving the call-to-action button the same color or style as that of the landing page, for example, will create a permanent link between the banner and your brand in your prospects’ minds. 
  1. Keep Your Text Short

Scroll up to the list of the most popular banner ad sizes. None of them is too big, right? It means that you have to be very resourceful if you want to get your message across within such a limited space. Pin down the most essential details about your offering. A few lines too many and your beautifully designed banner will send any potential customers running away. 

Ask someone to read your ad. If they can’t fully understand the message after two seconds, cut your text down. Make sure you keep your ad to 10 words in length or less.

Keep the text of your banner short

  1. Create a Hierarchy for Your Information

You should structure all your messages on the more important-less important principle. The larger or bolded words will let the viewers understand that they’re central to the ad. Smaller, unbolded letters will indicate that it’s something extra, secondary to the key message.

Create a hierarchy for your infromation

Also, make sure you use mobile-friendly fonts and colors: 

  • The black-white combination works perfectly well in the majority of cases. 
  • Helvetica, Geneva, Arial, Avant Garde, Franklin Gothic, or other sans-serif fonts make your ads easier to read than serif fonts. 
  • Avoid extremes: a text that’s too big or too small (10 points or less). Strive for the golden mean. 
  1. Draw a Border Around Your Ad

In certain cases, it’s hard to tell where the main website content ends and a banner begins. 

If the website visitors can’t find your banner at once, they’re less likely to click on it, you bet. A fix? 

  • Give your ad a border 
  • Pick a background for your ad that differs from the rest of the page. 

That will make your ad stand out from the other content. Any visitor will immediately notice it. The better people see your ad, the more likely they’re to click on it.

Make you HTML 5 banner ad different from the surrounding content

  1. Entice Them 

Finally, remember that you should give your prospective or current customers something that will really draw them in. When they see the words “free trial,” they’re more likely to click on your banner. You can also write something like “Only in May” or “Just Now!” That will create a sense of urgency. 

Another way to get people to click on your banner is to come up with a good call-to-action (CTA). Experiment with different CTAs by running A/B tests. Choose a CTA that’s more specific than the ubiquitous “Click here.” Consider what it is you’re offering and try to use a “buzz” phrase. For example, you may write, “Buy the full solution for just…” or “Get certified in 2 weeks.”



Creating an effective banner ad is a science and an art. Try following the tips we’ve given above, and your next banner should bring you more new customers.  

If you need someone to take care of the technical aspect of your banner creation, the Site Slinger professionals are here to help. We can build several types of HTML5 banners: static, simple animated, complex animated, and interactive. Just give us your design and get back a perfect HTML5 banner tested on a variety of real devices and in the most popular web browsers.

We can also design your banner from scratch. Just provide us with the details of your offering and give us your ideas of how the banner should look like. You’ll be pleased with the outcome, we promise!

All you need is design to get started! get a free quote Check out our pricing