Google Display Ads: Ultimate guide for HTML5 banner ads

Published June 06,2024 | by Venessa Perez

HTML5 banner ads are a fantastic way to promote products, services, or brands. This guide is filled with learnings, examples, and templates we've gathered along the way.

What are display ads?

Display or banner ads are online advertisements that use images, text, and calls to action to promote products, services or brands. They can appear on websites, apps, or social media platforms. Display ads are often served based on a user's interest or topic they are browsing and they are served by ad networks such as Google's Display Network or GDN. There are a number of ad networks but GDN is one of the most popular, serving 49% of the ads on the internet so we'll be focusing on GDN for this article.

What are the main ad formats that can be used in a google display ads campaign?

Good Display Network offers different types of ads HTML5, Image, and Responsive. Learn more and see examples below.

• HTML5
• Image
• Responsive

HTML5 banner ads are custom ads created using HTML, CSS, and Javascript. They can include interactive elements, animation, image galleries, even video. They provide a much more engaging experience than Image ads, making them more likely to grab your audience's attention.

HTML5 banners are not as flexible as the responsive ad and can't be adapted automatically to fit any space so you lose out on the opportunity to get your ads in as many places as possible. What they lack in flexibility, they offer in control over design and creativity, making them the best choice for businesses that focus on showcasing their brand. Read below to learn more about designing and creating your own html5 banner ads.

HTML5 banner ads use HTML, Javascript, and CSS to create a more engaging experience

What are HTML5 banner ads?

HTML5 banner ads are a type of digital marketing created using HTML, CSS, and Javascript. There are two types of HTML5 banner ads: Display and Rich Media.

• HTML5 display ads are simple image ads that are surrounded by a tag that leads to an advertiser s website.
• HTML5 rich media ads include interactive elements like animations, games, videos, audio and so on. They are essentially tiny web sites that engage users and ultimately lead them to a call to action. The combination of these helps create dynamic, interactive ads. Unlike traditional display (or static) ads, rich media ads make your message come to life with interactive elements like animations, videos, and dynamic content. This makes them more engaging and visually appealing, often leading to greater user engagement.

Designing HTML5 banner ads

There s a couple things to know when designing for banner ads. We ll use the guidance for Google Ad Network since it s the most popular but be sure to check the spec for the platform your ads will be displayed on.

Key considerations when designing HTML5 banners

1. File sizes The final files including all html, css, javascript, fonts and CSS have to be under 150k. Typically the html and javascript files are small on these files so optimizing images is typically what you have to watch out for.
2. Images can be GIF, JPG, PNG. Images are typically what adds the largest amount to the file size so be sure to optimize by compressing images when possible. Here's a guide for online tools that offer image compression.
3. Fonts Google Display network only allows google fonts. So if you re using a font that s not in their font manager then they will need to be made a graphic, which will add to the file size.
4. Banner sizes Another consideration for banners are sizes. There are a lot of sizes you can design for but ultimately it will depend on your business goal and budget when selecting the sizes that work best for you. In the next section, we will go over popular and best performing

Tools and Apps for designing banner ads

You can design banners using any design program like Photoshop or Illustrator and there are apps that specialize banner ad designs. Here are a couple of those tools.

