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.

Resources

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

Outlook 2010 – still not helping anyone

So here’s the great news that Outlook 2010 is in beta development. Here’s the not so great news. They are still planning on using the Word rendering engine to display HTML emails, just as in Outlook 2007.

Goodbye styles and background images, hello tables (my old friend) and broken emails.

There may be all sorts of reasons behind the move, be it a reaction to Microsoft not being allowed to bundle Internet Explorer with Windows 7 or the official Microsoft view that using Word offers the most powerful email composition tools for Outlook users. This is flawed by tha fact that recipients will require Outlook to view the emails properly, and with only 7% of the market this punishes Outlook users in my opinion. I see no reason why a corporation such as Microsoft can’t allocate the resources to create an email client that provides powerful authoring and rendering of emails, using email standards.

The Email Standards Project, Campaign Monitor (I love you guys!) and Newism have initiated a campaign, http://fixoutlook.org/, to try and highlight the problems to Microsoft, so lets all hope they listen.

Outlook is broken - let's fix it!

Alternatively the sooner I get away from having to worry about building HTML emails, the better.

Addition: the Microsoft response

Microsoft have provided a response to the campaign on their MSDN blog which expands on a number of points I raised. In the comments I pointed out that HTML is not an email standard, and Microsoft correctly state “There is no widely-recognized consensus in the industry about what subset of HTML is appropriate for use in e-mail for interoperability“. This is my view too but of course it doesn’t make my day job any easier.

I agree that many using Word to compose rich emails will find that the easiest and most powerful method – but it still relies on the recipient using a client expecting Word formatted HTML.

Finally, if Microsoft would please prove to me that “Word has always done a great job of displaying the HTML which is commonly found in e-mails around the world” I’d appreciate it, because I think that is absolute bollocks and my professional experience backs that up.

At least Microsoft know Outlook 2007 isn’t very good…

Microsoft disclaimer!

So just after receiving an email asking why a complicated HTML email didn’t work in Outlook 2007 and explaining that since it uses Word to render HTML it was never going to display everything right. Obviously some people just don’t understand this.

However with almost perfect timing I got an email from xBox Live (Microsoft run) with the disclaimer above shown right at the top! Yes, Microsoft themselves are suggesting you read the HTML email in a browser rather than their own email client!

“Read this issue online if you can’t see the images or are using Outlook 2007″

Now I accept that Microsoft may be correct in that HTML should not have been used for emails at all, emails should be plain text, end of. However if you are then going to support HTML partially, whilst using HTML emails in your own marketing, with a disclaimer against your own product, something is very wrong somewhere! Anyway, all the clients I work for won’t pay for plain text emails, therefore HTML emails kind of keep me in a job!

Anyway, I found this amusing, hope you do too.

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.

  1. NO BACKGROUND IMAGES

    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.

  2. ALWAYS SET OUT TABLE COLUMNS FIRST

    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.

  3. NEVER EVER USE ROWSPAN

    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.

  4. DON’T SPLIT IMAGES HORIZONTALLY

    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.

  5. USE NO STYLES

    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").

  6. DO NOT USE P TAGS

    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="" />
    </font>

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.