HTML email signatures sound simple, but email clients are picky. Something that looks perfect in one client can break in another—especially Outlook.

This guide shows how to build an HTML signature that works in real life, with safe formatting and clean testing steps.

What you need (keep it simple)

To create a reliable HTML signature, you need:

a clean layout (simple columns or stacked layout)
basic HTML (no fancy CSS)
hosted images (optional)
a final copy/paste into Gmail or Outlook signature settings

The goal is not “fancy.” The goal is “consistent.”

Step 1: Decide your signature content

Start with this checklist:

Name
Title
Company
Phone (optional)
Website link
One CTA link (optional)

Keep it short. Long signatures break more often.

Step 2: Use a “safe layout” approach

Most reliable options:

single-column (stacked): best for mobile
two-column table: can work, but keep it simple

Avoid:

flexbox
complex CSS
external fonts
background images

Step 3: Use this safe HTML signature template

Copy this template and edit the text. It uses a simple table that works well across clients.

<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, sans-serif; font-size: 14px; color: #111;">
  <tr>
    <td style="padding: 0; line-height: 20px;">
      <div style="font-size: 16px; font-weight: 700;">Alex Carter</div>
      <div>Customer Success Manager, BrightDesk</div>
      <div style="margin-top: 8px;">
        <span>+1 (555) 123-4567</span>
        <span style="padding: 0 6px;">|</span>
        <a href="https://brightdesk.com" style="color: #0b5fff; text-decoration: none;">brightdesk.com</a>
      </div>
      <div style="margin-top: 8px;">
        <a href="https://brightdesk.com/book" style="color: #0b5fff; text-decoration: none;">Book a 10-min call</a>
      </div>
    </td>
  </tr>
</table>