Addemar Support Knowledge

How can I create my own templates?

You are designing templates for e-mails in HTML. In principle, HTML is a standardized language. Unfortunately, however, not all HTML is correctly interpreted by the different email clients and there are even some HTML tags and codes that are not supported by email programs, such as <form>. Especially email clients such as Lotus Notes and Outlook 2007 support very poor HTML.

Will you be designing your own newsletters and handling the graphics and such?

Therefore, the most important tip is KEEP IT SIMPLE. Limit your design to simple CSS with the most current styling codes. Do not try to use something advanced and complicated, because your effort will not be seen by most of the email recipients.

Furthermore, you should know that most recipients read their e-mails in the small preview pane of their mail client, without much scrolling. Keep also in mind that most of the time images are blocked when an e-mail arrives.

Ten commandments

While designing your template, even before inserting ADDEMAR tags, keep in mind the following ten commandments:

  1. Design within a maximal width of 600 px. Most email client preview panes are not larger than that.

  2. Consider the upper left corner of your e-mail as the most important part. If a recipient does not scroll, he will only see the upper left corner.

  3. Avoid to use too much images, foresee enough text to make sure every recipient gets the main message of your email, even the ones that receive their email with blocked images.

  4. Include the following elements:
    - a link to an online version. This is the ultimate workaround for ensuring recipients will still enjoy the most creative and interactive experience.
    - an unsubscribe link. This is a legal privacy issue. Put it in a prominent place, to avoid recipients hit the "report SPAM" button instead of unsubscribing.
    - a sentence asking the recipient to add the from address to his address book, this to avoid your next e-mail will be flagged as coming from an 'unknown sender'.

  5. For text styling, use as much as possible inline CSS that you repeat in every <td>, not just in the <table> tag. If you really want to work with a general CSS, put it in the <HEAD> and in the <BODY>. An example of inline text styling:

    <td style='font-size:11px;font-family:arial;font-weight:bold;color:#000000'>put here your text</td>

  6. Do not use CSS positioning, but use tables instead. Keep the general structure of your email as simple as possible. Do not work with <div> to create the structure.

  7. Do not use flash or javascript.

  8. For pictures, use jpeg as much as possible: gif might give problems with transparancy.

  9. Limit the use of background images. Keep in mind that white and light grey text may become unreadable if the background image or color is not rendered.

  10. If you want to use a body background color, put it in a big <div> around the email (width=98%) and repeat this colour in the <body> tag and in every <td>.

VALIDATE your HTML, insert ADDEMAR tags and then TEST, TEST and TEST.

Test as much as possible in different mail clients: create yourself an account on Livemail (Hotmail), Gmail and Yahoo and control if the e-mails are rendered as you'd meant they should appear. Testing in webmail environments at Telenet and Skynet might also be very valuable. Install Outlook 2007 or Lotus Notes on your computer and verify the rendering there too.

Below you find some specific HTML e-mail limitations and solutions for Outlook 2007 and Lotus Notes.

Outlook 2007 limitations and solutions

Outlook 2007 uses the Microsoft Word HTML engine, previously only used for composing e-mails, now also for reading and rendering HTML e-mails. This imposes numerous limitations on the rendering of HTML e-mail.

  1. Limitation: no form functionality.

    A survey, a poll, a subscription form: they are not active in Outlook 2007. Fields are replace with [], and buttons are deactivated.

    Solution: accompany the form by a link to try the form online ("Your mail client doesn't support forms? click here to fill in the form online"), or insert the form on a landing page and just include a clear call to action in the e-mail ("Want to subscribe to this event?").

  2. Limitation: no background images in HTML <table> tag or CSS.

    Solution: you can place a background image in the <body> tag. That will be rendered nicely in Outlook 2007. Note however, that most webmail clients strip out the body tag, so repeat the background image in both <table> and <body> to serve all.

  3. Limitation: no background colour in nested tables

    When you nest tables and apply a background colour, it is possible that this background colour is only applied to one cell of the nested tables.

    Solution: keep the design very simple, repeat the background color in every <td> and use as less as possible nested tables.

  4. Limitation: no embedded style sheets

    CSS in the <head> or the <body> is not supported by Outlook 2007.

    Solution: use inline <font> style attributes. This is the best solution for all webmail clients too. CSS positioning tactics should also be avoided, tables should be used for positioning.

  5. Limitation: no formatting of lists and bullets

    There is no support for replacing standard HTML bullets with images.

    Solution: Keep your bullets simple, or accept that they will not be rendered in Outlook 2007.

  6. Limitation: no animated gifs supported

  7. Animated gifs are not animated anymore, only the first image appears.

    Solution: Include the most important message in the first image of the animated gif.

