What Is an HTML5 Banner? A Simple Guide for Clients
You’re reading a running magazine online. Beside the article, a blue sneaker slides into view. The words “Weekend sale” appear, followed by a “Shop shoes” button. You tap it and land on the blue sneaker’s product page. That little ad could be an HTML5 banner.
What is an HTML5 banner?
It’s a small ad built with the same tools used to make a web page. Picture three pieces. HTML puts the shoe, headline and button on the page. CSS sets their size, color and position. JavaScript can tell the shoe when to slide in or what happens when someone taps. You can review the whole thing in a browser without reading a line of code.
How does the ad get onto a website?
The studio builds the ad and gives the media team a package, often a ZIP file containing the code and pictures. The media team uploads it to the platform named in the campaign plan. When someone opens the magazine article, a space on that page requests an ad. If the shoe campaign is selected, the reader’s browser loads the files and plays the animation right there.
Who are the different vendors?
The creative studio makes the banner. In our shoe example, The Pixel Smiths could design the layout, animate the sneaker and test the button.
The buying platform helps an advertiser buy space. Google Ads is one way to buy display ads. The Trade Desk is another buying platform a media agency might use to find space across many sites. Think of the buyer’s question as “Where should our shoe ad run?”
The advertiser’s ad server delivers the selected creative and helps measure it. Google Campaign Manager 360 is one example. It can help the agency answer “Which shoe banner ran, and how many clicks were recorded?”
The publisher owns the space. In this example, that’s the running magazine. It might use Google Ad Manager to manage the spaces on its pages. A campaign can use a combination of these services. Ask your media team which platform will receive the files and whose specifications to follow.
What are the standard banner sizes?
Read sizes as width × height, in pixels. A 300 × 250 banner is 300 pixels across and 250 pixels tall. Here are five common fixed sizes and what they mean for our shoe ad.
300 × 250 — Medium rectangle. There’s room for the shoe above the offer and a button underneath.
728 × 90 — Leaderboard. A wide, shallow strip. Put the shoe, a short headline and the button side by side.
160 × 600 — Wide skyscraper. A tall, narrow column. Stack the logo, shoe, offer and button vertically.
300 × 600 — Half-page. A tall placement with more width for a larger product photo.
320 × 50 — Mobile banner. A short strip for a small screen. “Weekend sale” and a clear button may be all that comfortably fits.
Your media plan tells you which sizes to order. Ask for the allowed file weight, too. Dimensions tell you how much screen space you have. File weight tells you how much data the reader has to download.
What is a click tag, and why does it matter?
“Shop shoes” is what the reader sees. A click tag is a small piece of the setup behind that button. It lets a compatible ad platform supply the destination and record the click. The page the reader arrives on is called the landing page.
Say the sale starts on Friday. On Thursday, the client changes the destination from the general shoe collection to the weekend sale page. With a properly configured click tag, the media team can update that address in the ad platform without asking the designer to rebuild the animation. Different platforms have their own instructions for connecting a click.
A simple approval test: tap the banner in the ad platform’s preview and check the page that opens. Then ask the media team to confirm click tracking is set up. A button can take you to the right page even when reporting is set up incorrectly.
What is a backup image?
It’s a still version of the ad that the platform can show when it can’t serve the HTML5 version. For our 300 × 250 banner, imagine a 300 × 250 JPG showing the blue shoe, brand, “Weekend sale” and “Shop shoes” together. Pick a frame that makes sense all by itself. An opening frame showing only a blue background would make a pretty poor ad.
The picture itself doesn’t contain a working button. The ad platform supplies the click destination. Ask the media team how to deliver the backup. For example, Campaign Manager 360 accepts it separately from the HTML5 ZIP.
What do I need to approve?
Ask for a preview at the actual size, the backup image and the landing-page link. Play the ad once. Can you tell who’s advertising, what’s on offer and where to click? Read the still image on its own, then tap through to check the product and offer. That’s a useful client review, even if you never open the ZIP.