Why use an html email signature

Html email signatures include all the basics of email design, e.g. images, hyperlinks and text styles.  A standard design for the entire company is also professional and builds trust with your audience.

The benefit of using an html email signature rather than a solid image is that you can create one design and keep the text areas editable. If you were to use a solid image for your signature instead, you’d have to create a separate signature for each staff member.

All parts of an html email signature are clickable – both the text and images – allowing you to direct customers to exactly what they’re looking for. An image email can only click through to one location, making it tricky if your image-only signature contains email, website and social share settings!

Best practice for html email signatures

The best way to create a robust email signature that degrades elegantly on a text-only mail client is to keep it simple.  Here are our best tips for a solid design:

• Create a full width containing table. This ensures your signature won’t wrap next to replies and forwards
• Consider the width of your signature – you want to keep it as narrow as possible. Think of your standard html email; best practice suggests they are between 550px and 650px wide. Also, many people will see your signature in their Outlook reading pane, so you want as much as possible to be visible
• Keep the number of empty rows and columns to a minimum because those text-only clients will add a line break for every empty row or column.  Use padding instead
• Use alt tags to replace images. You can use URLs for your social media alt tags. We’ve had mixed results on plain text emails – sometimes the alt text shows in place of social media icons; sometimes it’s left out
• Use inline css (in the td tag)
• Scale images in the html (export images at twice the size for retina screens)
• Export images as transparent PNGs – these will display nicely on emails with background colours and dark mode emails (if your logo isn’t too dark, of course!)

How to create your html email signature

 Follow these steps to create your own html email signature for your personal or business use.

Step 1 – design

Start by designing your signature in Photoshop. Double the size so that it renders well on retina screens. So, for example, if your total email signature width is 350px, resize your Photoshop canvas to 700px. You will scale the images in the html code.

Once your signature design is finalised, create slices and export your images to the same folder you’ll be saving your html to.

For our example, our email signature will have a table with 2 columns.

Step 2 – code

1. Using your html editor, create a new blank html file (the doc type doesn’t matter as this part won’t be copied into Outlook)
2. Create a full width containing table. This is so that the signature won’t wrap next to replies and forwards
3. Create a nested table (with the number of columns you require) into the containing table and set the fixed width
4. Insert your logo and scale down to the desired size
5. Use inline styling for font formatting (in the td tag works well)
6. It is possible to track the links clicked in the email signature too, see our guide: How to track link clicks in Outlook.  

Figure 1

Here’s a sample of the code used to design the signature in our example:

<table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> 
<tr> <td>
<table width="550" style="width: 550px;" border="0" align="left" cellpadding="0" cellspacing="0" > 
<tbody> 
<tr> 
<td colspan="2" align="left" valign="top" ></td> 
</tr> 
<tr> 
<td colspan="2" align="left" valign="top" style="padding-bottom:20px;">
<span style="font-family: Arial, Helvetica, sans-serif; color: #58585a; text-decoration: none; line-height:14px;font-size:13px;"> Kind regards</span></td> 
</tr> 
<tr> 
<td width="225" rowspan="3" align="left" valign="top" style="border-right:2px solid #7e2a70;"><a href="https://yourdomain.com"><img src="logo.png" width="225" height="157" alt="Beautiful spaces | "/></a></td> 
<td align="left" valign="top" style="padding-left:20px;">
   <span style="font-family: Arial, Helvetica, sans-serif; color: #7e2a70; text-decoration: none; line-height:18px;font-size:14px;"><strong>Name and Surname</strong><br>
</span><span style="font-family: Arial, Helvetica, sans-serif; color: #58585a; text-decoration: none; line-height:18px;font-size:14px;">Job title</span>
</td> 
</tr> 
<tr> 
<td align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; color: #58585a; text-decoration: none; font-size:11px;padding-top:10px;padding-bottom:10px;padding-left:20px;">
   <strong>T</strong> +27 11 000 0000<br> 
   <strong>M</strong> +27 82 000 0000<br> 
   email@domainname.com<br> 
   www.domainname.com</td> 
</tr> 
<tr> 
<td align="left" valign="top" style="padding-left:20px;">
   <a href="https://facebook-url.com"><img src="facebook.png" width="36" height="30" alt="facebook-url.com "/></a>
   <a href="https://instagram-url.com"><img src="insta.png" width="36" height="30" alt="instagram-url.com "/></a>
   <a href="https://youtube-url.com"><img src="youtube.png" width="36" height="30" alt="youtube-url.com "/></a>
   <a href="https://linkedin-url.com"><img src="linkedin.png" width="36" height="30" alt="linkedin-url.com "/></a>
</td> 
</tr> 
<tr> 
<td colspan="2" align="left" valign="top" style="padding-top:20px;" >
   <a href="https://yourdomain.com/email-disclaimer/" style="font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #9C9C9C; text-decoration: none; line-height:14px;">View disclaimer</a>
</td> 
</tr> 
</tbody> 
</table></td> </tr>
</tbody> 
</table> 

Figure 2

Step 3 – copy to Outlook

1. Preview your email signature in a browser
2. To ensure your signature copies correctly (including that outside containing table), click CTRL+A or file/select all in the browser screen (simply selecting with your mouse won’t work – it will cause your signature to wrap on the right when you hit reply as it won’t copy the outside containing table).
3. Now copy (CTRL+C or file/copy)
4. In Outlook, create a new email message
5. Click signatures
6. Create a new signature
7. In the text area, right click and paste your signature
8. Set your signature for replies and/or forwards on your preferred email account
9. Test!

And there you have it.