For quite sometime I’ve wanted to create an HTML signature file that included the links to my key social media channels. I’d done this before at work, where we used Windows machines and Outlook.Figuring it out for the Mac Apple .mail app was bit more challenging… at least for me. Then I came across this VERY detailed, step-by-step explanation by Matt Coneybeare in his post, “How to Make an HTML Signature in Apple Mail for Mavericks OS X 10.9“. He really does a great job of explaining the process.The only addition I’d offer to his post relates to the code section. If you’re like me, and your not a code ninja, another great tool I came across is Free Online HTM Editor: http://www.online-html-editor.org/. This simple tool allows you to add your text, make adjustments to the font style, color, etc. Adding images with a related link – it’s a snap. Then just copy the HTML that it generates and add it to your signature file code as Matt describes. Once I was done, this is what I ended up with: I take no credit for the post. Matt did a fabulous job of presenting, what could be considered difficult information, and sharing it in a very simply way. I hope you find Matt’s post and this information as helpful as I did.
How to Make an HTML Signature in Apple Mail for Mavericks OS X 10.9 by Matt Coneybeare
There are plenty of tutorials online to create an HTML signature in Apple Mail with older versions of OS X, and you have probably already seen my tutorial on how to add HTML Signatures in Lion or Mountain Lion, but the process has changed slightly for OS X Mavericks (10.9). Here is how to do it:
1. In Mail.app, go to Preferences > Signatures and create a signature with any random content. Name it something meaningful. You will be swapping this out later.
2. Write an html page inside of your favorite text editor. I use TextMate 2. The page should not have html,head or body tags, should include only inline css, and should only consist of basic html elements (div, span, img, a, etc…). Here is some example code to get you started.
Open the folder containing the placeholder signature. This step differs if you are using iCloud or not. You can determine if you are using iCloud for Mail.app by checking
System Preferences >
3. Using iCloud: ~/Library/Mobile Documents/com~apple~mail/Data/MailData/Signatures/
Not using iCloud: ~/Library/Mail/V2/MailData/Signatures/
Open the folder to show your email signatures in Finder by holding down the Option key and clicking the “Go” menu in Finder. Check here for more tips if you are having trouble opening the ~/Library folder.
4. When you created a temporary placeholder signature in step 1, Mail automatically created a ubiquitout_XXXXXXX.mailsignature file that represents it in this folder. Locate the .mailsignature file in the ~/Library folder. It will have a random name. If it is not there, you may still be in “edit” mode on the signature. Try closing the Mail > Preferences Window. If you need help, it helps to sort the folder by “Date Modified” and look for the most recently updated one.
5. When you have located the placeholder .mailsignature file, open it with your html editor. You will see a few metadata lines on the top of the file and some html code below it.
6. Keep the top metadata lines, but replace the html in the file with your own from step 2.
7. Save the file.
8. If you are using iCloud, skip this step and proceed to Step 9. You can determine if you are using iCloud for Mail.app by checking System Preferences > iCloud. Still unsure? Skip this step — you can redo the steps and include this one if your signature is not working correctly at the end.
Even though you save this file, Mail.app may use the original version and overwrite your new signature unless you lock the file. With your text editor now closed and the file saved, find it again in Finder and press command-i to bring up the info pane for the file. On this info pane, mark the “Locked” checkbox.
9. Restart Mail.app and go to Preferences > Signatures. If you have images in your signature, they will not show here in the preview, but they will show in the real signature if the image source location is valid.
10. To test that it is working correctly, simply compose a new email and set the signature to be the one with the name you created in step 1. If the images show, and everything looks as it should, you have succeeded!
If you need additional help with html signature design or implementation, I have founded a company called GiantUser (it’s an anagram of “signature”) to do just that with very reasonable prices. Check it out!
Finally, I also run a small software company called Urban Apps. It pays the bills so I can take the time to write helpful posts like this one. If you found this posting helpful at all, I would really appreciate it if you would check out my iPhone/iPad Apps on the iTunes App Store.
Check out Matt Coneybear’s site so you can see the original post and all his other information.