HTML Emails - Taming the Beast

HTML email - you either love it or you hate it. Some love the simplicity of text-only emails, while others praise the flexibility and good looks of HTML. But it doesn’t really matter whether you love it or hate it because sooner or later a client will ask you to design one of those ‘pretty looking email thingies’ for their own customers, and then what do you do?

Most of us tend to think that if we can design a web page, then hell, an HTML email will be a piece of cake! Well…almost. But before you decide to plunge into HTML email design head first, there are a few guidelines to follow that can ensure the best results for you and your clients.

The guidelines fall roughly into these recommendations: how you should design your email, how you should code it and finally the essential content you should include. Before we get into it though, let’s get one thing settled once and for all. These guidelines are for relevant, permission-based emails being sent only to subscribers who have opted in to hear from your client specifically on the topic of the email. So if you’re a spammer, look away now!

Design for images being turned off

Here’s a nasty little fact for you. Any of your recipients who use AOL, Outlook 2003, Outlook Express and Gmail will never see the images in any emails you send them by default. For some people that can make up at least half of all the people they ever send email to. Bummer huh? I told you it was nasty.

Apple iTunes Announcement

Here’s an example of just how ugly things can get. It’s an email I received from Apple announcing the launch of the much anticipated iTunes Australia Music Store.

Apple announcement with images off
The Apple HTML email I received with images turned off

Apple announcement with images
The same email from Apple with the images turned on

Luckily I recognized the sender and enabled the images right away, but how many of their recipients got the version without images and deleted the email immediately?

We know that images get blocked and that this will affect the design of your email - but blocked images are by no means a show stopper. All you need to do is follow a few simple guidelines when designing your email and you’ll forget that image blocking was ever an issue:

  1. Don’t use images for important content like calls to action, headlines and links to your web site.
  2. Ask your recipients to add your sending address to their address book every chance you get. This will ensure your images are displayed by default in a range of popular email environments.
  3. Add a text-based link to a web-based version of your email that will reveal your email in the browser in all its glory.
  4. Use alt text for any images (which will be viewable in some email environments, especially Gmail).
  5. Make sure you always include the width and height in the image tag for every single image. This ensures the empty placeholder images don’t get stretched and completely throw your design.

To backup these recommendations, here are a few samples of emails that have been designed with these guidelines in mind. Notice how readable they are even with images disabled.

Digital Web Magazine’s Newsletter

Designed by Mark Wyner, this email even uses a clever image replacement technique to display a text alternative when images aren’t enabled. It looks great and is easy to read in either state.

Digital Web's newsletter with images turned off
Digital Web Magazine’s Newsletter without images

Digital Web's newsletter with images turned on
Ta Da! The same newsletter with images turned on

River City Church Newsletter

Designed by Jon Livingston, this email looks great with images enabled, but the large, clear title in the header still makes it recognizable to those with images turned off.

River City Church mail with images on
River City Church newsletter with images on

River City Church with images off
River City Church newsletter with images off

Remember that almost half of your recipients may be using a small preview pane to decide if your email’s really worth checking out. Preview panes allow your recipients to check out a sample of your email before they decide to open it and read the whole thing. Some of your recipients will even read all their email in the preview pane and will never completely open it.

Historically, preview panes have been popular among traditional email clients like Outlook and AOL. That’s all about to change with the two most recent betas of the new Yahoo! Mail and Windows Live Mail (Hotmail) both sporting a split-screen preview layout.

So how does this sudden loss in screen real estate impact your design? We’ve all got busy inboxes and if you’re like me, you’re pretty trigger happy with the delete key. If your design doesn’t grab your recipient’s attention with relevant and interesting content within a second or two, it probably doesn’t stand a chance.

Each email environment dedicates different screen real estate to their preview panes, but no matter what your recipient is using, try to ensure the following:

  1. Include something that will identify you and even attract interest at the very top of the email and preferably to the left. This could be a summary of the email content or at the very least the name of your company/organization.
  2. Check out your reports after each email you send to see what people are most interested in - try to make that visible in the preview pane for the next email.
  3. Make sure this content is text-based so it will be viewable by all recipients by default.

CSS or tables for layout?

Ahhh… the age old question. Unfortunately, the answer is still ‘it depends’. Contrary to popular belief, fully-semantic CSS based emails are not only possible, but widely supported in the majority of email environments. Even better, if you code your CSS correctly, your email can fall back to a perfectly usable rich text email for those with poor CSS support.

