Creating complex HTML email signatures in Mail.app for Mac OSX Lion

  • Twitter
  • Facebook
  • StumbleUpon
  • Reddit
  • Digg
  • Del.icio.us
  • E-mail
Posted September 15, 2011 by Brian Yuen Short URL: http://bcw.im/5 Creating complex HTML email signatures in Mail.app for Mac OSX Lion

Update: Mountain Lion users, please see an updated blog post here regarding email signatures.

Apple released it's desktop and server operating system in July 2011 called OSX Lion.  With this new release came a new version 5 of the native email client, Mail.app, which was heavily influenced by it's little brother on the iPad.

Apple has never made it easy to include a complex HTML email signature, especially ones that include a remote image, such as your company logo or your big smiley mug shot.

Today, we're going to walk you through how to create a complex HTML email signature in Mail.app for OSX Lion.

First, here's what you'll need:

We'll also assume that:


Step 1
Decide what sort of information you want to display on your signature.  For this demonstration, we'll use first/last name, email, telephone, company name and logo.

Step 2
Create your signature in your HTML editor of choice (or download the one that's available in the download link below and edit it with your plain text HTML editor).  If applicable, upload your image to the web server (or Dropbox) taking note of the public path (http://www.yourdomain.com/images/logo.gif) and inserting it into your HTML signature. See my article on how to do that here with Dropbox.  For the more advanced users, basic inline CSS is ok to use, as long as it's not used to position items...tables only!

Step 3
Once you have your email signature designed and laid out just as you like, save the file to your Desktop and call it "signature.html"

Step 4
Open Safari, drag your newly created "signature.html" file into the Safari window.  You should now see your signature in Safari.

Signature in Safari

Step 5
With Safari open and your signature visible, click on File in the top menu, and select "Save as…"  Make sure that the "Web Archive" is selected in the format menu and save your signature as a .webarchive to your Desktop.

Save as dialog box

Step 6

Open a Finder window.  In the menu bar on the very top of your screen, click "Go".  With the "Go" menu displayed, click and hold the "option" key on your keyboard to toggle the visibility of "Library" in the menu.  In the past, the Library directory was visible, but in OSX Lion, Apple thought hiding the "Library" was a good way to keep the inexperienced users from causing any chaos to your system. Go ahead and select the "Library" option which will open a new window.

Library foldering in OSX Lion

Step 7
Drill down to "Library > Mail > V2 > MailData > Signatures".  You should see a file with the extension .webarchive in here. If not, open up Mail.app, create a new blank signature and quit out of Mail.app. What this does is creates a temporary .webarchive file which we will soon replace with our fancy HTML version.

Step 8
Take note of the .webarchive filename.  Better yet, copy the name of the file.  In my case, the .webarchive was named  "89F114E2-C22D-40B7-B232-83A26A664DD9.webarchive"

Step 9
Find the "signature.webarchive" file that we made earlier on your Desktop.  Rename the "signature.webarchive" file the same as the .webarchive file in Step 8 (eg., signature.webarchive is now 89F114E2-C22D-40B7-B232-83A26A664DD9.webarchive on the Desktop)


Step 10
Take the newly renamed filed on your Desktop, and drag it into the "Library > Mail > V2 > MailData > Signatures" folder, replacing the one that is currently there.

Step 11
Now open Mail.app and go into the preferences Mail > Preferences > Signatures.  You should see something very similar to this screenshot.  Don't worry too much about the broken image that's displayed, it will show up normally when you create a new email message.

Mail.app signature dialog box

Happy emailing!

Download the HTML email signature template here.

Here's what other people had to say

Picture of Da Bear
Da Bear
September 16, 2011 4:48 pm

Thanks for trying.  At first I couldn’t find the Library file.  It’s not under the Go menu as you suggested.  I finally got to it through my hard drive icon.

The folder series you list is not there for me.  I did find a Mail folder under Application Support/Apple/Mail but after that, I couldn’t find a signature folder anywhere.  Also, a search of the Library folder doesn’t turn up any .webarchive files.  Weird.

I definitely have a signature already created, and I’m using Lion, and Mail 5.0.

Any ideas?

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
September 19, 2011 10:44 am

Hi Bear,
That’s actually the incorrect “Library” folder.  There’s actually two “Library” folders in your system, one directory under your hard drive icon (eg. Macintosh HD/Library), and another under your username (eg. /username/Library)

The easiest way to access the correct Library folder is to click on the “Go” menu, and then click and hold the option key on your keyboard.  You’ll see the Library folder will become visible in the “Go” menu AFTER you click and hold the option key.

Hope this helps!

Picture of Rhianonn
Rhianonn
September 22, 2011 1:10 am

Hi,

Thanks for this post and also the one on Outlook 2011.  Is there any chance you have advice on how to do a complex html email signature in Entourage 2008?  I need to set up all my company’s signatures and I have three Entourage users.

Rhi

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
September 22, 2011 10:24 am

Hi Rhianonn,
Unfortunately we don’t have Entourage 2008 laying around anywhere to test on.  Have you tried using the same technique as Outlook 2011 for Mac?  I remember doing one years ago, but can’t confidently write about it.  Please let us know how it works out.  I’d be really curious to know how it works.  Thanks and good luck!!

Picture of Rhiannon
Rhiannon
September 25, 2011 11:59 pm

Hi,

Thanks for the response.  The copy/paste doesn’t seem to work with Entourage as the CSS properties don’t copy across, only the text.

*sigh* it’s like Outlooks retarded little brother, if that is even possible.  I’m just going to stick to an image and they can forgo having links!

Picture of Dori
Dori
September 30, 2011 11:43 am

So I’ve done all of this and the sample in the Signatures looks fine (blue boxes but fine) but in my emails, the signature is only the plain text.  No pictures, ignores my CSS.  Thoughts?

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
September 30, 2011 12:27 pm

Hi Dori,
Is your CSS inline? It’s hard to say without seeing an example. Can you post the code?

Picture of Dori
Dori
September 30, 2011 1:30 pm

Actually, I fixed that problem (needed to allow richtext in Mail) but now I have a new one.  When I rename the html file with my signature as .webarchive on the desktop, the file becomes empty.  I’ve tried everything but as soon as I rename the html the information disappears.  Bizarre…what do you think?

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
September 30, 2011 1:37 pm

That does sound bizarre.  I would repair your permissions and reboot.  Hopefully that does the trick.

Picture of Xavier Paridaens
Xavier Paridaens
October 3, 2011 12:13 am

Hi,

It’s verry intersting, but I gad a problem the logo and icons don’t appear like you in your sample.

Thanks

Picture of Mike Valentine
Mike Valentine
October 5, 2011 3:23 pm

Very Helpful tutorial Brian!

Thank you so much for the clear instructions. I used DreamWeaver and saved as a webarchive file as you suggested. The help with Library menu item using the option key was important to getting it done with Lion version of OSX.

Much appreciated!

Mike

Picture of Gite dans le Var
Gite dans le Var
October 25, 2011 5:13 pm

You couldnt be more right on…

Picture of jorge cobas
jorge cobas
November 22, 2011 2:53 am

Hi,
there is no possibility to load IMGs locally, not hosted images?
A lot of clients mail software blocks external images..

thank you

Picture of John
John
November 23, 2011 11:13 am

I followed all the steps and everything looks good - the signature in Mail Preferences looks just like the html.  It has text, a photo and a logo image and 3 social media logos - all with links).

