How-To: Getting More From Mail With HTML Signatures

38 Comments

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.

38 Comments

Franck

Ramm’s comment saved my day !!!
Opening the html file in Safari and saving it as a webarchive did the trick :)

Thx Ramm and Christopher of course for this great post

Xopo

If you can’t get it work in Snow Leopard make sure to read RAMM’s comment!!! Worked for me.

Lori

hi,
i am on tiger 10.5.8.
i have followed all the steps, using dreamweaver to make the html, and none of my images show up. i have posted them on my site’s server, so that they can be accessed via the server.

also, none of the broken image links show as links (which they all are..)

help!!!!!!!!

Thanh Ngoc

Thanks Ramm, that made it work. I couldn’t for the life of me work out why it wasn’t working but it’s all good now that I read your comment.

Dominic

I have followed the correct steps and it works perfectly in Mail 3.6.

However I cannot get it to work on my coworkers mbp using Mail 4.2.

Any ideas?

Denis

the funniest (maybe not that funny), is that when i compose the email and send to anyone, the signature doesn’t work. It only appears when i reply an email. Does anyone know what that happen?

thanks

ps. the html file contains only on <img tag …

Ramm

Hello, for all those having problems showing the signature on Mail, try this: open the html file in Safari, and Save As from Safari as a Web Archive, then procede to change names. I had that problem first and i did that, now is working fine.

dvh

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.

dvh

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.

Val

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!

Jon

I’m using Mail 4.0 on Snow Leopard and I can’t get the signature to display either. Anyone have any tips?

mike

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

Craig

I’m having the same issue that Mark and Ash are reporting, is there something that is missing? Possibly tags?

Ash

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.

Mark

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! :)

207guy

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

Greg McBride

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

marc

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

Mitch Malone

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.

Cody

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

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

walkerp

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.

Greg McBride

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.

JAM

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?

Comments are closed.