Email Signatures - HTML best practices

This article presents best practices around creating HTML email signatures for Email Signature Manager. These best practices will maximize the consistency of email signatures across different mail clients and devices.

Use table structure in creation of email signature

Make sure to use <table> HTML elements in order to have signatures formatted correctly across mail clients, applications, and devices.

Below you can see a basic example of a properly formatted signature using <table>, <tr>, and <td> tags:

<table>
   <tr>
      <td> {{UserProfile.SignOff}} </td>
      <td> {{UserProfile.Name}} </td>
      <td> {{UserProfile.Title}} </td>
   </tr>
</table>

Inserting dynamic text

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

Below you can see examples of how these dynamics bindings would look like in an email signature:

// Inserts Name from the User Profile.
<td style="font-size: 10pt; font-family: Arial, sans-serif;">{{UserProfile.DisplayName}}</td>

// Inserts Name from the Office data source that is connected to a field in the User Profile called 'Office'.
<td style="font-size: 10pt; font-family: Arial, sans-serif;">{{UserProfile.Office.Name}}</td>

Fonts

Font size

Avoid setting the font-size to 0 to align images as Outlook does not support it and will produce an error or incorrect rendering.

Font family

• Make sure to use a Web Safe CSS font to avoid inconsistency within the font style.
• Make sure to add the font family property to each of the <td> elements containing the text.

Using Hyperlinks

To ensure hyperlinks are displayed as expected, remember the following requirements:

• Website Linking: href must be set and the value must always start with https://.
• Using Dynamic Values: all possible dynamic values must start with https://, or alternatively always prepend it in the signatures's HTML.

//All possible DataSources must start with 'https://'
href='{{DataSources.Websites["row"].Value}}'
//Or using dynamic values:
href='https://{{DataSources.Websites["row"].Value}}'

• Text Decoration: Always set the text-decoration style property.
  • Templafy recommends text-decoration: none, but you can underline the hyperlink with text-decoration: underline

Inserting images

Images are required to be inserted from a data source in Templafy to avoid the "Download Images" error when receiving an email.

Below are examples of inserting images from data sources:

//Syntax for inserting an image.
<td><img src='{{DataSources.DataSourceName["ImageName"].DataSourceColumnName}}' width="X" height="Y"></td>

//Inserts Logo from the Office data source that is connected to a field in the User Profile called 'Office'.
<img width="150" height="40" src="{{UserProfile.Office.Logo}}"/>

//Inserts FacebookIcon from the Office data source that is connected to a field in the User Profile called 'Office'.
//FacebookIcon is a reference to another data source that contains an Image column.
<td><img width="15" height="15" src="{{UserProfile.Office.FacebookIcon.Image}}"/></td>

//Adds a website link to a Facebook image. Website must be https.
<td><a href="https://www.facebook.com/" img width="15" height="15" src="{{UserProfile.Office.FacebookIcon.Image}}"/></td>

When inserting images, it is important to remember the following requirements: 

• Utilizing an HTML https:// image URL link isn't supported.
• Images uploaded to a data source to be used in email signature components should have the same size as targeted in the HTML.
• Website linking (href) must be https://.
• Width and height must always be specified in numbers (The HTML editor automatically assumes the number is in pixels).
• The attributes src, alt, width, and height are the only allowed attributes on the image tag.
• Supported image formats are .png, .jpg (do not use .svg format as these images can have unpredictable behavior). Recommended .png with 32-bit depth and .jpg with a 96-bit depth to avoid compression by Outlook and .gif (limited).
• Images with transparent backgrounds are supported in Templafy, however, some email clients do not support it. Therefore, we recommend using images with a white background.
• In data sources column names should not contain a "-" or a "_", this will cause an error. E.g. {{UserProfile.Office.Company_Logo}} will not work.

Avoid Incorrect Image Sizing in Outlook Online

Images inserted into Outlook Online (including New Outlook and Outlook Mobile) may have spacing issues due to default margins set within the mail client. 

Solution: Any table cell that contains content with a fixed size should be wrapped in a <div> with the fixed height set as styling, corresponding to the largest height element of that table row.

<table>
   <tr>
      <td> Example text </td>
      <td> 
          <div style='height:100px'>
              <img height="100" width="150" src="{{UserProfile.Office.Logo}}">
          </div>
      </td>
   </tr>
</table>

Inserting headshots

Templafy offers the ability to dynamically insert the headshot for each user based on a unique field (email address for example) into the email signatures. This will require the creation of a data source which is referenced to containing the headshot images.

<img src='{{DataSources.Headshots[UserProfile.Email].Image}}' height="100" width="100">

Show or hide image with (alternative) hyperlink

In this example a user can choose to show (or hide) a logo through a checkbox and use it with a default or alternative hyperlink.

These data sources are used. The column Logo of the Offices data source is a reference to the column Name of the LogoInsertion data source:

The User Profile contains a checkbox to show (or hide) the logo and a textbox to provide an alternative link:

