Most HTML5 banner problems are not dramatic engineering failures. They are small handoff gaps: a missing backup image, a ClickTag that works locally but not in the platform, a ZIP that includes source files, a final frame that differs from the static fallback, or a compressed product image that looks rough on high-density screens.

A clean QA pass catches those problems before the campaign team is waiting. It also makes approvals calmer because producers, media teams, and brand managers can review the same concrete package instead of interpreting a design preview.

Start with the package, not the animation

Open the exported ZIP as if you are the platform reviewer. The root should be simple: an HTML entry file, the assets it needs, and no design sources, old previews, screenshots, uncompressed exports, or hidden working folders. If the platform expects a specific filename, match it before upload.

Then check the real compressed size. Do not estimate from the project folder. The ZIP is the deliverable, and some platforms judge the archive while others judge the unzipped assets. If the media plan has a strict weight limit, document which number you checked.

Joerg Lienert

Joerg Lienert 300 x 250
Use the live unit as the QA object, not a screenshot of the design. A restrained reference for checking package basics: clear first paint, compact assets, readable final frame, and no surrounding interface needed to understand the creative.

ClickTag needs platform-level thinking

Click behavior should be tested in the same way it will be passed to ad ops. A hardcoded link may look fine in a browser preview, but many platforms need a ClickTag variable so they can inject tracking and destination URLs at serving time.

The clickable area should also be intentional. Usually the whole banner should click through. Avoid placing separate invisible layers over buttons unless the platform requires it, because extra layers can create inconsistent behavior between local previews and ad-server validation.

Compare first frame, final frame, and backup

A backup image is not a decorative extra. It is the version people may actually see if the HTML creative cannot run, so it should carry the same commercial message as the final frame: brand, offer, product cue, and CTA.

Sephora

Sephora 320 x 480
QA the fallback against the live final frame, not against memory. The portrait format makes backup-image review obvious: if the HTML cannot run, the static fallback still needs to carry the product cue and final commercial message.

The first frame deserves the same attention. If there is a blank flash, an unstyled element, or a late-loading image, the banner feels unfinished even when the rest of the animation is polished. Load the built HTML directly from the exported folder and watch the first second several times.

Review motion against the media buy

Animation timing is not only a design taste question. Some placements loop, some stop, some have duration limits, and some publishers are sensitive to aggressive motion. Confirm whether the banner should loop, how many times it should loop, and what the last frame should look like when motion ends.

For GSAP banners, a production-friendly timeline is explicit. Labels, repeat settings, and final states should be easy to inspect. If a future resize or copy variant needs the same behavior, the timeline should not depend on fragile delays or browser timing accidents.

CNC

CNC 300 x 600
Review timing in the real placement size before packaging. A tall unit exposes pacing mistakes quickly because the eye travels farther. It is a useful format for checking whether motion supports hierarchy instead of simply adding activity.

Use a short preflight checklist

A repeatable checklist keeps QA practical. It does not need to be long; it needs to be run every time, especially when a campaign has many sizes or localized variants.

  • ZIP opens cleanly and contains only production files.
  • Built HTML runs from the exported folder without a local dev server.
  • ClickTag behavior matches the destination and platform requirements.
  • File weight is checked against the media-plan limit.
  • Backup image matches the final campaign message.
  • First frame has no blank flash, layout jump, or missing asset.
  • Final frame clearly shows brand, offer, and CTA.
  • Animation loop count and duration match publisher rules.
  • All localized copy fits in the smallest size before packaging.
  • Delivery notes include size list, destination URL, and any platform caveats.

QA saves production reputation

Good banner QA is not about slowing the work down. It is about protecting the last mile, where a campaign can lose time for avoidable reasons. A small preflight pass gives ad ops fewer questions, clients fewer review loops, and the creative team more confidence that the final package matches the approved idea.

The best sign is a quiet handoff: the ZIP uploads, the preview matches expectations, the click tracks correctly, and nobody has to ask which file is the real final version.