A Designer's Guide to HTML Email

Notice: This is a discussion thread for comments about the SitePoint article, A Designer’s Guide to HTML Email.


I see you use white text over a background image with the text color set with css.

If the background image is blocked, isn’t the css color still going to hold up (although the positioning may not) leaving white text on a white background?

In our testing, as long as you kept the background-image declaration separate from the background-color, you were ok - i.e. no shortcut declarations. Gmail certainly strips ‘background-image’ and ‘background’ every time.

The other thing I picked up is GMail always strips any negative margin setting.

At SitePoint, we still see thousands of new subscribers to our newsletters every single month. And those subscribers still always choose HTML over plain text at a rate of 15-20 to 1.

Wow ! I never would have guessed that.

Is this just new subscribers in a situation where HTML is the default selection ?
Are there any numbers showing the trend of subscribers behavior over time, – i.e. are people switching to text-based later ?

The subscription process has HTML and text on a radio button with HTML the default, so there is some bias built in there. However the switch over to text can be done with a single click, but is still rarely used.

There’s been a slight variation in the numbers between newsletters – the DV is more ‘graphicy’ and sits at around 18:1 HTML to text. The Tech Times is closer to 14:1 last time I checked.

There’s been no significant change in those ratios over time.

Thanks Alex.
Man, that just blows my mind.

It’s a shame that Gmail and the others have started blocking background images, though I can understand why they would want to.
I could pick safe words out of a message and leave them as text, then take the words like Viagra/etc and place them in an image, then overlay the text with positioning to make the real message appear like in an Indiana Jones movie or something.

Quit being elitist. The solution to HTML email is HTML 3.0 sans CSS.

In other words - USE TABLES. Declare colors in the HTML itself the way it was done before CSS was ever thought of.

Thanks for this article. I had to design an HTML e-mail, and you posted this the same day I needed to start the project. It helped SO MUCH and the e-mail came out looking great.

Great article. However, it needs to cover guidelines that ensure the HTML email won’t fall apart if the user forwards it to a friend. I can say from experience that with most HTML emails the formatting is lost is the compose page.