Creating An Attractive HTML Signature in Apple Mail

UPDATE 10-20-2012: If you are on Snow Leopard, Mac OS X 10.6, continue reading. This tutorial will also work for users on Tiger, OS X 10.4 and Leopard, OS X 10.5. To see the entire list of tutorials that I have written on creating and installing HTML signatures into various mail applications, go to HTML Signature Installation Help.

Since I started freelancing, I wanted my e-mail signature to be a bit more useful and appealing to look at. I wanted something more professional and attractive so people can easily surf to my website through clicking on the e-mail signature link. (Thanks to my design friend, John who showed me how to do this with Apple Mail).

Apple Mail allows you to control the font, color, and even insert images (but as attachment only) into a signature. But to have total control over the design of the new e-mail signature and having images in it without them being attachments, I had to first design my new e-mail signature with HTML and CSS outside of Apple Mail, and then save that HTML file as a Mail signature. Here’s how it’s done.

My E-mail Signature

Step 1: Designing the HTML/CSS

Before we begin, here are some basic but important notes to keep in mind as you design your signature. One major obstacle in designing HTML e-mail templates is that there are literally dozens of different e-mail clients out there (most if not all can’t handle CSS and HTML as well as our internet browsers can) so you have to keep your design and codes as simple and straightforward as possible.

  • 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.
  • Use only 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. Relative paths won’t work for an e-mail signature. So all your links need to be absolute URLs.
  • Link to images. I personally dislike e-mail signature images as attachments (it makes it easy to mistaken that image as a legitimate attachment). 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.

Mail Inbox

For my signature, I used a two-column table. I have my logo on the left and the text on the right. I placed each element inside its own SPAN division to have the text float left without it breaking off to its own line and so that I could use inline CSS to format each element. If you use a DIV instead of a SPAN, each element will start in a new line. You can view my HTML and feel free to use it as a starting point for your own signature.

Step 2: 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.

Mail Preferences

  1. In Mail, open Preferences and click on the Signatures icon.
  2. Create a new signature by clicking on the plus icon (you can just leave the signature blank for now).
  3. Quit Mail.
  4. In Safari, open the HTML file that you created.
  5. 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.)
  6. Re-open Mail. Done!

Save As...

Summing Up

Feel free to contact me if you run into any problems creating your very own Apple Mail signature. I’m very interested in seeing all the creative signatures that others are creating so please post your link in the comment area. Cheers!

UPDATE 08-30-2012: Due to the high number of recent requests to create custom email signatures, I created a service section for signature design and development. If you would like me to create a signature for you, please visit www.mydesignpad.com/htmlsignature/ for more info.

Follow responses through the RSS 2.0 feed | February 24th, 2011 | 173,454 views

