6 rules that stop your HTML email signature from breaking

Email HTML is closer to the web of the early 2000s than the web of today. Building a signature that survives every inbox means following a short list of strict rules.

1. Use tables for layout

Flexbox and grid are unreliable in email. Nested tables are verbose, but they're the one layout system every client renders consistently.

2. Inline every style

Many clients strip <style> blocks and class names. Put styling directly on each element so nothing depends on a stylesheet surviving.

3. Give every image a width, height and alt text

Explicit numeric dimensions stop images from blowing up to full size in Outlook, and alt text keeps the signature readable when images are blocked.

4. Host images at absolute URLs

Relative paths and images attached to the email are a common source of broken signatures and red-X placeholders. Host images on a reliable CDN and reference them by full URL.

5. No scripts, forms, video or CSS animation

These are either stripped or blocked. Animation should come from GIFs, with a static fallback for clients that only show the first frame.

6. Keep it small

Your signature rides along on every reply. Compress images, keep GIF loops short and avoid oversized banners.