How To Design & Develop Impactful HTML5 Banner Ads for the Google Ads Display Network

Many digital marketers are under the impression that if their Google Ads (formally Google AdWords) display banner advertisements have a simple and clear call to action, represent a good price, and are search engine optimized, the campaign will be successful.

The truth is, your display banner can have all of those elements, and people will still not click through if there is not a clear, strong strategy behind it.

So how do banner ads work? A successful banner creation strategy includes: a good design, an eye catching animation and efficient use of the 15 second animation limit, actionable end frames, a persuasive message that resonates with your target audience, and use of the most effective ad sizes across mobile and desktop screens.

If your banner ad does not include these essential components, then people are not going to click and convert. Furthermore, if your banner is poorly designed, then they will not even give it any attention. When designing display banners, you must remember that quality and trust go hand in hand. People are much more likely to trust, and inevitably act on, a high quality banner that shows up on their screen at the right place and right time.

Now that you know the fundamental ingredients that make up a quality banner ad, I am going to explain how you can put these elements in action and run a successful display campaign on Google Ads.

Performant Banner Ad Sizes

In order to get your banner ads on a variety of different websites and mobile apps, the most performant and popular banner ad sizes that Google recommends are:

• 320x100 This size is a large mobile banner. This display banner has twice the height available than the standard, mobile leaderboard.
• 300x250 This is a medium inline rectangle. There is more ad inventory for this size than other sizes, so it’s usually more profitable. This is both a mobile and desktop size.
• 336x280 This is a large rectangle, and there is more ad inventory for this size, as well. It is a desktop size.
• 728x90 This size is known as a “leaderboard,” and it is desktop size. There is a lot of inventory for this display ad size, also. Banner ads of this size perform best when placed above main content.
• 300x600 This is a half-page desktop size. It’s good to use if you have a lot of information to get across in your impactful banner ad. It is one of the fastest growing sizes by impressions.

Representation of Your Company

A good display banner will always include the company name and logo in each frame. When your logo is consistently present in the design, it will demonstrate who the ad belongs to and will create a connection between the advertisement and the advertiser, as well as a connection between the advertisement and the landing page that it directs to.

Principles of Design

Did you know that 93% of users make their shopping decisions based on visual appearance? When designing banner ads, always refer back to the basic principles of design: color, contrast, repetition, alignment, and proximity.

There is no clear answer on how to incorporate these principles to make your campaign successful. It is a matter of experimenting to see what works and what does not, testing, optimizing, and analyzing.

Choose colors and elements that make your display ad stand out, but also keep things simple. In the end, it is a trial of balance. You want your ad to be seen, but you don’t want to overstimulate and overwhelm the eyes! It is important to keep your message consistent between the banner and the landing page; therefore, it is good practice to coordinate the colors with the company’s branding. This creates a seamless experience when users click the ad, and it helps eliminate any cause for confusion when the user is brought to a new screen.

It is also best practice for your banner ad to have a border around it, especially when the background of the ad is white. This prevents the banner from blending in with the website it is served on. Contrast is essential for allowing your banner ad to stand out.

Fonts

There is one simple rule to follow when choosing the font for your banner ad: people need to be able to read it online. The more readable your font, the better the chances are that people will actually pause what they are doing and read your message. Also use a color that contrasts with the background so the text stands out.

Another recommendation is to convert text to SVGs whenever it is possible. This will keep the font crisp. If you use this strategy, convert the text to outlines. SVGs are supported in most browsers, so this strategy will not harm the performance of your ad.

Copy

People can only process about five words per second. For this reason, it is good to keep the banner ad copy no longer than five to ten words.

Your display banner message should hook the reader in so they continue to read and react, and it should also resonate with that by digging at their emotional touchpoints. Avoid generic call to actions because these will decrease engagement. Instead, focus on user benefits and speak to the needs of your target audience.

Do you remember the stages of the customer journey? You can tailor your message to the different stages and differentiate yourself from competitors by including the unique aspects of your business, promotions, and pricing if it’s relevant to your advertisement.

Image Quality

Your HTML5 banner will perform better if the images that you use are consistent with your intended message. Choose images that dig into the pain points of your prospect’s needs, motivations, and emotional triggers.

Images should also be crisp and of high quality. The best way to achieve this is by using retina (2x) image assets. For example, use a 640x200 image for a 320x100 banner ad. Keep in mind when designing with this strategy that the asset will be larger, and you don’t want to exceed the maximum file size for Google Ads– remember when using larger file sizes than the maximum file size is 150 KB. There are a lot of tools online to reduce file size and conserve image quality. TinyPNG is free to use and very user-friendly.

If your file size ends up exceeding the 150 KB maximum, you can maintain the quality of your images and reduce the file size by creating sprite sheets (learn more about sprite sheets.) You will compile all of your images and animations into one large image (sprite sheet), and you will use background-position in the code to position them. We recommend using TexturePacker to help speed up this process.

Actionable End Frames

The last frame of your display banner should be eye catching and actionable with a clear call to action. Often, users might not notice the display ad until the end of the animation, so the end frame needs to give them all of the information they need to engage. Best practices are to have the end frame show the most important part of the message and a supporting call to action that stands out.

Call To Action (CTA)

Consider the CTA as the bridge between you and your ideal customer. What will get them to engage with the ad and cross that bridge? A clear and compelling call to action. Make the CTA a colored button that stands out from the rest of the banner content. Even if the button contains a short message like “shop now” or “learn more,” it will be more visible and encourage user to click. For even higher engagement, add animations to the button.

Animation

If designed well, animated display banners will attract people’s attention more than static banners and receive more engagement. Animated banners should not distract the viewer from the central message of your ad, so animations should be subtle and seamless, but impactful.

According to the IAB, animation should not be more than 15 seconds and not loop more than three times. You should always confirm with the network and publishers that you are running your ad to confirm it complies with their regulations.

When incorporating animations, keep the copy succinct and use the animation to enhance the most important part of your message. Use the 15 seconds limit wisely by conveying the most important part of your message as soon as possible.

Use Animation Libraries

At Electric Enjin, we use GreenSock's library. This library allows us to create animations in the banner and not impact load times, which promotes better overall performance.

Did you know that “35 KB” is not always exactly 35 KB? This is the case for an animation library. When things are cached on the internet they have no impact on the bandwidth and consequently, load immediately. So once the library has loaded once, it is cached and your ads will be served up more quickly than if you did not utilize a library.

Create a Template Gallery

If you want to be efficient with your time and remain consistent throughout your projects, use a banner template. If you have not created one yet, we have made a downloadable template, which is available at the end of this blog.

File Size & Format

When preparing to upload your HTML5 Banner to Google Ads, keep in mind that your compressed zip files should be no larger than 150KB. If your file is any larger, Google will disapprove of the upload.

Also remember the formats permitted. The final product should only include JPEG, SWF, PNG, GIF, or SVGS (with no filters).

Amount of Files

You already know that you have to keep your file size under 150 KB, but actually, the file size is not what Google is worried about. You should focus on limiting the number of files to not exceed ten. Problems can occur in uploading and running an optimal campaign when there are too many files due to how many requests a server has to do to show all of the files.

Validate Your Ads

Google Ads has an HTML5 validator tool that you can use to check your ads and make sure they will run correctly. Always check your display ads before uploading them and giving the greenlight on your campaign.

Now that you have all the tools and best practice strategies to build an effective banner ad, start designing! We have provided a template that you can download and use for when developing your next banner ad. When designing, the most important thing to remember is the customer. If you design with them in mind, your display campaign will be successful!