Email Design Guidelines for 2006

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 Yes Yes No No No Yes Yes No
User controls image-blocking settings Yes No Yes Yes Yes Yes Yes Yes
User clicks link to enable message's images Yes Yes Yes No No Yes Yes N/A
Images enabled if sender is in user's address book/buddy list Yes No Yes No Yes Yes Yes Yes
Images autoenabled if sender is on ISP whitelist Yes N/A Yes No N/A N/A N/A N/A
Alt tags displayed when images disabled No Yes No No No No No N/A
Preview window featured included No No No No Yes Yes Yes Yes
 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.

The Apple email with images disabled - click to see a bigger version The Apple email with images enabled - click to see a bigger version

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

The Webnames email with images disabled - click to see a bigger version The Webnames email with images enabled - click to see a bigger version

VIEW News

The VIEW News email with images disabled - click to see a bigger version The VIEW News email with images enabled - click to see a bigger version

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.

Horizontal preview pane - click to see a bigger version Vertical preview pane - click to see a bigger version

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.

Posted by David Greiner

16 Comments

  • ThomFlash
    21st December

    I always recommend users be given the option to receive HTML or Text-only emails. HTML is always the clear winner.

    As a reader, I may glance at a text-only message and be drawn in for more. This is a very business-like approach that works well for follow-up, confirmation, or critical messaging from a company to its consituents. Conversely, all HTML messages are too easily pitched; the right-click-for-images is less than a second away, but without engagement your subject really has to sell and the sender must be relevant. The best blend is text that is legible within HTML formatting that can be electively turned on. This provides the best chance to engage the user and sell the next step: view the images or click straight through.

    With regard to tracking, real marketers (not SPAMers) use these techniques to see what’s working. Sure we’re here to help promote a product, but that’s what drives our business. The true “burn rate” in email marketing is opt-outs, so we owe it to our clients (and more importantly those on their contact list) to send salient messages that provide value and maintain a relationship. Tracking user performance is more than building a better mousetrap, for those doing it right it’s about building a better relationship.

    Long live choice, trust, and respect for others onliine! - ThomFlash

  • Joel Fisher
    4th January

    What about support for PNGs?

    Is there a breakdown of the e-mail clients that do not support PNGs (like IE6) without a hack?

  • Dan
    5th June

    We have a subscription base of mostly Lotus Notes users - does anyone have any tips or tricks for delivery via Campaign Monitor to these users?

  • Dave Greiner
    6th June

    Dan, we’ve tested what CSS does and doesn’t work in Lotus Notes here if you’re interested. Plus, our free templates have been tested in Notes and render pretty well.

  • Jose L. Javier
    22nd August

    Very good article.

    As a graphic designer, HTML is the norm. It’s just natural to pay more attention to a nice looking 400x250 e-mailer than read a full page of text.

    Haven said that, there must be a balance between graphics and text, and that applies to both web and print. Unless you are a lawyer, the tendency is to avoid lengthy text… then againg my girlfriend loves to read a lot.

    Anyone who straight up says that only one or the other method must be used, it’s just being naive. Caf or Decaf people?  It’s always good to choices.

  • Sandra-cl
    19th September

    <a></a>

  • Sandra-qt
    19th September

    <a></a>

  • dota
    27th September

    http://index11.xesasyj.cn

  • Online
    27th September

    Thanks for your article!
    It is very useful for me, keep update.

  • dota
    27th September

    http://index12.hukigyk.cn

  • dota
    27th September

    http://index11.licalek.cn

  • dota
    27th September

    http://index11.vumigin.cn

  • oxy
    6th December

    This guide was great for me as I am a beginning email designer.
    Thanks

  • Jonathan D
    30th April

    I appreciate your guide, but at the end of the day we are still faced with the question ‘how much are we going to push it?’ Thats something we must answer for ourselves.

    Personally l like the idea of pushing it a little, of letting a few things break (in a controlled way)... that way we’re not saying to Microsoft or Gmail ‘hey, we’re getting along fine, but you know it would be nice if you…’, but rather, ‘hey, this is broken right now. You aren’t performing as well as the others. Word gets round… how else would you explain Firefox’s staggering piece of the pie?’

    As a reader-of-emails, and I know this is influenced by my design background, but if the e-mail isn’t graphic, I figure they didn’t put energy into it, and I’m less likely to read it. It’s that simple. If “ooh shiny” isn’t a compelling factor than Macintosh wouldn’t exist.

  • Rules
    7th June

    Great article! I definitely recommend the “if you are having toruble” link at the top of any HTML email you send out! It guarantees an opportunity for the viewer to see the campaign as it was meant to be seen.

    Realy thanks - good job!

  • Craxa
    27th June

    I’m gonna present my designs soon. thx for inspiration ;-)

Sign up for free.
Then send campaigns for as little as $9/month

Create an account