Email signature HTML - Best practice

Headlines in this article

• Set up and accessing Email signature
• Insert dynamic text
• Hide empty fields
• Images
• Insert contact information with separators
• Insert email address
• CSS Styling
• CSS Styling - Tips and tricks
• Content (Simple and rich preview)
• Validation (rules)
• Duplicate Email signature
• Convert points to pixel

This article describes the best practice for setting up the HTML required for email signatures. More information about Templafy's email signature manager can be found here.

For partners: Information related to migration can be found here (Upgrading from version 1 to version 2)

Set up and accessing Email signature

You can find more information about How to set up Email signatures in Templafy email signature manager here

Insert dynamic text

When inserting dynamic text, you can reference information from the user profile, company data sources and active directory claims. 

// Inserts Name from the User Profile 
%Profile.Name%


// Inserts OfficeName from the Office data source
%Profile.Office.OfficeName%


// Inserts DisplayName from your Active Directory 
 %Claim.DisplayName%

Hide empty fields

Empty elements can be hidden with the DeleteIfEmpty tag.

//Deletes the Name if it is not filled out in the User Profile 

<!--DeleteIfEmpty:%profile.Name%-->Name: %profile.Name%<!--/DeleteIfEmpty-->

Images

Check Images in Email Signature

Insert contact information with separators

T: %Profile.Phone% | D: %Profile.Domesticphone% | M: %Profile.Mobile% 

<p style="margin-top: 2px; margin-bottom: 2px;"><!--DeleteIfEmpty:%profile.phone%--> <span style="padding-right: 5px;"><strong>T: </strong></span> %Profile.Phone% <!--/DeleteIfEmpty--> <!--DeleteIfEmpty:%profile.domesticphone%--> <span style="padding-right: 5px;"> <strong><!--DeleteIfEmpty:%profile.phone%-->|<!--/DeleteIfEmpty--> D:</strong> </span> %Profile.Domesticphone% <!--/DeleteIfEmpty--> <!--DeleteIfEmpty:%profile.mobile%--> <span style="padding-right: 5px;"> <strong><!--DeleteIfEmpty:%profile.domesticphone%%profile.phone%-->|<!--/DeleteIfEmpty--> M:</strong> </span> %Profile.Mobile% <!--/DeleteIfEmpty--></p>

Insert email address

<a style="text-decoration: none; color: #6a6a6a;" href="mailto:%Profile.Email%">%Profile.Email%</a>

CSS Styling

Outlook supports inline CSS styling of content. More information about inline CSS styling can be found here. 

<p style="margin-top: 2px;">SomeText</p>

Example of a simple email signature:

%Profile.Name%

%Profile.Department%

%Profile.Title%

 T:  %Profile.Phone%    | D:  %Profile.Domesticphone%    | M:  %Profile.Mobile% 

 E: %Profile.Email% 

W: http://MyCompanyWebsite.com

My Company Name:
%Profile.SelectionID.Address%

HTML:

