How to Create an Attactive HTML Email Signature For Mail on Mac OS X El Capitan 10.11

mac-mail-elcapitan

Apple released Mac OS X El Capitan (Version 10.11) on Sep 30th, 2015. The latest version of the Mac operating system has some great new features like Split View, a better Misson Control and Note app and best yet, an improved Mail app. Getting a HTML email signature installed in Mail on El Capitan have changed a little from Yosemite. For instructions on creating and installing an HTMl email signature on OS X Yosemite or earlier Mac operating systems, click on link: http://mydesignpad.com/htmlsignature-install-instructions/. Continue reading for instructions on installing an HTML email signature in Mail on OS X El Capitan

Before we start, you need the following to set up a HTML email signature in Mail 9.X:

  • A Mac computer with Mail 9.X running on Mac OS X 10.11.X El Capitan.
  • A text editing software to read and edit the HTML codes. I recommend using TextEdit since it is preloaded on Mac computer.
  • A HTML file coded with your desired email signature design. Use MYDESIGNPAD’s HTML email signature design service if you want us to create a great looking signature design for you.
  • A web server for hosting images being used in your design.
  • (We offer free images hosting if you use our HTML email signature design service)

  • Know how to upload the images to your web server and get image links.

STEP 1: Create Placeholder Signature

  • Open Mail.app
  • On the main menu, go to Mail>Preferences…>Signatures

Yosemite Mac Mail Preferences

  • Click the + icon located on the bottom of the 2nd column to add new placeholder signature and give it a name that you like. I am naming my signature: MDP-iMac

Yosemite Macmail Preferences Signature Setup1

STEP 2: Assign Signature to Desired Email Account

  • Drag the placeholder signature into the desired email account on the 1st column

yosemite-macmail-preferences-sig-setup2

  • With the desired email account highlighted on the 1st column, select the placeholder signature from the Choose Signature drop-down menu.

yosemite-macmail-preferences-sig-setup3

STEP 3: Check Settings for Composing

  • Go to Mail>Preferences…>Composing
  • Make sure Rich Text is selected for “Message Format”

yosemite-macmail-preferences-composing

STEP 4: Check Settings for Viewing

  • go to Mail>Preferences…>Viewing
  • Make sure Load remote content in messages is checked

yosemite-macmail-preferences-viewing

STEP 5: Quit Mail.app

Make sure you do this in order for the HTML email signature to work properly.

  • You may press Command+Q to quit or click on Mail>Quit Mail

STEP 6: Copy The HTML Email Signature Code With TextEdit.app

  • Right-click on your finalized HTML email signature file or hold down the control key to reveal pop-up menu. A HTML file will be emailed to you if you use MYDESIGNPAD’s Email Signature Service
  • Click on “Open With” and select TextEdit.app
  • Once the file is open, you will see the HTML code. Select all (Command+A) and Copy (Command+C)
  • If you see your HTML email signature design instead of the HTML code, follow STEP 6B to setup TextEdit.app to display HTML code and come back to STEP 6
  • After you copy all the HTML code, you may close the file by clicking on the red dot on the upper-right hand corner of the window (Command+W)

yosemite-macmail-textedit1

STEP 6B: Set TextEdit.app to Display HTML Files as HTML Code

Skip this step if you were able to see the HTML code in STEP 6.

  • Open TextEdit.app: ~/Applications>TextEdit.app

TextEdit app

  • On the main menu, go to TextEdit>Preferences…>Open and Save
  • Check Display HTML files as HTML code instead of formatted text

yosemite-macmail-textedit-setup

STEP 7: Locate Placeholder Signature

  • Click on your desktop to reveal Finder.
  • On the main menu, go to Finder>Go>Library (press and hold the option key to reveal Library on the drop-down menu)

yosemite-macmail-openlibrary

  • If not using iCloud, go to ~/Library/Mail/V3/MailData/Signatures/
  • If using iCloud Drive, go to ~/Library/Mobile/Documents/com~apple~mail/Data/V3/MailData/Signatures/
  • Turn on List view and click on Date Modified to display the latest files on top
  • The placeholder signature you just created is the file ending with .mailsignature with the most recent modified date

yosemite-macmail-findplaceholdersignature

STEP 8: Open and Update Placeholder Signature

  • Open placeholder signature file with TextEdit.app (hold down the option key and click on file to reveal pop-up menu. Click on “Open With” and select TextEdit)

yosemite-macmail-openplaceholdersignature
yosemite-macmail-openplaceholdersignature2

  • Select and delete everything under the Mime Version… line
  • Press Command+P to paste your HTML email signature code that you have copied earlier into the file. (Your HTML file is emailed to you if you are using our Email Signature Service)

yosemite-macmail-replacesignatureinfo

STEP 9: Lock Updated Signature File