Lotus Notes limitations and solutions

Lotus Notes can be a tough e-mail client to test your HTML e-mails against. Many designers and firms tend to skip over the whole Lotus Notes compatibility issue due to the fact that they believe that the majority of recipients using Notes is considered small. But according to IBM, 95 million people currently use Lotus Notes.

  1. Limitation: inconsistent or very limited support of embedded style sheets

    In Lotus Notes, it can happen your style sheet is not used for rendering, the user's default style settings are used when showing your e-mail. A bigger text font, e.g., could stretch your e-mail totally, or ruin your careful design.

    Solution: use inline <font> style attributes. This is the best solution for all webmail clients too. CSS positioning tactics should also be avoided, tables should be used for positioning.

    <font class='style' size='2' family='Arial, verdana, sans serif'>

    If you really want to use CSS, you could insert it in the <body> tag, and put every line of code between comment tags.

    <style type='text/css'>
    <!--.style1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; color: #FF0000}-->
    <!--.sidebar1 { font-family: Arial, Helvetica, sans-serif; font-size: 9px}-->
    <!--.text { font-family: Arial, Helvetica, sans-serif; font-size: 12px}-->
    </style>

  2. Limitation: transparent gifs are shown with border.

    Transparent gifs are rendered with a border, although you did not define any border in the image. Most of the time your gif has a matte or background that is showing up as an extra border.

    Solution: use jpeg for pictures.

  3. Limitation: images are translated in code

    It can happen you see code instead of an image, or an image and some code.

    Solution: Unfortunately there is no straightforward solution. Apparently, this has to do again with a single space or carriage return in the code, which causes a erroneous translation of the code in Lotus Notes.

  4. Limitation: vspacing and hspacing does not work

    Vspacing and Hspacing attributes on an image do not have any effect in Lotus Notes.

    Solution: Unfortunately there is no solution.

  5. Limitation: table styling is not supported everywhere

    It can happen you define a style, bgcolor, font for your table, and it is only applied to the first cell or to the first row of your table.

    Solution: Do not define style, bgcolor, font in the <table> tag, but repeat it in each <td>.

  6. Limitation: tables are put one next to the other

    In Lotus Notes, tables are shifted around easily: A table below another table might be shown next to that first table, another which was supposed to be next to a small table shows up on top of that table, etc.

    Solution: Create a master table around the e-mail. You help reign in the various width=% and other "ambiguous" attributes and parameters in the different tables which can influence badly the rendering of your HTML e-mail. This advice, however, conflicts with the advice for Outlook 2007 to avoid nested tables...

  7. Limitation: colspans are not understood

    Older versions of Lotus Notes do not support <th colspan=''>, the command to create cells that span more columns.

    Solution: Try to avoid the colspan command.

  8. Limitation: center align e-mail is impossible

    It is impossible to center align an e-mail via the align=center attribute on the main table.

    Solution: You can create a <div> around the entire e-mail (width=98%) that you give the attribute align=center.

  9. Limitation: table border styling does not work

    A border style on a table is rendered as a fix border, not in the style you intended. <table style='border:#000000 1px solid'></table> is rendered as if the code was <table border=1> </table>.

    Solution: You can create a table with padding 1 and background color the color you want as border. Within that table, design another table with a white background color, and put your content in the inner table. 

    <table cellpadding=1 bgcolor='#000000'> <table bgcolor='#FFFFFF'> put your table content here </table></table>

  10. Limitation: anchors do not work

    When Lotus Notes encounters a named anchor, such as <A href='#2'>, it tries to open a new window and display what it perceives as a new document, in this case http://www.<your domain>/#2 document, which, of course does not exist.

    Solution: There is no solution, but the good news is that you don't have any problem when you use the Addemar link tracking. Anchors are translated to  links to the Addemar server in that case, and they are indistinct from any other link.

  11. Limitation: line breaks in code are replaced by <cr>

    If you make breaks in your code by hitting the return button to keep your code well-ordered, you could have the problem that Lotus Notes interpretes this as a carriage return, and so starts a new line where you did not intend to start a new line.

    Solution: Make sure all code for one tag is on one line.

Some resources

test in different mail clients: http://litmus.com

LOTUS NOTES tips: http://www.templatekit.com/lotusnotes1.php