tags:

views:

1413

answers:

12
+23  Q: 

What guidelines for HTML email design are there?

What guidelines can you give for rich HTML formatting in emails while maintaining good visual stability across many clients and web based email interfaces?

An unrelated answer on a question on Stack Overflow suggested:

http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

Which contains the following guidelines:

  1. Place stylesheet in <body> instead of <head>
    Some email clients will strip CSS out of the head, but leave it if the style block is (invalidly) in the body.
  2. Use inline styles where ever possible
    Gmail will strip any stylesheet, whether in the <head> or in the <body>, but honor inline styles assigned using the style="" attribute
  3. Return to tables
    Email standards have actually taken a giant step backwards in recent years thanks to Outlook 2007 using the Microsoft Word rendering engine. Unlearn most of what you learned about positioning without stylesheets.
  4. Don't rely on images
    Most clients and most web based email clients will not display images unless the user specifically requests them to be displayed.

I also have a few "unconfirmed" truths that I don't remember where I read them.

  1. Don't use more than two levels of nesting in tables
    Is this true. What is likely to happen if I do? Is there any particular client/clients that choke on this?
  2. Be careful of nesting background images in cells/tables
    As I understand you may encounter situations where the background image is applied in the descending table/cell completely anew, and not just "shining through". Again, true or not? Which clients?

I would like to flesh out this list with more guidelines and experiences from the trenches.

Can you offer any further suggestions?

Update: I'm specifially asking for guidelines for the design part in HTML and consistency there of. Questions about general guidelines for avoiding spam filters, and common courtesy are already on SO.

+8  A: 

Always use multipart mime and provide a plain text alternative.

JeeBee  2008-09-24 14:25:40
+1  A: 
  • Background images are not reliable.
  • Practically a no-brainer, but no javascript.
  • Use an editor that lets you send the current file/buffer as an email, or at the very least, find a program that would let you send the contents of a file as an HTML email. do not test your emails by copying the HTML, and pasting it into outlook (or any other mail program for that matter).
Jonathan Arkell  2008-09-24 14:31:35
+6  A: 

The site you mentioned has one of the best lists...

http://www.campaignmonitor.com/css/

This breaks down what is supported (style-wise), and where.

scunliffe  2008-09-24 14:32:49
+14  A: 

It's actually really hard to make a decent HTML email, if you approach it from a 'modern HTML and CSS' perspective.

For best results, imagine it's 1999.

  • Go back to tables for layout (or preferably - don't attempt any complex layout)
  • Be afraid of background images (they break in Outlook 2007 and Gmail).
  • The style-tag-in-the-body thing is because Hotmail used to accept it that way - I'm pretty sure they strip it out now though. Use inline styles with the style attribute if you must use CSS.
  • Forget entirely about float
  • Remember your images will probably be blocked - use background and text colour to your advantage - make sure there is some readable text with images disabled
  • Be very careful with links, be especially wary of anything that looks like a URL in the link text - you will anger 'phishing' filters (eg <a href="http://domain.tld"&gt;www.someotherdomain.tld&lt;/a&gt; is bad)
  • Remember that the "fold" on webmail clients tends to be extremely high up the page (on a 1024x768 screen, most interfaces won't show more than a hundred pixels or so) - get your identity stuff in right at the top so the recipient knows who you are.
  • Recent version of outlook have a "portrait" preview pane which is significantly narrower than you may be expecting - be very wary of fixed-width layouts, if you must use them ,make them as narrow as you can.
  • Don't even think about flash, Javascript, SVG, canvas, or anything like that.
  • Test, a lot. Make sure you test in a recent Outlook (things have changed a lot! It now uses Word as its HTML rendering engine, and it's crippled: Word 2007 HTML/CSS support). Gmail is pretty finicky also. Surprisingly Yahoo's webmail is extremely good, with nice CSS support.

Good luck ;)

Update to answer further questions:

Don't use more than two levels of nesting in tables

I believe this is an older guideline pertaining to Lotus Notes. Nested tables should be okay, but really, if you have a layout that's complicated enough to need them, you're probably going to have trouble anyway. Keep your layout simple.

Be careful of nesting background images in cells/tables

This may be related to the above, and the same applies, if you're getting that complicated then you will have problems. Recent versions of Outlook don't support background images at all, so you'd be best advised to forget about them entirely.

Dan  2008-09-24 14:39:01
+7  A: 

The folks behind Campaign Monitor also started a Email Standards Project web site with a lot of good information.

John Sheehan  2008-09-24 14:42:35
+1  A: 

I think this is lower level than the question you are asking, but if you really want an html email to be correctly viewed by as many clients as possible, make sure it's using valid MIME. In particular, for an email to be considered as valid MIME, the headers MUST (in the RFC sense of the word) contain both of these headers:

MIME-Version:
Content-Type:

Very strict clients will display your HTML as raw text if one or the other of these is missing. You'd be surprised how many large online vendors who should know better have screwed this up (notably, I've gotten HTML emails w/ missing MIME-Version: headers from Amazon and the ACM in the past)

jj33  2008-09-24 15:02:42
A: 

I found this also to be quite useful. http://www.bluehornet.com/whitepapers/Outlook2007.pdf

Gopal  2009-02-19 16:33:34
+1  A: 

Three words of advice: test, test, test.

Check out LitmusApp.com's email testing service. You send them a message and they render it in a bunch of clients and show you screenshots of the results. It's not perfect, but it's pretty good.

(Lotus Notes prior to 8.0 really, really stinks for HTML mail, by the way)

Also, beyond just inline CSS styles, I recommend switching to tags wherever possible.

Eli  2009-02-19 16:45:51
A: 

I had some luck using html's <base> tag until I relied on it for specifying background images in CSS

Assembler  2009-05-20 06:03:09
A: 

If you're including a style block don't begin any new line with ".classname" or "." anything. Put a brace or something before the period. If you don't do this some web mail systems will not properly display your style sheets.

Many people have incorrectly assumed they cannot use CSS blocks in emails because of this behavior... IIRC "." is the body delimiter for SMTP. Systems will tend to escape in their mail stores to prevent the contents of one message from being misrecognized as a new message. The way this is handled tends to break any style starting on a new line with a period.

Einstein  2009-06-19 16:13:38
A: 

When I was a rookie at developing html email campaigns I ran across this wonderful screencast:

http://css-tricks.com/video-screencasts/30-creating-and-sending-html-email/

Very helpful is you dont feel like sifting through campaignmonitor.com/ or email-standards.org

John M  2009-09-13 14:53:24
A: 

Two valuable references:

Pekka  2010-10-14 09:15:14

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?