Blog

Check out the updated 2008 email design guidelines

As 2005 draws to a close, I thought I'd take the opportunity to outline what I think are some of the key email design trends and guidelines that we should all be paying attention to now and into the new year.

This certainly isn't an exhaustive list, but to me these are the key issues that seem to be overlooked in most of the emails I receive and a great deal that are sent through Campaign Monitor.

We're all busy people, so here's a summary of what you should be doing to meet each of the guidelines.

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

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.

If you've got any thoughts on what issues you think will be important in email design over the next 12 months, then I'd love to hear your thoughts.