Creating an XHTML signature for Apple’s Mail

06Nov06

After my move from Windows to Mac, there is one little thing that I miss a fair bit… it’s having a nice signature in my emails. This was something very easy to accomplish in Outlook. But proved to be more allusive in Apple’s Mail. So I set out on a mission to uncover how to do it.

I found quite a simple example on Macosxhints.com. All very nice, but I needed to know how my signature would look across various email clients and services, such as Hotmail and Yahoo etc.

I’ve created one that works and I’ve also taken some screenshots of how the signature is rendered in five of the most comment email clients/services.

OK lets jump right in

First of all we need to decide on how we want the signature to be built. Initially I thought about using tables to contain the signature, but upon a little bit of research I discovered that the vast majority of email services are compatible with xhtml / css. So that’s that set. Next I needed to decide how I wanted the image to be included. There’s one thing that really annoys me when receiving an email, it’s when they contain useless attachments that come from the email signature itself. Especially annoying when it comes to saving multiple attachments to a folder, I simply don’t want someone’s nasty background line image added to the list of important files.
OK I know, it’s not really important, but I believe that a signature should be as unobtrusive as possible.
I opted to have the image load from my server, with only a simple image reference within the HTML. I chose this because all email applications that I’ve used all cache the images that they download, so it’s not a problem if your email is viewed offline.

With all that in mind, set out and design / build yourself a gorgeous signature in your favourite editor. Make sure you keep all hrefs absolute, relative simply wont do.

Once you’ve designed yourself a tasty signature, the next part to creating it is incredibly easy. Here’s what to do:

• 1. Make sure you already have a signature set up in Mail. Anything will do, as long as it’s something.
• 2. Close Mail
• 3. Load the signature you’ve created into the Safari browser
• 4. Save it Apple+S as a Web Archive into: ~/Library/Mail/Signatures and replace your desired signature
• 5. Reload Apple Mail and create a new message. Voila.

~/ = your user name within OS X.

If you have multiple signatures for different accounts and don’t know which .webarchive to replace. Simply open the SignaturesByAccount.plist and find the < array > < string > VALUE < / string > < / array > that relates to the webarchive.

You may find that when you first create a new message the image doesn’t load, and instead displays the Safari question mark ?. Don’t fret, simply send yourself a message so that Mail can cache the image. From then on it’s plain sailing.

Example

This is what I designed for use as my signature: Hopking Design Signature.

Please feel free to take it and customise it as you see fit. One thing I must emphasize in my code is:

< div class=" clear " >< /div > (and the corresponding style)

It’s essential that you use this, or else when you reply to an email with your new signature, the ‘original message’ text will stick to the right side of if like a magnet.

How it renders

Here’s how it renders in the various email clients / services.

Apple Mail:

Microsoft Outlook:

Yahoo’s online service:

Hotmail’s online service

Gmail’s online service

As you can see here the signature renders pretty well across the various services. To my surprise though, Google’s Gmail doesn’t render it at all properly. I looked at the generated source code, it left the DIVs intact, but had striped away the class names?!
I imagined this kind of behaviour from Hotmail. So far, I’ve had no success. If anyone has ideas of a fix, please yell.

That’s it. I hope this helps someone somewhere.

Update: Here’s a great resource for modifying and making the most of Apple’s Mail