Creating an HTML signature in Apple Mail
writes about programming
Tired of that plain text e-mail signature that I’ve been using for years, I recently endeavored to create something a bit more professional and refined for my e-mails.
Apple Mail allows you to control the font, color, and even insert images (which are included as attachments) into a signature. But it doesn’t give you direct control of the HTML and CSS, nor does it provide a solution for including images in your e-mail without them being attachments.
These limitations meant that I first had to design the HTML and CSS of my new signature outside of Mail, and then save that HTML file as a Mail signature. Here’s how it’s done.
Designing the HTML/CSS
From my experience designing HTML e-mail templates for FireFly Transmit, our e-mail campaign application, I was already familiar with the obstacles of designing HTML e-mails. Since there are literally dozens of different e-mail clients out there, you have to design for the lowest common denominator to ensure that your e-mail looks decent in each (see the E-mail Standards Project). Here are some of the basics to keep in mind as you design your signature:
- Use tables for basic layout. The CSS float property is not supported in Gmail or Outlook, making CSS layouts impractical.
- Use inline CSS. The style tag is not supported in Gmail, and support for CSS selectors is spotty.
- Only use basic CSS properties. E-mail clients tend to be very picky about which CSS properties they support. Campaign Monitor has a great summary of CSS support in e-mail to use for reference.
- Use absolute URLs. Obviously, relative paths won’t work for an e-mail signature. All of your links should be absolute.
- Link to images. Personally, I dislike it when someone sends an e-mail to me with an attachment that is just their signature image or background file (it makes scanning for other e-mails with legitimate attachments more difficult). Because of this, I recommend linking to your images by placing them on a web server rather than including them as attachments.
- Exclude HTML, HEAD, and BODY tags. When we get ready to save your HTML signature into Mail, make sure that only the relevant HTML is included in your document.
I created my signature with a two-column table—logo in the left cell and text in the right cell. I placed each line of text inside its own DIV so that I could use inline CSS to format each line. I ran into a problem with the spacing between the phone number and company name; padding didn’t work correctly in Outlook 2007, and margin didn’t work in Windows Live. I ended up inserting an additional DIV between the two and giving it a fixed height, which solved the spacing problem in all e-mail clients. You can view my HTML (feel free to use it as a starting point for your own signature).
Saving the Signature into Mail
Once you have created the HTML for your e-mail signature, the next step is to get the signature into Mail. (A thanks to Melvin Rivera and Mez Hopking for introducing me to this technique.) It’s actually pretty simple:
- In Mail, open Preferences and click on the Signatures icon.
- Create a new signature by clicking on the plus icon (you can just leave the signature blank for now).
- Quit Mail.
- In Safari, open the HTML file that you created.
- In Safari, go to File > Save As. Then, navigate to Your Home Folder > Library > Mail > Signatures. We want to overwrite the signature that you just created in Mail. Click on the existing signature file, make sure that the format is set to “Web Archive,” and hit Save. (If there are multiple files in this folder, switch the save dialog to the list view. The signature that you just added in Mail should be the file that was last modified just a few minutes ago.)
- Re-open Mail. Voila!
Testing
Don’t forget to thoroughly test your new signature across multiple e-mail platforms. If you don’t have access to a particular e-mail platform, take a look at Litmus, which can generate screenshots of how your e-mail is rendered in many e-mail clients.
Also, since there are still some people—and quite a few handheld devices—that do not read HTML e-mails, it would be a good idea to test the plain text version of your signature. By default, Mail sends every e-mail as a multipart message, with both an HTML version and a plain text version. In Mail, select an e-mail that has your signature. Then, press Command + Option + U to view the source of the e-mail. You will see many lines of header information, the plain text version of the e-mail, followed by the code view of the HTML version of the e-mail. My signature turned out nicely in plain text.
Wrapping Up
If you decide to create your own HTML e-mail signature—or already have one—we would love to see it! Please shoot me an e-mail and show it off! Also, let me know if you would allow us to display it in an “e-mail signature inspiration” gallery that we are considering doing as a future post.
February 13th, 2008 at 9:50 pm
You can also copy any HTML from a web browser (just highlight the content) and paste it into the signature box. It eliminates quite a few steps.
February 21st, 2008 at 11:58 am
Can’t seem to get this to work guys — either way. Do I name to file in the library/mail/signature to replace the long string file name (DF9JH-7DRT….)?
Can’t just paste the code into the signature box either.
Thanks for your help.
March 31st, 2008 at 11:30 pm
hey, thanks a lot for this info! I’m trying to embed an image in the mail, just as if I were doing it from outlook but haven’t found a solution to it yet. I don’t want to link it to an http site… just embed it. Any ideas? thank you!
German
www.3dar.com VFX / Visual effects studio
April 4th, 2008 at 5:35 pm
Hi guys…
I hoped that there would be an EASY way to send HTML email but I dont get it! Why is such a simple task this difficult? Why do we have to hack ourselfs into this? I followed all the steps above but it doensn’t work. Why is Apple not making this an option in Leopard Mail? You can send HTML mail from templates within Mail but you cannot drag and drop a webpage into mail and make an emailing out of it! I am searching for a way to do this for a long time now and I still did not find a way… I am really frustrated!
Hensen
April 4th, 2008 at 7:22 pm
Hey guys, thanks for the comments. Xac, I tried pasting my signature into the signature box in Mail preferences, but couldn’t get it to work. The design seemed to look OK at first, but Mail adds some of its own formatting which drastically altered my signature. It seems to me that the solution I outlined above is the only sure-fire way to get the signature exactly like you want it.
Craig, the key is to replace one of the existing files in the signatures folder. So yes, click on one of the existing files with a long name, and then press “Save” to overwrite that file. It won’t work if you just save a new file to that folder; you must overwrite one of the existing files (preferably the one you just created a few steps earlier).
German, the only problem with embedding an image in the e-mail is that every message you send will appear to have an attachment in it, which can be misleading. But if you’re OK with that limitation, Mail certainly allows you to embed an image. The easiest way to add an image into your signature is to open up Mail > Preferences > Signatures, and then drag and drop a photo from finder into the signature pane. Mail will automatically resize the image to around 65px square.
April 8th, 2008 at 11:32 am
Hi there,
Thanks for this - great help!
The only problem I’m having is that although I set the text links in my dreamweaver html document to a specific colour for links, rollover links, visited links and active links, and to only show underline on rollover (done in Page Properties), when I look at the signature in Mail and when I view test emails in google mail, the link have gone back to the default blue and puple for visited links. Can I stop Mail doing this?
Thanks for your help!
Best wishes,
David
April 14th, 2008 at 3:50 pm
Hey David,
I can tell you what the problem is. You will remember I mention in the article that you are not supposed to include HTML, HEAD, or BODY tags in the signature. When you define link attributes in the Page Properties dialog in Dreamweaver, it actually specifies those values in the BODY tag. To get your signature to work correctly, you have to use inline CSS to style your links. That should take care of your problem.
Tyler
April 24th, 2008 at 5:29 am
Thanks! Working great now - fantastic resource
May 2nd, 2008 at 12:21 am
Thanks for this tutorial it was exactly what I needed. One question, can I use the tag to define the link colours in my email? In my sig I want to put clickable links to both my website and email address. Something like this:
[div style=”color: #A1A0A4; font-size: 10px; line-height: 14px;”] Email: [a]martyn@spinifexgroup.com[/a][/div]
May 27th, 2008 at 4:09 pm
Tyler,
Everything that I have done works fine, up until I compose the mail and send it. I get the missing image icon (blue box with a question mark) for the two images that I have in the signature. I think I have done everything correctly, but it doesn’t matter what I do now, I always get the same two boxes. Any ideas as to what can help this? Thanks!
-Chris
May 29th, 2008 at 11:59 am
Martyn, yes, you can use inline CSS to define the color of the link. Looking at the example you posted, the problem is that you are applying the color only to the div. You would also need to specify the color to the A tag in order to override the default blue.
Chris, it sounds like your problem is probably being caused by the use of a relative link. It will not work if you are trying to reference an image just on your harddrive. The image has to be on a web server, and you must reference it through an absolute path. (One reader has suggested using your .mac account’s web server.)
Hope this helps!
May 31st, 2008 at 2:28 pm
Tyler, I have the same problem as Chris, but my images are hosted on a webserver. I FTP’d them myself and I double checked the code. what now?
June 8th, 2008 at 2:06 am
[…] though quite a tedious one. Already people have written great stuff on it like All Forces, Paradigm Reborn and Gathering in Light. I’ll summerize the […]
June 27th, 2008 at 1:01 pm
Tyler,
Your explanation help very much. Works fine except for my images.
They preview find in Safari but when I look in Mail Preferences (Apple Mail) the image holders are there but no images.
I used absolute links and have checked every letter of every link.
The images are hosted on my site. I uploaded them myself. The names are exactly correct.
Any suggestions?
Heres the link to the html I created in dreamweaver to preview in Safari that worked fine. http://www.strengthbank.com/emailsig/emailsigSB.html
June 27th, 2008 at 1:17 pm
I’ve received several responses from people saying that they are placing absolute links to their images stored on a web server, but that the images appear broken when viewed in the Apple Mail preferences pane.
Don’t be alarmed — my images don’t show up when I view my signature in the preferences pane either. However, the images do show up when I actually send an e-mail.
So to accurately test your signature, you need to send an e-mail to yourself. The preference pane won’t display your signature accurately.
Good Luck!