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.
-
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?").
-
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.
-
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.
-
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.
-
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.
-
Limitation: no animated gifs supported
-
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.
-
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> -
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.
-
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.
-
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.
-
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>.
-
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...
-
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.
-
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.
-
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> -
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.
-
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