But when I go to compose an email with the signature all the text appears but all the images show up as question marks in small blue boxes and all the links do not work.  Some sort of broken links to the images but I have no idea why.

Any suggestions?

Thanks!

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
November 23, 2011 11:55 am

Hi John,
A number of things could be going on here.

1. Double/triple check if the path to the image is hosted, and if the URL to it is correct.  What happens when you paste the URL to the image in your HTML into your browser address bar? Do you see it the image?

2. You may have a syntax error somewhere in your HTML. I would check your HTML here (copy and paste it in, click “Check”) http://validator.w3.org/#validate_by_input

3. Make sure you have “http://” in front of the image path. (ie., http://www.domain.com/your-image.jpg)

Hope this helps!

Picture of John
John
November 23, 2011 12:19 pm

I just checked all three of those and they all check okay.
John

Picture of John
John
November 23, 2011 2:22 pm

Recreated the steps 3 times and still no images.

John

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
November 23, 2011 2:50 pm

Hi John,
It’s a little difficult to troubleshoot without seeing your code.  If you can post it (take our personal info if needed), I can take a quick look.

Picture of John
John
November 28, 2011 10:16 am

Any time to look this over?

Picture of Esther Sun
Esther Sun
December 15, 2011 2:16 pm

Thank you Brian! you are so helpful!

