We talk to Ryan Doe our HTML email guru (and all-round decent bloke,) about some of the issues that HTML email designers face when creating HTML email for newsletters and marketing campaigns.
In this article, Ryan explains what to avoid when creating HTML email.
So, why are we even taking the time to discuss this in the first place Ryan? Isn’t all HTML the same?
When creating a HTML email, there are a number of things to consider. Not only must you contend with spam filters scrutinizing your HTML design, you also need to deal with the lack of HTML email standards and support for across 100’s of different email clients.
Bummer. 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, Yahoo or Hotmail. The site, //emailclientmarketshare.com/, provides statistics on email client usage both on a business user level and a residential-consumer usage. You will find that there are only a few major email clients that stand out.
Okay, so what are some things that we need to do when designing an HTML email for a newsletter?
Let’s start with some things that we need to avoid, because they are very important and can be the most frustrating part about designing HTML email if overlooked.
Number 1 – Don’t use background images in your HTML email.
With the introduction of Outlook 2007 and a number of web-based email clients, support for background images has basically been removed. If you know that your contacts are only using email clients that still render background images, then go for it; but as a general rule, avoid using background images (using CSS to call background images does not work either.)
In the example below, we see how the email and background image should look.
Below, we see how the same email looks in Outlook 2007 (Oops!):
Number 2 – Do not use externally linked CSS.
Again, some email clients still might be able to render the external CSS; but most web-based clients will either strip out the external CSS link or choose to ignore it.
Below is an example that shows how the externally linked CSS should display.
However, the next image shows how the same message appears in Outlook 2007:
And here is 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 email either, as this can also be stripped out or ignored by web based email clients.
Okay, so what else should we avoid when designing HTML email?
Number 3 – Do not use a single image for your entire message.
Antispam filters are wise to this trick and on top of that, your message size could end up quite large by doing this.
Number 4 – Do not 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, do not be surprised if the layout is completely broken when it arrives to your recipients.
So there you have it – all of these things might be part of good HTML design practice when coding for your website, but they can potentially cause problems in email client environments.
In a follow-up post, Ryan will share some HTML email design best practices.
Interested? Our GroupMail newsletter software has all of the HTML email design tools that you need to create stylish and effective HTML email.