UPDATE 10-20-2012: If you are on Snow Leopard, Mac OS X 10.6, continue reading. This tutorial will also work for users on Tiger, OS X 10.4 and Leopard, OS X 10.5. To see the entire list of tutorials that I have written on creating and installing HTML signatures into various mail applications, go to HTML Signature Installation Help.
Since I started freelancing, I wanted my e-mail signature to be a bit more useful and appealing to look at. I wanted something more professional and attractive so people can easily surf to my website through clicking on the e-mail signature link. (Thanks to my design friend, John who showed me how to do this with Apple Mail).
Apple Mail allows you to control the font, color, and even insert images (but as attachment only) into a signature. But to have total control over the design of the new e-mail signature and having images in it without them being attachments, I had to first design my new e-mail signature with HTML and CSS outside of Apple Mail, and then save that HTML file as a Mail signature. Here’s how it’s done.
Step 1: Designing the HTML/CSS
Before we begin, here are some basic but important notes to keep in mind as you design your signature. One major obstacle in designing HTML e-mail templates is that there are literally dozens of different e-mail clients out there (most if not all can’t handle CSS and HTML as well as our internet browsers can) so you have to keep your design and codes as simple and straightforward as possible.
- Use tables for basic layout. The CSS float property is not supported in Gmail or Outlook, making CSS layouts impractical.
- Use inline CSS. The style tag is not supported in Gmail, and support for CSS selectors is spotty.
- Use only basic CSS properties. E-mail clients tend to be very picky about which CSS properties they support. Campaign Monitor has a great summary of CSS support in e-mail to use for reference.
- Use absolute URLs. Relative paths won’t work for an e-mail signature. So all your links need to be absolute URLs.
- Link to images. I personally dislike e-mail signature images as attachments (it makes it easy to mistaken that image as a legitimate attachment). Because of this, I recommend linking to your images by placing them on a web server rather than including them as attachments.
- Exclude HTML, HEAD, and BODY tags. When we get ready to save your HTML signature into Mail, make sure that only the relevant HTML is included in your document.
For my signature, I used a two-column table. I have my logo on the left and the text on the right. I placed each element inside its own SPAN division to have the text float left without it breaking off to its own line and so that I could use inline CSS to format each element. If you use a DIV instead of a SPAN, each element will start in a new line.
Step 2: Saving the Signature into Mail
Once you have created the HTML for your e-mail signature, the next step is to get the signature into Mail.
- In Mail, open Preferences and click on the Signatures icon.
- Create a new signature by clicking on the plus icon (you can just leave the signature blank for now).
- Quit Mail.
- In Safari, open the HTML file that you created.
- In Safari, go to File > Save As. Then, navigate to Your Home Folder > Library > Mail > Signatures. We want to overwrite the signature that you just created in Mail. Click on the existing signature file, make sure that the format is set to Web Archive, and hit Save. (If there are multiple files in this folder, switch the save dialog to the list view. The signature that you just added in Mail should be the file that was last modified just a few minutes ago.)
- Re-open Mail. Done!
Feel free to contact me if you run into any problems creating your very own Apple Mail signature. I’m very interested in seeing all the creative signatures that others are creating so please post your link in the comment area. Cheers!
UPDATE 08-30-2012: Due to the high number of recent requests to create custom email signatures, I created a service section for signature design and development. If you would like me to create a signature for you, please visit www.mydesignpad.com/htmlsignature/ for more info.