<p style="font-family: 'Century Gothic', sans-serif; margin-top: 8pt; margin-bottom: 0; font-size: 10pt; color: rgb(73, 75, 79);">%Profile.Signoff%</p>
<p style="font-family: 'Century Gothic', sans-serif; margin-top: 8pt; margin-bottom: 0; font-size: 10pt; color: rgb(73, 75, 79);"><b>%Profile.Name%</b></p>
<p style="font-family: 'Century Gothic', sans-serif; margin-top: 0; margin-bottom: 8pt; font-size: 10pt; color: rgb(73, 75, 79);">%Profile.Title%</p>
<table style="margin-bottom: 0;">
 <tr> <td> <table> <tr> <td>
 <img width="150" height="40" src="%Profile.OFFICE.logo%" /> </td>
 <td style="padding-left: 15pt; border-right: 1.5pt solid rgb(0, 120, 255);">
 </td> </tr> </table> </td>
 <td style="padding-left: 11pt;">
 <table> <tr> <td>
 <p style="font-family: 'Century Gothic', sans-serif; margin-bottom: 0; margin-top: 0; font-size: 9pt;"><span style="color: rgb(0, 120, 255); font-weight: bold;">M: </span></p>
 <p style="font-family: 'Century Gothic', sans-serif; margin-bottom: 0; margin-top: 0; font-size: 9pt;"><span style="color: rgb(0, 120, 255); font-weight: bold;">E: </span></p>
 <p style="font-family: 'Century Gothic', sans-serif; margin-bottom: 0; margin-top: 0; font-size: 9pt;"><span style="color: rgb(0, 120, 255); font-weight: bold;">W: </span></p>
 </td> <td>
 <p style="font-family: 'Century Gothic', sans-serif; margin-bottom: 0; margin-top: 0; font-size: 9pt;"><a style="color: rgb(73, 75, 79); text-decoration: none;" href="tel:%Profile.Mobile%">%Profile.Mobile%</a></p>
 <p style="font-family: 'Century Gothic', sans-serif; margin-bottom: 0; margin-top: 0; font-size: 9pt;"><a style="color: rgb(73, 75, 79); text-decoration: none;" href="mailto:%Profile.Email%">%Profile.Email%</a></p>
 <p style="font-family: 'Century Gothic', sans-serif; margin-bottom: 0; margin-top: 0; font-size: 9pt;"><a style="color: rgb(73, 75, 79); text-decoration: none;" href="http://%Profile.OFFICE.web%">%Profile.OFFICE.web%</a></p>
 </td> </tr> </table> </td> </tr></table>

With "Format HTML" you have the possibility to fix markup indentation. The HTML from above will look the following after "Format HTML":

CSS Styling - Tips and tricks

Use inline style for your Email signature. Here are some tips and tricks for your Email signature:

• Keep your design simple
• Use web safe fonts
• Set "cellspacing" and "cellpadding" attribute values to 1, when using tables (this improves consistency. Ex.:

  • <table ... cellspacing="1" cellpadding="1">

• Define margins and paddings to improve consistency.
• Define line-height on your elements to improve consistency
• Avoid borders larger than 5px, as Outlook will ignore any value above that
• Ensure your HTML code is valid because it is not possible to save invalid Email signatures
• Outlook Desktop Client will ignore padding on certain elements such as <a> and <p>. We therefore recommend only using padding on table elements such as <td> (In general does tables work best in emails)

Content (Simple and rich preview)

While editing your HTML code you have the possibility to get a real time preview of the HTML code via "Simple Preview" and "Rich Preview. Both previews can be found right under the HTML editor. The "Simple Preview" gives you an overview of the dynamic text elements based on your HTML code:

The "Rich Preview" let you see a true preview of the email signature based on your User profile. This means the "Rich Preview" will display the signature as it would be displayed in Outlook, Office365 etc.:

Validation (rules)

The "Validate HTML" can be found underneath the HTML code in the HTML editor in the Admin center. If the written HTML code is within the rules of the validator the validator result will state: "Your HTML is valid. You are good to go"

With the release of the new Email signature the rules for validation has changed a bit. The main validation rules are the following:

• Use pixels and not points (images)
  • To support higher consistency of images are the images in the Email signature wrapped in VML tags - which allow the image to be inline in the message and not to be shown as an attachment
• Width and height attributes are required and can only contain a number 
• Src, alt, width and alt are the only allowed attributes on image

Duplicate Email signature

From the Admin center in "Email settings" is it now possible to duplicate (copy) a current email signature. This is done by clicking the down facing arrow next to "Edit" and click "Duplicate":

When creating a duplicate the new Email signature will automatically be moved to the bottom of the Email signature ordering and the duplicate have the same name as the original file with a "Copy" at the end:

Convert points to pixel

Because the Email signature no longer supports points (Email signature version 2) can you use the conversion ratio below:

pt = points

px = pixels

1 pt = 1,333(3) px 

1 px = 0,75 pt