Good and bad practices when using signature editor

Problem:

How to avoid problems when designing signatures in the editor included in:

  • CodeTwo Exchange Rules Pro 2.3 and up,
  • CodeTwo Exchange Rules 2013 2.3 and up,
  • CodeTwo Exchange Rules 2010 3.3 and up,
  • CodeTwo Exchange Rules 2007 4.3 and up

or newer.

Solution:

Despite the signatures are built using HTML and CSS technologies like websites, many e-mail clients do not support various elements of those languages, which may cause improper appearance. Below you may find a list of good practices that should allow you to create signatures without difficulties. 

  1. Do not use any third-party WYSIWYG editors
    In fact, WYSIWYG editors are not well-adjusted for creating signatures, for example leaving your CSS styles in the HEAD section. Moreover, some of them (e.g. Microsoft Word) may include some additional HTML elements that are working only within the Office applications and actually are not part of any official specification. As a result, you may notice that your signatures are not properly displayed in many e-mail clients.
     
  2. Use the CSS along with HTML attributes
    Many of the design elements, such as vertical align, may be achieved either by using the HTML (<TR vAlign="top">) or the CSS (<TR style="vertical-align: none;">). In fact, using the CSS is a more convenient way, considering that various of the HTML attributes are obsolete nowadays. However, certain mail clients do not support fair amount of HTML and CSS properties. Therefore, the most safe way to obtain a consistent appearance is to use HTML attributes along with their equivalents in the CSS (e.g. <TR vAlign="top" style="vertical-align: none;">. For more information please refer to the W3Schools webpage.
     
  3. Do not use the CSS styles for the body tag directly
    Many of the mail clients may simply ignore all styles provided in the body tag, e.g <BODY style="font-family: Tahoma;">. Instead, please add your CSS attributes directly to a particular tag, e.g. <BODY><P style="font-family: Tahoma;"></P></BODY>.
     
  4. Choose only Safe Web fonts
    The following fonts are safe to use between different devices (including smartphones): Arial, Helvetica, Arial Black, Gadget, Comic Sans MS, Impact, Charcoal, Lucida Sans Unicode, Lucida Grande, Tahoma, Geneva, Trebuchet MS, Verdana, Courier New, Lucida Console, Times New Roman. Learn more
    Displaying custom ones (like Open Sans) is possible only in environments where those fonts are installed. If your font is missing, the operating system will try to use the most similar one, which is mostly far from expectations. To prevent against it, you can use fallback fonts.
     
  5. Use fallback fonts
    Using fallback fonts helps to protect your signature against situations where a font is missing on the recipient's platform - you can define the fonts that can be used instead. Learn more
     
  6. Do not include your CSS in STYLE tag in HEAD
    Despite the fact that implementing CSS styles in the HEAD section is a convenient method, your styles may not be recognized in some of Web-based mail applications like Gmail (including Google Apps accounts).
     
  7. Apply the RT Tags to the content, not to the HTML tags
    RT tags are used to remove contents of your signature in case when value of a placeholder defined inside particular RT tag is missing. However, this feature removes your content including all HTML syntax. The safest method is to apply the RT tags to text only, e.g. <span style="font-family: Tahoma;">{RT}City: {City}{/RT}</span>.
     
  8. Avoid using any quotations marks in HTML attributes (does not apply for SRC, HREF and STYLE)
    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.
    <!-- all HTML attributes -->
    <TD width=100>Regards</td>
    
    <!-- exception for SRC, HREF and STYLE attributes -->
    <IMG src="image.jpg" />
    <TD style="font-size: 12px;">Regards</TD>
    <A href="http://codetwo.com">CodeTwo</A>
    
  9. When choosing a font size and line height, always provide values in pixels instead of points
    Spacing in your signature may be enormous when opening a message in OWA (Outlook Web Application). To avoid such problems please define the value of font-size and line-height CSS properties in pixels. Also, if you are defining these in the <td> tag, the font-family attribute must not be included in same CSS declaration. In such cases you should put font-family declaration inside a child tag.
    <!-- 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;">
               <!-- here is declaration for font family -->
               <SPAN style="font-family: Arial;">
                  Your content here
               </SPAN>
          </TD>
    </TR>
    
  10. Percent declarations of dimensions should be implemented as CSS properties
    While providing the dimensions declarations with percent values you should provide them as CSS properties (not HTML). 
    <!-- this code is part of the HTML table -->
    <TR>
          <TD style="width: 100%;">
                     Your content here
          </TD>
    </TR>
  11. Use tables to keep your signatures consistent
    If you need to keep part of your signature inline or define multi-column layout, use an HTML table to achieve such design. The mail clients apps usually provide support for other containers like <DIV>, however, the float CSS attribute (required to keep parts of the signature inline) is not supported in Microsoft Outlook. 
     
  12. Break lines using Shift+Enter keys, except for Plain Text format
    When you are breaking lines by using the Enter key, in fact you are creating a new paragraph (<P>), instead of just inserting the <BR> tag. This may cause potential problems regarding the spaces, as by default the white space between paragraphs depends on the mail client behavior. For example, in Microsoft Outlook you may encounter small spacing, but in OWA the paragraphs are displayed one by one. In turn, as the Plain Text format does not support paragraphs, so simply break them using the Enter key.
     
  13. Do not create signature made solely of an image
    Recognizing valid occurrences of such signature (within body of your messages) is almost impossible. As a result, your disclaimer may be inserted multiple times despite you have decided to stamp it only once. Moreover, if you have enabled the feature of removing old signature, you may encounter situations when the signature is not removed at all or another part of your message is removed instead of the footer.
     
  14. Scale down your images prior to attaching them into signature
    Instead of resizing the image using HTML or CSS attributes, use any graphic editor like Paint or GIMP. This allows you to decrease size of your emails and achieve better scaling results.
     
  15. Spacing may be visible in the editor by design
    If your signature contains a table nested in another one, you may notice, that there is additional spacing present. This spacing is located under the nested table and designed to make the editing process more easy. In final e-mail, as well as in the signature preview, it should not be displayed.
     
  16. Disable email signatures set in your mail client
    This point is extremely important regarding mobile devices. The HTML source code defined in your client may cause problems while merging with the signature stamped by CodeTwo software.

See also: