Seeking inspiration for your HTML5 banner ads? Looking for examples of amazing HTML5 banner ads to get your creative juices flowing?
You know - Launching a new advertising campaign is always a tricky business. There's always the risk of not generating a positive ROI.
Among the steps involved in launching a campaign, the creation of HTML5 banner ads has a major impact on results. This requires creativity and inspiration. Except, as you well know, you don't make appointments for inspiration; it comes when it's ready.
To stay on top of the trends, it is very important to constantly stay aware of what your competitors are doing but also where display advertising is going. If you’re not an expert in display advertising, don’t worry, we’ve got the perfect display advertising beginner’s guide for you.
Alright, now that you’re an expert in ad banners, we’ll try to get you inspired with the best html5 banners out there! On top of that, you’ll find a list of the HTML5 banners best practices to nail your next campaign 🚀
TIP: Not sure what HTML5 ads are? Check out our complete guide to HTML5 banner ads.
HTML5 banners best practices
Now that you’re inspired, let’s check your knowledge about the HTML5 banners best practices for 2023. To cover everything, we’ll talk about technical requirements as well as design guidelines and trends!
Keep your length short
Keeping your ad short is key to improve your ad performance. Your banner ad should always remain under 15 seconds according to recent HTML5 banner specs. Indeed, you only have a few seconds to grab the viewer’s attention. If you neglect this first impression, you’re loosing your audience awareness and your message will not be acknowledged!
Go straight to the point
Having a clear and understandable message is crucial. Your viewer needs to understand your offer and your message immediately. Write simple and short sentences that clearly express the value you bring to your customer. 50 characters (including spaces) is ideal, 90 characters being the maximum.
Do not forget to choose your message according to your goal. Whether it’s retargeting or prospecting, the message of your HTLM5 animated banner should match the purpose.
Choose your font wisely
The font is one of the elements that you can use to attract a viewer’s attention to your product or service. As always, use simple sans-serif fonts that are easily readable and do not use more than two clear fonts. Your viewer should be able to read your message without hesitation.
Also, a hierarchy needs to be respected between the text elements on your HTML5 banner ad. It allows the user to get the importance of each element and the way to read your banner.
Use various formats for different platforms and devices
With the increase of mobile trafic during the last decade, adapting to different platforms and devices has become crucial. You cannot afford to only produce banners for desktop devices since 50% of web traffic comes from mobile. Look for HTML5 banner formats that will adapt to your audience devices.
The 27 best HTML5 banner ads of 2023
Trust your colors
Home Depot is using a minimalist banner with their recognizable orange brand color. It’s important to keep your visuals on-brand.
Trust your brand image
Sometimes, only the name of the brand is needed. It’s the case here with Gucci, a luxury brand that doesn’t need to be introduced.
Reflecting your values
Ikea always keeps it simple. White background, very small text, logo and minimalistic visual. That’s it!
Playing on the season
In summer, spirits rise and consumers are more open to spending. So Nike decided to take advantage of the warm weather craze to highlight its colorful products.
By using the word "essentials", the brand with the comma invites consumers to focus on what's really important, i.e. Nike products. Finally, the call to action (CTA) is both short and ultra-explicit. It's a risk a brand with such a high profile can afford to take.
IBM created an adorable animation inviting you to click and to learn more about their supply chain.
Raise a question
A simple question can sometimes be a wake-up call, bringing to light a prospect's problems. That's what Fiverr does with this HTML5 banner ad..
The banner is made up of 2 parts:
- A highly explicit image
- A text zone including a CTA written in the imperative to increase persuasiveness.
Passing off as Google
"If it's Google, it must be serious". This must have been Logpoint's thinking when launching this campaign.
The company decided to create a very minimalist HTML5 banner ad featuring 2 phrases in black on a white background with a blue CTA button. It looks like a Google pop-up message. So, chance or real bias?
Easy as pie
Why make it complicated when you can make it simple? Rather like the previous example, Nexity decided to adopt a simple structure resembling a Google communication.
An explicit image highlights the benefits of the service. What's more, the phrase in gray arouses the consumer's interest with these three verbs: understand, create and succeed.
A small logo and a simple and clean visual is the way to go! This ad features a single product. Indeed, product shots are a great way to make people click on your ad. If you like the product, you’ll want to know more about it.
Using colors that matches your brand guidelines is a way to be easily recognized by the viewer. Brown gradient, coffee grains, you instantly know which brand we are talking about.
A colorful banner ad
Everyone knows Amazon today. But how many know about the Amazon Music service?
On this HTML5 banner ad, the logo speaks for itself. It couldn't be more explicit. To attract the attention of Internet users, the American giant doesn't hesitate to use bright colors.
The text is very short, but no less intriguing. The word "free" makes you want to take advantage of it. Moreover, the word "now" in the CTA supports the idea that this is an opportunity not to be missed. If we can't call it FOMO, we're not far off.
In this banner ad, the warmer tones make the rings stand out. Neutral colors give a high-end effect to the banner. Perfect for a jewelry brand!
Call your audience to action
Create banners that target a specific need. Here, WordPress is giving you the opportunity to create a website and a blog quickly and easily. They catch your attention with the sentence “Share Your Passion”.
To compensate for the length of its sentence, Granulate plays on the font color to emphasize its promise: "speed". Moreover, the background design gives the impression of movement and therefore reinforces this idea of speed.
Making the image call
Use a visual that illustrates the text message. PayPal is urging the fact that you do not have time to waste by showing a young women in action, in the public transports.
Let your claim stand out
Show what makes you different. In this ad, Samsung is advertising a laptop designed exclusively for gaming and a smartphone with a very efficient camera for low-light.
The magic of a banner ad
Disney + decided to leave its graphic charter aside in favor of that of its product: the series. The Mandalorian series seems to be a "loss leader".
In just 5 words, Disney + manages to convey 2 messages to Internet users:
- Exceptionality, with the word "exclusive
- Simplicity of access with the phrase "streaming now".
Finally, the blue call-to-action button contrasts with the rest of the banner. The CTA includes the word "free" to remove any financial disincentives that might prevent consumers from clicking.
Use an ambassador
Banners with famous people are really powerful. If you like the celebrity advertising the product or service, you’ll want to know why it’s great and how you can do the same.
The call to travel
In marketing, it's advisable to talk about the benefits, not the features, of the product. This is exactly what EasyJet is doing with this advertising banner.
It builds a sense of belonging with the words "this is generations easyjet". Then, an image allows anyone to project themselves. Who doesn't want to soak up the Moroccan sun and relax in a swimming pool? All for €49. If you're going to have an attractive price, you might as well make it stand out.
Make your audience drool
Banners that make you feel hungry and thirsty at the same time are very efficient. This Coca-Cola ad makes you want to share a meal with people you like and enjoy your time together.
A banner that makes your mouth water
We'd expect nothing less from Burger King. In one sentence, they manage to put the competition out of business. If you're told you won't find a better burger than this, will you want to look elsewhere? Probably not. And you won't hesitate long before clicking on "order now".
Apple Music designed an intriguing banner: no visual, small text and a simple CTA. It makes the viewer wanna know more.
We invite you to travel
Less is more. Kayak undoubtedly wanted to follow the saying with this very simplistic advertising banner. A photo, a title, a price and a CTA multiplied by 3 and you understand that you're looking at the best hotel comparator on the net.
If that wasn't clear enough, the phrase "Compare Hotel Prices" is there to remind you.
Let's be honest! Kayak can afford this kind of campaign because they've been building their brand awareness for years.
A product photo is worth a thousand words
The goal of a banner ad is to showcase the added value of your product or service. That’s Nike is doing here by adding small texts in a bold font that draws your attention.
A preview of the store
With this HTML5 banner, Currys allows web users to already have a foot in their online store. Here again, the arrival of fine weather is a great opportunity to communicate.
A simple CTA combined with a 5% discount will attract consumers' curiosity.
Add motivational messages to your banners. In this example, Phillips 66 use the action of buying gas to motivate you to start your day and bring you motivation.
This last example is not an HTML5 banner. However, it's no less inspiring.
A picture is worth a thousand words, and Evian understands this. With this visual, Evian manages to market a neutral product brilliantly. They're not selling water, but rather a second youth.
Now it's your turn to invite to take action and launch your next advertising campaign.
And we have a real treat for you - Abyssale, a dedicated HTML5 banner creator that will help you design and launch amazing banner ads in no time.
Check it out!