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.
The Apple HTML email I received with images turned off
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:
- Don’t use images for important content like calls to action, headlines and links to your web site.
- 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. - 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.
- Use alt text for any images (which will be viewable in some email environments, especially Gmail).
- 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 Magazine’s Newsletter without images
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 newsletter with images on
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:
- 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. - 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. - 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 |
| AOL 9 | 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.
- 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>. - 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. - 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.
- 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. - 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:
- Web – Hotmail, Yahoo! Mail and Gmail
- PC – Outlook, AOL 9, Thunderbird and Lotus Notes
- Mac – Mac Mail, Entourage and Eudora
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
- 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. - Your company name and physical address.
The Should-Haves
- A link to a web-based version so those having trouble viewing your email can check it out in their browser.
- 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). - Your recipient’s email address, so they can verify that the email was specifically sent to them.
- A request to be added to your recipient’s address book to ensure images will be displayed by default.
- 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.