Very important step to follow in order for signature to work.
Skip this step if you are using iCloud.

  • Click on the downward triangle located on the top right of the opened file

yosemite-macmail-replacesignatureinfo2

  • On the pop-up menu, check Locked
  • Quit TextEdit

Lock file

STEP 10: Restart Mail

  • Open Mail back up
  • Click on the Compose new message button to open a new message window
  • Your new HTML email signature should appear automatically
  • If your HTML email signature doesn’t show up, make sure the correct email account is selected on the From drop-down menu below the Subject line
  • Make sure the correct HTML email signature is selected in the Signature drop-down menu as well if you have more than one signature installed

yosemite-macmail-checkemailsignature

Installation Completed

Congratulations! That is it! Hope you got it working as it should. Go on with Mail as usual. Happy email writing. Contact me or leave a note if you have any questions or comments. If you want a creative and visually appealing HTML email signature and would like to have MYDESIGNPAD create one for you, please click on link for more info: http://mydesignpad.com/htmlsignature/

Follow responses through the RSS 2.0 feed | October 4th, 2015 | 39,642 views

39 comments »

  1. November 10th, 2015

    You must be kidding – not a user friendly process – I failed.
    On my old Apple computer and software no problem. What the….!

  2. January 5th, 2016

    Mark says:

    Hi Bill,
    After completing process my signature appears in code rather than an image on the end of my eMail. I’ve tried process a few times but get same outcome. Where do you think I’m going wrong? Thanks.

  3. January 5th, 2016

    Tim Cai says:

    Mark, make sure you lock your file as explained on STEP 9. Let me know if that solved your problem.

  4. January 5th, 2016

    Mark says:

    Thanks for getting back to me… No still not working, I’ve repeated the process about 6 times but to no avail.

  5. January 7th, 2016

    Tim Cai says:

    Dear Mark, thank you for emailing me about your email signature issue. Happy that I was able to create a proper HTML file for you and to help you install it remotely with teamviewer. Cheers!

  6. January 14th, 2016

    Hi Tim,
    I don’t know how to install my
    signature on my Email letters..

  7. January 30th, 2016

    Sandra says:

    Worked perfectly! Hallelujah!
    thanks so very much! I had tried others who had “the” solution for El Capitan and Apple Mail. So convoluted I got lost. You were simple, clear, and did not expect us to be programmers.
    God bless you!

  8. February 2nd, 2016

    Caroline says:

    Thanks Tim, Brilliant service. My signature looks really professional. I received my great looking HTML signature promptly and followed your easy to understand straightforward instructions.

  9. February 5th, 2016

    Gray says:

    Thanks for a great looking signature, I’ve had others done before but none as good as this. Well done.

  10. February 5th, 2016

    I’ve the same problem that Mark

  11. February 12th, 2016

    Tim Cai says:

    Are you having problem following the tutorial? Let me know what your problem is and I will see if I can offer you some help.

  12. March 25th, 2016

    Marion says:

    Hello Tim,
    Thanks a lot for your tutorial, it is awesome!
    I made a signature with cliquable social media icons and it is perfectly working for gmail & outlook, but not on mail. So when i sent email to people that are using mac, they can not click on the social media icon. I am the only one having this trouble?
    Have a good week-end.

    Marion

  13. March 28th, 2016

    Guillaume says:

    I have followed all the steps but unfortunately my signature doesn’t appear. I only have squares with question marks instead of my signature.
    Thanks for helping :)

  14. March 28th, 2016

    Amy says:

    The files of the created ‘temporary’ signature are not showing up in my library>mail>V3>maildata>signatures file?

  15. April 7th, 2016

    Thank you, not a simple process, but your instructions have made it a lot easier than so many of the other processes out there. Cheers CK

  16. May 19th, 2016

    Laure says:

    Thanks !!! it works !

  17. May 24th, 2016

    Bridget says:

    This was extremely helpful! Very straightforward. Much appreciated! Problem solved :)

  18. May 29th, 2016

    Tim Cai says:

    Marion, the html signatures in my opinion work best with mac mail. I am not sure how your signature was created but if it is coded correct, recipients using mac mail should be able to click on the social icons and link to the respective sites.

  19. May 31st, 2016

    Tom says:

    Hey Tim – just wanted to send you a quick note of sincere thanks. This process has changed A LOT since I last did this in 2012, and I’d be lost without your help. Thanks from an anonymous friend in the Interwebs. Cheers!

  20. June 19th, 2016

    Fantastic! Finally my email signature looks professional. The logo is crisp and clean and the social icons look great. It was a pleasure working with Tim who was prompt and professional. If you’ve tried to use the Signatures feature in Apple MAIL to create your own signatures, you’ll be very familiar with most of the process behind turning the HTML file into a signature file. From the time I received Tim’s email with my custom HTML file until I sent him a thank you with my new signature was less than 10 minutes. Thanks for a great service.

  21. July 21st, 2016

    Tim Cai says:

    Thank you Steve for your kind words. Hope you enjoy using your new HTML email signature. Here is the link to the service: http://mydesignpad.com/htmlsignature/

  22. July 21st, 2016

    Tim Cai says:

    Hi Tom, Thank you for your kind note. I am so happy that you find my post useful. I keep this up-to-date so make sure to come back when you need my reference in the near future.

  23. August 10th, 2016

    Rhonda says:

    It works, but none of the graphics appear – they look like they need to be downloaded. I’ve started over 5 times, and each time the graphics don’t appear. Any suggestions?

  24. August 11th, 2016

    Manuel says:

    CanĀ“t find the Mail folder!

  25. August 19th, 2016

    Tim Cai says:

    Hi Rhonda, Make sure the images are hosted on a web server instead of on your local machine. Also make sure you allow remote contents to load in your settings: Mail>Preferences>Viewing. Hope this helps. Let me know.

  26. September 17th, 2016

    James says:

    Hi Tim like many others have already said thank you so much for this tutorial it has been a god send. I have only one thing that tis troubling me, while my html signature shows up in my apple mail on my Mac it does not show up in clouds. I have l iCloud drive checked on my mac but for some reason iCloud is jut not getting the html signature for whatever reason

  27. October 12th, 2016

    Thanks a lot for this work ! I tried a lot and yours is the only one working. ;-)

  28. October 13th, 2016

    Tim Cai says:

    James, you are very welcome. I am not sure what is causing your issue. If I find out anything about this. I will sure to let you know.

  29. November 9th, 2016

    andrew says:

    Tim,

    I cannot find the folder Mail Signatures folder in El Capitan. Has it been renamed? Am I just dumb? Please help…

  30. November 14th, 2016

    Tim Cai says:

    Andrew, the mail signature folder path in El Capitan is ~/Library/Mail/V3/MailData/Signatures/. For Mac osX Sierra, V3 is now changed to V4. All the rest remains the same.

  31. January 3rd, 2017

    Emily says:

    Hi there, I copied all of the text from my designer by going to the HTML code view in “Develop” from the link, but when I paste it in and then save it and lock the signature file, it doesn’t show up (nothing shows up). What am I doing wrong?

    Also, the .mailsignature file only shows up for me if I type something into it when I create the placeholder, if it’s blank, it seemed that it was not showing up in the signatures folder once I got to that step

  32. January 5th, 2017

    Darrell says:

    Tim Cai was correct about V3 is now V4 in OS X Sierra but, everything else was the same. It worked perfectly, no problems and no issues.
    Once you are in the V4/MailData/Signatures/ area, you are able to delete any and all previous signatures. Some of mine where not being used any longer so, its was nice to start fresh.
    Thanks again for your detailed tutorial.

  33. February 11th, 2017

    Caroline says:

    Hi Tim, Thanks for the easy and useful tutorial! It works, but my image is showing very big almost the whole page of my mail message. It is hosted on a different server and small 125 x 127px instead of orignal size (1396 x 1396px). Do you have any idea what went wrong?…

  34. February 14th, 2017

    Tim Cai says:

    make sure that the linked image is in the exact dimensions you wish to use and ensure the it is also the exact dimensions in the html codes.Good luck.

  35. February 14th, 2017

    Tim Cai says:

    Darrell, my pleasure!

  36. February 14th, 2017

    Tim Cai says:

    When you create the placeholder, it is ok to have something there. It will get replaced with your designed HTML codes afterwards. First of all, make sure the HTML codes are written up properly. When you locate and open up your placeholder.mailsignature file with textedit, make sure NOT to delete everything before you paste in your own HTML codes. Follow my tutorial to see what needs to stay in the placeholder file. Good Luck.

  37. March 11th, 2017

    Anna says:

    Hi thanks for this very informative guide. I have gone through the steps several times now but the changes do not seem to stay. When looking at it again it seems to be in step 8 that it fails for me. When opening the signature by option +click it downloads. No drop down menu shows up however much I try. So then the changes I make to the file is not saved in the right folder. How can I fix this please?

  38. March 11th, 2017

    Tim Cai says:

    Anna, if you have gotten up to Step 8, I assume that you have already located the plac holder signature file in the correct folder directory. If you cannot bring out the drop down menu to select “Open with TextEdit” by holding Option+ Right click on the file, try dragging the file into the TextEdit.app icon. That will also open up the file. Make sure to lock the file after you replace the placeholder text with your HTML codes.

  39. March 12th, 2017

    Anna says:

    Oh great, now it worked! Thank you Tim :)

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