Create a HTML Email Signature for Mac OS X Mountain Lion 10.8

Apple Mac OS X Mountain Lion 10.8 is now available. Once again, Apple updated Mail.app with some changes. If you want to create a custom HTML email signature for Mail on Mountain Lion, the HTML coding part remains the same but the installation have changed. Follow this tutorial to create a HTML email signature file and to get it installed into the new version of Mail on Mountain Lion OS X 10.8.

For Mac OS X 10.7 users, please follow my previous tutorial: Create a HTML Signature in Apple Mail on Lion OS X 10.7.

Step 1: Designing the HTML/CSS

mail-signature-sample-lion

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 straight forward 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.

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 design here and feel free to use it as a starting point for your own email signature.

For STEP 4, you will need to paste the HTML code of your email signature design. If you used MYDESIGNPAD’s Email Signature Service, read below to reveal the HTML code from the HTML file that was emailed to you.

How to reveal and copy HTML code in Safari
Open your HTML email signature file with Safari.
Go to Safari/Preferences.
On the “Advanced” tab, check “Show Develop menu in menu bar.”
On Safari’s menu bar, go to Develop/View Page Source to reveal HTML code
Select all of the HTML code and copy.

Safari Preferences

Safari Preferences-Advanced

Safari Show Page Source

Safari HTML code

Step 2: Create Placeholder Signature in Mail

In Mail.app, open Preferences and click on the Signatures tab. There you will see 3 columns, the 1st one are your mail box accounts, the 2nd one are your custom signatures and the 3rd column is the signature detail preview. Create a new placeholder signature by clicking on the plus icon at the bottom of the 2nd column and name it. Drag your new signature from column 2 into your preferred mail box in column 1. Select your preferred mail box in the first column and go down to Choose Signature at the bottom. In the drop down menu, find and select your new signature. Note: At this point you will not see your HTML signature design on the 3rd column yet. Leave the 3rd column as is for now. Close window and quit Mail.app.

Step 3: Open the Signatures Folder

On Finder’s top nav, drop down the Go menu and than hold down the Option key to see the hidden Library folder. Once the Library folder is open, go to: ~/Library/Mail/V2/MailData/Signatures/.

Step 4: Update Placeholder Signature

Find the signature that you just added (a file ending with a .mailsignature extension). If there are multiple files in the folder, switch to list view. The signature that you just added in Mail.app should be the file that with the most recent modified date. When you have located the .mailsignature file, open it with TextEdit. You may see some metadata info on top and some HTML code below it. Delete all the HTML code (highlighted in picture below) and leave the metadata info untouched.

Under the metadata info, paste the HTML code of your email signature (Read bottom of Step 1 for instructions on how to reveal and copy the HTML code of your email signature design with Safari). Hit Save and quit TextEdit.

Step 5: Lock Updated Signature File – Important Step!

This step must be followed correctly in order for this signature to work or else Mail.app will use the original version of the signature instead of the new one. Locate the .mailsignature file that you just updated in Finder again. Press Command+I or right click on file to Get Info. In the Get Info window, mark the Locked check box.

***Another way to lock the file is by clicking on the gray text to the right of the file name on the header of TextEdit. A drop-down menu will pop up giving you the option to lock file. (See 2nd image in Step 4)***

Step 6: Check Installation

Testing out new email signature

Restart Mail.app. Your new custom signature should appear automatically when you click on Compose Mail. If not, make sure you have followed Step 2 correctly. Links will not work and the images if any may not show when composing an email. But the links will work and the images will show on the receiving end if the source locations are correct. Compose and send yourself a test email with your new signature selected. If the images show, the links working and everything looks as it should, then you have done this correctly. Good Job!

Summing Up

Feel free to contact me if you run into any problems creating your very own Apple Mail signature. I’ll be pleased to see your creative HTML email signature so please post your link in the comment area. Cheers!

If creating your own HTML signature seems a bit too much work or you just don’t have the time for it, we can help. We have already created over 8000 attractive email signature with clickable images and text links for clients from all over the world. Visit our HTML email signature design service website: www.htmlsignature.com for more info.

July 28th, 2012 | Tutorial | 733516 Views | 214 Comments ›

