Email signature HTML - Best practice – Knowledge Base

About this article

This article describes the best practice for setting up the HTML required for email signatures.

Sections in this article:

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

Prerequisites

Admin access to Templafy tenant
Email signature enabled. Find more info here: How to set up Email signatures in Templafy email signature manager

For implementation partners

Information related to migration can be found Email signature - implementing new best practices for HTML (Upgrading from version 1 to version 2)

Insert dynamic text

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

Examples:

// 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.

Example:

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

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

Images

Images can be inserted from the Company Logos section in Templafy.
Path: Admin site > Configuration > Company data > Company Logos

//Inserts a logo from the Company Logos section
<img src="logo.png" width="100" height="100" alt="This is the logo of company name">

//References image name through the office data source
<img src="%Profile.Office.Logo%.png" width="100" height="100" alt="This is the logo of company name">

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.

CSS styling information can be found here: How to add CSS

<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

Articles in this section

Email signature HTML - Best practice