NateCreates.com

This list is for all those out there who’ve faced developing HTML email for Lotus Notes. It can be very frustratring to find workable solutions. The list I’ve assembled comes from tips I’ve come across and tried, and from my own experimenting based on what seems to work and what doesn’t for Lotus Notes. These are not perfect solutions, however they should provide some guidance for the novice and experienced alike, when tackling this troublesome email client.

1. Develop a design that breaks apart gracefully. This takes time and is largely the responsibility of the designer.
2. Do not rely on CSS styling for page layout. Older versions of Lotus Notes (v4.5 or older) do not recognize CSS for layout. For example the bordercolor property is ignored and will result in an ugly large black border around your table. You can either embrace this fact - and make your design based on black, or avoid the border property by setting table border=”0″.
3. Use a container table to enclose all sub-tables, with one table, one tr, and one td.
4. Because you’re going to be developing a lot of tables, carefully plan and comment your layout. This will make it easier to update and tweak if you need to fix anything later.
5. Do not use td width=”x”. Instead, use a plain td, and then use a spacer.gif image to establish the width of the table data cell. This seems to avoid Lotus Notes tendancy to rewrite tables into its own width specifications. This can be a bit of extra work for those who try to take the HTML Adobe ImageReady serves up, but it’s well worth it in the long run. By the way, avoid slicing up your designs in ImageReady or other Direct-to-Web solution. Instead work piece by piece, table by table (see next key).
6. Have a strong design and plan before going into the table layout phase - and work the design in small, managable sections, thinking of each section in terms of how it works as a table. You should be thinking, two column layout - two tables.
7. Do use the width and height properties of the table tag, especially for your sub-tables.
8. Keep all CSS styling to fonts only - and use in-line styles. You should still be able to avoid the font tag, but the improvement with CSS is not much better. It’s still a lot of styling to track.
9. Probably most important of all (especially if those approving the email will be viewing the test in Lotus Notes) is to prepare them for the fact that what they see at the design stage will not be what they can expect to see in Lotus Notes. Manage expectations. In fact it’s helpful to actually show how the email will break apart and how you’ve allowed for this through your design. Think crumple zones in auto design. By designing weak areas of the design to absorb the impact of Lotus Notes, your overall message (the bones) remains intact. Design is about the message and not how to make things look pretty. Also, have marketing view the email in more than one email client. Having a gmail account or similar is great and seems to make everyone happier.
10. Remember never skip number 9.

If you found this helpful, let me know. I’m interested in developing some tutorials based around these 10 keys, particularly if they would be of assistance to designers out there who also get saddled with learning to hack through HTML, and may not have come from the days of designing pre-CSS. Also, if anyone feels I’ve missed something, please add - as I know you will. All the help the better.