• Google Web Designer. Think of it as the Swiss Army knife of banner creation—it's got both design and development tools in one place. Plus, banners made here are guaranteed to work seamlessly across the GDN network. Start from scratch or import your Photoshop designs via a nifty plugin. You can even whip up animations and export them to HTML5. The catch? The interface can be a bit of a labyrinth, even for seasoned designers. You can also do as much as the tool allows so some cool animations that are possible to do with custom HTML code are just not possible when using this tool.
• BannerBoo This online tool is like the fairy godmother of animated banner ads. It boasts a user-friendly interface with basic features and a timeline to bring your banners to life. What sets BannerBoo apart is its selection of pre-animated templates, making it a top choice for rich media banners.
• Creatopy Another great pick for animated banners, Creatopy is a doppelganger of BannerBoo but with its own flair. It includes a timeline feature and a straightforward interface for crafting animated ads. Their template library is a treasure trove of inspiration. Their template library is a treasure trove of inspiration.
• Shutterstock. Shutterstock isn't just about stock photos. It also offers a nifty online photo editor. Click on "Templates" on the left, search for banners, and voilà—banner templates galore!
• AdCreative.ai Meet the new kid on the block. This tool uses AI to auto-generate ads in various sizes and is part of SEMRush's ad network. It's a bit pricey, starting at $120/month, but it's packed with cutting-edge features.
• Canva. Tailor-made for small business owners, Canva offers a breeze-easy interface and a treasure chest of templates to kickstart any design project.
• AdobeExpress. From the brains behind Photoshop and Illustrator comes Adobe Express—a lighter, newbie-friendly design tool. It’s perfect for beginners and offers thousands of banner templates.
• Figma. Our go-to tool for all things digital design. Figma is fantastic for custom, hand-crafted designs. We've even created a banner template to streamline our process and developed a plugin to help design and export the baseline HTML, making development a cinch.If you’re a Figma whiz, take a look at this great tutorial for setting up banners with components for easy updates.

Popular HTML5 banners sizes

HTML5 banner ads come in a variety of sizes and some sizes convert better than others. Choosing banner sizes will ultimately depend on what the business needs and the budget you're working with. Here's a list of the most popular sizes organized by best performing for high-end, mobile devices and desktop computers.

Banner sizes for desktop computers and mobile devices.

	200x200	Small square
	240x400	Vertical square
	250x250	Square
	250x360	Triple widescreen
#1	300x250	Medium rectangle
#2	336x280	Large rectangle
	580x400	Netboard
	120x600	Skyscraper
	160x600	Wide skyscraper
#4	300x600	Half-page
	300x1050	Portrait
	468x60	Banner
#3	728x90	Leaderboard
	930x180	Top banner
	970x90	Large leaderboard
	970x250	Billboard
	980x120	Panorama
	320x50	Mobile banner
	300x50	Mobile banner
#5	320x100	Large mobile banner

Source: Google Display ads specifications, Guide to ad sizes

Examples of HTML5 banner ads create

As you get your creative juices flowing, here are some clever HTML5 banner ads to whet your appetite.

Developing HTML5 banner ads

Developing HTML5 banner ads, is essentially developing a mini web site. It needs well-structured HTML, CSS for formatting and animation, and Javascript for functionality. It can be a simple html page that serves up a static image or a complex mini-experience with audio, gaming feature and so on. If you do not have experience developing a website, consider looking at tools that automatically create the code for you, such as Google Web Designer, BannerBoo, and Creatopy. If you have experience with HTML, creating a custom, hand-crafted banner experience can really make your ad campaigns pop.

Key considerations

1. Optimization: Ensure your banner is optimized for performance. This includes minimizing file sizes, reducing the number of HTTP requests, and optimizing images and animations. The max file size (with all of these combined) is 150kb.
2. Cross-Browser Compatibility: Test your banners across different browsers and devices to ensure they function correctly and look consistent everywhere.
3. Fallback Options: Include fallback options for users who may have older browsers or disabled JavaScript. This can be a static image that conveys the core message of your banner.
4. Ad Network Requirements: Different ad networks may have specific technical requirements for HTML5 banners. Ensure that your banner meets these requirements to avoid any issues during the ad submission process.
5. Accessibility: Consider accessibility features, such as providing alternative text for images and ensuring that interactive elements can be navigated using a keyboard.

Conclusion

HTML5 banners represent a significant advancement in digital advertising, offering a level of interactivity and engagement that static ads simply can't match. By understanding what they are, their uses, and how to design and code them effectively, you can harness their full potential to drive better results for your marketing campaigns. Whether you're aiming to increase brand awareness, generate leads, or promote a product, well-designed HTML5 banners can help you achieve your goals with greater efficiency and impact.