In this tutorial you will learn how to create a HTML signature, for the OS X Mountain Lion Mail App, compatible with most e-mail apps. HTML e-mail signatures are the perfect way to give your e-mail a more professional and elegant look.
1. Creating the HTML Signature
The first thing we will do is write the HTML code for our signature and preview it in Safari. You can use your preferred browser for this.
I will use TextWrangler for writing the HTML and CSS in this tutorial, as this is my favourite text editor for OS X. As an alternative for Windows i recommend Notepad++ or if you prefer an online editor Could9 IDE gets the job done.
We will be using the following two images for this tutorial:
 |  |
- Open your favourite text editor and save the new document as signature.html
When composing your html e-mail signature please consider the following guidelines:
- Use HTML tables. Floating HTML divs are not supported in some e-mail applications;
- Use inline CSS;
- Try to get the most out of basic CSS declarations. Most e-mail apps only support basic CSS declarations.
You can use the code sample below to start work on your own HTML signature:
<!DOCTYPE html>
<html lang="en" dir="ltr" >
<head>
</head>
<body>
</br>
</br>
<table style="font-family:Helvetica, sans-serif, Arial; font-size:12px;">
<tbody>
<tr style="padding:0; margin:0;">
<td colspan="2"><p style="padding:3px 0; margin:0;">Best Regards</p></td>
</tr>
<tr>
<td colspan="2" style="text-align:center;"><image src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8GPlXJU9l9BTa5R6raSn3Hc81j0FTNAc0ekPQ_UA-99X2vMsk3kYIXnqImH3YMDHsKsTLwul8Jd8HF5mXuRTAYenFhhJhfO70_Ui9b39WJn2FcRFz7lcKhyvK5d5AWim8w6LsEjmVycw/s1600/bcline.jpg"/></td>
</tr>
<tr style="padding:0; margin:0;">
<td colspan="2"><p style="padding:0 0 3px 0; margin:0;">Your Name</p></td>
</tr>
<tr style="padding:0; margin:0;">
<td colspan="2"><p style="padding:3px 0 12px 0; margin:0;">Your Position</p></td>
</tr>
<tr style="padding:5px 0 0 0; margin:0;">
<td style="padding:0; margin:0;">
<p style="padding:0; margin:0;">Tel:</p>
</td>
<td style="padding:0; margin:0;">
<p style="padding:0; margin:0;">+44 777 777 777</p>
</td>
</tr>
<tr style="padding:0; margin:0;">
<td style="padding:0; margin:0;">
<p style="padding:0; margin:0;">Fax:</p>
</td>
<td style="padding:0; margin:0;">
<p style="padding:0; margin:0;">+44 777 777 776</p>
</td>
</tr>
<tr style="padding:0; margin:0;">
<td style="padding:0; margin:0;">
<p style="padding:0; margin:0;">E-mail:</p>
</td>
<td style="padding:0; margin:0;">
<p style="padding:0; margin:0;"><a href="mailto:tudor.anghelina@hotelcavaler.ro">your.email@yourdomain.com</a></p>
</td>
</tr>
<tr style="padding:0; margin:0;">
<td style="padding:0; margin:0;">
<p style="padding:0; margin:0;">Web:</p>
</td>
<td style="padding:0; margin:0;">
<p style="padding:0; margin:0;"><a href="http://www.hotelcavaler.ro">www.yourdomain.com</a></p>
</td>
</tr>
<tr>
<td colspan="2"><image src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoRVZcwvhH6-37xQKgcvwbFNbWMYMwqDbTKxeuPcHfUXN9bQt_Zmo9UC7PAT8wMvTwf3AzvoiSAnaAOl5sV4AlkN0SgdgVLZY7vd3quy9E5OveEmKkEXaWPa4PW1l94eKh70IloMKmcgQ/s1600/logo.png"style="padding-top:10px;"/></td>
</tr>
<tr style="padding:0; margin:0;">
<td colspan="2"><p style="padding:3px 0; margin:0;">Str. StreetName nr. 77</p></td>
</tr>
<tr style="padding:0; margin:0;">
<td colspan="2"><p style="padding:3px 0; margin:0;">777000, YourCity</p></td>
</tr>
<tr style="padding:0; margin:0;">
<td colspan="2"><p style="padding:3px 0 0 0; margin:0;">District, Country</p></td>
</tr>
<tr>
<td colspan="2" style="text-align:center; padding-top:7px;"><image src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8GPlXJU9l9BTa5R6raSn3Hc81j0FTNAc0ekPQ_UA-99X2vMsk3kYIXnqImH3YMDHsKsTLwul8Jd8HF5mXuRTAYenFhhJhfO70_Ui9b39WJn2FcRFz7lcKhyvK5d5AWim8w6LsEjmVycw/s1600/bcline.jpg"/></td>
</tr>
</tbody>
</table>
</body>
</html>
2. Testing the HTML Signature
Save the HTML file and preview it in your preferred browser. The end result should look something like this:
3. Creating a new Signature in the OS X Mail app
- Next open the OS X Mail App and go to Preferences.
- Choose the e-mail account you wish to create the new signature for, and hit the + button.
Name your new signature however you like and write some text which you will later remember.
In this tutorial i will create a new signature for my iCloud account and name it HTML Signature.
You can now close the OS X Mail App.
4. Adding the HTML signature to the OS X Mail app
- The next step is to open the Finder and Library from the Go menu. This is a hidden directory so press the Option key after selecting the Go menu. This will also display the Library.
Navigate to Library --> Mail --> V2 --> MailData --> Signatures and find the file with the extension .mailsignature which you have just modified.
You can identify the file you have just modified by displaying the contents of the Signatures directory in list-view and sorting the files by Date Modified.
- Open the .mailsignature file in your text editor and verify that it contains the text you entered in the signature before. In this case we wrote "write some text here which you will later remember".
- Copy the HTML code from the signature.html and paste it in the .mailsignature file you just opened. Copy only the body of the signature.html file.
- Now, save the .mailsignature file.
- Go back to the finder and right click the .mailsignature file you just save and click Get Info. Check the Locked checkbox and close the finder window.
5. Testing the end result
- Open the Mail app and compose a new e-mail.
- Select the account you have just created the new signature for and verify the final result.
Here is how your signature will look when composing a new e-mail.
And now some previews on different devices:
OS X Mail app
Gmail
iPad
iPhone
Comments
Post a Comment