How to make a personalized email signature
Create an html email signature that makes an impression
Email is still one the most popular ways to interact with business partners, both inside and outside your company. A personalized email signature offers great possibilities to include essential contact information and even more important: you can use it to create brand awareness and to invite the recipient to interact with you or your company through other channels than a simple reply message. A beautiful email signature will grab the attention of the reader and make a good impression.
With basic html and some creativity, you can lift email signatures to a different level. It is therefore a pitty that many companies stick to the default features of their email agents like Microsoft or Apple Mail. In this tutorial we will do some step-by-step html coding to create your personalized email signature.
What you need to make your own personalized email signature
Since this tutorial requires some coding, an html editor is the first piece of software you need. If your are a newbie to html, we suggest to dive into one of our html beginner’s tutorials first:
- Html beginner’s tutorial part 1 – Getting to hello world
- Html beginner’s tutorial part 2 – Building the structure of your webpage with html-tags
- Html beginner’s tutorial part 3 – Building your lay-out with Cascading Style Sheets
Secondly, it is convenient you have a spot on the web where you can store images. This means a url where you can actually navigate to without the use of logins or passwords. In this tutorial it won’t be required but if you want to include a lot of icons and logos in your signature, it is easy to store them all in the same place. This can be as easy as a dedicated folder in the root of a website.
Last but not least some imagination and creativity form your part. Although we are going to make a very business-like signature, you can be as bold as you want depending on the company policy of your employer or the profile of your customers.
Programming your signature
Most people by now make use of signatures in their emails. But often this is done quick an dirty through basic editors of email clients. There’s a good chance that you stumbled upon something pretty basic when you received an email from a client, collegue or from one of your superiors.
Surely, we can do better than that. After this tutorial, you will be able to turn it into a jaw-dropping result.
So let’s begin programming your signature. Open your favourite html editor and add the following code:
<table cellspacing="0" cellpadding="0" width="900" border="0" style="border-collapse: collapse; margin: 0; width: 900px;">
<tr>
<td width="100" style="width: 100px; vertical-align: top; border-right: 1px solid #0975B6;">
</td>
<td valign="top" width="800" style="vertical-align: top; width: 800px;">
</td>
</tr>
</table>
So what’s going on here? An html email signature can only be made with ‘old skool programming’. This means you have to make the entire lay out with tables. These tables have to be styled with inline css. Some things you absolute can’t do:
- use external stylesheets. Most email agents won’t load them
- use exotic fonts. Just stick to the most default typefaces like Arial or Verdana. If you have particular fonts (e.g. like in a company logo), you will have to use images
For those who are not acquainted with the early days of webdesign: somewhere at the beginning of this century, entire websites were built with tables. Back then, this was almost the only way to make a decent lay out. With the advent of cascading style sheets (CSS), the rise of search engines and the need to make websites more ‘readable’ for these search engines, the use of tables diminished over the years. Nowadays, tables are still used but only for tabular data in a website (like pricelists).
The <table></table>-element is a wrapper that inludes table rows (<tr></tr>) who in turn contain table data (<td></td>). In these table elemnts, you can place tables again, thus keeping full control of the lay out. You will notice such code becomes blunted pretty rapidly (so you can imagine how much fun it was to make a whole website this way) but again: it is the only way to follow for html email signatures. You will also notice we use both attributes on the elements themselves and inline css, just to make sure we keep the lay out the way we want if an email agent strips something out.
Right now, you have a table with one row (<tr></tr>) and two columns (<td></td>). Into the first column, we will now ad a whole table again, containing the default gravatar image.
<table cellspacing="0" cellpadding="0" width="900" border="0" style="border-collapse: collapse; margin: 0; width: 900px;">
<tr>
<td width="100" style="width: 100px; vertical-align: top; border-right: 1px solid #0975B6;">
<table valign="center" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; vertical-align: top; margin: 0; width: 100%;">
<tr>
<td width="100%" style="padding-right: 25px; padding-right: 25px;"><a href="http://www.yourwebsite.com" target="_blank" style="border: none;">
<img src="https://www.gravatar.com/avatar?s=100" width="100" height="100" title="Logo" alt="Logo" style="border: none;"/></a>
</td>
</tr>
</table>
</td>
<td valign="top" width="800" style="vertical-align: top; width: 800px;">
</td>
</tr>
</table>
This embedded table contains a table row and a table data element again. In that table element, we will place an image. In this example, we use the default gravatar image, so the image source points to the location on the web where this image can be found. Remember what we said earlier about the ability to store images somewhere on the web: if you incorporate your own company logo into your signature, you could store it on a location somewhere on your company website (e.g.: www.mycompany.com/images/logo-email.png).
This leaves us with the right column to fill. Again, we will embed a whole new table in here, which will contain the actual coordinates. This embedded table will contain two rows, with each one table data element.
<table cellspacing="0" cellpadding="0" width="900" border="0" style="border-collapse: collapse; margin: 0; width: 900px;">
<tr>
<td width="100" style="width: 100px; vertical-align: top; border-right: 1px solid #0975B6;">
<table valign="center" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; vertical-align: top; margin: 0; width: 100%;">
<tr>
<td width="100%" style="padding-right: 25px; padding-right: 25px;"><a href="http://www.yourwebsite.com" target="_blank" style="border: none;">
<img src="https://www.gravatar.com/avatar?s=100" width="100" height="100" title="Logo" alt="Logo" style="border: none;"/></a>
</td>
</tr>
</table>
</td>
<td valign="top" width="800" style="vertical-align: top; width: 800px;">
<table valign="center" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; vertical-align: center; margin: 0; width: 100%;">
<tr style="padding: 0; margin: 0; font-size: 0; line-height: 0;">
<td width="100%" style="padding-left: 25px; width: 100%; font-size: 0; line-height: 0;">
<p style="font-family: Verdana, Arial, 'sans-serif'; font-size: 22px; line-height: 32px; color: #888888; margin: 0;"><strong>John Doe</strong><br>Chief Executive Officer<br><a style="font-size: 18px; line-height: 26px; text-decoration: none; color: #888888;" href="tel:1-111-111-1111">Tel: 1-111-111-1111</a></p>
</td>
</tr>
<tr style="padding: 0; margin: 0; font-size: 0; line-height: 0;">
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
Again, that’s a whole chunck, so let’s break this down. Note you can perfectly use other html-tags inside table-elements. We use a <p></p>-element to write the actual coordinates into. Also: the phone number is embedded inside an <a></a>-element, making it clickable. It will dial the number in the anchor, which is pretty convenient. Here’s also a quick tip: never use plain black to write regular text, use a grey gradient instead. It makes it lighter and more exciting to read, away from the ordinary. Do you notice also that we use a very basic typeface (Verdana) as we mentioned above?
We now have one empty <td></td> left and you might have guessed it: we will insert a new table again, this time with one row and four <td></td>-elements, containing the icons for our social profiles. This will complete the code.
<table cellspacing="0" cellpadding="0" width="900" border="0" style="border-collapse: collapse; margin: 0; width: 900px;">
<tr>
<td width="100" style="width: 100px; vertical-align: top; border-right: 1px solid #0975B6;">
<table valign="center" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; vertical-align: top; margin: 0; width: 100%;">
<tr>
<td width="100%" style="padding-right: 25px; padding-right: 25px;"><a href="http://www.yourwebsite.com" target="_blank" style="border: none;">
<img src="https://www.gravatar.com/avatar?s=100" width="100" height="100" title="Logo" alt="Logo" style="border: none;"/></a>
</td>
</tr>
</table>
</td>
<td valign="top" width="800" style="vertical-align: top; width: 800px;">
<table valign="center" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; vertical-align: center; margin: 0; width: 100%;">
<tr style="padding: 0; margin: 0; font-size: 0; line-height: 0;">
<td width="100%" style="padding-left: 25px; width: 100%; font-size: 0; line-height: 0;">
<p style="font-family: Verdana, Arial, 'sans-serif'; font-size: 22px; line-height: 32px; color: #888888; margin: 0;"><strong>John Doe</strong><br>Chief Executive Officer<br><a style="font-size: 18px; line-height: 26px; text-decoration: none; color: #888888;" href="tel:1-111-111-1111">Tel: 1-111-111-1111</a></p>
</td>
</tr>
<tr style="padding: 0; margin: 0; font-size: 0; line-height: 0;">
<td>
<table cellspacing="0" cellpadding="0" border="0" style="padding: 0; margin: 0; border: none;">
<tr>
<td valign="bottom" style="vertical-align: bottom; padding-left: 25px; width: 32px; font-size: 0; line-height: 0; margin: 0;">
<a href="https://www.facebook.com/yourprofile" target="_blank" style="border: none;"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-32.png" width="32" height="32" title="Facebook" alt="Facebook" style="border: none; display: block;" /></a>
</td>
<td valign="bottom" style="vertical-align: bottom; padding-left: 10px; width: 32px; font-size: 0; line-height: 0; margin: 0;">
<a href="https://twitter.com/yourprofile" target="_blank" style="border: none;"><img src="https://cdn3.iconfinder.com/data/icons/capsocial-round/500/twitter-32.png" width="32" height="32" title="Twitter" alt="Twitter" style="border: none; display: block;" /></a>
</td>
<td valign="bottom" style="vertical-align: bottom; padding-left: 10px; width: 32px; font-size: 0; line-height: 0; margin: 0;">
<a href="https://plus.google.com/+YourProfile" target="_blank" style="border: none;"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/google_circle_color-32.png" width="32" height="32" title="Google+" alt="Google+" style="border: none; display: block;" /></a>
</td>
<td valign="bottom" style="vertical-align: bottom; padding-left: 10px; width: 32px; font-size: 0; line-height: 0; margin: 0;">
<a href="https://www.linkedin.com/in/yourprofile" target="_blank" style="border: none;"><img src="https://cdn3.iconfinder.com/data/icons/capsocial-round/500/linkedin-32.png" width="32" height="32" title="LinkedIn" alt="LinkedIn" style="border: none; display: block;" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
As was the case with the gravatar: we use an url in our <img>-element to point to a url where the icon can be found ( by the way: the website where the icons are located is definitely one worth bookmarking). You can then point to your social profile on each of the corresponding network.
This hard work leads to a final result that will certainly impress your recipeints.
This is a pretty basic example so you can expand on this code as you please. One golden rule with html email signatures: test these in as many email agents as you have at your disposal because each has its own behaviour and rules.
Don’t miss out on our upcoming tutorials where we will explain how to install this code in your email agent. This cannot be done with simple copy-paste and both Microsoft and iOS have different ways to do this.