66 comments »

  1. August 19th, 2013

    Tyler Bell says:

    Wonderful! Worked perfectly. Thank you!

  2. September 5th, 2013

    Angela says:

    My signatures appear as they should in the library and are correct in the signatures panel of Mail preferences. However when I use the signature the links and formatting are gone. They work perfectly fine in one email account but not the other. What have I done wrong?
    Thank you!!!

  3. October 8th, 2013

    Greg Woods says:

    Work perfect. Thanks.

  4. November 27th, 2013

    Chris says:

    Every time I re-open Mail, it overwrites the .mailsignature file with the original one. I’m not sure why or how to fix that. Suggestions?

  5. November 27th, 2013

    Chris says:

    Nevermind, I found your page for 10.8 (I’m in 10.9, but same issue) and saw that you have to lock the file. Works like a charm now, thanks!

  6. March 8th, 2014

    Thanks for the useful information. I was also having problems linking an image in 10.6.8 and mail version 4.6. In the end I opened the html in Safari, selected all and copied. I then created a new mail signature and pasted. It maintained all the links including that to my image. Thanks again Tim for making this information available.

  7. March 11th, 2014

    Darian says:

    Hey,

    I did a mail signature for our account but I seem to have a problem when attaching stuff. It goes into the mail signature table and breaks the whole signature apart. PLEASE HELP ME! I can mail you a pic to show you what I mean

  8. May 14th, 2014

    Tyler says:

    Hi Tim,

    I am running a work computer with OS 10.6.8 and I’m using Apple Mail Version: 4.6 (1085).

    Can I use GOOGLE DOCS to create my signature? How do I do it once I’ve created it.

    Thank you!

    Tyler

  9. May 20th, 2014

    Tim Cai says:

    Tyler, what you need is to write up the html codes. What program you use to write it doesn’t matter.

  10. May 23rd, 2014

    […] Creating an attractive html signature in apple mail […]

  11. February 26th, 2015

    Nicole says:

    Hello – thanks so much for this! Everything worked great…except that the image I put in my signature is hosted by a free site (imageshack) and when I send an email it becomes clickable and brings the receiver to that website. Is there a way to keep the image but disable the link? Hopefully that makes sense the way I worded it.

    Thanks!

  12. March 3rd, 2015

    Tim Cai says:

    Nicole, as long as you can edit the html codes, you should be able to disable the link by getting rid of the “a” tag while keeping the “img” part that is wrapped within it.

  13. April 27th, 2015

    MIKE says:

    HI
    Thanks for the tutorial. However, I cannot make it work.
    The images in my signature appear as a blue square with a question mark. What can I be doing wrong???
    Thanks

  14. July 31st, 2015

    Michelle says:

    Hi Tim, this fixed the issue I was having. Thanks so much for posting this solution!

  15. March 26th, 2016

    Kevin says:

    Hi i am trying to get rid of the issue of apple mail taking the image out of my signature and turning it in to an attachment and html signature is supposed to make that happen from what i am reading, and I doing something wrong in code or is that just a myth that this could be possible in the apple mail program

  16. May 29th, 2016

    Tim Cai says:

    Kevin, yes, html signature would fix that problem with mac mail. For more info about html signatures and the services that I offer, chick here: http://mydesignpad.com/htmlsignature/

Leave a comment * Required fields.


About

  • "Sure someone else could have created a greater logo redesign for EME Lighting but I was sold on Tim’s diligence & reliability plus I love our new logo! It is fresh, symbolic of who we are while staying in line with our brand intention."

    - Bill Lee
    CEO of EME Lighting
  • "Tim is a trustworthy and effective designer. He redesigned the entire visual identity system for my company & I am extremely pleased with it. As the CEO of a company with over 3000 employees, I would recommend Timmy to anyone looking to have some serious design work done."

    - Tony Ou
    CEO of Senqiu Lighting
  • "Tim effectively designed my website and newsletter. What impressed me the most was his ability to create the images, style and design I was looking for. I highly recommend him if you are looking for someone reliable, flexible and talented."

    - Christine M.
    Owner of Acupuncturebody
  • "Tim has a great personality that makes him a pleasure to work with. He is focused, hard working & always has an attention to details. He has great curiosity and constantly strives to learn & develop himself taking his work to the next level"

    - Slava S.
    Director of Creative Services at STV
  • "Tim conceptualized original ideas & executed the design brilliantly. He always made sure the highest technical & design standards were met. I could always count on him to translate the client vision into reality."

    - Linda G.
    VP Biz Dev. at Real Estate Arts
  • "Tim is a highly talented designer. He has excellent technology skills, amazing dedication & terrific interpersonal abilities."

    - Michael S.
    AD at Real Estate Arts
  • "Timmy is a very talented designer, he is passionate and reliable, his work is always creative & on time. He’s a good person with lots of energy, which makes him a pleasure to work with."

    - Jess L.
    AD at Sudler & Hennessey
  • "Timmy got a great system for helping you figure out what you want, need & putting those ideas down into a tangible product. He has done 3 sites for me already & anyone I have recommended him to has called me back to thank me."

    - Vahram S.
    Owner of Brooklyn Body