Banner design: the rules that make an ad readable in one second

A banner is not a small poster and it is definitely not a small landing page. It is a single interruption, seen peripherally, competing with the content someone actually came for. Every design decision follows from that: what does the eye hit first, second and third, and does the whole sequence survive being seen for one second at arm's length?

The answer is almost always the same three elements in the same order. Logo or wordmark, so it is clear who is speaking. One message — a headline, a price, a single product — so there is something to react to. One call to action, styled as a button, so the next step is unambiguous. Anything else you add competes with those three rather than supporting them, which is why the usual failure is a banner carrying two products, a discount code, a guarantee badge and a subline all at once. If you genuinely have two messages, make two banners and let the ad server rotate them.

Legibility is decided by contrast far more than by typeface. Text should sit at 4.5:1 or better against whatever is directly behind it — which means a headline over a photograph needs a solid panel, a gradient scrim or a repositioned crop, not a drop shadow and hope. Use your brand colour where it carries meaning, most usefully on the button, and let the background be calm.

Type size has to be read per format, not per design. A headline that works at 24 px in a 300×250 is unreadable when the same layout is squeezed into 320×50; the correct response is not to shrink the type, it is to change the layout and cut the words. As a working floor, keep headline text at roughly 16 px or more in small formats and never let any text drop below about 10 px — below that it is decoration, not communication. Long product names are the usual culprit: "Merino wool crew neck jumper, charcoal" has to become "Merino jumper" before it goes into a mobile strip, and no amount of clever typesetting fixes it afterwards.

Some formats will crop your design whether you plan for it or not. Google Ads responsive image assets are cut to whatever ratio a placement needs, so the subject belongs in the centre and text belongs nowhere in the image — Google overlays its own headline and description on top. Instagram and TikTok Stories cover roughly the top 250 px and bottom 340 px of the 1080×1920 canvas with interface elements, so everything that must be seen goes in the middle band. Facebook and LinkedIn cover images are cropped differently on mobile than on desktop.

The extreme aspect ratios are where designs actually break. 320×50 gives you 50 px of height for logo, message and button; 160×600 gives you 160 px of width for the same three things. Neither can be a scaled version of a 300×250 — they need genuinely different arrangements: side by side and abbreviated in the strip, stacked and vertical in the skyscraper.

As a working margin, keep at least 8 to 10 px clear inside every edge and never place text closer to the border than the height of the text itself. Skip the thin outer frame many templates add unless a publisher explicitly requires one; it eats the little space you have.

A banner that fails validation never runs, so the technical limits belong in the design brief rather than at the end of it. Display networks commonly cap image ads at 150 KB, and Google Ads rejects anything above that. Responsive assets are allowed up to 5 MB, social platforms are generous, and newsletter images should stay under roughly 100 KB because every image in the message loads at once.

Choose the file format by content, not by habit. PNG for flat colour, logos and text — it stays crisp and compresses well when the palette is limited. JPG for photographic hero images, which is usually the only way to get a large format under 150 KB. Avoid WebP, AVIF and SVG for ads: several ad systems and most email clients still reject them.

Two further rules ad networks enforce and reviewers reject on: no transparent areas (the ad has to sit on an unknown background, so it needs its own), and no fake interface elements — imitation close buttons, fake play arrows, simulated form fields or system dialogs get creative sets disapproved wholesale.

myfeedr reads your website — logo file, colour values from the stylesheet, font families, headline, product names, prices and images — and then applies the rules above per format rather than per design. Layouts are selected by aspect ratio: stacked for tall boxes, compact and horizontal for mobile strips, wide with a hero image for leaderboards and billboards. Type sizes are computed from the box dimensions and the real length of your text, so a long product name shrinks or rewraps instead of running off the canvas.

Contrast is checked against the background actually used, so button and headline colours are adjusted when your brand palette would produce unreadable text on a particular image. Safe zones for Stories and Reels are respected, the Google Ads dimensions are laid out for upload as fixed-size image ads, and JPG variants are compressed to stay under the 150 KB display limit.

What stays yours is the judgement. After unlocking a set you can rewrite the headline and the button label, change colours, swap the product or hero image, crop and zoom it, and cycle through three layout variants per format — unlimited, without paying again. The rules stop you producing something that cannot be read; they do not decide what you have to say.

Run a set through these six checks and most rejections and most wasted impressions disappear.