Creating a Professional HTML Email Signature for Gmail, Outlook & More

by | Feb 5, 2025 | Insights

Email signatures are more than just a sign-off. They’re often the last thing people see at the end of your message—so a polished, professional signature can make a lasting impression. In this article, I’ll show you how to create a simple, yet professional, HTML email signature that works in major email clients like Gmail, Outlook, Apple Mail, and more.

Why Use an HTML Email Signature?

  • Brand Consistency: Reinforce your brand identity with colors, logos, and fonts that match your website and other marketing materials.
  • Professional Appearance: A cleanly designed HTML signature demonstrates attention to detail and professionalism.
  • Contact Information: Make it easy for people to reach you by including clickable phone numbers, email addresses, and links to your website or social media profiles.
  • Compatibility: Well-coded HTML email signatures are more likely to display correctly across different devices and email clients.

The Basics of Email Signature Design

When it comes to email signatures, simplicity and compatibility are key. Many email clients (especially older versions of Outlook) have limited support for CSS. Therefore, stick to:

  1. Inline Styles: Most email clients strip out <style> tags in the <head>. Use inline styles for fonts, colors, and spacing.
  2. Table Layouts: It may feel like going back in time, but HTML tables are more reliably rendered in email clients than modern CSS layouts.
  3. Hosted Images: If you include a logo or icons, host them on a secure (HTTPS) server so they don’t appear as attachments in the email.
  4. Minimal HTML: Keep the code as clean and simple as possible to avoid display issues.

Example HTML Email Signature

Below is a straightforward HTML email signature that should work in Gmail, Outlook, and other commonly used email clients. Feel free to customise it with your own branding, colors, and contact information.

<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, sans-serif;">
  <tr>
    <!-- Left Column: Logo or Image -->
    <td style="padding-right: 10px; vertical-align: middle;">
      <!-- Make sure the logo/image is hosted online (e.g., https://yourdomain.com/images/logo.png) -->
      <img src="https://example.com/path-to-your-logo.png" alt="Your Logo" width="80" style="border: 0; display: block;">
    </td>

    <!-- Right Column: Contact Details -->
    <td style="vertical-align: middle;">
      <p style="margin: 0; font-size: 14px; color: #000;">
        <strong>Your Name</strong><br>
        Your Title or Position<br>
        <a href="mailto:[email protected]" style="color: #1a73e8; text-decoration: none;">[email protected]</a><br>
        <a href="tel:+1234567890" style="color: #1a73e8; text-decoration: none;">+1 (234) 567-890</a><br>
        <a href="https://yourwebsite.com" style="color: #1a73e8; text-decoration: none;">yourwebsite.com</a>
      </p>
    </td>
  </tr>
</table>

Explanation of Key Elements

  1. <table> for Layout
    • We’re using a table for layout to ensure consistent rendering across all email clients.
    • cellpadding="0" cellspacing="0" border="0" is a common practice in HTML emails to avoid unwanted gaps.
  2. Inline Styles
    • For example, style="font-family: Arial, sans-serif;" ensures the table text uses Arial if available (with sans-serif as a fallback).
    • style="padding-right: 10px;" adds spacing between the logo and the text.
  3. Images
    • Always use the full URL (https://example.com/path-to-image.png).
    • Use alt text to maintain accessibility and clarity if images are blocked.
  4. Hyperlinks
    • Use the mailto: protocol for email addresses (mailto:[email protected]).
    • Use the tel: protocol for phone numbers (tel:+1234567890) to make them clickable on mobile devices.
    • Style your links (style="color: #1a73e8; text-decoration: none;") so they match your branding.

Adding Social Media Icons

If you want to add social media icons, you can insert another <td> or place them beneath your contact details:

<a href="https://twitter.com/yourprofile" style="text-decoration: none;">
  <img src="https://example.com/twitter-icon.png" alt="Twitter" width="20" style="margin-right: 5px; border: 0;">
</a>
<a href="https://linkedin.com/in/yourprofile" style="text-decoration: none;">
  <img src="https://example.com/linkedin-icon.png" alt="LinkedIn" width="20" style="border: 0;">
</a>

Keep in mind you may need to adjust spacing and alignment as necessary.

Implementing Your Signature in Email Clients

Gmail (Web)

  1. Open Gmail.
  2. Click the Settings gear icon in the top-right corner, then click See all settings.
  3. Scroll down to the Signature section.
  4. Click Create new (or edit an existing signature).
  5. In the signature editor, switch to the HTML view if available (some browsers allow you to right-click and choose “Paste as Plain Text” first, then edit in HTML mode), or simply copy/paste your HTML directly into the editor.
  6. Make sure images display correctly.
  7. Scroll down and click Save Changes.

Outlook (Desktop)

  1. Open Outlook, then go to File → Options → Mail → Signatures.
  2. Click New to create a new signature or select an existing one to edit.
  3. In the signature editing window, you might see a basic text editor.
  4. You can open the Signatures folder in your file explorer (Outlook usually stores it at a path like C:\Users\YourUserName\AppData\Roaming\Microsoft\Signatures).
  5. Edit the HTML file directly in a text editor. Paste your HTML code there and save.
  6. Reopen Outlook to see the updated signature.

Apple Mail

  1. Open Apple Mail, click Mail → Preferences → Signatures.
  2. Create a new signature, then close Mail.
  3. Navigate to the folder where Apple Mail keeps signatures, typically: ~/Library/Mail/VX/MailData/Signatures/. (The VX part depends on your Mail version.)
  4. Find the .mailsignature file you just created.
  5. Open it in a text editor, replace the existing code with your HTML, save, and lock the file (Get Info → select Locked).
  6. Reopen Apple Mail.

Final Tips and Best Practices

  • Test Across Clients: Email clients can display signatures differently. Test in major clients (Gmail, Outlook, Apple Mail, mobile email apps, etc.).
  • Keep It Lightweight: Email clients often block or strip large or complex images. Focus on small logos/icons for speed and reliability.
  • Avoid Background Images: Outlook often struggles with CSS background images. Use inline images where possible or table background attributes if necessary.
  • Responsive Design: Some advanced signatures require media queries. However, support for these can be inconsistent. A single-column, table-based layout is often simplest.
  • Stay Updated: Email technology is always evolving. Keep your signature code up to date and re-test it periodically.

Conclusion
Creating a professional HTML email signature isn’t as intimidating as it might first appear. By following best practices—like using inline styles, a table-based layout, and properly hosted images—you can ensure your signature looks great in Gmail, Outlook, and beyond. This seemingly small detail can go a long way toward strengthening your brand and leaving a positive impression.

If you need any assistance or want to take your digital presence to the next level, feel free to get in touch with me. With over 18 years of experience in Frontend, Backend, WordPress, and Laravel development, I’m here to help bring your vision to life—whether it’s an email signature or an entire website.

Let’s work together and build an online presence that takes your business to new levels of success!