HTML 电子邮件设计有哪些准则？

你能给富 HTML 格式的电子邮件，同时保持良好的视觉稳定性跨越许多客户端和基于网络的电子邮件界面的指导方针？

关于 Stack Overflow 一个问题的另一个不相关的答案是:

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

其中包含以下准则:

  1. 将样式表放在 <body>而不是 <head>中
    有些电子邮件客户端会把 CSS 从头部去掉，但是如果样式块(无效)在正文中，就不会去掉它。
  2. 尽可能使用内联样式
    Gmail 将剥离任何样式表，无论是在 <head>还是在 <body>中，但是尊重使用 style=""属性分配的内联样式
  3. 回到桌子上
    由于 Outlook2007使用了微软的 Word 渲染引擎，电子邮件标准实际上在最近几年已经向后退了一大步。忘记大部分关于不使用样式表进行定位的知识。
  4. 不要依赖图像
    大多数客户端和大多数基于网络的电子邮件客户端不会显示图像，除非用户特别要求显示它们。

我也有一些“未经证实”的事实，我不记得我是在哪里读到的。

  1. 在表中不要使用多于两个嵌套级别
    这是真的吗? 如果我这样做可能会发生什么? 是否有任何特定的客户/客户窒息了这一点？
  2. 小心在单元格/表格中嵌套背景图像
    据我所知，您可能会遇到这样的情况: 背景图像被重新应用到降序表/单元格中，而不仅仅是“闪烁”。再问一次，是不是真的？哪些客户？

我想用更多的指导方针和从战壕中获得的经验来充实这份清单。

你能提供进一步的建议吗？

更新: 我特别要求在 HTML 中的 设计部分的指导原则和一致性。关于 避免滥发讯息和 基本礼貌的一般指导方针的问题已经在 SO 上了。

46321 次浏览
小开

Always use multipart mime and provide a plain text alternative.

小开
  • 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).
小开

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">www.someotherdomain.tld</a> 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.

小开

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

小开

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)

小开

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.

小开

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.

小开

Embed your images, don't link to them.

This is bad :

<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>

This is good :

<img src=cid:myImage/>

Yeah, it looks weird but check out this guide regarding embedding images in emails.

小开

Take a look at this boilerplate, it is like html5boilerplate, but for emails: http://htmlemailboilerplate.com/


提交答案