How to Create HTML Signatures Inside of Emails

449

Professionalism is key in any business, especially when you business is built off of your creativity. This section will show you how to create HTML signatures if you are using Apple’s Mail Application.

Apple Mail

To create an HTML signature on a MAC using Lion X 10.8, follow the instructions below:

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 text editor. 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…). I have attached the code to my signature for reference.

3. Open the folder ~/Library/Mail/V2/MailData/Signatures/ to show your email signatures in Finder by holding down the Option key and clicking the “Go” menu in Finder.

4. When you created a temporary placeholder signature in step 1, Mail automatically created a XXXXXXX.mailsignature file that represents it in this folder. Locate the .mailsignature file in the ~/Library folder. It will have a random name. If you need help, you can tap the spacebar when a file is selected and you can view the contents to make sure it is the right 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. Keep the top metadata lines, but replace the html in the file with your own from step 2.

6. Save the file.

7. Even though you save this file, Mail.app will 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.

8. Re-open Mail.

html_signature

Microsoft Outlook

Now if you are looking to do a simple signature in Microsoft Outlook using special formatting, check out the quick video below. It doesn’t walk through how to use images but a similar process as the above would also be used. For me, simplicity is everything so I have started to only use text in signatures. One major reason is that as email chains grow, the images can become very annoying.

If you have any questions, do not hesitate to comment below!

DOWNLOAD

TIMELAPSE CHECKLIST

TO DOWNLOAD