Email marketing – a bit of a rant

As developers we hate it. But I have to admit it is an unnecessary evil in my (current) world as an agency web developer. Lets face it – it works.

So here it is, the blog on the dreaded subject of email marketing from a my point of view, why we hate it, how we can make it work, what people can do to make our lives easier and campaigns more efficient and effective.

Why don’t I like building emails?

This is simple. We love accessible, semantic, standards based code. We do not like going back to techniques used over 10 years ago. We have to use out of date layout techniques and the code is long winded, complicated and boring to produce. It wouldn’t be so bad if we could use the same HTML and CSS standards we use for web sites, but unfortunately it isn’t an option. Not if you want your campaigns to include the creative idea that you are so sure will work, at least. And this doesn’t look like changing anytime soon.

If you haven’t seen the problems with Microsoft Outlook 2007 using Microsft Word to render emails, then the internet is full of disgruntled people. Actually, I’ll help you with that. Don’t get me started on Lotus Notes.

It isn’t our fault animated gifs don’t always work. Flash can’t be used. Hell, even background images don’t work. These points ARE NOT OUR FAULT. But it still provides a hot topic of discussion between designers/concept teams and us developers. Trust my judgement, look at how long I’ve been doing this, we do actually know what we are doing, although maybe you and your great idea are more important than everyone seeing it as intended. Or doesn’t that defy the point altogether.

There are hundreds of different software, webmail and operating system combinations for us to work to. If you want your campaign to work in even 80% of them. Please listen to my advice, not just try to replicate your print campaign in an email. They are completely different mediums.

What works?

Again, simple things.

Keep your text to standard web fonts. Don’t rely on background images. Don’t ask for Flash or an animation. Keep the layout simple. The fewer images the better. Yes we can code so things will degrade gracefully, but if the client views the email in their inbox (compared to the signed off HTML file they viewed in a browser) with missing design elements they liked, it won’t be your fault, it will be mine. So please just make the designs possible in all clients.

Unless of course you have stats showing 100% of your recipients use an email client that supports animated gifs or background images – but first of all that is unlikely to be available, let alone likely to ever happen!

Even so what people don’t seem to understand is that everything doesn’t have to happen in an email. We have awesome tools in jQuery, Flash, and even simple HTML/CSS that can impress and prompt customer action better than an email. So a well thought out simple email to get people to somewhere showcasing the creative concept and getting customers interacting will work better than trying to contain everything in someone’s inbox. I find that a simple concept to understand. Why can’t others!

In the words of Columbo…

Just one more thing, if I can get on with building sites because I don’t have complicated email discussions going back and forwards, I will be happier. Of course sites are what I love, so if emails could disappear completely I’d appreciate it.


Finally, here are some good email resources, not that you’ll probably read them anyway. All are from Campaign Monitor, because they are good.

Lotus Notes – how to build the perfect email

Lately work we have had to build numerous email newsletters (e-zines, and sometimes even “eFlyers”?!) with a huge amount of content and very image heavy. The number and frequency of these emails mean a challenging turnaround time and the use of templates of previous email wherever possible.

However the client dropped a massive bomb shell when it was revealed that they (as a large corporate company) use Lotus Notes 5 as their primary email client. This is bad.

Not only does this mean we have to output a huge amount of work but it also means that this work must be absolutely indestructible, unbreakable code.

If you look at the following examples of emails displayed between Lotus Notes and Microsoft Outlook, you can see how perfectly valid and working emails can be slaughtered left, right and center by the Lotus Notes HTML rendering engine.

Sony emails.

Sony email which uses styles quite heavily. While this means that the email will not display as designed in email clients that do not support CSS (Gmail, Notes amongst others) at least it will degrade gracefully.

Hugo Boss emails.

This Hugo Boss email doesn’t use any style for any layout or formatting byut still breaks quite badly.

My preferred method would be that of Sony, or even plain text emails – which a recent .net podcast (episode 19) said most people surveyed would prefer to receive. Unfortunately the limited technical experience of marketing staff that have to sign off these emails mean that we have to make the emails work in Notes if possible, even if the actual recipients receiving the email in Notes is minimal.

There are a number of methods that can be used to make sure you emails display as planned in Lotus Notes and hopefully the trials and tribulations I have endured for the past year can be kept to a minimum for others by following these rules.


    They just don’t work. This doesn’t just apply to Notes, but also includes other well know email clients. This should be a general rule for all HTML email builds.


    No matter whether widths are set on the

    tags themselves, it has always helped me to have an empty row right at the start of every single table, with 1px in height spacer images defining the table cell widths.


    Now I don’t know why this doesn’t work, but it proved to be a thorn in my design for a long time. I find that the only way to guarantee the reliable display or a table exactly as it should be is to ignore that rowspan even exists and insert tds in every row wherever required.


    If you have a wide image, don’t split it across a row. This often results in extra space for no apparent reason, stretching the table row containing the images. Even if you have distinctly separate images, if you can get away with just using one full row width image then do it. And fight to keep it that way.

    If you absolutely have to split images horizontally, each must be in its own table cell, because even with absolutely no whitespace in the code, Lotus adds a single character space between each image.


    In my emails, I usually set text size at 11px or 12px using a style in my font tags to get around a link and copy size bug in hotmail. However Lotus Notes ignores this, and ALL other styles. So use no margins, padding font declarations, in fact use no styles at all. Go back to the early 90s, when CSS didn’t even exist!

    Since I still like to make sure the link and surrounding copy are the same size in hotmail, I still define font size, however use 13px with a size="2" back up in the font tag (or 10px and size="1").


    Lotus Notes doesn’t recognise the margins that should apply between p tags, so I find that declaring a font tag then using spacers to separate copy blocks, as follows:

    <font face="arial, verdana, sans-serif" size="2" color="#333333" style="font-size: 13px;">
    Copy paragraph 1.
    <br /><img src="../images/1x1spacer.gif" width="1" height="15" alt="" />
    Copy paragraph 2, and so on throughout.
    <br /><img src="../images/1x1spacer.gif" width="1" height="15" alt="" />

I’m sure there are more techniques and ways to make HTML emails work in all email clients, but I find that the above guidelines help me work more efficiently by decreasing the time spent on fixing Lotus Notes issues (especially when Notes development is a requirement), in fact most are so reliable that I have also started using the above rules in all emails. You never know, they might help when it comes to developing emails for Microsoft Outlook 2007, when Word is used for parsing HTML emails.