Good practices for preparing an email signature

Problem:

You are preparing email signature templates in our email signature management software and you would like to follow the best practices. This will allow you to avoid problems when designing them and using them in your communications.

Solution:

You can start by watching our quick video tutorial:

Read on for detailed guidelines and best practices:

Signature layout
HTML coding
Placeholders
Images
Text and fonts
Cloud (server-side) signatures
Outlook (client-side) signatures
When in doubt

Signature layout

Prepare HTML, TXT and RTF versions of your signature.
This way, you will have a signature variant for different types of email clients, some of which may not support HTML signatures or have this support disabled. Follow the links below to learn how to convert signature templates in:

Use tables with separate cells for different elements, e.g. images, text, or placeholders.
Placing such elements in separate cells of a table allows for controlling their position within the signature (e.g. for side-by-side positioning of sender’s contact details). Importantly, it also preserves the layout and prevents signature elements from being moved around in different mail clients and/or screen resolutions.
Reduce cellpadding and cellspacing attributes to zero.
Some email clients may add unwanted spacing between table cells. Setting this attribute prevents them from doing so.
Do not use other containers in your signature templates.
When used for signature template layout design, HTML elements such as <div> or <span> may be interpreted differently in different email clients. This can produce unpredictable results, such as email signature items appearing on top of one another or overlapping with others.
Use line breaking instead of a new paragraph in HTML signatures (Shift+Enter instead of Enter).
The former begins a new line, while the latter starts a new paragraph. Paragraphs are treated differently in different email clients. For example, in Outlook on the web, no vertical spaces are added between paragraphs, while in Outlook desktop apps, vertical spaces are added by default and are quite large. This does not apply to plain text signatures, where you can use the Enter key for line breaking.
Avoid using elements that could trigger spam filters in your recipients’ mail systems.
Do not use shortened links, as spam filters cannot follow them and may consider them malicious (as discussed in this article). Alternatively, you can use link shortening services that will include your own domain name. Also, avoid using linked or hosted images. Usually, they are blocked by email clients and sometimes may be treated as spam. Additionally, messages that contain too many images may sometimes be treated as spam.
Do not create a signature made solely of an image.
It is almost impossible for our signature software to find other occurrences of such a signature in an email conversation. As a result, your disclaimer may be inserted multiple times, even if you set up the program to add it only once. Moreover, if you have enabled the signature removing feature, you may encounter situations when the signature is not removed at all or another part of your message is removed instead.

HTML coding

Do not use third-party WYSIWYG editors.
Such programs may add some tags that are not supported by our software or are not valid in accordance with W3C standards. As a result, your signature may be displayed incorrectly in different email clients. Instead, you can use CodeTwo's built-in editors which are designed specifically for preparing email signature templates.
Do not add CSS styles declarations in the <HEAD> tag or in the <BODY> tag of the signature.
Remember that it is impossible to add an external CSS style sheet to an email. Also, some email clients may ignore such attributes. The example below shows how to use CSS attributes correctly:

<BODY>
 <P style="font-family: Tahoma;">
  Your content goes here
 </P>
</BODY>

Use the CSS together with HTML attributes.
Some email clients do not support every CSS attribute, while some HTML attributes that are now obsolete may still be used in older email clients. The preferred syntax is e.g.

<TR vAlign="top" style="vertical-align: top;">

Using both allows the signature to work correctly in a number of situations. For more information please also refer to the W3Schools webpage.

Do not use quotations marks in HTML attributes. By default, the editor tries to automatically remove single and double quotes from various HTML attributes. You should use the double quotes only when you are appending a style, source or hyperlink target attribute (i.e. src, href and style).
Be careful when using quotation marks when manually editing HTML code. Make sure that you are using the correct, neutral quotation mark symbols (" and "). Some text editors automatically replace them with typographic or curved quotation marks (“ and “). If you are using such a program and copying your code from it, make sure to check for correct symbols.
Use pixels (px) for defining font-sizes and vertical spaces when using CSS properties.
Using points (pt) may result in uncontrollable resizing of spaces or text depending on the recipient’s email client and screen resolution. For the correct solution, see the example below:

