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:

**         


        

Answer 1

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.