Create Amazing HTML5 Banner Ads (Examples Included!)

(MAY 2022 Update): This is an update of our original article, “Design Tips for Amazing Banner Ads”, originally published on September 1, 2017. Since then, so many changes have happened in banner advertising. Therefore, we’ve revamped this post to fit current best practices. Of course, we added even more tips & HTML5 animated banner ad examples!

Every business needs more online traffic, and better ads can achieve that for your company, right? But, if you don’t understand the finer points of web banner design, you can’t be sure that your ads will meet the most common design practices. So, what makes things more exciting and adds extra pressure? Banner ads are everywhere!

In this updated article, we asked our designers’ team to answer the most asked questions after publishing the original (and sharing more design tips) you should follow as you design and create banner ads to garner maximum clicks? After rounding up the answers, here are our top tips and guidelines for designing banner ads that get more traffic, with example banner ads included.

 

Place Your Call-To-Action At The Bottom Right Of The Banner Ad

Banner design demands balanced elements, so make sure you arrange each piece of your banner ad for maximum impact. For example, you want your call-to-action to rest at the bottom right, where the eyes end up. The call to action is an absolute focal point in your banner ad.

The amount of text you can place on the CTA button is small, with phrases that tell people exactly what you want them to do: ‘Learn More!’, ‘Click Here!, ‘Register Now!’. But, whatever it says, it should implore your visitor to click on it right away. Adding Action words like “Get,” “Start,” and “Try” helps, alongside using time-sensitive “Now,” “Today”, or, in combination, “Book Now!” to create a sense of urgency.

HTML5 Animated Banner Ads Examples & Best Practices

1994: The First Banner Ever

There is a lot to talk about CTAs. For example, do you know what was the first website to display a paid banner ad, and what was the ad for? When people clicked on banners in the ye olde days of 1994, a whopping 44% of people who saw the banner clicked on it. The website banner was only a part of a more extensive AT&T promo campaign.

Online, two banners were in use. The first one asked, “Have you ever clicked your mouse right HERE?” with an arrow pointing to text that read “YOU WILL.”

It was published on Wired, then hotwired.com, which says:

“__1994: __Wired.com, then known as HotWired, invents the web banner ad. Go ahead, blame us.”

 

Banner Ads Love Celebrities

Use star quality whenever possible. For example, AGCS worked on a Fast and Furious campaign. In this campaign, the banner ad featuring the biggest star of the series had 43% more clicks than banners featuring other stars. However, it was not deemed a suitable creative before the campaign, yet it was the best performing.

Think about your product or service. What can you showcase for the best results? What gives your business a star quality?

Louis Vuitton is so minimalistic that it uses only its name and a celebrity!

 

Clarify Your Offer

Your value proposition highlights the unique offer that your product, service, or brand provides. It also brings attention to any special deals, great prices, and other attention-grabbing info you can showcase, such as “50% off,” “Handmade,” “Locally sourced,” “Limited time offer,” or “Buy One, Get One Free!.

The first thing that catches the viewer’s eye needs to be your unique selling proposition (USP) and should take up the most space in your ad – in the headline. The typical rule of thumb is to keep the banner writing short and sweet. You have a max of two very, very short sentences, 90 characters each (on Google Ads). Ideally, you’d also want to use your primary keyword in the headline.

 

Get Your Specs Right!

Get your specifications right the first time. The most beautifully designed ad is useless if it’s poorly coded or too huge to be seen on most systems. If you’re spending time fixing technical details when you should be going live, you’re wasting time and money. Technical Specs Depend On The Ad Platform.

For example, Google Ads has a full set of rules detailing banner sizes, the maximum file size for an animated ad banner (150kb,) the amount of text and many more. If you worry this is too small, remember, animated HTML5 banners are mostly code that gives a small file size. For animated banners, it’s important to remember that only GIF and HTML5 animations work; Flash is no longer viable.

Production Files Best Practices

Before your design can become an animated HTML5 banner, the design files must be forwarded to programmers for coding. It’s only a matter of following a few simple guides to ensure that programmers can successfully translate the original PSD design into HTML5. If you forward your PSD design to the animators, programmers, and designers, the AGCS’ top designers provide a handy checklist:

