How-To: Getting More From Mail With HTML Signatures

Mail Icon

As any person who frequently uses email will tell you, email signatures are very important as they usually provide more information than just a standard name and email address from the sender. You can spice up an email signature since Mail offers support for HTML signatures. If you are fairly comfortable with getting your feet wet with HTML & CSS, they are a snap to create. Read on for how you can make one!

A Note on iPhone Support

This how-to is written specifically for Apple’s Mail in OS X. Also, these signatures will display on an iPhone, but currently there is no method (aside from jailbreaking) to support these signatures on outgoing emails originating from an iPhone. Depending on the amount of content in your email signature, you may need to further tweak the CSS to get something that looks the way you want it to. For those who have already jailbroken their phone, look forward to an upcoming article on how to accomplish these signatures on your iPhone.

Let’s Get Started

Here is a quick example of what we will be creating.

HTML Signature Example

For this how-to, you will need Mail, Safari and some type of HTML editor; my preference is Coda. Our email signature is simply an HTML page with some CSS styling. The code for mine is included below.

[sourcecode language=’html’]

Chris Ryan Blogger, Designer, Thinker & Nerd
web: theappleblog.com email: chris@theappleblog.com

[/sourcecode]

Copy this code (tweaked for your own purposes) into a new HTML document and save it as signature.html. Now open this file in Safari and inspect it to ensure that everything is correct as you would like it to appear in the bottom of your emails. Be sure and click the links to make sure they work correctly as well (and link to your content and not mine!).

Webarchive IconIf everything looks good, then go to File and pick “Save As” and save the file as a .webarchive. This is the same format that Mail uses to save your signature files.

Our next step is to go into Mail and create a new blank signature. This is found under the Mail menu and by clicking on Preferences. In the Signatures tab, you can click the plus icon to add a new signature. By default, Mail will pre-populate this signature with your name and email address. What has really happened is Mail has created a new .webarchive file with that signature content. We’re going to replace it with the file we created earlier.

Close the Signature window and quit Mail (changes should be saved automatically). Now go to your home folder and then open the Library folder. Inside you will find a Mail folder and inside of that, yet another folder called, you guessed it, Signatures (Home ? Library ? Mail ? Signatures). Inside of here are the .webarchive files for your signatures. If the signature you created above was the very first one, there should only be one file in here. If you already have multiple existing signatures, you can double click these files and use Safari to inspect their contents.

Locate the file that matches the simple new email signature we just saw in Mail. With the icon selected, press return as if you were going to change the file name. When the file name highlights, copy this to the clipboard (Command + C) and press return again to switch out of file renaming mode.

Go back to the desktop where you saved the .webarchive of your signature file and rename it using the filename you copied to the clipboard. You should now have a file with a very cryptic filename (such as “AAD4FDB4-8AE3-49F2-8079-161E16525CC0.webarchive”).

Now, drag this file back into the Signatures folder and Finder will alert you that it wants to overwrite this existing file. Click “Replace” to accept and when the transfer is complete, your Signature should be ready to go.

Launch Mail and go back to your preferences to verify the new signature is showing up. If you have multiple email accounts setup within Mail, make sure you drag the signature to the appropriate email accounts.

Create a new message and viola! Your new signature is there (or if you do not have them turned on by default, they are accessible from the Signature menu in the upper right area of a new email message window).

One Last Word On Coding

One special piece to note about the example code above is the usage of -webkit-text-size-adjust: none; which overrides the iPhone’s default attempts to re-scale the signature. This was essential in making my signature look best on the iPhone. Again, with the amount of content you have in your signature, you may need to play around with the CSS to get something that displays the way you want when you view your sent or received messages on the iPhone.

Depending on your comfort level with CSS, you can tweak the signature a bit more and even add a small picture. Some HTML based email browsers, like Yahoo or Gmail, will not display this picture by default though. There are other solutions to this, such as using Data URLs to represent your picture and for more information on that, check out this how-to.

loading

Comments have been disabled for this post