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.”

Entice_Your_Users

Conclusion 

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!

Christmas is coming! Download a Free Holiday Email Template! (PSD + HTML)

In the spirit of the holidays we’re giving our customers and blog readers a free holiday email template. It’s a responsive email template in a fully editable PSD format, with the full HTML markup included, hand-coded by our own Site Slinger team. It’s available for free download for your personal or commercial use. Edit away and have your mobile-optimized email template ready to go for your next email campaign.

Download a Free PSD + HTML Responsive Email Template!

In the spirit of the holidays we’re giving our customers and blog readers a free holiday email template. It’s a responsive email template in a fully editable PSD format, with the full HTML markup included, hand-coded by our own Site Slinger team. It’s available for free download for your personal or commercial use. Edit away and have your mobile-optimized email template ready to go for your next email campaign.

Great for advertising your holiday news or sales!

As the winter holidays are already upon us, you’re probably gearing up for those Christmas sales and other holiday events. Whether you are in marketing, event planning, or just need to send out a mobile-optimized email to your mailing list, we’ve got you covered with this free responsive email template. We’ve designed a great looking email ready for viewing on all major devices and email clients, including iOS, Outlook, and Gmail.

Mobile-optimized.

This email template was designed and hand-coded by experts to ensure a great mobile experience, along with full desktop viewing. Now days, more than half of emails are opened on mobile devices! It’s imperative your email reaches your audience when it’s convenient for them to view and act on it… without compromising the desktop aesthetics. We’ve put great effort into ensuring the email elements are mobile-optimized and appropriate for this holiday season.

We hope you’ll enjoy editing and using this free responsive email template, shared as a fully editable PSD and provided with hand-coded HTML – by our web development experts. If you need other PSD email designs converted to code, we can help! We’re experts at PSD to HTML, whether for emails or websites! Get your free holiday email template today!

Download

What’s Included:

  • Fully editable Photoshop file (PSD)
  • Hand-coded HTML template
  • High resolution image comp (JPG)

DOWNLOAD HERE

Preview

free-holiday-email-template-image

50% Christmas Discount on PSD to Email Conversion Services

This Christmas we’ve prepared something really special for you. Starting from December 04 until December 25, 2014, you can order our high-level PSD to Email and PSD to responsive HTML email conversion services with a 50% discount!

Christmas Is Coming – The Site Slinger Has Got Presents for You!

Dear friends,

This Christmas we’ve prepared something really special for you. Starting from December 04 until December 25, 2014, you can order our high-level PSD to Email and PSD to responsive HTML email conversion services with a 50% discount!

600x338_thesiteslinger_sale_blog

Do not loose this one shot! This amazing Christmas offer is available for a limited time only.

High-end packages are now available starting at $149 (usual price is $299) and they are as follows:
– Easy to update flexible table structure;
– Deeply commented HTML code;
– Inline and embedded CSS versions;
– Easy to customize template;
– Tested and working with all major mail clients & devices;
– Retina 3x Support!

The offer expires on the 25th of December, so hurry up and grab your 50% discount! Request a free quote to get started – no credit card is required!

Click Here to order your outstanding PSD to Email Template.

Enjoy the Holiday Season with The Site Slinger!