1. Embed linked files. When importing elements into Photoshop (i.e., pulling in lifestyle imagery, using features designed in the Adobe Illustrator, etc.), always remember to embed the linked file as a smart object.
2. Use standard methods instead of blending modes. For example, achieve the same effects by using opacity or layering colour layers with opacity changes. Rule of thumb: Does it give the desired effect if you view the single layer by itself? If not, there is probably a blending mode active.
3. If the storyboard asks for a panning or zooming animation, ensure there is enough of the background image available to do so. If the motion animation requires image editing, make sure the edited image is used on each animation frame in the artwork, even if it isn’t visible.
4. In a final check, ensure everything is linked or provided (fonts, etc.) in the PSD or along with the PSD. Don’t – under any circumstances – rasterise any layers in the PSD file! If you do this and hit save – image type and quality are lost irreversibly.
5. Don’t use blend modes on any of your layers. When exporting the elements for coding, they should result in separate assets with transparent backgrounds.

 

Use The Latest Greensock Animation

Banner ads that are animated out-perform static banner ads significantly, and those that are well-designed don’t distract from your ad’s message. Flash is dead and gone; everything is HTML5 now. Especially since if you don’t optimise your banner for mobile, it doesn’t sell.

How the GreenStock animation looks in action:

 

 

The GreenSock Animation Platform (GSAP) lets you create reliable, fast, high-performance HTML5 animations that work in all major browsers. Banner animations should last 30 seconds as a maximum. Ideally, you should have a 9-second animation that you can loop three times.

Remember: the last frame of the animation should be a crystal clear CTA (call to action)!

 

Focus On The Start, And The End Frames

Speaking of ending on a crystal clear call-to-action, you should place your focus on your start and end frames. Psychologists have proven that the principles of primacy and recency mean we best remember what we see first, and most recently, and in the case of banner ads, that’s their start and end frames.

Notice how one of the McDonald’s animated HTML5 banner examples ends on this frame.

Always think carefully about your storyboard!

 

Inject A Sense Of Urgency

Use bold, contrasting colours to bring a sense of visual urgency to your banner ads. These ads are not doing the work if they are too subtle, barely-there suggestions about your brand; the design has to catch attention and urge people to take action.

Home Depot does it like so in their animated HTML5 banner ad:

 

Be Consistent With Your Goal

Don’t ever lose sight of your goal as you design your web banner ad. 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.

For example, if you’re trying to sell low-end, budget, or discount items, don’t conjure up a flashy, luxurious feel with the ad, or your target audience may feel like whatever you’ve got is out of their reach. Instead, be sure your ad looks consistent with your end goal.

 

Keep It Short

Keep the text in your ad minimum. Fifty characters plus spaces are ideal (90 being the absolute maximum). In addition, aim for visual simplicity and speed in consumption. Viewers will devote mere seconds to your banner ad.

Take a look at how Nike does it:

 

Choose Fonts Wisely

Your text should be instantly readable and easy to make dynamic. Make the body copy and headline different sizes. Avoid all caps, tiny font sizes, and squiggly cursive fonts that are hard to read.

Here is one banner ad that will take you straight to the 1990s:

 

Strive For Brand Harmony

Be consistent with your brand. But you don’t need to be bound to your brand colours—it’s okay to do new and exciting things in a banner ad so long as it doesn’t clash and conflict with your overall branding themes. Again, harmony, not absolute mimicry, works.

Here is how IBM strikes a balance:

 

Get To The Click

Remember. You’ve got seconds to work with when it comes to banner ads. Your creative should lead to a click-through as quickly as possible. You can build a gallery in your ad, but don’t add any refresh or back buttons. You want your user to click on your landing page ASAP, and you want that to be their natural (and only) destination.

Think two CTAs wouldn’t hurt? Too much text – no problem? SPEED!

 

Use The Correct Banner Sizes

Top-performing ad sizes in 2022, per Google Ad Manager

Ad size	Description
728×90	Also called leaderboards, these banners are most effective when images and text are used together and placed above the content. Example: the Financial Times homepage (ft.com)
336×280	A “large rectangle,” surprisingly, performs better the lower it is on the page.
300×250	A “medium rectangle” behaves much like a large rectangle does.
300×50	Known as a “mobile banner,” this size is used chiefly on larger phone screens, at the top or bottom of the screen.
160×600	A “wide skyscraper” performs best coupled with pages that use sidebars as a part of web design.

