Email Design Guidelines for 2006

1. Never use images for important content like headlines, links and any calls to action.
2. Use alt text for all images for a better experience in Gmail and always add the height and width to the image to ensure that the blank placeholder image doesn’t throw your design out.
3. Add a text-based link to a web version of your design at the top of your email.
4. Ensure your most compelling content is at the top (and preferably to the left).
5. Test your design in a preview pane, full screen and with images turned on and off before you send it.
6. Ask your subscriber to add your From address to their address book at every opportunity.

If you’re interested in the reasons behind these tips and learning just how important they are, read on.

Guideline 1) Design for images being turned off

Here’s something you might not know. Today, anyone using AOL, Gmail,
Outlook 2003, Outlook Express and the latest versions of many ISPs
email software will never see images in any emails you send them by
default.

Now read that again so it really sinks in. For many of you, that can add up to more than half of everyone you ever send email to. But don’t take my word for it. Here’s a quick rundown of which major ISPs and email clients block your images:

Image Blocking by Major ISPs & Email Clients
Blocking Issue	AOL Versions 6.0-9.0	Gmail	Hotmail	Yahoo	Outlook 2000/XP	Outlook 2003	Outlook Express w/SP2	Outlook Express w/o SP2
External images are blocked by default
User controls image-blocking settings
User clicks link to enable message’s images								N/A
Images enabled if sender is in user’s address book/buddy list
Images autoenabled if sender is on ISP whitelist		N/A			N/A	N/A	N/A	N/A
Alt tags displayed when images disabled								N/A
Preview window featured included

Note: SP2 = Service Pack 2 upgrade for Windows XP

Source: EmailLabs

How ugly can things get?

When images are turned off, that design you worked so hard on can be
turned into an ugly mash of broken images and reformatted content.
Let’s take an example of how nasty this can get from a recent email I
received from Apple announcing the long awaited iTunes Australia Music
Store.

Just makes you want to dive in and buy a few albums doesn’t it! Now,
I’m sure when they were putting together the creative they got all
excited about their recipients seeing the version on the right, but how
many potential customers did they lose when many of their recipients
saw the version on the left?

Tips to minimize the damage

While the Apple example is at the extreme end of things, many of us
commit lesser but just as dangerous email design sins every day. Here
are a few tips to minimize the damage of your images not being
displayed:

• Never use images for important content like headlines, links and any calls to action.
• Add a text-based link to a web version of your design at the top of your email.
• Get added to your recipient’s address book (see guideline 3 below).
• Use alt text for all images for a better experience in Gmail.
• Always add the height and width to the image to ensure that the blank placeholder image doesn’t throw your design out.
• Test your design with images turned off before you send it.

Here are a couple of samples sent by Campaign Monitor customers of
email designs that are still very readable even with images disabled:

Webnames.ca Corporate Newsletter

VIEW News

You can see more examples of great email design in our design gallery.

Guideline 2) Allow for the preview pane

Today, up to half of your recipients could be using their email
client’s preview panes to decide if your email’s even worth checking
out. A preview pane shows a little vertical or horizontal snippet of
your email that is often no more than 2-4 inches in height or width.

While most web based email clients don’t use them yet, recent betas
of Yahoo! Mail and Hotmail indicate they will be soon. In the corporate
email scene, around 90% of email clients support preview panes.

Combine this with images being turned off by default and you quickly
see that what your recipient first sees is often completely different
to what you’re sending them.

Vertical or horizontal?

Around 75% of people who use preview panes go for the horizontal
version, while the remaining 25% prefer the vertical version. The
screenshots below show either option taken at 1024 x 768 resolution on
a PC running Outlook 2003 with images enabled.

At resolutions of 1024 x 768 or less, you really need to be diligent
in your design to ensure enough is shown to the recipient to encourage
them to check out the whole email.

Tips to minimize the damage

If you were hedging your bets, then you’d certainly be giving more
preference to the horizontal preview pane. In a perfect world though,
you’d be covering all bases by ensuring the best bits of your email
appear in the top-left corner and therefore in everyone’s preview pane.

To encourage preview pane users to open your email, you should:

• Review your click-tracking reports to identify what content most of your recipients are clicking on.
• Ensure this content is at the top (and preferably to the left) of your design.
• Make sure this content is text-based and can always be read.

Guideline 3) Get in your subscribers address book

There’s never been a more important time to ask your subscribers to
add your From address to their address book. AOL and Yahoo! allow your
recipients to filter emails from unknown senders. Plus, images are
displayed by default if you’re in the address book for all AOL and
Hotmail recipients as well as anyone using Outlook or Outlook Express.

Tips to minimize the damage

The efforts to get added to your recipient’s address book don’t
start and finish with a request in each email, you should ask the
question at every touch point possible. As an example, here’s our subscriber confirmation page.
All our newsletters are sent using the From address of
davidg@campaignmonitor.com, so once you ask people to add you to their
address book, make sure you use the same From address every time you send to them.

At a minimum, make sure this request is made:

• On the landing page after someone subscribes.
• If you send a confirmation email, mention it in there as well.
• In every email you send out.