Digital Rubbish

Building HTML emails is probably more complicated than building normal web sites. You not only have to consider cross-browser issues, but also have to worry about all the different desktop and web email clients out there and how they handle html emails.

Looking at most of the major email clients that are in use today, I tested to see how these clients display an email that is built and laid out using only CSS and HTML (no table layouts).

The email template that will be tested is based on a Pages newsletter template. It uses background images, border styles, multi-column layout, and overlapping images, which make for a fairly complex html layout. In addition to including the CSS styles within the head tags, I also added some inline styles to position the columns to test whether these clients support inline styles (if they strip out the style tags). With this example, I’ll be able to examine which elements are usable when building designs for use in emails.

Eudora 6.2

Eudora ignores all CSS styles even when it retains the stylesheet in the message body.

Gmail

Gmail strips out the style tags and everything in it. Inline CSS styles still work but background images and colors are stripped out.

Hotmail

Hotmail used to support CSS styles that are embedded within the body tag, but it seems now that it strips out the style tags and everything inside, just like Gmail. And just like Gmail, inline CSS styles still work except for background images and colors.

Yahoo! Mail

Yahoo Mail seems to support most of the CSS styles being used in the template except for negative margins, which might not be such a bad thing. As long as there are no overlapping images or blocks, Yahoo! Mail should display CSS/HTML message properly.

Apple Mail

Apple mail supports CSS layout and looks almost exactly as the template would look under a web browser.

Thunderbird 2.0

As with Apple Mail, Thunderbird displays html email messages as a browser would display them. There were no problems that occurred when viewing the template on Thunderbird.

Outlook 6

Since Outlook 6 is rendered by the IE6 engine it suffers from the same faults and glitches. It also seems that Outlook 6 has some trouble rendering margins properly. Notice the left margin of the content butting up against the side of the sidebar.

* PNG transparency support may also depend on whether the web browser you are using supports this feature.