HTML Signature in Apple Mail

Working with web designs all day, I finally decided to get an HTML signature inside of Apple’s Mail program. It’s a little more complex than it might be, and there are some pitfalls and things you don’t want to do. I’ll list them out for you. There are good examples of this practice, and bad ones. Be SURE to read the Good example here before starting, it’s more relevant to know also what NOT to do with your signature. I actually scaled back my email signature bonanza after reading it.

The Results:


The Templates

First, you’ll need some ideas of how to start. Download the three different templates
here, here and here.

The Code

First of all, should you dispense with my templates and just work on your own, you should know that you can’t use Body or Head tags. ALL the code must be inline CSS, as you can see from the examples.

Take A Look

You can open each inside Safari (you need to use Safari instead of any other web browser) to look at them- File -> Open File...

Then you can open them up inside a text editor like BBEdit or even Dreamweaver if you have that. Even TextEdit will do it, though. Just be sure not to use something like MS Word because that application adds things to the HTML that you don’t want during exports.

Modify Away

This is the point where you can modify my code (or insert your own- being sure to NOT include Body or Head tags) to put in your specific information. When I am editing these, I keep Safari open, with all three examples open in different tabs (File -> Open tends to open the files in a separate window, but you can copy and paste the URL from each window into tabs instead, if you like). Switching between your text editor and Safari (reload after each save of the text editor) until your signature looks like you want it to. A helpful tag is:
to add a carriage return.
Look here if you need help with inline CSS.

Go Into Apple Mail

Now that you’ve got your HTML all set up there are two things to know in Apple Mail:
  1. You need to create a blank signature(s) in the Apple Mail preferences: Mail -> Preferences -> Signatures. Hit + to add them, but leave them blank and don’t name it(them) now.
  2. When you create these blank signatures, what happens is that some mysteriously-named files are put into the ~/Library/Mail/Signatures folder. This step is critical and later these blank signatures will be overwritten.

+Please ignore the tabs in the Finder window above. I use TotalFinder.+

Now since you’ve been editing and viewing your example.html files, you should still have the up inside Safari. Using Safari- as opposed to Firefox or Google Chrome (my current browser), is also critical, as I mentioned above, for this second-to-last step.

For each of your signatures, you want to Save As... inside Safari, and make sure that you’re selected Web Archive:

And you’ll see something like this:


Returning to your Mail Preferences, you should see your signatures. Don’t worry about the Question marks inside the image references.

The FINAL step is to BE SURE you drag and drop your signatures onto your various accounts. IT WILL NOT WORK WITHOUT IT.
Notice in the above MobileMe account, I have 3 signatures showing up there, because it’s ready to go. You can tell when an account is ready because you will be able to switch between the signatures you’ve dragged and dropped onto that account, like below:

Do this for each of your accounts, as appropriate for the signature you set up.

Please comment if you have issues.