How to avoid problems while designing the footers in old versions of CodeTwo Editor

This article is obsolete and may relate only to older versions of our software.

Problem:

How to avoid problems while designing signatures in old versions of CodeTwo editor.

This Knowledge Base article is designed to be used only with versions of the software listed in the Applies to section on the right pane. Older or newer releases may not be affected by the issues described below.

Solution:

When designing a signature in older versions of CodeTwo Exchange Rules built-in editor, you should consider points listed below. Please note, that many differences in footers are related to improper behavior of mail clients applications (e.g. Microsoft Outlook, Thunderbird), not the editor itself. 

  • 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. In a result, you may notice that your signatures are not properly displayed in many e-mail clients.
     
  • Use the CSS along with HTML attributes
    Many of the design elements, like a 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.
     
  • Do not type in placeholders.
    Placeholders are special fields, that are converted into users' personal information or hiding parts of your signature ({RT} placeholders), when the message goes through the server. You should insert these fields using the ribbon menu located on top of the editor window.
     
  • Do not use self-closing HTML tags.
    Older versions of editor do not support self-closing tags (e.g. <BR />). Use old type instead (<BR>).
     
  • 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>.
     
  • 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. Displaying custom ones (like Open Sans) is possible only on 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.
     
  • 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).
     
  • 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>.
     
  • 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 provides 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. 
     
  • 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 producing 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.
     
  • Do not create signature made solely of an image
    Recognizing valid occurrences of such signature (within body of your messages) is almost impossible. Consequently, your disclaimer may be inserted few 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.
     
  • 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 (as graphic editors mostly are using the interpolation). 
     
  • Type tags UPPERCASE.
    Please keep the default manner of the editor by providing all HTML tags in uppercase, (e.g. <P>).
     
  • Avoid using any quotations marks in HTML attributes (does not apply for SRC, HREF and STYLE).
    The default behavior in editor tends 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>
    
  • 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 the 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>
    
  • 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>
  • Note additional space in the editor.
    If your signature contains a table nested in another one, you may notice, that there is additional spacing. 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.
     
  • 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: