Blog

News, tips and all things Campaign Monitor

2008 Email Design Guidelines

Posted by Mathew Patterson on May 21, 2008

As web designers, we’ve grown pretty good at understanding how to create a modern, semantic, accessible website using XHTML and CSS. We understand what makes a good website, and how to make it happen.

When it comes time to design emails though, do all the same rules apply? Are there things we should be doing specifically for email that don’t make sense on a website? In this article we’ll discuss the technical, design and information elements that make up a successful HTML email.

The quick and dirty guidelines

If you want to dive right in and just need some direction, here’s the outline:

• Don’t waste your readers’ time — An email inbox is a busy place, you won’t get much attention.
• Permission matters — Not only do you need to have permission to email people, but it helps to remind them of how they gave you permission, as specifically as you can.
• Relevance trumps permission — Just having permission is not enough, the content you are sending must also be relevant.
• Make unsubscribing easy — There’s no point emailing people who are not interested.
• Image blocking is common — You can’t rely on people actually seeing your images.
• Bring back tables — Structural tables are still often necessary for creating columns.
• Add inline styles — Gmail removes anything else.
• Don’t forget your plain text version — You can make blocks of text more readable.
• Meet your legal obligations — For example, CAN-SPAM for US senders.
• Test, test, test — It’s the only way to be confident about your design working.

It’s 2008: What’s changed?

If you’ve seen our earlier guidelines, you’ll notice this years are quite similar. It’s certainly true that support for XHTML and CSS in email clients has not seen big improvements since our last review of email design.

However, through the work we've been doing with the Email Standards Project we’re hoping to see some changes soon. This last year has also seen a push by ISPs and email providers to consider relevance as key part of defining spam, which will impact on the kind of content you should send.

For the rest of 2008, mobile email will continue to grow in importance, and that too will affect the design and content of your emails. Your message to someone who is on the move might be designed quite differently than for someone behind a 24” monitor.

The final element making up the 2008 email environment is the continuing focus on ‘information overload’ and the struggles people have dealing with overflowing email inboxes. If you want your emails to get delivered and actually be read, you need more than ever to make sure they are really valuable, as well as super easy to read and act on.

Use these guidelines to work with your clients and marketing teams to craft emails that your readers will really want to read, as well as ones which render reliably and are easily understood.

Don’t waste your readers’ time

An email inbox is a very noisy environment, with calendars, notes and folders all competing with the actual emails for space. Given that a reader may only ever see your subject line before deciding whether to read your email, you can’t afford to waste time.

Make sure that your emails show right away why they are worth reading. Consider starting with a succinct table of contents to help decide whether they should read on.

This is particularly important when you consider preview panes, which may only show the first few lines of your message. You might even be able to get your key point into your subject line.

Permission matters

There are many different laws that apply to commercial email in different locations. One rule that applies almost everywhere is that you absolutely must have permission to send people bulk email. In most cases, it also makes sense to remind people about how they gave you that permission.

Particularly if you don’t send emails very often, or the signup was for a competition (for example) people can forget that they actually asked to receive email. A short message at the top of your email can help people remember, and make them more likely to read on.

You can also use custom fields to personalize your permission reminder. If you have multiple sources of permission, be explicit. Don’t just say “your address was subscribed to our list” tell them why their address was subscribed to your list. Let them know where they signed up and how they can opt-out. This can go a long way towards reducing potential spam complaints.

Here's an example of a simple, contextual reminder that people gave their permission when visiting a trade show booth:

An Email Consumer Survey in late 2006 by Return Path showed that "knowing and trusting the sender" was the biggest influence on whether emails are opened, narrowly beating out "previously opened and thought valuable".

So consistently reminding your readers who you are, and why they should trust you can make a big difference to your open rate.

Relevance trumps permission

Even more than having permission, it is vital that you are sending valuable, relevant information to your subscribers. That means not sending information to everyone on your list just because you can. Consider carefully whether the information is both useful to them, and what they are expecting from you.

Find out more about how ISPs and email providers are making relevance a part of the definition of spam.

Make unsubscribing easy

There’s no point emailing people who are not interested in your content any more. If it is no longer relevant to them, let them just unsubscribe easily. Forcing people to play 'hunt the unsubscribe link' will only irritate them, and is likely to end up with spam complaints.

This is unfortunately a common approach to permission reminders and unsubscribe links. Much better to make it clear and prominent; that way if they do decide in the future they need the information you offer, they will have confidence in signing up again.

Sometimes your readers may not want to fully unsubscribe, but just update their email address or change their list of interests you store. That's when our preference center tag comes in handy. It gives your readers more control over what they receive and when.

Image blocking is common

In many of the major email clients, including Outlook, AOL and Gmail, your images will not be shown by default. Your readers will have to click another link or button to make them download and display. Your readers will initally see the email on the left below displayed as shown on the right.

So no matter how perfectly you choose your imagery, it may have no impact, or a negative impact on the success of your email. As you can see above, your email can appear totally empty, so never design an email using all images. Always ensure that you have copy available in your HTML part, as well as the plain text.

Of course, as many as 30% of your subscribers might not even realize they can choose to show images. An unknown percentage just won’t bother. So you can’t rely on people actually seeing your images at all. For the full run down on what the default settings are, check out current conditions in image blocking.

To ensure your emails still work even without the images showing, you can make a few simple improvements:

• 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 or whitelist.
• 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.

Bring back tables

As much as we all hate it the reality is that email standards have taken a giant leap backwards in recent years. While we can all work to increase email standards support it’s not going to be an overnight process.

So if you need to do anything more complex than a single column, you will find you need to use structural tables. Outlook 2007, for example, has little support for floats. A simple table will keep everything together…how very 1998!

Add inline styles

Some email clients will strip CSS out of the head, but leave it if the style block is (invalidly) in the body. Gmail goes further and will strip out all CSS from the head or body, except for inline styles.

So once you’ve completed your design, you will need to go through and add inline styles to your elements. Campaign Monitor has an automatic inline CSS tool built in which can save you a lot of time.

Don’t forget your plain text version

By the time you have fought your way through the endless incompatibilities of email client rendering you’re probably exhausted, so it can be hard work getting yourself excited about a well formatted text version.

However, although that shiny happy HTML version may be beautiful, not everyone can view HTML emails, or wants to. Blackberry users,for example, will mostly see your plain text version. We’ve made it easy for you by providing a quick start to your plain text version. With just the click of a link the text from your HTML email will be carried over to the plain text version.

Don’t stop there though. Make sure you review your plain text version. Although our import is pretty slick it’s not perfect. Your plain text version needs a human set of eyes on it to make sure the formatting is perfect and all the content you want to include is included.

Don’t forget to checkout our plain text templates and tips for more ways to make your plain text more effective.

Meet your legal obligations

Make sure you know about any specific commercial email regulations in your own country. The most well known of course are the US CAN-SPAM laws. To meet those requirements:

• Use double opt-in subscriber lists
• Process all unsubscribe requests within one week (Campaign Monitor does it instantly!)
• Use a legitimate from name and from email address
• Use accurate and descriptive subject headings
• Use a valid reply-to address that can function as an unsubscribe mechanism if required
• Always include the street address of you or your clients

Check with your own government department websites for rules which apply to you and your clients.

Test, test, test

This one can’t be emphasized enough. Every email client has different levels of standards support and most are going to display your campaign ever so slightly different. While reviewing the current email client standards is a great start, nothing is going to beat actually testing your campaign in as many clients as possible. The last thing you want is to have your beautiful creation horribly broken for a large percentage of your subscribers and for you to be completely unaware of it until the CEO starts shouting!

Use the Campaign Monitor design and spam testing tool to test your display in most major email clients and even different displays within the same clients (e.g. preview panes and images off).

Inspiration for great HTML email designs

There is plenty of great email design being done out in the world, so there is no shortage of creative inspiration. Sign up for the newsletters of companies in your industry, or your client's industry. See how other people are approaching it.

The Campaign Monitor gallery also showcases some beautiful, unique or remarkable email designs you can learn from, and perhaps adapt elements of in your own style and context. Don't forget we also have some solid structural templates you can take and use.

So that's the 2008 Email Design Guidelines. We're looking forward to seeing your great designs sent out with Campaign Monitor, and featuring some of them in the gallery!

22 comments so far

Search all posts

Dig into a category

• Articles/Tips (111)
• Email Newsletter Design (125)
• Happy Customers/Press (93)
• In the Forums (11)
• Interviews & Case Studies (9)
• New Features & Updates (113)
• Observations & Answers (101)

Stay in the loop

Prefer updates via email? Sign up below and we'll send you all the good bits each month.

Popular articles

Email design guidelines
Straight to the point advice for creating effective emails.

Why we need standards support in email
Read why standards in HTML email are so important, and what we're doing about it.

CSS support in email for 2008
The CSS support of even more popular email environments tested and recorded.

Image blocking in email
A roundup of how each of the popular email clients suppress images in HTML email.

Can I use flash in email?
We test flash support in all the popular email clients. The verdict - don't do it.

Email design gallery

Our email design gallery showcases more than 150 amazing email designs sent by our talented customers.