<!-- this code is part of the HTML table -->
<TR>
 <!-- note that all values are provided in px unit -->
  <TD style="font-size: 12px; line-height: 12px;">
   Your content goes here
  </TD>
</TR>

Use CSS properties when using percentage values for dimensions.
When providing e.g. table dimensions in percentages, you should provide them as CSS properties (not HTML), as in the example below:

<!-- this code is part of the HTML table -->
 <TR>
  <TD style="width: 100%;">
   Your content goes here
  </TD>
 </TR>

Do not use empty lines for formatting vertical spaces in your signature (i.e. <p> </p>). This is interpreted as a new paragraph by email clients. Depending on the software, the size of the vertical space will be different, as some clients add additional spacing between paragraphs. Learn more

Placeholders

Make sure to use placeholders for all items that should be replaced with Active Directory information.
Do not enter information as text if it can be uploaded from AD (e.g. company, department, position, etc.), even if you are using different signatures for distribution groups, departments, and so on. This makes future changes easier and less time consuming and allows for reusing signature templates for different users or purposes.
Some placeholders require additional configuration.
These are: {Photo}, {Web page as link}, date and time related placeholders and {QR Code image}. These placeholders cannot be entered manually while editing the signature. Instead, they need to be selected by using the Placeholder option on the ribbon to work. Learn more about placeholders here.
Not all placeholders are supported by every CodeTwo program.
When using signature templates crated in the CodeTwo Exchange Rules family of products, remember that not all placeholders are supported by CodeTwo Email Signatures 365. These are: {IP phone}, {IP phone as link}, {Rotating image}, {Rotating text}, {Unsubscribe link}, {Counter}, {Unique counter}. Learn more
Use {RT} (Remove Text) tags in your signatures.
They allow you to automatically remove placeholders that cannot be replaced with corresponding AD information. Be sure to use the Remove Text tags correctly by placing the closing {/RT} tag at the beginning of the next line/row. That way, they remove not only the placeholder from the signature, but the text next to it and the entire line as well. Read this article for further information.

As an alternative to RT tags, you can also use conditional placeholders. This allows you to insert generic information into an email signature (e.g. a company/department phone number instead of sender’s individual phone number) in case some information is missing from AD. Learn more about conditional placeholders

Images

Use high-resolution images.
Since most modern devices and email clients can display them, it is best to attach high-quality images to email signatures and use both CSS and HTML attributes to scale them to the desired size.
Use embedded images to make sure they are always visible to email recipients.
Email clients prevent automatic downloading of hosted (online) graphics or require a permission to download and display them, replacing them with a red x in a box. In addition, if a hosted image is accidentally/intentionally removed from the server, it will not appear in an email signature at all. When using the Embedded picture option in the signature editors used in CodeTwo software, the graphics are added to emails as hidden attachments.
Use PNG, JPG, and GIF images only.
These are the most popular formats, which are supported by our email signature management solutions and the majority of email clients, so they are very likely to display correctly, regardless of your and your recipients’ setup. When choosing an image format, consider that PNG is lossless, which usually means the files may be bigger. On the other hand, using compressed JPG files allows for producing “lighter” signatures at the cost of image quality. GIF files, in turn, are a perfect way to include animated graphics in your email signature design.
Avoid less popular image formats like BMP, SVG or base64, which might cause compatibility and security related issues and unexpected errors.
Add alternative text to images to improve accessibility.
When inserting a new image, add alternative text that describes what’s in the picture in a concise way, e.g. ‘Rainbow logo with a company’s name in a fancy font below.’ The description will let people with visual impairment (who use screen readers) get the idea of an image and, consequently, the entire signature. Note that the description might be required in certain jurisdictions.
Alternative text is also a smart fallback option if your image isn’t displayed on recipient's device for some reason (e.g. slow connection, read error, etc.). In such a case, the description will be displayed instead to give a recipient the idea of an image.
Learn how to add alternative text in:
- CodeTwo Email Signatures 365
- CodeTwo Exchange Rules (Pro)
Allow for dark mode compatibility of signatures.
Avoid images/icons with white backgrounds or frames around them. If possible, use images with transparent backgrounds (this is supported by e.g. formats like PNG, but not by JPG). When selecting the colors of fonts, icons and other graphic elements, take into consideration how your signature will look against a dark background. Learn more

