Animated banner ads that land the offer in one glance

A banner is seen out of the corner of an eye. People scroll past it on a news site, glance at it above a product grid, or catch it at the top of a search page. Movement is what pulls the eye across, but movement alone does not sell anything: if the offer is unreadable by the time someone looks, the animation only advertised that there was an ad.

So we treat a banner as three beats — a hook that is visible immediately, a proof that shows the product or the service working, and an end card with the brand and one button. The beats get shorter as the slot gets smaller. A 1600×468 hero strip can afford a product rotation; a thin mobile bar gets the offer and the button, and nothing else.

Animated banners work best when there is something to show changing: products rotating around one price, a search being typed and answered, a sequence of scenes that tells a short story. If the message is a single static fact, a well-made still often does the same job for less.

The jewelry banner is a price argument. “Why pay $100 for something that is worth under $20?” sits fixed in the center while bracelets, rings, necklaces and earrings change in pairs on either side. The headline never moves, so the comparison lands on the first look, and the product changes give a reason to keep watching.

The Glueguide banners sell a website whose value is its search. A search bar types a real question — “Best glue for wood?”, “waterproofing membrane” — and then collapses into the Glueguide logo, the line “Find the right glue — every time!” and an Explore Now button. The banner demonstrates the product instead of describing it.

The awareness banners for Spondyloarthritis and Pain Awareness Months tell a sequence: pharmacy, hospital arrival, reception, X-ray, consultation, rest and stretching, all in one illustrated style. The headline stays on a single line across the top, which is what keeps a 2048×838 frame readable however wide the placement stretches it.

Start from where the banner will run. Ad networks publish their own size lists — common Google Display sizes include 300×250, 728×90, 300×600, 160×600 and 320×50 on mobile — while your own site, a marketplace or a partner retailer will have slots of their own, like the very wide 1280×490 and 2048×838 frames in our portfolio. A 6:1 strip and a square are two different designs, and we quote them that way.

Networks also cap weight and running time. Google Ads, for example, limits animated image ads to 150 KB and stops animation at 30 seconds, so a set destined there is timed to the strictest placement first. Specs change, so we confirm each network’s current limits in writing before animation starts — never after.

• Send the full placement list, including the smallest mobile slot.
• Tell us which networks the set runs on, so file limits are known up front.
• Flag any slot with rounded corners or overlays that hide part of the frame.

Nearly every weak banner fails in one of a few predictable ways. Each of them is cheap to prevent at the key-frame stage and expensive to fix after a set has been animated in eight sizes.

• The offer arrives last, after the viewer has already looked away.
• Type is sized on a big monitor and is unreadable at the real slot size.
• Too many products in one frame, so none of them reads.
• A logo so small it disappears in the narrowest strips.
• One layout stretched or cropped across every size.