Picture of Merrin
Merrin
December 21, 2011 2:18 am

Thanks that worked superbly!

Picture of pradodesign.com
pradodesign.com
December 30, 2011 11:34 am

Great tip!

Picture of Josh Colter
Josh Colter
January 4, 2012 3:56 pm

Super helpful article! Thanks for creating clear instructions. I thought I was going crazy trying to find library.

Picture of Rick
Rick
January 5, 2012 5:51 pm

I have been trying to upload a new custom mail template into Lion and never got anywhere when I tried to put the new templates in place.
Is the Library folder under my username the place to look for the mail application support folder where these templates are supposed to go?
Thanks
Rick

Picture of Dave
Dave
January 8, 2012 4:59 pm

Hey Brian,
Just wanted to say thanks for the tip and template!

Picture of Andrew Jones
Andrew Jones
January 17, 2012 5:17 am

WOW!

Thank you sooo much, I’ve struggled to find this answer! This is such a great Tutorial! Please keep it online, to help others!

Thanks again!

Andy

Picture of Will Temple
Will Temple
January 20, 2012 11:48 pm

hey, just wanted to thank you.. spent bunch of time on this with another post, but your osx lion specific helped me find and replace file.. Good job, and thanks!

Picture of Luis
Luis
January 26, 2012 2:56 pm

Don’t have an idea of how much difficult was this stuff for me. The tip of how to see the hidden “Library” was unique and I also have to learn a little html code to edit mi signature.

Finally, it’w working perfect.

Thanks a lot Brian.

Luis

Peru

Picture of Alonso Reyes
Alonso Reyes
January 27, 2012 3:35 pm

Thank you so much!!!

Picture of chris chun
chris chun
February 5, 2012 3:13 am

Hi Brian,

After looking at a few online tutorials for html signatures, I was glad to find yours as it works.

One small problem I’ve encountered is that the hosted image file is apparently saved with the webarchive i.e. the image file is embedded into the webarchive file. I have checked the html in the webarchive file and it is correctly pointing to the server.

Any hints?

thanks and kind regards,
Chris

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
February 6, 2012 12:09 pm

Hi Chris,
So to clarify, your image is showing up as a broken image? The image should ultimately be hosted at a remote web server and not necessarily “embedded” into the webarchive file.

Picture of Chris Hull
Chris Hull
February 29, 2012 3:10 am

Many thanks! I followed your instructions closely, using dropbox to host my logo, and I now have a signature block which seems to work well with both Mail 5.2 and Yahoo Mail (and hopefully, therefore Outlook). This, combined with the Universal Mailer plug-in, will allow me to continue using Apple Mail without the appearance of my messages being ‘corrupted’ by other mail apps!

Not being an HTML expert I used your signature block as a template, which was a great help. The HTML text editor I used was Kimono - free and very useable complete with a preview function.

Thanks again,

Chris

Picture of Drew Johnston
Drew Johnston
March 7, 2012 12:58 pm