Important

Active Directory stores all images using the JPG format. This means that if you insert a user photo into a signature by using the {Photo} placeholder, the original background of the image will always be visible and will not change depending on the light/dark mode settings.

Text and fonts

Choose only web-safe fonts for use in your signatures.
These safe fonts are installed in most devices and include: Arial, Arial Black, Gadget, Comic Sans MS, Impact, Charcoal, Lucida Sans Unicode, Lucida Grande, Tahoma, Geneva, Trebuchet MS, Verdana, Courier New, Lucida Console, and Times New Roman. If a font is not found in the system, the email client will replace it with another (usually the default font), which means the signature will not look as intended. Learn more
Use fallback fonts.
It is not possible to attach a non-standard font for use in an email. If you are using fonts that are not listed as web-safe fonts, you should define fallback fonts for them. The specified font will be used to substitute the primary font if it is not available for the recipient’s email client. Learn more
Create an image containing the text you want to use if a font that is not popularly available.
If you want your text to look in a specific way and make sure that the formatting and fonts are unchanged between different email clients, consider preparing an image containing that piece of text. However, avoid using an image as the entire signature.
CodeTwo email signature management software allows for use of right to left script.
If you are preparing a signature in a language using such script, make sure to add the dir="rtl" attribute to all text containers (e.g. <p> tags). Learn more
Keep the text short and concise.
When adding a disclaimer to your email, make sure it's not overly long and provides only the required information. Other than that, an email signature that is too long can be overwhelming, unclear and even annoying, especially if it is attached to a shorter message.

Cloud (server-side) signatures

Disable email signatures set in your mail client.
The most important reason to do this is that you do not want to have more than one signature added to your emails. Additionally, the HTML source code defined in your email client may cause problems by interfering with the server-side signature added by CodeTwo software. This point is also important when it comes to mobile email clients.

Outlook (client-side) signatures

Create signatures that do not require any action by the sender.
All relevant information in a signature template should be provided using placeholders and Active Directory data. A sender should not be forced to do anything more than select an email signature when composing a message, e.g. add additional elements to the signature, edit its text, etc.
Use a clear naming convention for different signatures.
If a user is to select signatures based on a recipient, seasonal marketing campaign, etc., name the provided signatures accordingly.
Not all cloud (server-side) placeholders are supported in Outlook (client-side) signatures.
When copying signature templates in CodeTwo Email Signatures 365, make sure to remove the unsupported placeholders. Read this article to learn more.

When in doubt

Make sure to read the user’s manual of the product you use:

CodeTwo Email Signatures 365,
CodeTwo Exchange Rules,
CodeTwo Exchange Rules Pro,
Signature template editor (if you are using CodeTwo Email Signatures 365)
Template editor (if you are using CodeTwo Exchange Rules family of products).

Check out our extensive Knowledge Base.
Contact our Customer Support, available 24/5.

Related products:	CodeTwo Email Signatures for Office 365 1.x, CodeTwo Exchange Rules 2.x, 3.x, CodeTwo Exchange Rules 2007 1.x, 2.x, 3.x, 4.x, CodeTwo Exchange Rules 2010 1.x, 2.x, 3.x, CodeTwo Exchange Rules 2013 1.x, 2.x, CodeTwo Exchange Rules 2016 1.x, CodeTwo Exchange Rules 2019 1.x, CodeTwo Exchange Rules Pro 1.x, 2.x
Categories:	Troubleshooting
Last modified:	October 19, 2023
Created:	May 4, 2015
ID:	488