How to create your own HTML email signature

A signature at the end of your email is a way of personalising or 'professionalising' the way you sign off the emails you send. To create your own signature is relatively easy - to make your recipients see the signature exactly the way you do is a different story, and here are a few reasons why:

• Email Clients (such as Gmail, Windows Live Mail, Thunderbird, Yahoo...) all manage and display emails in their own unique way. I have spent a lot of time ranting over the fact that 'Not all browsers are equal', but have come to the conclusion that browser differences are minuscule compared to the differences dished up by the various email clients on the market.
• End User Settings - Basically people set up their email account to display emails the way that suits them. For example, if someone selects to display all their emails in plain text, this will ignore any HTML content in your signature and only display the text component. 
• Images blocked or turned off - Some email clients block images by default (the end user has to manually accept or 'show' images in each email, or edit their settings show external images by default). The main reason for images being blocked is spam protection, though people with slow internet connection may also select to not show images (as images take longer to load than text). 

While you cannot control all aspects of how your signature will appear to your recipients, you can arm yourself with enough know-how and tools to ensure that most people will see it the way you intended it to look.

Create your own HTML signature

The HTML Signature example:

The Code:

<table width="300" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td valign="top" style="padding-left:10px">
            <br /><b>
            <span style="font-family:'arial','sans-serif'; color:#444444;font-size:10pt">
                trinity tricks</span></b><br /><br /></span>
            <b><span style="font-family:'century gothic','sans-serif'; line-height:1.1em; color:#818286; font-size:9pt;">web design | computers | graphics
            <br /></span></b>
            <span style="font-family: 'arial','sans-serif'; color:#444444; font-size:7.5pt;">
            <b>visit:</b> <a href="http://trinitytricks.blogspot.com" style="color:#444444; text-decoration:none;"> trinitytricks.blogspot.com</a></span>
            <br /><br /></span>
        </td>
    </tr>
    <tr>
        <td valign="top" style="padding-left:10px; line-height:.5em;"><a href="http://trinitytricks.blogspot.com/" target="_blank"><img src="https://lh6.googleusercontent.com/-zvve--z_zhq/uedz2siyd7i/aaaaaaaaagy/rsjmq7cjeba/h64/ttsign.jpg" width="300" alt="trinity tricks" border="0" /></a></td>
    </tr>
</table>

The How To:

The section above shows the code I wrote for the Trinity Tricks signature (everything except the thin border around it, which is just for size illustration purpose). As you can see, the signature is contained inside a small table, which makes it easier to control the display properties.

Open your preferred html editor - I use Notepad++, but any editor will do the trick (Notepad, Dreamweaver, etc.) and start by creating a table to hold your signature. If you are using an image, you will need to resize it to fit and then upload it (so it can be viewed by your recipients).


Things to remember when creating your signature:

• Keep it simple
• Use in-line styles to define fonts, colours and placement of your text and images. Any element you haven't specified will inherit styles from outside your signature (html properties in the email or email client / user defined settings), which could result in a bit of a dog's breakfast so to speak...
• Font family (use web safe fonts such as Arial, Century Gothic, Helvetica, Trebuchet MS)
• Font size - specify in pt or px
• Line-height - specify (in em) to control space between each line
• Colour (remember to use the US spelling: color)
• Alignment, Padding & Margin - enable you to further control the placement of text & images.
• Alt tags on images are useful - especially to those who have turned off images
• Any image you want to show in the signature must be uploaded and referenced with an absolute link (starting with http://) - You can use ftp to upload your image to where your website is hosted, or upload it to your blog, picassa album or any other online image hosting you choose. If you reference the image to a place on your computer... you will be the only one who sees it.
• Save your signature file as a html or htm file to a place on your computer that you won't be changing or moving around (this is important if you want to insert the signature using Windows Live Mail, which I will show you how to do in the next post).
• Test your signature - open the html (or htm) file in your browser and see if it looks the way you intended, tweak if necessary.
• Do not include <html> <body> or <!Doctype... > in your signature file 

When your HTML signature is looking good, it is time to move on to inserting the signature in your email ... 

This post shows you how to insert a HTML signature using Windows Live Mail



Some email clients (both webmail and 'mail to your front door') include a signature editor in the settings area. Before you insert your html signature, make sure the editor is in 'source' or 'html' mode (otherwise you will be sending the html code as your signature!) - Paste your html signature code and save. You can generally also define if the signature should be included in all your outgoing emails or inserted manually.


If you are using Gmail (which currently doesn't support html signatures), this little work-around will help insert your signature: Download WiseStamp - a free plugin for Chrome and Firefox. When you have downloaded the application, you can paste your HTML signature in the editor, save it and allow WiseStamp to insert the signature in your Gmail emails...