Banner ads, especially animated ones, are being used more than ever on social media profiles and as social ads too, as marketers realize the power of video in catching attention. Today’s banner ads are sophisticated and well designed, and can be highly effective. But for designers, they present a huge challenge.

Coding Banner Ads Is Hard and Expensive

Banner ads, especially animated ones, are notoriously hard to code in HTML5. Sure, you can create animated banners in Flash, but Apple’s iOS doesn’t support them, and Adobe says they’re shutting down Flash altogether in 2020.

GIFs are another possible solution, but they usually have poor resolution and most web users associate GIFs with memes and humor, rather than serious products. So you’re left with HTML5.

Coding HTML5 ads — in particular, animated ones — requires expertise, and expertise is expensive. Good coders know their value, and finding one you can trust can be an impossible task. Freelance platforms might seem the obvious place to start, but coders worth their salt soon move away from third-party sites.

Fortunately, this is the age of SaaS, and designers can now use applications like Bannersnack with drag-and-drop interfaces that let you design banner ads quickly and efficiently.

What Does Bannersnack Do?

Bannersnack is an online app that helps you design fully responsive banner ads for websites and social media platforms — without having any coding or design skills. The Bannersnack creators figured out all the hard coding stuff, so you just log in, choose your size, add your image, select colors and fonts, and get creative.

Let’s take a quick run through the Bannersnack platform and see what it can do.

1. Pick your size: Start with a custom size and orientation (vertical, horizontal, and square), or choose a pre-set size. You can even pick a Facebook ad or an Instagram post:

2. Design your ad: You can either design from scratch, or use an existing Bannersnack template. Bannersnack offers static or animated designs in its template gallery, so you can get started even without having a design idea.

3. Add images and text: Customize your design with just a few clicks. If you can use Mail chimp or other SaaS marketing tools, you can use Bannersnack. Edit headlines, text, buttons, and background, add your own logos and images, and change design nuances like line heights and transparencies. You can create beautifully designed banner ads that are a perfect match for your existing brand standards and colors.

4. Animate with ease: It’s no secret that animated ads are more engaging and drive action better than static ads. Readers are more likely to react to videos than non-animated content, and more likely to visit the publisher’s page or website.

But animation is notoriously tricky. Bannersnack has managed to solve that hurdle — with HTML5 animations that include fade-in, slide-in, and bounces. These aren’t full video ads, but they’ll still pull a user’s eyes towards them on a busy web page and boost your engagement. They have the added advantage of loading quickly — which is vital for preventing mobile users from scrolling past your ad before it’s even loaded.

Bannersnack’s HTML5 editor has an intuitive and user-friendly interface and slide management system to make animation simple. Try one of the 32 pre-made animation presets to animate any part of your ad:

Or, create custom animations and adjust things like duration, delay, and transitions.

5. Create a full set of banners in a variety of sizes and shapes: Once you’ve got your layout complete, try Bannersnack’s Smart Resize option. You can produce a set of 30+ banner ads, all based on the same design, in just a few minutes — so you can use the same ads across your client’s website, ad campaigns and social media platforms.

You can tweak the layout of individual banners if you wish by changing transition timelines or rearranging specific layers, but this is not usually necessary thanks to Bannersnack’s intuitive resize features.

The YouTube clip that’s pictured above walks you through the process of creating a set of square, horizontal and vertical banners from one basic design.

6. Collaborate with ease: Nothing wastes time like sending around design proofs for comments and markup. Instead of downloading files and emailing for approvals, use Bannersnack’s online collaboration interface. Your team can view the ads, leave comments and suggestions, and even mark the ad as approved — all within the system.

And you can keep all your designs organized by setting up your own folders and workspaces.

7. Export and go: Once everybody’s happy with the ad, simply choose the format you want and export it. Your banner is ready to embed. You can choose JPG, PNG, GIF, or HTML5 — compatible with all major display ad platforms including Google Ads, ReTargeter and more.

For HTML ads, you can download as HTML5 or AMP HTML.

Pro tip: Bannersnack can even help you create Facebook video ads, which have been shown to drive more visitors and to increase conversions over static ads.

When you take out a Pro or Plus Bannersnack subscription, you can download your ads in MP4 format, as Facebook requires.

What’s This Going to Cost Me?

You can test Bannersnack for free, but to get the most from the tool — including banner sets, AMP HTML and MP4 downloads — you’ll need a Pro or Plus subscription. While that might sound scary, the pricing is surprisingly affordable. And when you factor in how much time you’ll save over hiring a coder or doing the work yourself, you’ll see it pays for itself on the very first project you create.

Pro Tips for Designing Banner Ads

Now that you’ve got a good tool to make banner ads, let’s get you ready with a few pro tips to get the most out of your ad investment.

1. Retarget

Banner ads often get a bad rep by getting a low response rate. That’s true, but the same can be said of any medium, from TV ads to billboards. It depends on how good the creative is, and how well the ad is targeted … and retargeted.

Retargeting banner ads give you a second chance to influence buying decisions. The viewer is seeing your marketing graphics for the second or third time. Another factor is that web users are seeing your ads again because they’re interested in your services.

The click-through rate for retargeting ads is ten times that of first-time display ads.

Vie Signals has some great ideas to help you retarget like a pro.

2. Overcome ad blindness

Readers are getting good at ignoring display ads. Vie Signals has some useful tips to help you overcome ad-blindness:

position your ads in unusual places

keep your ads relevant to your audience

use unique colors, formats, and sizes

use fewer ads to optimize for mobile users

make your ads part of your design

Following this logic, you’ll get better engagement with your ads if:

you’re selective about those you show

you use custom sizes and colors that contrast with your main site colors (without clashing with them)

put your banners where users are forced to see them, such as in the middle of a blog post

3. Test, test, test

Split testing, multivariate testing or A/B tests: whatever you call it, testing your ads is the key to improving their performance.

Conversion XL says you need a lot of traffic (more than 100,000 unique visitors per month) before multivariate testing makes sense. Most businesses should be doing simple A/B testing instead, where you test two variants of an ad, sending half your visitors to one ad, and half to the second.

Designing your banner ads and being able to modify them quickly are the keys to split testing; using a service like Bannersnack can make it cost effective for you.

You can change anything in your split testing. Start with the large variables: transition type, static vs animated, font, color, CTA color, and image. Once your A/B results are similar and you think you’ve found the best ad in terms of the major variables, it’s time to test less obvious variables — such as transition timings, image placement, font size, and slight color variations.

Also, be sure to check if your A/B results are random or statistically significant using this test tool.

Once you’re happy that one of your ads is outperforming the other, ditch the lower-performing ad. Even small improvements in your click-through rate compound with continuous testing.

Summing Up:

It is really important that all the above points should be kept in mind while creating banners for the website. Other than banners, there are other website designs which can be useful for a website. For more amazing designs, contact Vie Signals or visit

Leave a Reply

Your email address will not be published. Required fields are marked *