Email signature broken on mobile? Layout fixes

Signatures break on phones because they were designed for a wide desktop window. A wide multi-column table, a large fixed-width banner or a picture of text gets squashed or shrunk on a screen 360 pixels wide. The fix is a narrow, simple layout: under about 500 pixels wide, two columns at most, real text instead of images of text, and images with explicit width and height.

"Issues with signature layout on phones" is a common thread title in the Outlook, Proton Mail and Gmail communities. The causes are usually the same.

Why it happens

• Too wide. A 700-pixel signature on a 360-pixel screen either shrinks everything until it is unreadable or forces sideways scrolling.
• Columns that do not fit. Three columns of photo, details and logo leave each column only a few characters wide.
• Text inside images. A name or phone number baked into an image becomes unreadable when shrunk, and cannot be tapped.
• Missing image sizes. Without width and height, some apps show images at their file size.
• Different signatures per app. The Gmail and Outlook mobile apps have their own signature settings, often plain text. A message sent from the phone may carry a different signature entirely.

Design rules that hold up on phones

1. Keep it narrow. Aim for 400 to 500 pixels at most.
2. Two columns at most. A small photo or logo on one side, text on the other. Or stack everything in one column.
3. Real text for contact details. Phones can then make numbers and addresses tappable.
4. Readable sizes. Body text around 13 to 14 pixels. Social icons around 20 to 24 pixels with spacing between them.
5. Set width and height on every image.
6. One banner, not three. Keep it no wider than the signature.

Test on a real phone

Send a test message to yourself and open it in the Gmail app, the Outlook app and Apple Mail on a phone. Check dark mode too. See email signature logos in dark mode.

The phone's own signature

If you send from a phone, check the app's own signature setting:

• Gmail app: see Gmail app signature on Android and iPhone.
• iPhone Mail: see adding a logo to the iPhone Mail signature.
• Outlook app: it has its own signature setting under the account settings.

Where Sendoff fits

Every Sendoff template is built with nested tables, real text and sized images, at a width that fits a phone screen. You can preview the result in the email signature generator before you copy it. If you already have a signature, the free signature checker flags oversized widths and images without dimensions.

FAQ

Can I make a signature responsive with media queries? Some apps support them, but Gmail and Outlook support them unevenly. A layout that is narrow to begin with is more reliable.

Why does my signature look fine in my sent folder but not on the recipient's phone? You are seeing your own app's rendering. Recipients see theirs. Always test on the receiving side.