214 comments »

  1. March 5th, 2014

    It worked. Thank you!

  2. March 25th, 2014

    […] könnt, muss diese natürlich erst erstellt werden. Weniger Kreative finden im Netz, etwa hier und hier, zahlreiche Vorlagen; gerne könnt ihr auch unsere oben abgebildete Beispiel-Signatur benutzen, auf […]

  3. April 4th, 2014

    Carly says:

    Hi,
    Can some one help me. I’m stuck on: Once the Library folder is open, go to: ~/Library/Mail/V2/MailData/Signatures/. I’ve tried to find to map through the search balk but there is no folder called Signatures or MailData. I only find de app, mail.app. Does anyone know what I’m doing wrong?

  4. April 4th, 2014

    Carly says:

    I’ve found the solution. My library map was hidden. I’ve used the terminal to get back the library folder.

  5. May 3rd, 2014

    Pablo says:

    It works for me. Thank so much for your help!

  6. May 9th, 2014

    Humberto says:

    great tutorial! thank you for the help!

  7. June 10th, 2014

    […] another set of instructions here. Although I prefer […]

  8. July 27th, 2014

    jocco says:

    As dropbox has removed their “Public Folder” is it correct that I can’t use dropbox anymore? I tried using dropbox but when i use the link in my PHP code the images never show up.

    Is there another “free” options to use instead of dropbox?

  9. July 28th, 2014

    Dan Smith says:

    Amazing, I was about to give up completely but you’ve pulled me back from the brink! Great tutorial.

    I don’t suppose you have a tutorial for Entourage too?
    That’s my last hurdle…

  10. September 1st, 2014

    […] Portfolio site of Timmy Cai » Creator of meaningful web and print designs […]

  11. October 3rd, 2014

    […] Create a HTML Email Signature for Mac OS X Mountain Lion 10.8 – Follow this tutorial to create a HTML email signature file and to get it installed into the new version of Mail on Mountain Lion OS X 10.8. For Mac OS X 10.7 users, please follow my previous tutorial: … If you are using Outlook on a Mac, … […]

  12. October 21st, 2014

    luisa says:

    it worked perfect! Thanks!!

  13. October 24th, 2014

    bogdan says:

    Thanks a lot for help. Very good tutorial.

  14. November 4th, 2014

    Leanne says:

    Brilliant tutorial, thanks a lot!

  15. November 10th, 2014

    Wow, very useful and time saver! Thanks!

  16. November 18th, 2014

    Sarah says:

    This update was so helpful. It’s rare that I can get an online tutorial to work, but this one did. Thank you so much!!

  17. December 18th, 2014

    Mel says:

    I echo the above comments …good job with the tutorial!

  18. January 15th, 2015

    Renee says:

    Super. Thank you. Just saved a ton of time by doing what you said, that actually made me happy to troubleshoot rather than frustrated. Kudos

  19. February 9th, 2015

    Robert says:

    Thank you for this – I truly admire your effort. But really, isn’t it completely insane? Just for a simple HTML-formatted mail signature? I thought to grit my teeth and finally go with Mail on my new Mac, but you just convinced me to stick with Thunderbird, where this simple use case is supported right in the UI. But I’m sure you’ve helped many less cranky people.

  20. February 20th, 2015

    […] tutorial is on My Design Pad.  You do need to know some HTML.  I used this online editor.  And, you do need to […]

  21. March 3rd, 2015

    Aaron says:

    Thank you for this. I’ve come back to this tutorial a few times over the years as I change sigs. Very easy to understand. Great work.

  22. March 3rd, 2015

    Tim Cai says:

    Aaron, thanks for your comment. I am very happy that my tutorial was helpful. I wish the same for many others.

  23. March 7th, 2015

    […] depends on which email client you use. If you use Mac Mail this is quite extensively documented here. The recipe is quite elaborate, but it boils down to a couple of […]

  24. March 9th, 2015

    Margaret says:

    Thanks! Worked great! Next I’m trying to make the icons live.

  25. March 22nd, 2015

    Very helpful. Thank you. Is there a way to include javascript in my signature? I am trying to do something with “onmouseover.” The image in the signature appears as it should but the roll-over does not do anything.

  26. March 22nd, 2015

    Tim Cai says:

    Though “onmouseover” is a common html trick, it is not accepted for email signatures. It will work when you preview your design on a web browser but email programs are more primitive and may not be able to under that.

  27. March 25th, 2015

    Swapnil says:

    Thanks mate you saved my day :)

  28. March 26th, 2015

    Thanks for this. Too bad about “onmouseover.” Is there another way to play a sound in a signature? I would settle for clicking a link.

  29. April 3rd, 2015

    thanks for the tutorial. I can’t find the Library Folder in the Finder Option. Is there anything that i am Missing.

  30. July 11th, 2015

    Natelee says:

    Hi, thank you very much for the tutorial! I wonder if you could help me? I followed every step and loaded the signature, but once everything is done, it images loads with blue question marks “?” like the images are missing… Could you maybe give some advice would appreciate it, really struggling. Thank Natelee

  31. July 16th, 2015

    Tim Cai says:

    Natelee, did you upload your images onto a web server? If not, the images will not load. You have to upload the images onto a web server and than have the links written correctly in the codes so the images will show up when in use.

  32. July 21st, 2015

    Natelee says:

    Hi Tim,
    Thanks for the response! Someone designed the signature for me and in the folder is the following, the HTML link signature (if you click on it it opens in safari and looks perfect) then the Jpeg image and then a folder with all the images cut up in it. Should i upload the cut up images on to a web server? Would Google docs work if i share publicly? My apologies if i seem stupid, have never work with this stuff before and don’t have a clue…

  33. August 11th, 2015

    Tim Cai says:

    Natelee, yes the images should be uploaded onto a web server so that the images will load whenever someone opens an email with your signature installed.

  34. August 29th, 2015

    Jeff says:

    Hi,

    I used your tutorial a few months ago and it worked great. Today I noticed my html signature didn’t show in Mail prefs anymore. I looked and it is still in the signature folder.

    I started over and made a new one. Whenever I open mail it reverts to the placeholder html instead of the new. I did the editing with the file unlocked and locked it before reopening mail. I wonder what caused the original to disappear and why the new doesn’t stick?

    Thanks,
    Jeff

  35. January 6th, 2016

    Dad Shirts says:

    Thanks for finally writing about >Create a HTML Email Signature for Mac OS X Mountain Lion 10.8 | mydesignpad.com <Loved it!

  36. April 5th, 2016

    Thanks for this tutorial, you made it nice and easy for me as a new mac user :)

  37. May 8th, 2016

    […] I looked into how I would install a HTML email signature. After some research, I found that annoyingly that  mac mail and outlook don’t support CSS properties or floats. Tables […]

  38. May 10th, 2016

    Stephane says:

    I tried the tutorial, it work great until i decide to add an attachment (like PDF) to my email, my two column signature become one column under the other.
    Someone have the answer why ?
    Thank you.

  39. May 16th, 2016

    Edgars says:

    Great post! Free way to get signature marketing features. Alternative to premium services. Thank You.

  40. May 24th, 2016

    Sorana says:

    It works! You’ve explained it really well. Thank you!

  41. May 29th, 2016

    Tim Cai says:

    Stephane, you can add a link to download a PDF but you cannot have the actual PDF as part of the signature. If you layout is not sticking, make sure that you check your viewing and composing settings to ensure that you have html and allow remote images to load turned on.

  42. May 29th, 2016

    Tim Cai says:

    totally agree. Which that email programs can understand html and css like our web browsers do. Maybe one day in the near future, it may.

  43. May 3rd, 2017

    Jen says:

    This is great! I got so close but for some reason the image I used won’t show. Does this need to be hosted? I am not sure what I’m doing wrong? Thanks!

  44. May 23rd, 2017

    I wonder if this process will with the OSX Sierra? Thanks.

  45. June 13th, 2017

    Tim Cai says:

    There is a tutorial for OSx Sierra: http://mydesignpad.com/htmlsignature-install-instructions/

  46. June 13th, 2017

    Tim Cai says:

    Jen, yes, in order for the images to work, you images need to be hosted on a web server.

  47. July 5th, 2017

    Jonathan says:

    I created a signature on my mac outlook email, The only thing I need is where can I find the location of the signature created in outlook for mac. So that I can edit it through text edit.

  48. August 10th, 2017

    Tim Cai says:

    Jonathan, for outlook, you can just copy and paste the html design into the signature preference window. If you need to edit it, you can edit the html codes with your preferred editor and preview it on a web browser. When you have it the way you want, you can copy it back into Outlook’s signature preference window.

  49. September 28th, 2017

    Jason says:

    Followed all the steps above. Upon receipt of the test email, the signature has the links but not the image.

    The signature I inserted had the red question marks over where the images should’ve been seen. However, I figured I would test it out to see if it looked different on the receiving end.

    Any suggestions?

    Thanks

  50. October 26th, 2017

    Tim Cai says:

    Dear Jason, the image has to be hosted on a web server. Did you do that?

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