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 | 29,935 views

30 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.

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