Some people love HTML email and some people hate it. Some love the simplicity of text-only emails, while others praise the flexibility and good looks of HTML. Should we use CSS or tables? And what do we do when images are “blocked”?

Most of us think that if we can design a web page, then we should have no problem in designing HTML email. Well… almost. 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

Any of your recipients who use AOL, Outlook 2003/2007, 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.

Here’s an example of just how ugly things can get. This is an email I received from Apple.

The Apple HTML email I received with images turned off

The same email from Apple with the image 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:

1. Don’t use images for important content like calls to action, headlines and links to your web site
2. 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
3. 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
4. Use alt text for any images (which will be viewable in some email environments, especially Gmail)
5. 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 examples of emails that have been designed with these guidelines in mind. Notice how readable they are even with images disabled.

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

By following the guidelines mentioned above, you can ensure the best email experience for your recipients and hopefully the best results for your client.