Treat each size appropriately. The 728×90 size should ideally feature only text. Nonstandard sizes like 970×250 can benefit from more content, whereas the smaller 320×50 mobile size should have only two frames and a button.

 

A Visibly Defined Frame

A subject inside a specified frame draws people’s eyes naturally. Banner ads with the frame are more effective, so give your designer the exact specs. They can take your graphics right to the edge of the box and then give it maximum visual appeal with a border to frame the ad for optimal effect.

 

Choose The Right Colors.

Colour is the first thing your visitors notice. All colours have different associations, so choose them wisely. They shouldn’t conflict with your brand; instead, the colour must evoke the right emotions in your target audience.

Notice how Nescafe uses consistent colouring:

Colors also take on new meanings from culture to culture, so make sure you know your target audience inside and out when choosing your colours. Here are some examples of the emotions colours usually evoke in Western viewers:

Red: angry, passionate, loving, excited, and sexual. This powerful hue appeals to most people, but not when it’s overwhelming. Avoid red if you’re hoping to achieve a serious, sombre, or mature tone.

Orange: energetic, playful. A flashy standout but less overwhelming than red, orange is filled with energy and direction.

Yellow: friendly, cheerful, and hungry. Yellow catches the eye and has a young, enthusiastic vibe. It also suggests food and appetising themes, like the inside of a warm, friendly kitchen.

Green: fresh, healthy, environmental, alive, growing, nurturing, and new. Green is also relaxing physically for the eyes.

Blue: safe, reliable, trustworthy, mature, clear, intellectual, serene, refreshing, formal, masculine, and cold. Blue is the most popular branding design colour globally by far, appearing in almost half of all logos worldwide.

Purple: royal, luxurious, wise, extravagant, feminine, magical, and creative. Purple has a calming, soothing feeling for viewers.

Pink: feminine, loving, youthful, sweet, and babyish. Tone and brightness really control the meaning of pink.

Black: powerful, exclusive, modern, mysterious, formal, prestigious, and luxurious. Black text on white is still the most easily readable combination out there, and for a traditional, no-nonsense brand—or a hyper-modern startup, black can be a powerhouse.

Grey: practical, neutral. As a background, grey makes for more intense colour combinations.

White: clean, pure, sterile, modern, honest, straightforward, and innocent. Ideal for conjuring up feelings of youth and frugality.

Brown: wooden, natural, profound, earthy, leathery, rugged, masculine, and humble. Perfect for balancing brighter colours and suggesting natural strength. Also ideal for background textures and colours.

 

Do “Ugly” Banner Designs Work Better?

The idea that ugly banner (and landing page) designs work better is somewhat ingrained on the Internet. These banners rarely follow any of the best design practices we talk about, but they convert well. Look at this example, a homepage of TruthAboutAbs, with a 54% conversion rate (source).

The reasoning for making an “ugly” banner is twofold. First, people are used to ignoring banners and ads, so much so that only “ugliness” stands out. Secondly, the reality is that you have only a moment to catch attention with a banner. Hence, go with something that stands out. While common sense approves, there is more to the story.

The average ROAS for Google Display Ads is 200%, i.e., you are earning $2 for every $1 spent. While comparing a conversion rate of 54% and a return of the ad spend of 100% isn’t straightforward, there is obviously space for all types of banners, even the beautiful ones.

We can find one explanation for why this is so in the User Experience Hierarchy of Needs (analogue to Maslow’s Hierarchy of the basic human needs.) The basic functionality is on the largest bottom layer in an inverted pyramid. Aesthetics comes much later, as a first “higher need.”

 

Tying It All Together

These 15 tips for amazing banner ads are some of the basics to help you get started. As you probably already know, when designing web banner ads that perform and out-perform, there are quite a few elements to consider at once. The proven toolset for creating stunning and high-performing display banners includes Adobe Photoshop and HTML5, alongside Greensock Animation, SVG drawing & Morph SVG, to name a few.

While you might be surprised by the idea of HTML animation when you can use video or animated GIFs, a well-executed HTML5 animation can get your animated banner well below Google’s 150 kb limit. At the same time, your animated HTML5 banner won’t lose anything when resized and can include functionalities they hadn’t even dreamed of in 1994.