Shortcut Links

How to create an HTML signature for Mail

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:

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.

7 thoughts on “How to create an HTML signature for Mail”

Great article Khurt! After you emailed me that my old e-mail certificate had expired, I downloaded the free Comodo certificate. Two quick items to point out to those using Comodo:

1. Make sure the email address you submit for your certificate is identical to the one you are using (e.g. check capitalized letters!)
2. The Comodo download will ask you where to install the certificate into your Keychain. Select Login Keychain. Once installed, open Mail and try penning a new message. If your Mac email account does not shown a check mark box in the Signature section, quit the Mail application. Then go to the “My Certificates” category in the login KeyChain. Click the certificate that you just received (it will expire a year from the download). Right click “key from secure.comodo.com.” Click “Get Info.” Click the “Access Control” box at the top of the resulting window. Make sure that Mail is listed in the box at the bottom of the window (the browser you used to contact Comodo will be listed). If Mail is not listed, click the plus button at the bottom of the dialogue box and navigate to Mail in Applications and add it. Save your changes.

Great article Khurt!To those who are installing Comodo's free digital certificate within Apple's Mail application:1. Make sure you choose your “Login” Keychain when asked where to install the certificate2. Got to Keychains and under the “My Certificates” category, access the key from “secure.comodo.com”3. Right click the key and then click “Get Info”4. Under “Access Control,” make sure Mail is listed under “Always allow access by these applications”5. If it isn't listed, click the plus sign and navigate to Applications to add it6. Click “Save Changes”

Have you heard of people having a problem seeing the signature in the Mail > Pref > Signatures after creating it or in an E-mail they are composing? There was discussions about an infamous blue question mark (missing image) even knowing that a complete URL was used to access the image(s) from an external server.

Some say after sending the E-mail, the recipient does see it even if the sender doesn’t.

Some say it’s just a delay and that with a restart or giving it a few tries it begins to appear in the composed E-mail. What was strange for me was that it wouldn’t appear in the signatu pane on the right side – sort of. One minute it would not be there and then after clicking between panes it would.

This must be the delay other forums were referring to. I know the code is correct since it showed up in Safari when saving it out as a webarchive file.

I’ll give it another go.

The were some other suggestions about placing type before and after an image. I assuming they are suggesting HTML text since you can’t combine the archive file and text entered in the signature pane.

Jeff,
The easiet way I have found to create the signatures is with the WiseStamp browser extension. It works in Firefox and Google Chrome. WiseStamp has a WYSIWYG signature builders. Once you have the signature looking the way you want, save as HTML as a file and follow the rest of the tutorial re: webarchive files. Let me know how things go.