What are HTML5 Banner Ads?

The Very Basics

HTML5 banners are a type of digital ad created using HTML, CSS, and JavaScript. While other libraries can be used, these are the core components that make up a banner ad.

Unlike static image banners, HTML5 banners can include animations, videos, audio, and interactive elements. These can be tracked independently, while a static ad is only trackable by a single click.

Using standard HTML elements makes these banners highly adaptable, allowing them to work across a wide range of devices, platforms, and browsers.

The Lingo

While the terminology in the banner space can be overwhelming, here are some of the most common ad placements, types of ads, and how they work. Be aware that while most ad networks may have different naming conventions, these terms are basically the same thing.

Static Ads

While these are not in the scope of HTML5 banners, it’s good to understand them. Static ads are simply images in the form of a JPG or PNG with no animation.

HTML5 Banner Ads

This is the most common type of advertising. Depending on the specifications, these ads are usually limited to a 100kb file size and must be delivered in a contained package, such as a .zip file. HTML5 banner ads typically only contain graphics and animation. The most common sizes are 300×250, 728×90, 160×600, 970×250, 300×600, and 320×50.

Common Terms for Banner Sizes:

• MPU (Medium Rectangle): Commonly 300×250 ads that are placed within a website’s content. This is the most popular size due to its versatility.
• Leaderboard: These are banners that are placed at the top of a webpage. They are wider than they are tall, typically with sizes of 728×90 or 970×90.
• Skyscraper: These are taller ads, usually placed in the left or right-hand gutter of a webpage. Their sizes are typically 160×600 or 300×600.

Placements of banner sizes on a mockup page:

Rich Media Banner Ads

There are a number of different types of rich media placements, and most websites offer their own unique formats. The following are the most common types you’ll encounter.

Video Banner Ads

These are pretty self-explanatory: they are ads that have a video embedded in them. The video can serve as a lead-in to a message or act as a trailer at the end of the ad. Intro videos are usually limited to 15 seconds, while a user-initiated video at the end can be up to 1-2 minutes long, depending on the placement.

Here is a video banner ad for The Rookie. Hit the replay button to restart it.

Expandable Banners

These ads typically start as a small placement (like a 970×90) and, upon a user’s click, expand to take up a majority of the webpage (expanding to 970×418). Most interactive elements, such as videos, galleries, or custom widgets, are placed within the expanded portion.

Pushdown Ads

Pushdowns are a more advanced type of expandable ad. When a user clicks on the smaller ad, the entire page and its content drop down to allow the larger ad to expand into the new space.

Page Takeover Ads

Takeovers usually combine multiple types of rich media with a site-served wallpaper (images in the gutters) that themes the entire website to the advertisement. The most common type of takeover you’ll see is an expandable banner served with a video or a standard HTML5 banner with a wallpaper behind the main content of the website.

IMDB Takeover ad for Death and Other Details:

Interstitial Ads

These ads place themselves between you and your destination, whether it’s another page or additional content. They are usually full-screen ads that force you to click somewhere to close them.

Here is a type of interstitial ad for Station 19 on Spotify. This ad appears before you can listen to more songs:

Dynamic Ads

Dynamic banners use content based on a user’s browsing history, location, or real-time data. These ads adapt their messaging to give the user a more customized advertisement.

Lightbox Ads

Lightbox banners are ads that overlay the page, usually making the background dark, when a user interacts with something on the page. The ad is typically centered in the middle, and the user is forced to click to close it.

As mentioned previously, there are many other types of ads out there. Every platform or site may have their own unique formats, so it’s always best practice to check with your vendor or website to see what types of ads they offer.

Rich Media Vendors

For the most part, you cannot simply build an HTML5 ad and hand it to a website to serve. The only exceptions are smaller websites with a very personal approach to advertising. Larger sites use vendors to host the files and then serve the ad using IDs from a DSP (Demand-Side Platform). This allows the site to be more dynamic with placements, which enhances the viewing experience for the user.

A vendor essentially holds the files for the creative, while the DSP is a catalog of all those creatives that a site can choose from. Some platforms offer both creative and DSP services, while others focus on one or the other.

Here are some platforms for handling rich media ads:

Google Marketing Platform:

Most commonly known as Google Ads, DoubleClick, or Display & Video 360. Google is the largest ad network, and you can create and serve virtually any type of rich media ad directly from the platform.

Adform:

Adform is an independent ad tech company that offers a full-stack platform and a creative studio. It is well-known for its strong support for creating and serving rich media ads.

Celtra:

While not an ad-serving platform, Celtra is a rich media creative management platform. It is often used to build and manage dynamic, interactive rich media ads that are then served through platforms like Google or The Trade Desk.

Sizmek:

Sizmek has long been a leader in ad serving and rich media. Its technology is still a staple for many advertisers who need advanced creative management and robust ad-serving capabilities. I remember when Sizmek was called Eyeblaster, then rebranded as MediaMind before becoming Sizmek.

Teads:

Teads specializes in video and rich media ads that appear outside of traditional video players and are placed within editorial content. This is a popular vendor for brands seeking high-impact video and rich media placements.

Ways to Create HTML5 Ads

There are multiple ways to create rich media ads. Some platforms offer their own builders, while others allow you to import your own files. Each method has its pros and cons, but for the most part, the method you choose depends on your level of experience.

Hand-built from scratch:

This is the way I create my rich media ads. Handmade ads are built using HTML, CSS, and vanilla JavaScript. For animation, you can use CSS3 or a JavaScript library like Greensock. I typically prefer this type of build because it allows for on-the-fly customization and modification without being restricted by a sandboxed platform.

Adobe Animate:

This is where many displaced Flash animators went. It’s essentially a modern version of Flash that exports to HTML. It is great for animators who prefer to work visually and see their animations in real-time. I generally no longer use Animate due to the way it can bloat file sizes.

Canva:

While known for its static design capabilities, Canva has expanded to include a basic animation builder and video creator. These can be used to create simple, animated ads that are a step up from static images.

Creatopy (formerly Bannersnack) and BannerNow:

These are cloud-based platforms for designing, animating, and managing HTML5 display ads.

Some rich media platforms that have their own builders for creating ads are: Google’s Studio, Celtra, Adform, Adventive.