Hello There,

Thanks for the tutorial, however it works great between Mail for macs and ipad/iphone, and even MSN. But the graphics don’t appear to be working when the email is sent to a windows computer using outlook, any idea of how to fix this so that it will appear?

Thanks.

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
March 7, 2012 4:32 pm

Drew,
Outlook has a default setting to not show external images.  Unfortunately this is out of our (and your) control.  The user getting the email can right click on the image and select “Show image”

Picture of Rico
Rico
March 7, 2012 5:22 pm

Hi Brain

Thank you very much for this great article. It all worked perfectly straight away.

The only problem i still have its that if i send a mail to a user with outlook 2007 or 2010 on a pc, the body text of the message is shown in Times New Roman instead of Helvetica or Arial. I’ve already chosen Arial as my default font for my emails, but still the same result. Is there anyway to tell Apple Mail to make some inline CSS to body-Tag like font-familiy: Helvetica, Arial, sans-serif;?

Thanks in advance.

Rico

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
March 7, 2012 6:09 pm

Rico,
Unfortunately, this is Outlook’s default behavior.  There is a way around it, although it’s a bit troublesome to have to do it every single time you write an email.

Basically you’d have to develop your email in html, open in Safari, and under the File menu, select “Mail contents of this page..”, which will prompt your email client, and you can send from there.

Not really ideal, but you asked for it wink

Also, just a FYI, some mail clients strip out the body tag.

Good luck!

Picture of David
David
March 12, 2012 1:29 pm

Hello Brian,

This article was a huge help.  Thank you!  My web person, who just designed a custom HTML email signature for me forwarded it.  I would never have figured out how to do this on my own.  I am encountering a problem, however, which I find very puzzling.  I successfully got my HTML web archive into my Mail Signatures, and when I attach it to an email it looks perfect.  However, I happened to send myself a test email to a gmail account, and for some reason in gmail my phone number in my HTML signature reverts to the blue normally used for hyperlinks, and it’s underlined.  This is not how it appears in my HTML design.  I can’t understand since this is a web archive I thought I would avoid display issues.  I’m guessing this must be a function of gmail that I can’t control.  Any ideas?

Picture of David
David
March 12, 2012 3:34 pm

Brian,

I forgot to mention in my previous message that my phone # in my HTML signature is
done in the normal way with parentheses around the area code and a hyphen.  I don’t want it to display as a hyperlink, however, in blue and underlined, which is what gmail keeps doing to it.  I’m wondering if I can trick gmail by writing my phone number with dots the way you have done it in your custom signature.  Guess I’ll have to ask my web guy (since I don’t do this myself) to do my phone # like you did yours and try it out.  Think it will work?

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
March 12, 2012 4:20 pm

Hi David,
Thanks for pointing this out! This is the result of the default behavior in Gmail unfortunately.  Gmail will look for a phone number in the body of an email and wrap it with an “a href” tag.  There is a way to style this, however it hasn’t been thoroughly tested with other email clients.

In this example, the phone number is styled without underline, and have a color of red. Your web guy will know what to do with this and style it appropriately.

<a href="#" style="text-decoration:none;color:#ff0000;cursor: text;">415-555-5555</a
Picture of David
David
March 12, 2012 7:35 pm

Thank you Brian.  I’ve forwarded your instructions to my web guy.  Hopefully, he’ll be able to make this work.  It’s really frustrating because I thought by using a custom HTML signature I’d be able to control how my signature displays, regardless of the recipient.  It’s never as easy as you think it’s going to be!

Picture of Alice
Alice
March 16, 2012 5:38 pm

Hi Brian,

I found the LIbrary folder but can’t find mail, V2, MailData or signatures folder!
I also tried typing this out but nos folders found.

/Library/mail/v2/maildata/signatures

I’m on 10.7.3 OS version and I’m trying to use Mail.

Thank you in advance!

Alice

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
March 16, 2012 5:49 pm

