Disclaimer: Wether you should even use (HTML) formatting in e-mails is not subject of this post. There is much discussion to be had, on how e-mail was intended to be used in the first place and what has become of it.
Fact is: people like to style their signatures. So here it goes…
- Create your signature in HTML. Wrap it all in a
<div>. Use only inline CSS to style your elements (some of it will be overwritten by some e-mail clients regardless). It could look something like this:
You should always use absolute references when embedding images.1
Loading image(s)2 from your web server also gives you the chance to change them, whenever you like. Whenever somebody opens an e-mail containing your signature it will grab the image from your web server. Once you change it, the new image will be loaded. Your signature will change even in older e-mails in people’s e-mail archives. Hence: updatable signature.
Bonus feature: Additionally you can link the image to a special url, that you redirect to any page on your website. Change the redirection at will…
- Create a new signature in Apple Mail. Go to “Preferences”, chose the “signature”-tab, then hit the “+” on the bottom. You can write whatever you want. It doesn’t matter, because all of it will be replaced in a second anyway.
- Close Mail.app.
- Find the signature you just created: It should be in the “~/Library/Mail/V2/MailData/Signatures/” folder. Order the files by date to find the signature you just created. It sould be a .mailsignature file. Open it in your favorite text editor.
- Replace everything between the
<body>-tags with the html you created in step 1 and save. - You then need to lock the file, because Mail.app will try to overwrite the changes you just made. Right-click on it and chose “Get info”. Then hit the checkbox next to “Locked”.
- Reopen Mail.app and use your new signature!
Credit where it is due: I first learned about how to make a custom css signature in Mail.app on allforces.com.
- Do not – and I repeat: DO NOT – use attachments! There is nothing more annoying than people sending the same image attachments with every single e-mail! ↩
- I made the image double the size that I needed and shrunk it back down in html. That way I have a crisp image on devices with a retina display, like the iPhone. ↩