Today, deciding on whether to play the CSS card or fall back to tables and inline CSS is a lot like the days when you had to decide if you wanted to support Netscape. Some clients will demand it, while others realize that it’s time to move forward.

If you’re unlucky and the CEO uses Lotus Notes but wants your design to look consistent for everyone, tables and inline styles it is. If you can explain to your client just how broken some email clients are, and that your design will be accessible by everyone but will degrade to a simple layout for some, CSS is an option.

At Campaign Monitor we’ve tested CSS support across every popular email environment out there, so if you’re interested in which CSS selectors and properties are supported, it might be worth a peek. Your clients’ preferences aside though, it’s impossible to know what email environment your recipients will be using. Ultimately, to decide on CSS or tables you’re going to need to make some assumptions.

If you’re sending a Business to Business email, it’s safe to assume that most of your recipients will be using Outlook (around 75%) or Lotus Notes (9%). Outlook’s CSS support is top-notch, but Lotus is just plain dismal. That one’s your call.

If you’re doing the Business to Consumer thing, you’re probably looking at Yahoo!, Hotmail and AOL. If you’re targeting early adopters, you should also consider Gmail (although be warned, Gmail is not as popular as you think it is and is still only hovering at less than 5% of the web-based email market).

To make things easier, here’s a quick summary of which popular email clients support the CSS approach, and which ones rely on tables and inline CSS to display your message as intended.

Email client What you should use
Yahoo! Mail CSS
Hotmail CSS*
Gmail Tables and inline CSS
Outlook and Outlook Express CSS
Lotus Notes Tables and inline CSS
Thunderbird CSS
Mac Mail CSS
Entourage CSS
Eudora for the Mac Tables and well, no CSS

* Hotmail has one big gripe - make sure you include your <style> element in the <body> and not the <head> or it will be stripped completely.

I want to reiterate this point because I think it’s so important. Don’t be ashamed if you’re forced to go down the tables and inline styles path. As I mentioned before, email clients today range from perfect CSS support to almost none. If your client demands design consistency for all recipients, you really don’t have any other option.

Five Things to Avoid

Whether you use CSS for your layout or not, there are a few other big no-no’s.

  1. Include the <style> element in your HTML file, don’t reference it externally. Some providers will strip it altogether, while others won’t use it if images are disabled. If you’re sending to Hotmail recipients, place the <style> element in the <body> and not the <head>.
  2. Avoid using CSS for positioning. The support is very limited and will more than likely result in a broken layout for most of your recipients.
  3. Don’t use Flash or JavaScript. Flash is poorly supported by most email environments and JavaScript will either get stripped or a security warning will be displayed to your recipients.
  4. Make sure you properly format your HTML and CSS. Leaving a tag open or overly messy HTML may result in your email being filtered as spam.
  5. If you’re targeting Gmail, make sure you do your CSS inline, the <style> element will be removed completely.

Don’t forget to test

No-one launches a new site without checking it in a few browsers first and the same applies with your email designs. If you’re sending a lot of HTML emails, you should try to test each new design in the following environments before sending:

The only one you’ll need to pay for out of all of the above is AOL, but they have very cheap plans perfect for testing for around $5.95 a month. Also, you can always send it to a friend and get them to test it for you.

Don’t forget though, once you get your email right, you can generally re-use your template design and just add new content, so you’ll only need to re-test occasionally.

Essential content

On top of getting your design and code right, there are a number of items that you must include in your email content. We’re not mucking around here, these are protected by law (at least in the US) and can land you in a whole heap of trouble if they’re not included.

The Must-Haves

  1. A working unsubscribe mechanism. You want to make it as easy as possible for your recipient to stop hearing from you. I recommend a single-click unsubscribe link.
  2. Your company name and physical address.

The Should-Haves

  1. A link to a web-based version so those having trouble viewing your email can check it out in their browser.
  2. A quick summary of how you got your recipient’s email address (they opted in from your site, they bought a product from you, etc).
  3. Your recipient’s email address, so they can verify that the email was specifically sent to them.
  4. A request to be added to your recipient’s address book to ensure images will be displayed by default.
  5. A text-only version of your email. Some of your recipients may set their email client to only show the text version of each email, so make sure send your email in multi-part format, which includes both the HTML and text-only version in a single email.

By following the guidelines mentioned above, you can ensure the best email experience for your recipients and hopefully the best results for your client. logo Like this article? Digg it!

Related posts:

Add your comment 1 Comments

Post your message and we'll contact you immediately.
Thank you for your desire to work with us.

Please, fill out the required fields!