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
|
For implementation partners
|
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.
|
<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
Comments
0 comments
Please sign in to leave a comment.