How-To: Getting More From Mail With HTML Signatures
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.
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!).
If 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.
Tweet This (12)
walkerp on August 7th, 2009 at 12:43 pm
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.
James Dempsey on August 7th, 2009 at 4:13 pm
No worries. We’ll all be sure not to send you email.
Greg McBride on August 10th, 2009 at 6:48 pm
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.
Cody on August 7th, 2009 at 5:45 pm
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.
Cody on August 7th, 2009 at 5:47 pm
Ah and damn my spelling errors. Plust? I (think) they do? I’m getting terrible!
Mitch Malone on August 9th, 2009 at 8:38 pm
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.
Nic on August 10th, 2009 at 12:52 am
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.
marc on August 10th, 2009 at 1:57 pm
Color and link for website is not working? email works. Does not show the dotted lines as well? Have Mac Mail 3.6.
207guy on August 10th, 2009 at 6:33 pm
I have to use MS Office at work and creating a signature in Outlook is soooooo much easier. C’mon Apple!
Greg McBride on August 10th, 2009 at 6:50 pm
I agree. I’m hoping that Snow Leopard supports HTML signatures. Seems like something that they should have implemented a long time ago.
Mark on August 11th, 2009 at 12:15 pm
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! :)
Ash on August 22nd, 2009 at 10:35 pm
I’m having the same issue as Mark. I can’t get it to work for some reason, though the article to put it on the iPhone worked fine. I’ve reread the instructions and done everything listed.
Craig on September 2nd, 2009 at 11:43 pm
I’m having the same issue that Mark and Ash are reporting, is there something that is missing? Possibly tags?
Jon on September 8th, 2009 at 10:33 am
I’m using Mail 4.0 on Snow Leopard and I can’t get the signature to display either. Anyone have any tips?
mike on September 9th, 2009 at 4:44 am
i have the problem with snow leopard, i have tried various editors, none of which is able to produce a signature that renders in mail.
pita
Val on September 17th, 2009 at 8:41 pm
Wish I had read the comments first.. took the time to do this and it doesn’t work either :( The idea is awesome though… to advertise yourself [company] in such a savvy way does say A LOT about personality, and skills of course!
Crazy66 on October 22nd, 2009 at 8:53 am
Ability to prioritize citations when time might not permit citing everything that is found. ,
dvh on November 15th, 2009 at 5:26 am
I found that even simple formatted signatures created in Mail (4.2) would render poorly in various email clients which do not like all the webkit formatting Mail uses.
I was easily able to use the basics above in Snow Leopard to create a simple signature using Dreamweaver. Basic format was:
Your styles may vary – I think the only difference here is to enclose the signature html inside a body tag. Works fine in Snow Leopard.
dvh on November 15th, 2009 at 8:52 am
sorry… didn’t realize sample code wouldn’t show up in my post.
The basic idea which works fine in Snow Leopard just requires a css style tag and body tag with with your HTML signature. Save as web archive and rename the file as described in the post.