This HTML is used:

{{if(UserProfile.ShowLogoCheckbox)}}
   {{if(Equals(UserProfile.AlternativeLink, ""))}}
      <a href="http://www.templafy.com">
      <img src='{{DataSources.LogoInsertion["LogoColor"].Image}}' width="90" height="25"></a>
   {{endif}}
   {{if(Not(Equals(UserProfile.AlternativeLink, "")))}}
      <a href="{{UserProfile.AlternativeLink}}">
      <img src="{{DataSources.LogoInsertion['LogoColor'].Image}}" width="90" height="25"></a>
   {{endif}}
{{endif}}

The result looks like this:

Using dynamics functions in email signatures

When inserting information from either the user profile or a data source in email signatures, you can either use a simple binding e.g. {{UserProfile.Name}} or you can use dynamics functions. In the sections below, you will find the most common ways to use StringJoin() and IfElse().

Inserting an email address

<td style="text-decoration: none; color: #6a6a6a;"
href="mailto:{{UserProfile.Email}}">{{UserProfile.Email}}</td>

Inserting a phone number

//Inserting a phone number without any prefix character.
<td style="text-decoration: none; color: #6a6a6a;" href="tel:{{UserProfile.PhoneNumber}}">{{UserProfile.PhoneNumber}}</td>

//Inserting a mobile phone number with a prefix character that must be deleted if the field value is empty.
<td style="margin-top: 0; margin-bottom: 0; font-size: 9pt; font-family: Calibri, 'sans-serif'; color: #505050">{{IfElse(Equals(UserProfile.Mobile, ""), "", StringJoin("", "<span style='color: #F49930'> M </span><a href='tel:", UserProfile.Mobile, "' style='color: #505050;text-decoration: none;'>", UserProfile.Mobile, "</a>"))}}</td>

Inserting information with separators

//Inserting a Job title and Department information with a separator. If any of the values are empty, the separator and the value will be deleted.

<td style="font-family: Arial, 'sans-serif'; font-size: 9pt; color: #505050">
{{StringJoin("<span style='color: #F49930'> | </span>", UserProfile.Title, UserProfile.Department)}}
</td>

Delete if empty

You can use the {{if}} ... {{endif}} function to delete plain text or a field if the variable is empty.

In the example below the plain text and user profile field 'Mobile: {{UserProfile.MobilePhone}}' are deleted when the user profile field MobilePhone is empty:

{{if(Not(Equals(UserProfile.MobilePhone, "")))}}
Mobile: {{UserProfile.MobilePhone}}
{{endif}}

Use HTML element names in a function

Use HTML element names like <table>, <tr> and <td> in a function. If the personal message is empty then the output is empty, else a table is created with the personal message:

<table>
   <table>
      <tr>
         <td>Phone:</td>
         <td>{{UserProfile.Phone}}</td>
      </tr>
   </table> {{IfElse(Equals(UserProfile.PersonalMessage, ""),
  "", StringJoin("<table><tr><td>", UserProfile.PersonalMessage,
  "</td></tr>
   </table>"))}}
</table>

Use language

Example 1

If you want to display the language set in the user profile, you can use these bindings:

<table style="font-family: 'Arial', sans-serif; font-size: 10pt;">
   <tr> 
      <td> Language: {{UserProfile.DocumentLanguage.Name}} </td>
   </tr>
   <tr> 
      <td> Language code: {{UserProfile.DocumentLanguage.Language}} </td> 
   </tr>
   <tr>
      <td> Language code: {{DocumentLanguage}} </td> 
   </tr>
</table> 

If the language is e.g. 'English (United States) (en-US)' then the result looks like this:

Example 2

You can also use the language in a function. In the example below the email shows "Met vriendelijke groet" when the DocumentLanguage is set to Dutch ("nl-NL"), else it will be "Kind regards":

{{IfElse(Equals(DocumentLanguage, "nl-NL"), "Met vriendelijke groet", "Kind regards")}}

Example 3

The Translate() function can be used to automatically show text in the language that is set in the user profile. For this it's recommended to use DocumentLanguage as the name of the variable when creating a document language field in the user profile.

In this example the Translations data source is configured with the languages English (En-US) and Dutch (Nl-NL):

When this HTML code is used:

<div>
<p>{{Translate("ClosingFormal")}}</p>
<p>{{UserProfile.DisplayName}}</p>
</div>

Then the output will show 'Yours sincerely' when the language in the user profile is set to en-US (marked red):

The output will show 'Hoogachtend' when the language in the user profile is set to nl-NL:

Instead of using the document language set in the user profile you can also hard-code the language in the HTML, by adding for example , "En-US" to the binding if you always want to show the English translation:

<div>
<p>{{Translate("ClosingInformal", "En-US")}}</p>
<p>{{UserProfile.DisplayName}}</p>
</div>

This means that the output in the example below will be 'Kind regards' (in English) even while the document language is set to Dutch (marked red):