Clients are a blessing and a curse – in my line of work, you encounter a ridiculous amount of surprises when you get started on projects. Today I offer up a short post on some things I found out when formatting a custom email for delivery to a massive corporation … who primarily uses Lotus Notes (versions under 8). The email I created which was syntactically beautiful for all other email clients and web (GMail, outlook, iPhone, etc) became 100% unusable in Lotus Notes.
Here are my findings – I hope they help you in your journey to supporting outdated enterprise email clients.
The Do’s and Don’ts of Formatting HTML Emails for Lotus Notes
- Do everything possible in semantically correct HTML
- Do not put your style tags in the header. If required, put css in-line – but know this, there is a great chance that they will get ignored
- If you need to have padding or margins, most of the time those are ignored if done via CSS padding/margin attributes. If you need them, it is best to do nested tables and adding padding with the cellpadding=”10″ attribute
- When you use tables (and trust me, you should always use tables), I saw more success from applying fixed width sizing to the table and to the individual cells. Don’t forget — if you are using cellpadding, make sure you subtract those widths from the table cells too!
- Don’t use <p> tags. Use <div> tags or <span> tags. P tags are uncontrollable due to defaults in Lotus Notes. If you use DIV or SPAN, you should still use them inside of TABLES to have more control.
- If possible, use the BGCOLOR attribute on <table> and <td> tags as close as possible to where the color is needed. If you only do it at the TABLE level, the cells may inherit from the BODY tag or other parent instead
- Don’t use BORDERS at all! It seems that the minimum border width in Lotus is 5px no matter what you do !IMPORTANT :D Just get rid of all the borders both in your CSS and on TABLEs and cells.
- Lotus Notes (versions 6.5 and 7 at least) do NOT support .PNG. That means you have to make all images in .GIF or .JPG format. Have fun with that. It literally will not render a .PNG file
How to Do Testing?
I can not speak highly enough of LitmusApp.com – they are what I used to do 95% of my upfront testing (with the last 5% being sending test emails to select clients using Lotus Notes). They have tremendous support for many email clients and browsers, but important to my scenario, they have lotus notes 6.5, 7. 8 and 8.5 that I could test in within minutes.
Thanks for this. I work at a large company where I have to send emails through lotus Notes to lotus notes, iPhones, and iPads.
The only issue I still have is a black border showing up around certain s. I’m hoping I the reason is because I put a white border on those s since padding and margin wouldn’t work. I guess I’ll try and use cell padding instead.
Is there any advice for inline images with Lotus Notes?
Hey @terryriegel:disqus – The only advice I have is to use LitmusApp.com to test :) Without diving in and testing them comprehensively, I can not offer any solid advice right now. Sorry.
Very interesting and thanks for sharing. I have started using “div” for all my “p” not even because of lotus notes but Outlook which ignores all margins and add is own margins.
@Shinamee:disqus – Outlook is a big headache too. I am surprised how out of compliance they are too sometimes :)