HTML Email using CSS

Question

I'm trying to build an HTML email using DIVs instead of tables, and I'm quite new to CSS.

What I'm trying to achieve would look something like:

*******************   XXXXXXXXXXXX   XXXXXXXXXXX
*   image here    *   XXXXXXXXXXXX   XXXXXXXXXXX
*******************   XXXXXXXXXXXX   XXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

X = Some Text

1 image + 5 lines of text

Any ideas?

Answer 1

Emails is one of those places where whatever notion you have of good practices for layout should be thrown out the window. Many, many email providers filter out any CSS rules you throw in, so the best thing to do if you absolutely want a "complicated" layout in your email is to stick to old school tables, as they will bring you the closest to your emails being delivered properly to all your users.

Answer 2

CSS support in email clients is not very standardized. It's generally accepted to use html 4 attributes in lieu of CSS for your HTML emails.

Answer 3

Resources that may be of use to you:

• The Email Standards Project (includes a list of clients and their supported/unsupported features - Gmail and Outlook 2007 are likely to be the nasty ones)
• Campaign Monitor's resources page (has a nice CSS support matrix)
• Campaign Monitor's automatic e-mail tester (paid service)

Answer 4

Well-designed emails are super tricky. In general, you can assume that email clients will not pull in externally linked CSS files (or at least not properly) and that they will perform some manipulation of your HTML (usually just attributes and adding in some extra markup). But this is not a place to uphold the best of all practices, and certainly nowhere to "learn" about good markup or CSS design.

In general, HTML emails follow the worst rules of web design. The two big things to keep in mind are:

1. Use HTML tables for complex layout (anything with columns)
2. Use inline CSS styles (even embedded CSS styles -- those put in the head of the document -- may not be rendered correctly in most email clients)

It is also a good idea to push your clients to abandon the fancy email newsletter in favor of a well-designed text-only email that is more accessible on a wider variety of platforms. Cite the rise of mobile devices used for email access as a major reason to do so, although the benefits for the end-user are far reaching.

This SitePoint article sums up the approach pretty well.

Answer 5

As an employee for a large ad agency who does a LOT of html emails for big name clients, I will say that they are messy!

Use nested tables for layout. I even use white (or the email background color) 1x1 pixel spacer images for almost all gaps and stuff (as padding and margins won't always work correctly.)

Like some people have said before, inline styles are the only ones you can count on, but even with those, 'background-image' will get ignored alot.

As long as the client hasn't requested any sort of dynamic text, I use images for most of my text as well, to avoid any font or sizing problems.

Hell, if you can, just cut the thing into a few big images and send it out.

Answer 6

Everyones response has been great. Campaign Monitor along with http://www.email-standards.org are the best resources out their right now.

However, what I was told by a fellow developer when making my first html email - "code like its 1997".