CODEWITHSUNDEEP
htmlcssemail
Atlas
Atlas

Reputation: 1363

HTML Email using CSS

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?

Upvotes: 2

Views: 1476

Answers (6)

John M
John M

Reputation: 59

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".

Upvotes: 1

idrumgood
idrumgood

Reputation: 4924

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.

Upvotes: 1

shawnr
shawnr

Reputation: 883

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.

Upvotes: 4

ceejayoz
ceejayoz

Reputation: 179994

Resources that may be of use to you:

Upvotes: 4

Matthew Vines
Matthew Vines

Reputation: 27561

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.

Upvotes: 1

Paolo Bergantino
Paolo Bergantino

Reputation: 488344

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.

Upvotes: 17

Related Questions