HTML & CSS - - By Alex Walker

HTML Email and Lotus Notes

Although there’s no doubt that RSS is hot with the cool kids, when it comes to proactive methods of contacting an audience, almost every client we’ve spoken to in previous last 12 months is still asking for same thing — ‘Give us HTML email!’

That’s not really a massive surprise. Even the most ‘non-techy’ managers have usually been successfully using email for years and feel they understand it well. They know their audience understands email too. They’re also often already well-aquainted with traditional direct marketing methods, so taking the concept into an online setting isn’t a big jump for them.

This is all good work for us developers, but does force us to deal with some issues we might prefer to duck. Spam filters are more aggressive than ever, and deserve a separate post.

The other major issue is, of course, the huge variation in mail clients. While we may wring our hands and whine about having to cater for three IEs, Firefox, Opera AND Safari, the mail client landscape is a literal amazon (the jungle, not the bookstore) of peacefully co-existing biodiversity.

And despite what David Suzuki says, diversity is bad, Mkay?!

I’ve been made particuarly aware of this fact in the last few days. Recently, in an honest attempt to reduce spiralling bandwidth costs, we re-coded some of the internals of our newletter authoring system (Design View, Tech Times, etc). The original templates were consciously very ‘old school’ — tables enclosing ‘font tag-heavy’ paragraphs — so we decided to try to slim them down with the help of a little more CSS. The main table structure remained but we pulled the majority of the font tags and coloring in favor of head styles, shaving a little under 20% from each issue.

The testing we did checked out fine for Outlook, Outlook Express, Thunderbird, Eudora, Gmail, Hotmail, Pegasus, and a host of other clients, but, judging from some helpful feedback from Mary Ransom, Donna Stegner and Pam Froemke, we’ve created some real issues for Lotus Notes users and users of some other less common clients.

Apologies to all three and to any other users who have received less useful newsletter content since the re-coding.

Notes has always been a problematic clients for two reasons. Firstly, it takes to the HTML it receives with ‘extreme prejudice’ cutting, slicing and trimming whereever it likes. Secondly, to my knowledge, there’s no easy and inexpensive way to test for this client.

However, I would like to share a really useful ‘Template Kit’ article on Notes and HTML email which does answer some of the question I had.

Two things in particular we’re handy to know.

1) Notes often converts carriage returns in HTML to entities, meaning:
http://i2.sitepoint.com/graphics
/grafitti5.png
can be converted to http://i2.sitepoint.com/graphics<cr>/grafitti5.png
breaking the image. The same thing can happen with links, so try to keep lines long and intact.

2) Notes likes to strip CSS from the header by default. However, according to this article, this can be resisted by placing each rule within standard HTML comments. In other words, this doesn’t work:

<style type="text/css">
#content{padding:11px 6px 11px 12px;}
#col{margin:0;}
</style>

But this should:

<style type="text/css">
<!--#content{padding:11px 6px 11px 12px;}-->
<!--#col{margin :0;}-->
</style>

I’m still testing this stuff out, so I can’t absolutely confirm this technique, but it’s certainly better than the complete blank I drew this morning. Of course, these fixes could unleash a tidal wave of issues in other clients that are worse than the original issue.

I’ll let you know the conclusions.

Sponsors
Login or Create Account to Comment
Login Create Account