If you think that because you know how to code a web page, an HTML email should be “no trouble”, then think again. There are lots of considerations that you need to take into account to get your HTML email to render correctly across the numerous email and web mail clients.

Email width

One of the first things you should consider before starting to build your email, is how wide to make it. It's a general consensus that the width should be around the 550px – 600px mark. It's never a good idea to go over 600px. Unlike a web browser whereby the majority of users view pages full screen, typically emails are viewed in a floating window. Even web mail clients such as Gmail or Hotmail have restrictions on the viewable width of your email content, due to strategically placed adverts, menu bars or the like. For this reason, if you make your email wider than 600px it will most likely end up scrolling horizontally, which is never a good thing.

CSS Vs Tables Vs Inline styles

If you thought browser standards were bad, you'll definitely hate HTML emails. Unfortunately, when it comes to HTML emails, tables rule. Most email clients won't render your beautifully laid out, CSS compliant email correctly. Some email clients strip out any CSS from the head of your email but leave any CSS defined in the body, which in a “normal” web page would be extremely bad coding. Other email clients will strip out any CSS within the head and within the body. The best way to consistently render your email correctly across the majority of email clients is by using the humble table.

Since there are numerous email clients that strip out your CSS properties, it's also recommended to use Inline Styles. There are certain email delivery systems, such as Campaign Monitor that have an option when building up your email campaign, to automatically insert Inline Styles within your HTML. If you haven't done it manually when developing the HTML for your email, you should check with your email delivery system as to whether they have this facility.

Unfortunately, unlike most technologies where things improve over time, email clients seem to have gone backward. Take Microsoft Outlook for example. In previous versions of Outlook (pre Office 2007), the Internet Explorer Rendering Engine was used to display the email content. Although not perfect, as every developer will tell you, it did the job. With Office 2007, Microsoft in their infinite wisdom have decided to change Outlook to use the MS Word rendering engine. If you thought IE6 was bad, wait till you start using this version of Outlook! This ridiculous decision has caused a significant amount of anger from Outlook users.

The problem with using the MS Word Rendering Engine for Outlook 2007 is that CSS Styles that were acceptable previously, no longer work. Even styles such as background-image and background-repeat are no longer available. In the past for example, you might have used a small 5px wide image and the background-repeat style to fill a table cell. In outlook 2007, this no longer works. Nor can you have a simple background image. There are more than 2 dozen styles which work with Outlook 2003 but are no longer accepted by Outlook 2007. The guys at Campaign Monitor have compiled a fantastic table outlining 21 different email clients and the CSS Styles that will and won't work.

Image Blocking

In quite a few email and web mail clients, users will not automatically see any images that are included with your email. Your readers will need to click a link or button to download the images. This can cause all sorts of havoc with your email layout if you're not prepared. Even though your reader can “turn on” images or download them, there are a great number of readers who won't, or simply don't know how.

Some of the improvements you can make to your email to help with this situation include:

Never use images for important content such as headers or links
Add Width and Height to images so that the blank placeholder image doesn't distort your layout
Provide Alt text. Although not displayed by all email clients, they are displayed by some
Provide a link to a web based version of your email

Plain Text Version

It's a very good idea to always include a plain text version of your email. Not everyone chooses to receive their emails in HTML format. Also, with the wide proliferation of internet enabled mobile devices, more and more people are using their devices to send and receive emails. Quite often, depending on the device, reading text based emails on these smaller devices is a lot easier. The text based email will also render considerably quicker, which can benefit users who aren't on high-speed 3g or HSDPA enabled networks.

Spam

I really shouldn't need to say much here. For starters though, you should be aware of the US CAN-SPAM act. This act outlines 3 basic types of compliance; Unsubscribe, Content and Sending Behaviour compliance.

Unsubscribe compliance

A visible and operable unsubscribe mechanism is present in all emails
Consumer opt-out requests are honored within 10 days

Content compliance

Accurate from lines (including “friendly froms”)
Relevant subject lines (relative to offer in body content and not deceptive)
A legitimate physical address of the publisher and/or advertiser is present

Sending behavior compliance

A message cannot be sent through an open relay
A message cannot be sent to a harvested email address
A message cannot contain a false header

Make sure you always get the recipients permission before adding them into your email list. Just because you've browsed to their website and they happen to have their email address displayed, doesn't mean that they're interested in receiving your emails. If you normally add clients to your mailing list after performing work for them, make sure they are aware of these conditions and also provide an option for them to “opt-out”.

Test, Test & Retest

Like any sort of development, the key is to test, test & retest. One of the easiest ways is to use an online testing facility that automatically tests your email across the various email clients. The alternative is to create an account with as many web mail clients as possible such as Gmail, Yahoo mail, Hotmail etc. Also, try to install or at least get access to, various client based applications such as Outlook 2003, Outlook 2007, Notes, Thunderbird etc.. Obviously, the more mail clients you can test against, the better.

Do you have any tips or recommendations that I haven't covered here? Leave a comment and let me know.