There are a plethora of factors that you need to consider when designing HTML emails that actually do their job – get to the recipient and get the message across. The list below is by no means exhaustive but it should put you in good stead.

1. Size Matters

You’ve designed your HTML content, previewed it in your favourite web browser and it looks fantastic. Well, sorry to burst your bubble. The truth is, most of us read our emails in preview panes and windows half or a quarter of the size of a normal web page. Designing a HTML email for a 1024×768 window will not display well in most email clients.

As a rule of thumb I try to keep the width of the template as narrow as possible without spoiling the look of the email. Most email preview panes are scrollable which means that the height is less of an issue.

Tip: Keep the width of your template quite narrow.
Trick: Center your content so it looks fine in both wide and narrow readers.

2. Pretend it’s 1998 – Tables Rule, CSS Positioning is Gibberish!

For all you CSS lovers and web designers out there, I’m sure that you’ll agree that it hurts when you are forced to regress into old standards and markup. Well unfortunately, when designing HTML emails you have to do exactly that.

Firstly, you should have seen that attaching a CSS document isn’t possible. Why don’t you stick it in the document head tags, I hear you say. Well, this does work – sometimes. We can use CSS to style the content of the page, however it must be put inline if it is to work properly in email clients. This makes most web designers shudder at the thought but if you want your styling to be displayed in all the different email clients this is the only way to go. And yes, it does mean repeating that styling for your page links!



Ugly, but it works


CSS positioning is a big no no when designing for HTML emails. You have to imagine you’re designing for Internet Explorer 5 – imbrace those sloppy, untidy tables. It will save you heaps of headaches in the long run. Having your divs display differently in 10 email clients is a problem we can all do without.

Tip: Use tables to define your layout.
Trick: Use CSS to style inline, not on a stylesheet or in the header.

3. Image to Text Ratio

Too many images compared to the amount of text is quite hazardous. Spam filters tend to flag image heavy emails. It seems natural to create a flyer style image and then send that as an email. Without any text, it is more likely that the email will be rejected by SPAM filters.

A lot of email clients deactivate images as standard. An email with just one image ‘e-flyer’ would get no message across in these cases.

Tip: Use small images and avoid filling the email with an image e-flyer.
Trick: If you don’t have much text to fill the email with don’t use more than one or two images.

4. Don’t rely on images to get your message across.

As already said most email clients don’t necessarily display the images by default. Gmail, yahoo, and the like de-activate images as standard. It’s not only until the user clicks ‘activate images’ that they will get displayed.

This means that if you use images to display text then your message will not get across. Additionally, if the layout of your email relys too heavily on images then it may look silly when they are de-activated. To test how your email looks without images use the Web Developer add-on for Firefox and select de-activate images. If it doesn’t make sense without the images you need a re-design.

Tip: Don’t rely on images to get the message across.
Trick: Test the HTML with images deactivated to see how it would appear without images.

5. Use the image “alt” tag to good effect.

If you’re images aren’t necessarily going to get displayed using the alt tag is essential. This will be the text displayed instead of the image. To take it a step further, you can even style this text by using the style settings for font and background within the image tags. For example,

will display

when the image myimage.jpg is not displayed.

Tip: Always use the alt tag within images.
Trick: Use the style element to manipulate how alt text and background is displayed when images are deactivated.