We talk to Ryan Doe our guru in creating html for email campaigns (and all round nice guy), about the issues marketers face in creating html for email marketing campaigns.

In this first post, Ryan will look at some of the things to avoid when creating html emails. (In a follow-up post, Ryan will also take us through some good practices).

 

So, why are we having this conversation in the first place Ryan?

When creating a HTML email there are a number of points to consider. Not only must you contend with spam filters that are becoming tighter by the day, you also need to contend with the lack of standards with regard to support for HTML across 100’s of different email clients.

 

That sucks, what email clients are we talking about here?

Fortunately most people use only a few email clients whether they be desktop email clients such as Outlook or Thunderbird, or web based clients such as Gmail, YahooMail and AOL. The site, http://fingerprintapp.com/email-client-stats, provides statistics on email client usage both on a business user level and a consumer usage level and as you can see, there are only a few major clients that feature.

 

Ok, so what do we need to avoid?

We start here with what we need to avoid, as these are pretty important and can be the most frustrating part about designing HTML email.

Number 1 – Don’t use background images in your email.

With the introduction of Outlook 2007 as well as a number of web based clients, support for background images has been removed. If you know that your contacts are only using clients that can render background images then go for it, but as a general rule don’t use background images (using CSS to call background images won’t work either.)

 

In this example – how the email and background image should look like:

 

 

This is how the same email looks in Outlook 2007 (Oops!):

Number 2 - Don’t use externally linked CSS.

Again some clients will be able to render the external CSS, however most web based clients will either strip out the external CSS link or ignore it.

 

Here is an example of how the externally linked CSS should display normally:

 

 

However, this is how the same message appears in Outlook 2007:

And how it appears in Gmail (Araghhh!)

On a similar note it is generally not a good idea to use CSS defined in the header of your HTML either, as this can also be stripped out or ignored by web based email clients.

 

Ok, so what else can’t we do?

Number 3 – Don’t use a single image for your entire message.

Spam filters are wise to this trick and on top of that, your message size could end up quite large.

 

Number 4 – Don’t design your HTML email like it’s a web page.

Web browsers are much more sophisticated than email clients when it comes to rendering HTML. If you use DIV tags to define the layout of your HTML email message don’t be surprised if the layout is completely broken when received.

 

So there you have it – all good practices when designing for the web, but provide major issues for email.

In a follow-up post, Ryan will take us through some good practices, when designing your html emails.