How To: Make an HTML Email Signature For Apple Mail

My good friend and designer, James LaCroix, showed me awhile back how to make an html email signature for Apple’s Mail program (something it doesn’t do easily). Since I set up that signature I have had a few folks inquire how I made it, so I thought I show the steps here. NOTE: These directions work with Apple’s Tiger and Leopard.

Step One: HTML, AVATARS and YOUR INFO

Create your signature in html format. You can use something like Apple’s Textedit, my favorite Textmate, or something more visually based like Dream Weaver.

You will need to upload your avatar to your server, or host it on something like a box.net account (you’ll have to make sure it’s public if you use this). My avatar is set to 42×42.

You can download a basic template here.

Step Two: FAKE SIGNATURE

Next, you want to navigate to Mail’s preferences (or hit the shortcut ?,). Click the signature tab at the top. Here you want to create a new signature, and give it a fancy name since it will be for your new fancy signature. I have called mine FAKE for purposes of the tutorial. This will serve as a place-holder for your new HTML signature. Now drag title of your signature to whatever email account you want to be able to use it with (or drag it to all).

Step Three: WEBARCHIVE

Next, open your HTML file in safari, and click “save as” in the menubar. Next, go to your home folder—>Library—>Mail—>Signatures. In there you will see the signature you created in Mail’s preferences (you can see what the most recent signature is using quick-look in Leopard, or look at the “date modified”). The title of the FAKE signature you created will look something like “8D2D5125-757A-482F-A291-EFDFEE476000.” Copy that title, and make that the title of the Webarchive file you just created. You do this so when you drop that webarchive file into signatures folder it will overwrite the FAKE signature. Once you move your webarchive Signature to the signature folder, and click replace and you should be good. Restart Mail.

Now, when you go to write an email make sure you have your new signature selected from the panel in your message window and everything should look slick. Let me know if you have any questions or suggestions.

UPDATE:
A reader has sent in this tip and think it may solve some of the problems people are having. Let me know if it works for you:

“There must be written text before and after the HTML entry!” … i don’t know why this works, but i’ve spend a long time trying out all kinds of methods, and then came across this side (http://www.macosxhints.com/article.php?story=20070407214643680) and implemented only the part where this is mentioned … worked great! I believe, that those who did get it to work might have had text before and after, but may not have realized that it this is why it worked..