Alice,
There’s actually two Library folders on your machine, so make sure it’s the right one.  Another way to open your “v2” folder is to open up the Terminal.app found in /Applications/Utilities, and copy and paste this in the terminal window:

open ~/Library/Mail/V2 

That should open up the correct folder for you.

Picture of Alice Sabino
Alice Sabino
March 19, 2012 2:54 pm

Hi Brian,

Thank you very much for your help!  It finally worked smile

 

Picture of Tracey - Temporary Tattoos Australia
Tracey - Temporary Tattoos Australia
March 24, 2012 8:08 am

Thanks for sharing. It’s fantastic to create a more professional looking signature than the one I was previously using! wink

Picture of Ian Hunter
Ian Hunter
March 26, 2012 9:02 am

Good article, lays out what you need to do very nicely.

I’ve had to use this hack many times for a while now as we use company signatures with styling and occasionally remote images included.

I hoped that upgrading to Lion would provide some functionality finally to allow direct input of HTML. But oh no. Apple what on earth are you thinking?

In AppleMail 5.2, when I’ve replaced the file with my nice signature file - as has always worked in the past - it shows nicely in the signature window. When I try to create a new email, however, it either ignores half the formatting or all of it.

Very frustrating! Anyone had this experience? (Yes I closed/opened Mail etc)

How do Apple expect real business users to use their OS when such little things as allowing HTML in email signatures is still a major problem?

Picture of TC
TC
April 2, 2012 3:59 am

Took me a few hours but that was due to me thinking I knew what to do next and having to retrace my steps. Advice take it or leave it to those going to follow the above steps;read the instructions!

Thanks I am a new Mac user and this was totally ruining my experience not being able to add a company logo etc… Much appreciated.

TC

Picture of Nick
Nick
April 18, 2012 11:00 am

I am using OS 10.7.4 Lion mac mail. When I try and save my signature with logo it saves in safari as htm not html. There is no save as html?

Help?

Picture of Mel
Mel
April 23, 2012 12:13 pm

Great instructions for Mac Mail on Lion.  Everything worked just as you said.  Just wanted to say thanks!  smile

Mel

Picture of mark
mark
May 1, 2012 5:20 pm

Thanks!
This worked great!

Picture of Mike
Mike
May 4, 2012 3:35 pm

Everything works great but i can’t get the images to show up in my emails

I get the dreaded blue box with a question mark.

I have hyperlinks within the images and they come through but no image

I saved the signature as a webarchive in my public dropbox folder

I’m on the latest version of Lion and mail…

I am a total HTML neophyte…any thoughts?

Picture of Michael Mitschele
Michael Mitschele
May 10, 2012 9:42 pm

Creating that beautiful signature is not easy in HTML. You’ve done awesome job. smile

Picture of Creative resumes
Creative resumes
May 12, 2012 12:37 am

Hi Brian,

Thank you very much for your help!  It finally worked smile

Picture of David
David
May 15, 2012 8:12 am

Thanks for this. Just to help others, I found that the image in Dropbox has to be in the Public folder - not in any other. Mail had to be closed and restarted in order to have the changes take effect. Be sure to not have any spaces in the image file name.

Picture of Mark
Mark
May 21, 2012 2:26 am

I am having an issue trying to create an HTML signature for my MD.

My MD is running Apple Mail and I have tried to recreate the company email signature as close as possible to those using Outlook. When I save the signature, the company logo does not appear when I sent a test email to another user. How can I get this rectified?

Also, do I have to create the email signature on his computer or can I create it on mine and then just send him the HTML with a couple of instructions on how to upload it?

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
May 22, 2012 11:40 am

@Mark,
One of two things is happening regarding your image not showing up.  Either the image is not being hosted somewhere on a server, or the link is incorrect. Regarding your second question, yes, you can create it on your machine and send it with instructions. Good luck!

Picture of Ant
Ant
May 22, 2012 2:31 pm

