Anyone can drag shapes around a template tool and export "an HTML5 banner." Getting that banner to pass DV360's 150KB validation, fire its click tag correctly, animate smoothly on a three-year-old Android phone, and survive an ad-ops QA check — that's a different job entirely. This guide walks through the full professional workflow, step by step.
If you're still asking what HTML5 ads are and why they replaced GIFs and static images, start with our complete beginner's guide to HTML5 ads. This article picks up where that one ends: you know what they are — here's how they actually get made.
First, Understand What You're Building
An HTML5 banner is a tiny self-contained webpage, packaged as a ZIP file, that runs inside an iframe on a publisher's site. Strip away the mystery and a typical production-ready banner contains just a handful of files:
Everything in this guide exists to get that folder built correctly, compressed under the platform's file-size cap, and validated on upload. Here's what "correct" means in numbers:
What You Need Before You Touch Any Code
Most banner production delays happen before production starts — missing assets, vague specs, no destination URL. Lock these five things down first:
- The size matrix. Which dimensions does the media plan actually need? The standard set: 300×250, 728×90, 160×600, 300×600, 320×50, and 970×250.
- The platform. DV360, Google Ads, Celtra, Adform, and Flashtalking each have different file-size caps, click-tag formats, and packaging rules. Know the destination before you build.
- Layered design files. Figma or PSD masters with editable text layers — not flattened JPEGs. Brand fonts licensed for web use.
- The animation story. Two to three frames maximum: hook → message → CTA. If the storyboard needs a paragraph to explain, it's too complicated for a banner.
- Click-through URL and exit behaviour. Where does the click go, and is it one exit or multiple?
The 7-Step Production Workflow
This is the same sequence whether you're building one banner or a 40-unit campaign set. The order matters — every expensive mistake in banner production comes from skipping a step or doing them out of sequence.
Lock the Spec Sheet
Pull the official spec for your target platform: max file size (initial load and total), allowed file types, animation length, loop count, border requirements, and click-tag format. Print it. Everything you build gets checked against this sheet.
Design the Master Size First
Build 300×250 (or 970×250 for layout-rich creative) as the master. Get client sign-off on this single size — copy, animation, CTA — before touching the other dimensions. Resizing approved creative is cheap; redesigning eight sizes after feedback is not.
Choose Your Build Method
Google Web Designer for simple, Google-destined banners on tight timelines. Hand-coded HTML/CSS/GSAP for anything going to DV360 at scale, rich media, or multi-platform campaigns — the output is 30–60% smaller and far easier to QA. Full breakdown in our GWD vs hand-coded comparison.
Build Structure, Then Animate
Code the final frame first — fully laid out, all elements in their end positions. Then animate elements into that frame. This guarantees the banner still communicates if animation fails, and it's how you keep the last frame compliant with platforms that require a static end state.
Implement the Click Tag
The #1 cause of rejected uploads. Each platform expects a specific click-tag variable and exit syntax — code samples for the big three are below.
Optimise to Weight
Convert images to WebP, subset fonts, prefer CSS animation over JS libraries where possible, minify, and polite-load anything heavy. Ten techniques with numbers in our 150KB optimisation guide.
QA, Package, Validate
Test in Chrome, Safari, Firefox, and on a real mid-range Android device. Verify the click tag fires. ZIP each size with index.html at the root (not nested in a folder), then run it through the platform's validator before handing over.
Animating the Banner: CSS vs GSAP
For simple sequenced fades and slides, pure CSS keyframes cost zero kilobytes of library weight:
For anything beyond entrances — timeline scrubbing, staggered elements, easing curves, sequenced loops — GSAP is the industry standard, and most major ad platforms host it on their CDN, meaning it doesn't count against your file-size limit:
repeat: 2 = 3 plays) — don't leave it infinite and hope QA misses it. They won't.
Click Tags: The Step Everyone Gets Wrong
A click tag is a variable the ad server injects into your banner at serve time, carrying the tracked destination URL. Hard-code your client's URL instead, and the platform either rejects the upload or — worse — serves it with zero click tracking. The syntax differs by platform:
| Platform | Implementation |
|---|---|
| Google Ads / GDN | var clickTag = "https://www.example.com"; declared in index.html, with the banner's wrapper using window.open(clickTag) on click. Variable name must be exactly clickTag — case-sensitive. |
| DV360 / CM360 (Studio) | Uses the Enabler library: Enabler.exit('Exit_Name') on the click handler. Destination URLs are managed inside Campaign Manager, not the creative. Supports multiple named exits. |
| Adform | dhtml.getVar('clickTAG') retrieved via Adform's DHTML library, opened with dhtml.external.open(). Requires a manifest.json in the package. |
| Celtra / Flashtalking | Handled by the platform's own builder/API layer — clicks are wired in the platform UI rather than raw code. Details in our platform comparison. |
Minimal working example for a Google-destined banner:
The Pre-Upload QA Checklist
Run every size through this list before anything leaves your desk. It takes ten minutes and prevents the 48-hour rejection-resubmission loop:
- File size under the platform cap — initial load and total (subload) weight
- Animation stops within 15 seconds / 3 loops and ends on a complete frame
- Click tag implemented in the platform's exact syntax — and actually fires on click
- Entire banner surface is clickable, not just the CTA button
- 1px border or contrasting background edge present (required on white-background creative)
- All fonts render correctly — webfonts subset and embedded, no silent fallback to Arial
- Renders identically in Chrome, Safari, Firefox, Edge — and smoothly on a mid-range Android
- No console errors, no external requests to non-whitelisted domains
- ZIP packaged with index.html at root level, one ZIP per size, named to the client's convention
- Backup static image (JPG/PNG) supplied for each size
5 Mistakes That Get Banners Rejected
- Hard-coded destination URLs instead of the platform click-tag variable — instant rejection on Google platforms.
- Blown file budgets from PNG photography. A single un-optimised product shot can eat 120KB of a 150KB limit. WebP at quality 75–80 typically cuts image weight 25–35%.
- Infinite animation loops. Compliant on almost no major platform. Set the repeat count in code.
- Nested ZIP folders. If unzipping produces a folder containing index.html instead of index.html itself, many validators fail the package.
- Desktop-only testing. The majority of display impressions are mobile. A banner that stutters on a mid-range Android is a banner that underperforms — even if it passed validation.
DIY Banner Tools vs Professional Production: An Honest Answer
Browser-based banner makers (BannerBoo, Bannerflow, Creatopy and others) are genuinely fine for one use case: a small business that needs a handful of simple animated banners for its own Google Ads account, with no agency QA, no DV360 trafficking, and no rich media.
The moment any of the following is true, template tools stop being the cheap option and start being the expensive one:
Template Tools Work When
- You need 1–5 simple banners, Google Ads only
- No brand-font or pixel-perfect layout requirements
- Nobody downstream will QA or traffic the files
- Animation is basic fade/slide presets
They Break Down When
- Campaigns run on DV360, Celtra, Adform or Flashtalking
- You need 20–40+ units across sizes and markets
- Creative requires custom animation, DCO feeds, or rich media
- Template-generated code fails file-size or QA validation
- Every revision round means rebuilding from the template
This is the same reason AI code generation hasn't replaced banner production teams: generating something that looks like a banner is easy. Producing 40 platform-validated, brand-accurate, QA-passed units on a campaign deadline is a production discipline.
Or Just Send Us the Brief
DigiLakshya builds 1,000+ platform-validated HTML5 banners every month for agencies across the US, UK, and Australia. Master + full size set, delivered in 24–48 hours, QA'd against the spec sheet above.
The Bottom Line
Creating an HTML5 banner ad comes down to seven disciplined steps: lock the spec, design one master, choose the right build method, code the end frame then animate into it, implement the platform's exact click tag, optimise to weight, and QA against a checklist before packaging. None of it is glamorous — all of it is the difference between creative that validates first time and creative that bounces between your inbox and ad ops for a week.
Learn it once and the process scales. Or hand it to a team that runs this workflow a thousand times a month — either way, now you know exactly what "production-ready" means.