Email signature design that works on a phone

What makes a mobile friendly email signature? A layout narrow enough not to be shrunk to nothing, text large enough to read when it is, and links far enough apart to tap. Most phone mail apps scale a wide email down to fit the screen rather than rearranging it, so a signature that looks balanced on a monitor can turn into a strip of tiny print on a phone.

How phones show a signature

An email signature is built from HTML tables, the only layout every mail app agrees on. When the table is wider than the phone screen, most apps shrink the whole thing to fit. Everything shrinks together: the logo, the text and the gaps between links. That is the main thing to design for.

Seven rules for a signature that survives a phone

1. Keep it narrow. Aim for a total width of about 600 pixels or less. The narrower the signature, the less a phone has to shrink it.
2. Stack, do not spread. A photo beside two columns of contact details is three columns. A photo beside one column, or details stacked under a name, is easier to read small.
3. Use a normal text size. Small print shrunk again becomes unreadable. Keep contact details at a normal reading size and only the disclaimer smaller.
4. Make links and icons tappable. Social icons squeezed together are a lottery on a touch screen. Leave space between them, and use fewer.
5. Phone numbers as text. A number written as text can be tapped to call. A number inside an image cannot.
6. Mind the banner. A banner is an image, so its wording shrinks with it. Short wording in large type survives; a paragraph does not.
7. Do not hide information on mobile. Anything a recipient needs, such as the legal disclosures, must be in every version.

Preview it at phone size before anyone sends it

In Footer365's editor, Preview has Desktop and Mobile buttons. The phone view shrinks the whole signature to fit, the way a phone shows an email, rather than rearranging it, so what you see is a fair picture of what arrives. Turn on My details to see it with your own name and number instead of sample data, and try dark mode while you are there. Our guide to dark mode and email client previews covers each option.

The template's total width is set under Theme as Template width, which is 600 pixels unless you change it. Keeping it there, or narrower, is the single biggest thing you can do for phone readers.

Shorter on replies

Phone readers scroll through long threads. If every reply carries the full signature with a photo and banner, a thread becomes mostly signatures. Footer365 can give replies a short template with a rule set to Replies only: name, job title, one phone number and the legal line. Our guide to a different signature for replies shows how.

Design is only half of mobile

A well-designed signature still has to reach the phone's emails in the first place. Mail written on a phone often goes out with only "Sent from my iPhone", and the iPhone's Mail app sends plain text that cannot show a logo. Our post on why signatures go missing on iPhone and Android covers that side of it.

A quick test

Send your current signature to your own phone and read it at arm's length. If you have to zoom to read the phone number, so does every customer. Narrow it, stack it and simplify it once, in one template, and everyone's emails improve together.