Email signature generator › Broken on mobile

Why the signature breaks on a phone

More than half the people reading your mail are on a phone, and the signature you checked on a laptop may be forcing them to scroll sideways. The usual cause is the one thing every guide tells you to do.

The contradiction at the centre of this

Every piece of advice about email signatures says to use fixed pixel widths, because percentage widths are unreliable in Outlook. That is correct. It is also what breaks the signature on a phone, where a 600-pixel table cannot fit a 360-pixel-wide screen.

You cannot resolve this with responsive CSS, because media queries are stripped or ignored in a large share of clients. The resolution is not technical: it is to build something narrow enough that it never needs to shrink.

The number that works

Keep the whole signature under about 320 pixels wide. That fits inside the content area of every phone in common use without scaling, and on a desktop it simply occupies less width than the message text, which looks intentional.

A two-column layout with a logo beside the text needs roughly 80 pixels for the logo and 220 for the text to stay under that. If your logo cannot be legible at 80 pixels wide, stack it above the text instead — a single-column signature is the most reliable shape there is.

Font size, which most signatures get wrong

Signatures are often set at 11 or 12 pixels to look compact on a desktop. On a phone that is below the size iOS and Android consider readable, and several clients will scale the text up on their own — which changes your line breaks and can push a two-column layout out of shape.

Setting the signature at 14 pixels prevents the automatic scaling and is legible for everyone. It looks slightly larger than you may want on a desktop, and that is the correct trade.

Tap targets

A phone number or link at 11 pixels with tight line spacing is very hard to hit accurately with a thumb. If lines of links are packed together, give each one enough vertical space that it can be tapped without hitting its neighbour — in practice a line-height around 1.5 on a 14-pixel font, which is about 21 pixels per line.

Test the way your readers read

Send the signature to yourself and open it on an actual phone, in the app you expect your correspondents to use. Not the desktop browser narrowed to phone width — that does not reproduce font scaling or tap behaviour. One real phone, once, tells you more than any amount of squinting at a laptop.

Why the desktop preview lies

Narrowing a desktop browser window does not reproduce a phone. It does not apply the minimum font size the phone enforces, it does not reproduce the pixel density that makes an under-exported logo soft, and it does not show you how large a tap target actually needs to be. A signature can pass a narrowed browser and fail on the device.

The stacked layout, and when to switch to it

If the logo needs to be wider than about 90 pixels to stay legible, stop trying to fit two columns. A single column — logo on its own line, then name, then role, then contact details — has no width to get wrong, reads identically on every screen, and takes about four lines of vertical space, which is less than a broken two-column layout occupies once it wraps.

What to cut

Most signatures that break on a phone are carrying things that do not earn their place there: a postal address the reader will never use from a phone, a row of social icons, a legal disclaimer that belongs in a footer rather than in the signature, and a tagline. Removing those usually solves the width problem without any technical work, and produces a signature that is better on the desktop too.

The one number to check

Open the signature in a browser, set the window to 360 pixels wide, and see whether a horizontal scrollbar appears. If it does, the signature is wider than the narrowest common phone and it will force sideways scrolling in the reading pane. That single check catches the great majority of mobile signature problems.

Frequently asked questions