How to Create an Attractive HTML Email Signature For Mail on Mac OS X Sierra 10.12

Mac Mail on osX Sierra 10.12

Apple released Mac OS X Sierra (Version 10.12) on Sep 20th, 2016. The latest version of the Mac operating system has some great new features like the intro of Siri and Universal Clipboard. Mail didn’t change much but getting a HTML email signature installed in Mail on Sierra have changed a little from El Capitan. For instructions on creating and installing an HTML email signature on OS X El Capitan 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 Sierra

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

  • A Mac computer with Mail running on Mac OS X 10.12.X Sierra.
  • 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/V4/MailData/Signatures/
  • If using iCloud Drive, go to ~/Library/Mobile/Documents/com~apple~mail/Data/V4/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+V 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 | November 14th, 2016 | 13,385 views

16 comments »

  1. March 6th, 2017

    Message body font size change to 16pt automatically after I add html signature. View from Outlook the size is also 16pt. Does anybody run into this issue? Or I miss something?

  2. March 11th, 2017

    Tim Cai says:

    Never heard of this before. Did you assign font size to all your texts in your HTML signature?

  3. April 18th, 2017

    Juan says:

    I have no ‘mail’ under Library. All I see within my library folder is Messages and Modem Scripts

  4. April 18th, 2017

    Juan says:

    So I located the folder I needed and installed the signature. Now, unfortunately, the links of my signature are not working(clickable) but the link labels show up when I hover over the relevant areas. I have checked and rechecked my HTML and I see no errors. All brackets are closed and links are using the direct URL’s. When I open the .html file in my safari browser it works perfectly.

  5. May 29th, 2017

    Cesar says:

    The images/icons doesn’t load but everything is working fine. I have pasted the right URLs.

  6. June 13th, 2017

    Tim Cai says:

    Cesar, are you sure the image links work? Try opening the image links on a web browser to confirm. If all good, make sure you have checked the box that reads, “Load remote content in messages” in Mail>Preferences> Viewing panel.

  7. August 14th, 2017

    steven says:

    thank you mr. It was really helpful

  8. August 15th, 2017

    thanks very much for posting such a thorough step-by-step explanation with pictures <3 I shared with my office peeps!

  9. August 21st, 2017

    I have run into a strange issue that seems to only be present in Sierra from what I can see?

    So I installed everything as expected, but my signature butts up to the far left of the message window, when usually there is a 25px Margin on the left side?

    Even when I write messages now this too butts up to the left side. The only way to fix it is to tick and then untick the option for “Always match my default message font”, which removes the responsive styles that are applied. Any ideas?

  10. August 28th, 2017

    Derrick says:

    Doesn’t work .Followed all directions. Looks like this method doesnt work in Sierra. Thanks for trying though.

  11. September 5th, 2017

    talitha says:

    Good day, I followed these steps and my image link is broken in my mac email signatures.
    How can I resolve this

  12. September 7th, 2017

    Tim Cai says:

    Hi Tabitha, make sure that your images are hosted on a web server instead of on your local computer in order for the images to show up in use. Hope this helps.

  13. September 7th, 2017

    Tim Cai says:

    Derrick, I have tested this method and many of my customers have used this to get their email signatures installed. May you describe what problem you encounter so we can help troubleshoot your problem?

  14. September 7th, 2017

    Tim Cai says:

    Hi Stuart, that does sound weird. For the html email signature coding, margins doesn’t always translate well in use. Try using just tables and cells to create the spacing that you want. Email programs aren’t as sophisticated as current web browsers.

  15. September 7th, 2017

    Tim Cai says:

    Hi Lisa, you are very welcome.

  16. September 17th, 2017

    Bjørn says:

    Hi Tim, thank you for this tut, it’s really good. I’d followed your step and the html part appears perfectly in my mail signature, excepted the my clickable image. A few peps mentioned it before, that their images seem to be broken. i experience the same issue. My image is hosted on a server, the link works well in the browser and i followed your mail settings. My HTML was created and copied out of dreamweaver. Does anyone face the same issue and has an solution?

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