The Inconsistencies of Email Clients

I have been building email templates for some time now, and I am constantly surprised by the bewildering way that different email clients render the same HTML. What's even more frustrating is when a new version of an email client comes out, it seems to follow a completely different set of rendering rules to its predecessors.

When it comes to translating a beautiful design into an equally beautiful email template, there are a few things that you need to bear in mind in order to avoid tearing your hair out when it comes to the testing phase.

Two types of email client

There are two distinct types of email client: web-based and POP3/IMAP. Essentially, this is the difference between whether you access your email through a web interface, for example Gmail or Yahoo, or if your email is downloaded to your computer where you load it up in your favourite email application, for example Outlook.

Web-based email clients

As expected, web-based email clients render emails to a specification much more closely associated with web browsers. This is extremely helpful, as you can merrily code your email template in Firefox and expect it to look similar when viewed from your Hotmail account.

Of course, each client has it's own quirks, such as Yahoo's dislike for displaying a background-color associated with the body tag, or Hotmail's dislike for padded elements, but these are all things that can be worked around.

POP3 / IMAP email clients

Email applications, on the other hand, are slightly more tricky. They make up their own rules. Prior to Outlook 2007 being released, support for CSS had vastly improved and rendering of HTML emails was moving closer to that of browser rendering.

With the release of Outlook 2007, Microsoft took the strange decision to rely upon a far-inferior rendering engine in terms of CSS support and thus plunging us back to the 1990s. Of course with Outlook 2007 responsible for around 8% of all email users, it is imperative that this client is supported in the best way that we can.

And finally, Lotus Notes

Lotus Notes is the most popular email client within corporate environments, and it truly sucks when it comes to email rendering. Very rarely can this client achieve anywhere near what the original design looked like. That being said, if someone is using Lotus Notes as their only source of receiving pretty emails, then more fool them.

Don't get me wrong. It's not that Lotus Notes can't be supported, it's just that it takes an awful lot of effort to make an email look decent.

So, what are the tricks?

  • Tables, tables, tables. Remember those? Always use tables when building an HTML email. Div tags are almost universally unsupported as is the ability to float an element. Tables will become your new best friend.
  • HTML emails are old skool. Keep that in the back of your mind and you'll go far. Emails should be built under an HTML 4 Transitional doctype and should be validated.
  • Another thing to remember is that email clients will generally ignore any CSS styling on an element unless the styling is done inline. Yes, it's a pain if your customer decides that they want the text to be grey and not black, but coding inline CSS for emails is a fundamental technique if you want to ensure consistency.
  • Speakiing of CSS, always write your CSS long-hand. Certain email clients have a habit of ignoring short-hand definitions, so for consistency-sake, make sure you explicitly define all attributes on a CSS selector.
  • When defining colours in HEX, always always always use the full 6-digit HEX code. Email clients tend to have a habit of ignoring short codes.
  • I would stay away from using structural HTML elements like header tags, as email clients have a habit of removing all CSS (even if done inline) on these elements. Any other HTML elements that you choose to use should be reset on definition, so if you are using a <p> tag, don't forget to set the margin and padding explicitly.
  • The background-image property of an element is supported by around half of all email clients. If you are going to use background images, remember to provide a background-color fallback.
  • If you need to style single words, then use the <span> tag. It is an inline element and can be used not just for colouring elements or increasing the text size, but for positioning elements above or below content.
  • Never use the inline !important declaration. If you do, the styles will be ignored in Outlook 2007 and 2010. The !important will work fine when not used inline.
  • If you have images that have a smaller height than the standard table row, specify the height you require on both the image and the table cell declaration. You will also need to align the image to the left. This will force Outlook and Hotmail to use the correct height, thus eliminating the annoying gap issue.

Those little quirks

By following the guidelines above, you will go far, but there are still a couple of other client-specific quirks that you should be aware of.

  • Yahoo - if you put a background colour on the <body> tag, don't expect it to display. Instead, create a parent table with a width of 100% to surround your main table (which should be no wider than 600px) and put the background colour on either the table itself, or the table cell.
  • Yahoo - images will have a right margin of 3px applied to them. To fix this, explicitely state a margin-right of zero on the image tag.
  • Hotmail - images with links on have a 13px gap added to the bottom of the table cell. By aligning your image to the left, you will remove the gap.
  • Hotmail / Outlook 2007 - ignores padding on elements. If you can, try to use the cellpadding and cellspacing attributes of the <table> tag to create your layout. This is universally supported.
  • Hotmail / Gmail - adds a margin around images. Add img { display: block; } to the styling on your images, which will remove the margin.
  • Gmail - Randomly changes the colour of text to #888888. Fix this by removing <br> elements immediately before the affected text.
  • Yahoo - Changes the colour of links to blue. Either define a class of .yshortcuts a in the head of your HTML to have your preferred colour and then wrap a div with the class of yshortcuts around your body text, or surround every link with a <span> tag and define your preferred colour as an inline style.
  • Hotmail - Turning header tags green. To overwrite Hotmail's default green colour, explicitly define the colour of your header tag inline and append !important to it.