How to Create and Design Engaging HTML5 Banners for Google Ads Display Ads

Posted Posted in Blog, HTML5 banner ads     

Many digital marketers believe that their Google Ads (formerly Google AdWords) banner advertisements will be effective if they have a simple and straightforward call to action, a good price, and are search engine optimised.

The fact is, even though your HTML5 banner features all of those elements, people will not click through unless it is accompanied by a strong, effective strategy.

So, how do banner advertisements work? A good design, an eye-catching animation and productive use of the 15-second animation cap, actionable end frames, a powerful message that resonates with your target audience, and the use of the most appropriate ad sizes across mobile and desktop screens are all part of a successful banner creation strategy.

People will not click or convert if your banner ad lacks these basic components. Furthermore, they would not pay attention to your banner if it is badly made. When creating display banners, keep in mind that quality and trust are tightly connected. People are far more likely to trust and act on a high-quality banner that appears on their screen at the right time and in the right place.

Now that you know the basic components of a decent banner ad, I’ll show you how to bring them together and run an effective display campaign on Google Ads.

Banner Ad Sizes That Perform

The most performant and popular banner ad sizes that Google recommends for getting your banner ads on a variety of different websites and mobile apps are:

320×100 px
This is a big mobile banner size. The height of this display banner is twice that of a standard mobile leaderboard.

300×250 px
This is a rectangle with a medium inline width. Because this size has more ad inventory than other sizes, it is usually more profitable. This is a mobile as well as a desktop size.

336×280 px
This is a large rectangle, and the ad inventory for this size is also larger. It’s a standard desktop size.

728×90 px
This size is referred to as a “leaderboard,” and it is suitable for use on a desktop. This display ad size has a lot of inventory as well. This size of banner ad performs best when placed above the main content.

300×600 px
This is a desktop size of half-page. It’s a good option if you need to convey a lot of information in your eye-catching banner ad. It is one of the most popular sizes in terms of impressions.

Reflection of Your Business

Each frame of a good HTML5 banner will always include the company name and logo. When your logo is used consistently throughout the design, it shows who the ad belongs to and establishes a link between the ad and the advertiser, as well as a link between the ad and the landing page to which it directs.

Design Principles

Did you know that 93% of people make their purchasing decisions on how something looks? Always remember the basic design principles: colour, contrast, repetition, alignment, and proximity when creating banner advertising.

There is no one-size-fits-all approach to incorporating these principles into an effective campaign. It’s a matter of checking, optimising, and evaluating to see what works and what doesn’t.

Choose colours and elements that will stand out in your HTML5 ad while keeping things plain. In the end, it’s a balance test. You want your ad to be seen, but you don’t want to overstimulate the eyes! Since it’s important to keep the message consistent from the banner to the landing page, it’s a good idea to match the colours to the company’s branding. When users click the ad, the experience is smooth, and it helps to remove any frustration when the user is taken to a new screen.

It’s also a good idea to have a border around your banner ad, particularly if it’s on a white background. This keeps the banner from looking like it belongs on the page where it’s being shown. For your banner ad to stand out, it needs to have plenty of contrast.

Typeface (Fonts)

When it comes to choosing a font for your banner ad, one basic rule to remember is that it must be readable online. The more readable your font is, the more likely people will take a break from what they’re doing to read your post. Make the text stand out by using a colour that contrasts with the context.

It’s also a good idea to convert text to SVGs whenever possible in HTML5 banner. The font would be crisp as a result of this. Convert the text to outlines if you’re going to use this technique. Since SVGs are supported by the majority of browsers, this strategy will have no negative impact on the output of your ad.

Content (Copy)

A person’s ability to process information is limited to about five words per second. As a result, the banner ad copy should be no more than five to ten words long.

Your display banner message can motivate the reader to keep reading and reacting, as well as communicating with them by tapping into their emotional touchpoints. Avoid using generic call-to-actions, as they can reduce interaction. Instead, concentrate on user benefits and appeal to the target audience’s needs.

Image quality

If the images you use in your HTML5 banner are inline with your intended text, it will work better. Choose photos that address your prospect’s common issues, motives, and emotional causes.

Images should be clear and high-resolution. Using retina (2x) image assets is the best way to do this. Use a 640×200 picture for a 320×100 banner ad, for example. When designing for this technique, keep in mind that the asset would be bigger, and you don’t want to go over the maximum file size for Google Ads– note that the maximum file size is 150 KB when using larger file sizes. There are numerous online resources for reducing file size and preserving image quality.

If your file size exceeds the 150 KB limit, you can create sprite sheets to keep the quality of your images while reducing the file size. All of your images and animations will be compiled into one big image (sprite sheet), and background-position will be used in the code to position them.


Animated HTML5 banners can draw more attention and interaction than static banners if they are well-designed. Animated banners should not distract from the core message of your ad, so they should be subtle and smooth while still having an effect.

The IAB recommends that animations be no longer than 15 seconds and loop no more than three times. Often double-check with the network and publishers where your ad is running to make sure it complies with their rules.

Final Frame

Your HTML5 banner’s final frame should be eye-catching and actionable, with a straightforward call to action. Since users may not see the show ad until the very end of the animation, the final frame must provide them with all of the details they need to engage. The most critical aspect of the post, as well as a supporting call to action that sticks out, should be seen in the end picture.


Think of the CTA as a connection between you and your ideal client. What would entice them to interact with the advertisement and cross the bridge? A strong and straightforward call to action.
Make the CTA a brightly coloured button that stands out from the rest of the banner. Even if the button just says “buy now” or “learn more,” it will be more noticeable and prompt the user to click. Add animations to the button for even further engagement.

Files, Formats and Validation

Keep in mind that your compressed zip files do not exceed 150KB when planning to upload your HTML5 Banner to Google Ads. If your file becomes too big, Google will reject the upload.

Also, keep in mind the formats that are allowed. Only JPEG, PNG, GIF, or SVGS should be used in the final product (with no filters).

You probably already know that your file must be under 150 KB in size, but that isn’t what Google is concerned with. You should try to keep the number of files to ten or less. When there are so many files, problems will arise in uploading and running an optimum campaign due to the number of requests a server must make to display all of the files.

You can use HTML5 validator tool from Google Ads to double-check your ads and ensure they’ll run properly. Always double-check your display ads before uploading them and approving your campaign.

HTML5 Banner Design Service

You are now well aware of the numerous advantages of HTML5 banners. They’re much more adaptable and flexible, catering especially to smartphone users in an ever-changing digital environment. Similarly, they noticeably increase the users’ browsing experience. Because of the smaller file sizes, your ads can load much faster, and rich media content is an engaging and exciting way to engage with your audience.

Invest in your business a high-quality HTML5 banner ads today, and watch your sales skyrocket. We design engaging, fully animated, Google Ads friendly HTML5 banner ads – that really work. You can order a package with different sizes and quick delivery just for a tinch of your advertising budget. With the revenue that this will produce for your business, it is well worth a tiny upfront investment.