Hi, great article thanks. Wondering if you can help me though. When I look at the signature everything looks great and sends through to myself great. However when I send it to colleagues with outlook the image displays HUGE on their emails. I have added height: 83px; into the <img> tag and testing looks good in safari (and chrome).
When these guys reply to me, it then also looks huge on my email.
Any thoughts?

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
May 22, 2012 3:16 pm

Ant,
As a general rule, you do not want to resize your images using html or css. I would highly recommend resizing your image in an image editor and resaving your image to the actual size you want it to be. Also be sure that the image is set to 72dpi.  If you don’t have an image editor handy, try using many of the online tools like http://rsizr.com

Picture of dshap
dshap
May 25, 2012 2:43 pm

I read your article, and I’m pretty sure I went step by step. The signature with logo’s I’m trying to employ was done by my home office, all of whom are PC based. I am using Lion 10.7.4 with Mail 5.2(1278). I have uploaded the signature to DropBox and it appears beautifully layer out and sized. I then saved what I see on DropBox to my desktop as a .webarchive file. I then followed your instructions. What I end up with is the signature with logo, and it takes up only about 2/3 of the width of my e-mail message. Any ideas?

Picture of VictorY
VictorY
May 30, 2012 10:31 am

I just wanted to thank you for this post.  I’ve been a mac user in a windows/exchange environment for years.  I have always been frustrated with my signature formatting and font become corrupted/exploded/just plain butt ugly when a reply came back to me.
I searched dozens of google searches and sites seeking the solution. 
(BTW - putting a phantom “.” in your signature and beginning all text below the “.” in your signature not only looks like you consistently mis-type - but also doesn’t work)
I found your post, downloaded your signature template.  Downloaded Seamonkey and whalla!  This coming from a non-html editor guy.
Just wanted to let you know it’s appreciated.
Be well

Picture of Ron
Ron
June 9, 2012 4:49 am

Pretty sure this is an unsolvable problem but who knows, maybe someone knows the answer:

The signature works perfect. I send someone an e-mail, and he replies back. When I open the mail I see my original mail, but the signature image doesn’t show. It just shows the ALT tag, and the shape of the image, but nothing more.

Is this a problem in the sig or is it the problem that there is no proper HTML standard for mails?

Picture of Greg
Greg
June 13, 2012 6:19 am

Thanks for this tutorial. I wish more people would realize that their email signatures have attachments and that is extremely annoying. It’s so worth taking the 5 minutes to do this so that you don’t inconvenience your recipients.

Picture of Rowan
Rowan
July 6, 2012 11:23 am

Thanks. If you have any issues with linking non-secure images then you can change the image served from dropbox to be HTTPS. Just change the beginning of the url to read https instead of http.

Picture of Jess
Jess
July 18, 2012 7:40 pm

Great article - I have done this before but needed a refresher!
Problem however, when I save my .html file as web archive - the image file ends up with http://www.<URL>.png . The   is not a prefix in the HTML (which views perfectly in the web browser) - and only happens in the web archive. What am I doing incorrectly? Many thanks.

Picture of Layne
Layne
July 26, 2012 2:36 pm

My ~Library/Mail/V2/MailData/Signatures folder does not have a WebArchive file in it.  I have created a signature in Mail and closed out and still no WebArchive file to replace.  They are .mailsignature and .plist files.

Picture of Bruce Nicholson
Bruce Nicholson
July 30, 2012 1:02 am

In Mountain Lion. Tried all the above, no luck the only consistent item is the web signature and even when that is replaced it still keepsmy original signature, not the new one…

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
July 30, 2012 1:15 pm

Bruce, thank you for pointing this out.  We installed OSX Mountain Lion on a few machines here and have found a solution to the way Mountain Lion handles mail signatures.  Please see our new blog post here: http://bcw.im/9

What about you?

Name*

Email*

Website

Please enter the word you see in the image below:


Comment*

Remember my personal information
Notify me of follow-up comments?