HTML Email Signature — Custom Coded Templates

Why HTML Email Signatures?

Plain text signatures get the job done, but HTML signatures transform your emails into branded touchpoints. With HTML, you can include:

Company logos and professional headshots
Brand colours and custom formatting
Clickable social media icons
Call-to-action buttons and promotional banners
Structured layouts with visual hierarchy

The Challenge: Email Client Compatibility

HTML email signatures are notoriously difficult to get right. Unlike web pages, email clients have wildly different rendering engines:

⚠️ Outlook Desktop

Uses Microsoft Word's rendering engine. No CSS flexbox, grid, or modern layout. Tables only. Limited font support.

⚠️ Gmail

Strips <style> tags and classes. All CSS must be inline. Limits image sizes and blocks certain HTML elements.

✅ Apple Mail

Best HTML renderer. Supports WebKit, modern CSS. But you still need to code for the lowest common denominator.

⚠️ Mobile Clients

Signatures must be responsive. Fixed-width tables break on small screens. Media queries have limited support.

HTML Email Signature Best Practices

Use tables for layout — <table>, <tr>, <td>. Never divs or flexbox for structure.
Inline all CSS — use style="" attributes on every element. No external stylesheets.
Host images externally — use HTTPS URLs for logos and headshots. Never embed base64.
Set explicit dimensions — always specify width and height on images.
Use web-safe fonts — Arial, Helvetica, Georgia, Verdana. Custom fonts won't render in Outlook.
Keep total width under 600px — ensures it displays well in email preview panes.
Avoid background images — Outlook doesn't support CSS background-image.
Test, test, test — send test emails to Outlook, Gmail, Apple Mail, and mobile before deploying.

Sample HTML Email Signature Code

<table cellpadding="0" cellspacing="0" border="0" style="font-family:Arial,sans-serif;font-size:14px;color:#333333;">
  <tr>
    <td style="padding-right:15px;vertical-align:top;">
      <img src="https://example.com/logo.png" width="80" height="80" alt="Logo" style="border-radius:50%;" />
    </td>
    <td style="vertical-align:top;">
      <strong style="font-size:16px;">Jane Smith</strong><br />
      <span style="color:#666;">Marketing Manager</span><br />
      <span>Acme Corp Pty Ltd</span><br />
      <span>📞 +61 2 9876 5432</span><br />
      <a href="https://acmecorp.com.au" style="color:#f97316;">acmecorp.com.au</a>
    </td>
  </tr>
</table>

💡 Skip the coding: Our 132 pre-coded HTML templates are tested across every major email client. Just fill in your details — no HTML knowledge needed.