38 Comments

Summary:

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. […]

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.

<style>
#sig a:link{color: #690;}
#sig a:visited{color: #690;}
#sig a:hover{color: #690;}
</style>
<div id="sig" style="-webkit-text-size-adjust:none;line-height: 14px; margin: 6px 0; padding: 8px; border-top: 1px #999 dotted; border-bottom: 1px #999 dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 10px; color: #555;" >

<strong style="color: #690;">Chris Ryan</strong> Blogger, Designer, Thinker & Nerd
web: <a href="http://www.theappleblog.com" style="color: #690; text-decoration: none; border-bottom: 1px #999999 dotted;">theappleblog.com</a> email: <a href="mailto:chris@theappleblog.com" style="color: #690; text-decoration: none; border-bottom: 1px #999 dotted;">chris@theappleblog.com</a></div>

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.

You’re subscribed! If you like, you can update your settings

  1. Oh great, so now you’re going to attach an html page to every outgoing email, further cluttering up the internet so people can have their name in pretty colours.

    Sorry, but let’s just keep sigs and emails in plaintext.

    1. No worries. We’ll all be sure not to send you email.

    2. I’d much rather have people use HTML signatures as opposed to attaching multiple images in their signature. Sorry, but HTML signatures don’t “clutter up the internet” any more than a b/w text signature, as far as I know.

    3. I think an html sig is a professional way to send an email.

      I have a question. If I want to use an icon in my signature and im pulling the image from my computer how do i write the html for that in my signature code?

  2. This is very cool – especially for website owners looking to make their emails not only a little more professional, but attractive as well. Plust, an email that stands out definitely will receive my greater attention – if you went through all that work on a resume for example, hell yeah I’d check it out.

    Emails shouldn’t just be plain text. Like a personal letter sent via snail mail, I they do need some character. Plain text gets boring after a while, and doesn’t represent any personality or character of the original author.

    1. Ah and damn my spelling errors. Plust? I (think) they do? I’m getting terrible!

  3. How-To: Getting More From Mail With HTML Signatures | ScriptRemix.com Scripts Saturday, August 8, 2009

    [...] View original post here: How-To: Getting More From Mail With HTML Signatures [...]

  4. Mitch Malone Sunday, August 9, 2009

    Nice article, I actually recently did a similar trick to get my email signature working and I am very happy with the results. One issue I would like to point out though: a lot of digging around and research when doing my own signature led me to one important fact: Gmail only supports inline CSS. This absically means that all CSS should be inside a style=”” property in the actual tag itself. All the resources I found point to the same problem and I recommend using inline only.

  5. This reminds me of this article from 2006: http://allforces.com/2006/04/14/css-signatures/. I think that signature example looks kind of similar, too. With that being said, it’s still some cool advice to get some good looking email signatures.

  6. How-To: Getting More From Mail With HTML Signatures « Day and Age Monday, August 10, 2009

    [...] Nice article from the Apple Blog on using HTML signatures in Mail.app. [...]

  7. Color and link for website is not working? email works. Does not show the dotted lines as well? Have Mac Mail 3.6.

  8. I have to use MS Office at work and creating a signature in Outlook is soooooo much easier. C’mon Apple!

    1. I agree. I’m hoping that Snow Leopard supports HTML signatures. Seems like something that they should have implemented a long time ago.

  9. I’ve followed these steps to the letter, and the signature doesn’t appear in the Mail preview window (or new message window) once I restart the Mail app… I’m using Mail 3.6… Help! :)

  10. How-To: Create Custom CSS Email Signatures on the iPhone Friday, August 21, 2009

    [...] on August 21, 2009 by Chris Ryan and No one has commented Previously, I discussed how to create custom CSS email signatures for Mail in Mac OS X. This week, we are going to take a look at what it takes to replicate the same [...]

Comments have been disabled for this post