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.
28 Comments, Comment or Ping
Ben
Thanks for sharing this. I was wondering how you added that signature into your emails.
Dec 3rd, 2007
josh
again . . . thanks for sharing.
Dec 3rd, 2007
John santic
Thanks Wess…I just upgraded to Leopard and was wondering if this is all the same?
Dec 3rd, 2007
C. Wess Daniels
Hey guys - glad it helped!
@John - yes this works with both Tiger and Leopard. I have done it on both OS’s. And it is done the same way for both of them as well.
Dec 3rd, 2007
Adam Walker Cleavela
So I tried it - although I tried to use a HTML file with CSS (instead of inline SPAN styles) - and it really didn’t work - it changed the font and the color of the text in the email….
Any ideas?
Dec 3rd, 2007
C. Wess Daniels
I am assuming that it’s the CSS that’s not working with the program. Have you tried it without?
Dec 3rd, 2007
Johnny A. Ramirez
Good job!
Dec 4th, 2007
Michael Krahn
Please keep me in your prayers… I have not yet converted to Mac. I’m almost ready to make my decision but I’ve counted the cost and it is currently too high.
May God have mercy on me, a Dell user.
And what rhymes with Dell…?
Dec 4th, 2007
C. Wess Daniels
@Michale, My prayers are with you.
Dec 4th, 2007
John Warne
Here’s another excellent article about doing a similar thing with css signatures for the iPhone:
http://www.dfbills.com/index.php/main/display/240
It employs DataURLMaker (http://www.sveinbjorn.org/dataurlmaker), helpful for email clients that deny http downloads. I’ve incorporated this method into my Mail.app signature as well for consistency between laptop and mobie.
Dec 7th, 2007
C. Wess Daniels
Hey John, thanks for the tip. I am sure Adam will appreciate it as well.
Dec 7th, 2007
James Boyers
Everytime I try this the image or Avatar that I use is missing, instead there is a blue box with a question mark. I tried hosting the image file and also locally on my mac but it still won’t work. Any ideas anyone??
Jan 4th, 2008
C. Wess Daniels
@James - Have you tried sending an email to yourself, I’ve found that the icon doesn’t show up until you actually mail it out. I am not really sure why? Also did you use the method above or the suggested css method in the comments? I wasn’t able to get the image to show with the css method.
Jan 4th, 2008
Brian
This almost worked perfectly! I have a beautiful signature, but none of the links work. It’s as if a photograph of my signature was taken. Any ideas? Anyways, I was dying to know how to do this under Leopard and now I do. My signature is gorgeous! Also, two other tips for Safari users: 1) Replace the “ALT” tag in the template provided here with the”TITLE” tag. Safari uses “TITLE” for floating tool-tips and not “ALT.” Also, ensure you save your signature as a “Web Archive” and not “Page Source.” You’ll have a choice. If anyone can help me, drop me a line. Enjoy and thanks again!
Jan 10th, 2008
Brian
OK…maybe it was my fault about the bad links I noted in the above posting. 1) When you compose a message after following these steps, it may appear that your sig links are not “hot.” However, I’ve found that if you send out a message (note: I’ve only verified this under Hotmail and OS X), the links are indeed clickable by the recipient (except for the “aim” link). 2) There’s a slight chance that there’s something about that Signature creation option in Mail that says “Use the same font as the message above” (or whatever the exact text says). This time, I un-checked that box when I made my signature and maybe that made my signature work. Maybe it made a difference in things working this time and then again, maybe I’m wrong. 3) Lastly, I found that composing a message in Mail after you’ve done this will show your signature with unclickable links. However, if you then select one of your OLDER signatures and then GO BACK to your latest signature, suddenly all of your signature links work. Strange. Maybe it’s a bug. Maybe not. I’m using Leopard. Good luck to all!
Jan 10th, 2008
C. Wess Daniels
Brian - Thanks for the tip on the tags. I am not sure why your links wouldn’t be working. The only thing I can think of is that either your div tag is messed up or you have an open-ended tag somewhere in the code. Otherwise I’m not sure.
Jan 10th, 2008
Nora Brown
Awesome! A client JUST emailed me about how to do this in Leopard, and your page gave me the answer - thanks!
Jan 28th, 2008
Steve from Canada
Awesome! Thanks man…
Just hoping it works OK on recipients’ Windows email programs.
Jan 30th, 2008
C. Wess Daniels
@Steve - good to hear it works on Windows too! A question I hadn’t considered.
Jan 30th, 2008
Eric from usa
Do you have a script for “mac ox 10.3.9 Panther???
Feb 7th, 2008
C. Wess Daniels
Hi Erica, I don’t have a script for 10.3 - sorry about that.
Feb 7th, 2008
Tyler Tate
Good tutorial!
One thought that a couple of people have hit on is making sure that the signature looks good in mail clients other than Mail.app, since most people who receive your e-mails will be viewing them in Outlook or through a web-based e-mail service.
Two basic tips are to use tables for layout rather than CSS, and use only inline css rather than stylesheets. Campaign Monitor has a good summary of CSS support in e-mail clients, Litmus can help you test your signature, and I recently wrote about designing e-mail signatures that display correctly on all e-mail platforms.
Hope this helps!
Feb 8th, 2008
Jake Bouma
Dude I’ve been trying to figure this out for the last hour… I have everything set up, but I don’t have a “Signatures” folder in Library - Mail. Is it something funky with OS X 10.5.2 or because I’m a n00b?
Feb 17th, 2008
C. Wess Daniels
Jake - haha, I don’t know whether you’re a n00b or not but I like that you gave me only two choices! I think there’s a third one. You should be able to create a signature folder in root-user-library-mail and that should be all that’s needed. let me know if that works.
Feb 17th, 2008
D.P.
not sure if this post is still hot.
but for some reason my code shows in my signature. I cannot get it to show as an image at all, either when I open in safari or create it as a signature. I uploaded it to my myspace page and it looks great, but I am obviously missing a step, which I have read over and over and over again.
Thanks.
Mar 23rd, 2008
Matt
Hi,
I have successfully made a signature and have loaded it on mail signatures. It works great while testing it on firefox and when i sent it to myself in mail. but when i sent it to my gmail and hotmail and also someone elses hotmail, the skype, ichat and aim links are non clickable. My research surrests that it is only the links that do not have a direct website like my links to facebook and website and not because html is sometimes not supported.
Are the links just meant to be skype:username or do that have to have http://www. in front or something?
Hope someone can help.
Apr 10th, 2008