The sizes
Widths that work
- 600 pixels wide is the safe maximum for a signature banner. Mail clients render message bodies at around 600 to 640 pixels, so anything wider forces horizontal scrolling or gets scaled down unevenly.
- 500 to 560 pixels is the comfortable range for most signature layouts, because the banner then sits inside the signature block rather than defining its width.
- 320 pixels is the width to design for on phones if you deploy a separate mobile variant.
- Set the width in the HTML attribute as well as in the style, because some clients ignore one or the other.
Ratios and heights
- A ratio between 4 to 1 and 6 to 1 keeps a banner readable without pushing the signature down the screen. At 560 pixels wide that is roughly 90 to 140 pixels tall.
- Taller than about 150 pixels and the banner starts to compete with the message. Wider ratios read as a strip, which is what a signature banner should be.
- Keep the same ratio across campaigns. Then swapping artwork never changes the layout of the signature around it.
Files and density
- Export at two times the display size and set the display size in the markup, so the banner stays sharp on high-density screens.
- Keep the file under about 100 kilobytes. Signature images are downloaded on every message in a thread, and weight adds up for the recipient.
- PNG for artwork with text and flat colour, JPEG for photographic banners. Animated GIFs are supported unevenly and stop on the first frame in several clients, so design the first frame to work alone.
- SVG is not supported in most mail clients. Do not use it in a signature.
The failures you will actually see
- Images blocked by default. Many clients show nothing until the reader allows images. Alt text is not optional: write it so the line still makes sense as text.
- Outlook and scaling. Older Outlook builds on Windows render images at their native pixel size and handle percentage widths poorly. Fixed pixel dimensions avoid the argument.
- Retina blur. A banner exported at exactly its display size looks soft on a modern laptop. Exporting at two times and displaying at one times fixes it.
- Dark mode. A banner with a white background becomes a bright block in a dark thread. Either give it a background that works in both, or design a version for dark mode where the client supports it.
- Thread stacking. A banner repeated on every message in a long thread is noise. A reply-aware template drops it after the first message.
- The campaign that never ends. The most common failure is not visual at all: the banner for last quarter's event is still going out. A campaign with an end date removes itself.
One artwork, every signature, with an expiry date
Banner problems multiply by the number of people carrying the banner. Sending the artwork to everyone and asking them to place it produces as many sizes as there are employees. Managing it centrally means the artwork is hosted once, linked at the size the template expects, previewed in each client, and scheduled.
- Upload the artwork and the link, and the template places it at a fixed width with alt text.
- Target the groups that should carry it, which is rarely everyone.
- Set the start and end dates, so the campaign expires by itself.
- Read the clicks afterwards, and decide whether the channel earned the next campaign.
That is what email signature banner campaigns do, and the builder on the homepage shows a banner inside a real signature in each client preview.