Lessons learned in business, marketing, web design, productivity and technology.

Creating an HTML Signature in Apple Mail

Posted: December 17th, 2008 by Jeff

I recently needed a way to include several links, namely to my company’s Website, Newsletter, and Facebook Page. An HTML signature seemed like a good choice, since including full URL’s would make it a little text heavy.

After having found some great info here and here, I was still presented with the problem: When the HTML signature is rendered into plain text, the links simply disappear, leaving you with some very useless text.

The Basics

Creating an HTML signature requires a bit of a hack, but assuming you can create the HTML file then the rest should be pretty easy:

  1. Create a new dummy email signature in Mail: From Mail’s top menu, select ‘Mail > Preferences’ and go to the Signature pane. Create a new signature, then quit mail.
  2. Create an HTML File: Best to use inline CSS. Here is a nice once for inspiration.
  3. Create a Web Archive File: Open the HTML file you just created in Safari. Choose ‘File > Save As…’, and save the file in ‘Web Archive’ format.
  4. Replace signature with new HTML signature: From the Finder, navigate to ‘Home Folder > Library > Mail > Signatures’. Find the signature created in Step 1 by listing the files by creation date. Copy the name of that file, and rename your Web Archive to match. Replace that file with the new Web Archive file that is now of the same name.
  5. Activate the New Signature: Launch mail and select ‘Mail > Preferences’, and go to the Signatures tab. Rename the new signature as desired. Mail will not properly render the HTML in this Signature window, but it will render properly when composing a message. Drag the signature to the mail accounts you want it available for and choose this as the default signature.
  6. Creating Rich Text Emails: By default, Mail is typically configured to send plain text emails. Go to ‘Mail > Preferences’, and set ‘Message Format’ to ‘Rich Text’.

Something to note is that images should be hosted on your web server and linked to from within your signature, NOT included as an attachment. I followed those steps, and ended up with something similar to this:

Visit us onlineJeff Pelletier
Basetwo Media Inc.
 
1282 Vernon Drive, Vancouver, BC V6A 4C9
Phone: 604.681.4995 | Toll Free: 1.888.681.4995 | Fax: 1.866.382.6083
 
Visit us at www.basetwomedia.com | Sign up for our Newsletter
Become a fan on Facebook

The Problem

The above signature looks pretty good, but as soon as the HTML is stripped out - eg. if someone was to reply to me in plain text, or their mail client didn’t support HTML - The signature would turn to this:

Jeff Pelletier
Basetwo Media Inc.
1282 Vernon Drive, Vancouver, BC V6A 4C9
Phone: 604.681.4995 | Toll Free: 1.888.681.4995 | Fax: 1.866.382.6083
Visit us at www.basetwomedia.com
Sign up for our Newsletter
Become a fan on Facebook

Those last two lines are useless. The only option seemed to be to include the URL in its full form, which sort of defeats the purpose of using HTML (aside from the possibility of including a logo).

The Solution

I came across yet another post which first suggested using CSS’s display attribute to hide the extra URL when rendered in HTML, and show it in plain text. But apparently that doesn’t always provide reliable results. But a second suggestion involved formatting this ‘hidden’ text as white (or the same colour as your background) and in a very small font size. This worked very well!

So now to get this:

…
Visit us at www.basetwomedia.com | Sign up for our Newsletter at www.basetwomedia.com/contact-us/newsletter
Become a fan on Facebook at www.facebook.com/pages/Basetwo-Media/25813667485

I would use the following code:

…
Visit us at <A href="http://www.basetwomedia.com" style="color:#0c9bdb; text-decoration:none">www.basetwomedia.com</A> | Sign up for our <A href="http://www.basetwomedia.com/contact-us/newsletter/" style="color:#0c9bdb; text-decoration:none">Newsletter<span style="color: #FFFFFF; font-size: 0.1px;"> at www.basetwomedia.com/contact-us/newsletter</span></A><br />Become a fan on <A href="http://www.facebook.com/pages/Basetwo-Media/25813667485" style="color:#0c9bdb; text-decoration:none">Facebook<span style="color: #FFFFFF; font-size: 0.1px;"> at www.facebook.com/pages/Basetwo-Media/25813667485</span></A>

Which, when rendered in plain text, looks like this:

…
Visit us at www.basetwomedia.com
Sign up for our Newsletter at www.basetwomedia.com/contact-us/newsletter
Become a fan on Facebook at www.facebook.com/pages/Basetwo-Media/25813667485

It’s certainly not as pretty in plain text, but it’s better than the alternative. So far, this seems to work fine in Apple Mail, Outlook Express in Windows, Gmail, Hotmail and Horde Webmail.

Disclaimer: Until recently I was opposed to HTML emails in general, but sometimes marketing wins over practicality!

Similar Posts:

    None Found

Bookmark and Share

2 Comments on “Creating an HTML Signature in Apple Mail”

  1. 1 Tom Humes said on December 17th, 2008:

    Nice Site layout for your blog. I am looking forward to reading more from you.

    Tom Humes

  2. 2 Your Publicity To You » Blog Archive » Business, Marketing, Web Design, Productivity and Technology … said on December 19th, 2008:

    [...] unknown wrote an interesting post today onBusiness, Marketing, Web Design, Productivity and Technology …Here’s a quick excerptActivate the New Signature: Launch mail and select ‘Mail > Preferences’, and go to the Signatures tab. Rename the new signature as desired. Mail will not properly render the HTML in this Signature window, but it will render properly … [...]

Leave a Comment

Category: Technology, Web Design & SEO | Tags: , , |