I use email quite frequently and the appearance of my email signature is very important to me. It provides more information than just a standard name and email address from the sender.  I also include links to my online social profiles to provide other ways that people can reach me.  For the new year I decided to create a new email signature for Mail.app.   The one I was currently using was a few years old and contained too many icons.  I wanted something cleaner.  Mail offers support for HTML signatures and with a little effort I was able to take my email signature up a notch. I’ll tell what I did to create the HTML signature you see below.

You’ll need a few tools. I used Mail, Safari and and the Espresso HTML editor. The HTML editor is not necessary – you can use TextEdit for example – but it does make editing the HTML easier. I created the HTML layout for my HTML signature using icons I found in the Social Stamps FREE icon set. I’m a big Google fan and use many of their online services. My email domain (islandinthenet.com) is hosted using Google Apps; a collaboration service (email, calendar,documents) geared toward businesses, schools and non-profit organizations. This is why I chose the Gmail icon as part of my signature. Whatever image you use in your signature, be sure to save it in safe place on your computer. If you use a WYSIWYG HTML editor like Espresso (or Dreamweaver) you can preview your signature to get it just right. If you are using TextEdit, you can save the file with an HTML extension and then open it Safari to see what it looks like. Keep tweaking your signature until you get it the way you want. Save the file containing your HTML code to your computer with a file extension of html. I put mine in a sub-directory of my Pictures folder. The code for my signature started out like the following:

<img style=”float: left;” src=”http://khurt.com/images/gmail.png” alt=”" width=”64″ height=”64″ />
<div>Sincerely,</div>
<div>Khürt Williams, CISSP, ITIL</div>
<div>”The future is here. It’s just not evenly distributed” – Williams Gibson</div>

The img elements places the image (I have mine stored online) while the div elements place each line of text. The float:left styling makes sure the text lines up on the right side of the image. This gives my HTML signature the basic look I want.

Once you have the basic HTML signature looking just the way you want, save it and open the HTML file in the Safari browser. From the Safari file menu, click “Save As…” (or Command S) to save the file as a web archive. I saved mine as “Signature.webarchive”.

To replace the current signature being used by Mail.app, shut down Mail.app (if it’s running) and copy “Signature.webarchive” file to /Users/youraccount/Library/Mail/Signatures directory. Now navigate to that directory. Look for a file with a name that includes a long string of numbers and letter with a file extension of .webarchive (e.g. 3330DB14-03C7-4004-BBE7-C0AACCD027E7.webarchive). Make a copy of that file (I saved a copy to the Documents folder) and then delete it. Select the file and then use Command-I and then select and copy the part of the file name that does not include .webarchive (e.g 3330DB14-03C7-4004-BBE7-C0AACCD027E7). Select the “Signature.webarchive” file and use Command-I to get the file info. Replace the Signature part of the new signature file name with the text from the original signature file (3330DB14-03C7-4004-BBE7-C0AACCD027E7). Open up Mail.app and you should be able to use your new HTML signature.

I use a digital certificate to digitally sign and encrypt my email. It helps other identify e-mail as coming from me and for certain communications keep prying eyes away. For an intro to digital signatures see my earlier post on the PMUG blog. Normally these digital signatures cost about $30 and can be challenging to setup. However, I found a company called Comodo that is offering digital signatures free for personal use. Although Comodo’s instructions are written assuming a Windows PC is being used, the certificate works quite well under OS X. Fill out the form with your name, your e-mail, a strong easy to remember password and submit (don’t forget to opt-out of the newsletter). When your certificate is ready you will receive a link via e-mail to retrieve it. Click to download to install your digital certificate to your key chain.

Bonus

For Gmail user who use Chrome Beta for Mac or FireFox, I have a bonus. A band of merry coders has put together a browser extension, called WiseStamp, that allows you to use your newly created HTML signature in your Gmail. You can use the extension itself to create your digital signature and then follow the instructions above to use it in Mail.app. I used WiseStamp to tweak the fonts and other styling features of the HTML signature I used in Mail.app. Enjoy.

References (links)

• Comodo FREE e-mail certificate
• Social Post Stamps Free Icon Set
• How to get more from Mail with HTML signatures
• Others

Tags: digital certificate, mail

This entry was Written by: Khürt Williams on Tuesday, January 12th, 2010 at 10:00 am and is filed under How To. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.