Breadcrumbs

HTML Tips and Tricks for Email Signatures

This guide provides helpful HTML techniques and design tips to make your email signatures look professional and consistent across all devices and email clients. It includes advice on campaign tracking, styling, mobile responsiveness, and best practices for images and layout.

General Design Tips

1. Use Tables for Layout

Email clients vary widely in HTML support. Tables remain the most reliable way to control layout and alignment.

2. Set Inline Styles

Use inline CSS instead of embedded or external stylesheets. Many email clients strip <style> blocks.

3. Optimise Image Size

Use .png or .jpg formats under 10 KB for logos or banners to ensure fast loading and better deliverability.

4. Add alt Text to Images

If an image doesn’t load, alt text helps maintain professionalism and accessibility.

5. Avoid Background Images

Many clients (particularly Outlook) do not display background images. Use solid background colours instead.

6. Consistent Font Choices

Stick to standard email safe system fonts such as Arial, Verdana, Calibri, or Tahoma to ensure consistent display.

7. Keep It Compact

Your signature should ideally fit within 5–8 lines. Avoid large gaps or unnecessary elements.

8. Test on Multiple Devices

Always preview your signature in Outlook, Gmail, Apple Mail, and mobile devices before deployment.

9. Use Web-Safe Colours

Use hexadecimal colour codes (e.g. #003366) rather than named colours for accurate rendering.

Tracking Campaigns

If you want to track engagement through your email signature banners, you can use campaign tracking links.

Steps:

  1. Set up your campaign on your preferred tracking platform (for example, Google Analytics).

  2. Create a custom URL using a URL builder such as Campaign URL Builder – Google Analytics Demos & Tools.

  3. Add the URL to your banner image link using the <a> tag.

Example:

<p>
  <a href="https://blog.bluelab.com/?utm_source=blog_banner&amp;utm_medium=email&amp;utm_campaign=sig">
    <img src="/SigEditorHelper/GetEImage?ImgName=Artofgrowingblog.jpg" />
  </a>
</p>

Styles for Email Clients

Different email clients render HTML and CSS in their own ways.
To check which CSS properties are supported by each client, refer to this comprehensive guide by Campaign Monitor:

CSS Support Guide for Email Clients

HTML in Outlook 2016

Outlook has unique rendering rules compared with other clients.
For specific recommendations when coding for Outlook 2016, see:

Coding for Outlook 2016 – Email on Acid

Preventing Signature Wrapping

On smaller screens, text in your signature might wrap awkwardly.
To make your signature responsive and prevent unwanted wrapping, you can use one of the following methods:

Option 1: Use a Fixed-Width Table

Wrap your signature inside a table with a set width:

<table style="width:500px;">

On mobile devices, the entire table will scale to fit the screen.

If your signature includes longer text fields, a fixed width may be too restrictive. Try Option 2 instead.

Option 2: Prevent Text from Wrapping

You can keep specific text on one line using the white-space: nowrap; CSS rule.

Example:

HTML
<div style="white-space: nowrap;">
  (!Street!), (!City!) (!State!) | P: (!Phone!)
</div>

If you only want to prevent wrapping of the phone label and number, use:

<span style="white-space: nowrap;">P: (!Phone!)</span>

Phone Number Styling

To prevent phone numbers from turning blue and underlined (a common default in some email clients), refer to the Phone Styles guide.

Phone Styles Guide (Add the correct internal link if available)

Address Styling

Outlook may automatically turn addresses into map links and apply its own styling.
To stop this, place your address within a table. This prevents Outlook from altering its appearance.

Linking Addresses to Google Maps

You can manually link addresses to Google Maps while maintaining your desired styling.

Example:

HTML
<a href="https://www.google.com/maps/place/(!Street!), (!City!) (!State!) (!PostalCode!)">
  (!Street!), (!City!) (!State!) (!PostalCode!)
</a>

To customise the look of the link, apply styling directly to the <a> tag:

style="text-decoration:none;"

Horizontal Rules (HR Tags)

You can use horizontal lines in your signature for visual separation.
They can also be styled to match your brand colours.

Example:

<hr color="red" noshade="noshade" style="width:100%;display:inline-block;vertical-align:middle;border-top:1px solid red;border-bottom:none;" />

For more styling examples, see the W3Schools HR Tag Guide.