有哪些 HTML 电子邮件设计指南？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/127498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What guidelines for HTML email design are there?
提问by kaa
What guidelines can you give for rich HTML formatting in emails while maintaining good visual stability across many clients and web based email interfaces?
您可以为电子邮件中的丰富 HTML 格式提供哪些指导，同时在许多客户端和基于 Web 的电子邮件界面中保持良好的视觉稳定性？
An unrelated answer on a question on Stack Overflow suggested:
一个关于 Stack Overflow 的问题的无关答案建议：
http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html
http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html
Which contains the following guidelines:
其中包含以下准则：
- 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. - 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 thestyle=""attribute - 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. - 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.
- 将样式表放入
<body>而不是<head>
某些电子邮件客户端会将 CSS 从头部剥离，但如果样式块（无效）在正文中，则将其保留。 - 尽可能使用内联样式
Gmail 将删除任何样式表，无论是在<head>或 中<body>，但尊重使用style=""属性分配的内联样式 - 返回表
电子邮件标准已经近几年得益于使用微软Word渲染引擎实际上已经采取了一大步倒退到Outlook 2007。忘掉你在没有样式表的情况下学到的大部分关于定位的知识。 - 不要依赖图像
大多数客户端和大多数基于 Web 的电子邮件客户端不会显示图像，除非用户特别要求显示它们。
I also have a few "unconfirmed" truths that I don't remember where I read them.
我也有一些“未经证实的”真相，我不记得是在哪里读到的。
- 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? - 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 partin HTML and consistency there of. Questions about general guidelines for avoiding spam filters, and common courtesyare already on SO.
更新：我特别要求为HTML 中的设计部分及其一致性提供指导。关于避免垃圾邮件过滤器的一般准则和常见礼貌的问题已经在 SO 上。
回答by Dan
It's actually reallyhard to make a decent HTML email, if you approach it from a 'modern HTML and CSS' perspective.
它实际上真的很难作出像样的HTML电子邮件，如果你从一个'现代的HTML和CSS的角度接近它。
For best results, imagine it's 1999.
为获得最佳结果，假设现在是 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
styleattribute 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 thinkabout 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.
- 回到表格进行布局（或者最好不要尝试任何复杂的布局）
- 害怕背景图片（它们在 Outlook 2007 和 Gmail 中会损坏）。
- 正文中的样式标记是因为 Hotmail 过去接受这种方式 - 我很确定他们现在将其删除。
style如果必须使用 CSS，请使用带有属性的内联样式。 - 完全忘记
float - 请记住，您的图像可能会被阻止 - 使用背景和文本颜色对您有利 - 确保有一些可读文本且图像被禁用
- 要非常小心的链接时，要特别警惕的东西，看起来像在链接文字中的网址-你会触怒“网络钓鱼”过滤器（例如
<a href="http://domain.tld">www.someotherdomain.tld</a>是坏） - 请记住，网络邮件客户端上的“折叠”往往位于页面上方（在 1024x768 屏幕上，大多数界面不会显示超过一百个像素左右） - 将您的身份信息放在顶部，以便收件人知道你是谁。
- 最新版本的 Outlook 有一个“纵向”预览窗格，它比您预期的要窄得多 - 非常小心固定宽度的布局，如果您必须使用它们，请尽可能缩小它们。
- 甚至不要考虑flash、Javascript、SVG、canvas 或类似的东西。
- 测试，很多。确保您在最近的 Outlook 中进行测试（事情已经发生了很大变化！它现在使用 Word 作为其 HTML 渲染引擎，并且它已被削弱：Word 2007 HTML/CSS 支持）。Gmail 也很挑剔。令人惊讶的是，雅虎的网络邮件非常好，具有很好的 CSS 支持。
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 shouldbe 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.
我相信这是关于 Lotus Notes 的旧指南。嵌套表应该没问题，但实际上，如果您的布局复杂到需要它们，那么无论如何您可能都会遇到麻烦。保持您的布局简单。
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 willhave problems. Recent versions of Outlook don't support background images at all, so you'd be best advised to forget about them entirely.
这可能与上述有关，同样适用，如果您变得那么复杂，那么您就会遇到问题。Outlook 的最新版本根本不支持背景图像，因此最好建议您完全忘记它们。
回答by JeeBee
Always use multipart mime and provide a plain text alternative.
始终使用多部分 mime 并提供纯文本替代方案。
回答by John Sheehan
The folks behind Campaign Monitor also started a Email Standards Projectweb site with a lot of good information.
Campaign Monitor 背后的人还创建了一个包含大量有用信息的电子邮件标准项目网站。
回答by welldan97
Take a look at this boilerplate, it is like html5boilerplate, but for emails: http://htmlemailboilerplate.com/
看看这个样板，它就像 html5boilerplate，但对于电子邮件：http://htmlemailboilerplate.com/
回答by jj33
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:
我认为这比您提出的问题要低，但是如果您真的希望尽可能多的客户正确查看 html 电子邮件，请确保它使用有效的 MIME。特别是，对于要被视为有效 MIME 的电子邮件，标头必须（在 RFC 意义上）包含以下两个标头：
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)
如果缺少其中一个或另一个，非常严格的客户端会将您的 HTML 显示为原始文本。你会惊讶于有多少应该知道更好的大型在线供应商搞砸了（特别是，我收到了 HTML 电子邮件，但缺少 MIME 版本：过去来自亚马逊和 ACM 的标头）
回答by Eli
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.
查看 LitmusApp.com 的电子邮件测试服务。你向他们发送一条消息，他们在一堆客户端中呈现它并向你展示结果的屏幕截图。它并不完美，但已经很不错了。
(Lotus Notes prior to 8.0 really, really stinks for HTML mail, by the way)
（顺便说一句，8.0 之前的 Lotus Notes 对 HTML 邮件来说真的很糟糕）
Also, beyond just inline CSS styles, I recommend switching to tags wherever possible.
此外，除了内联 CSS 样式之外，我还建议尽可能切换到标签。
回答by Andrei R?nea
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.
是的，它看起来很奇怪，但请查看有关在电子邮件中嵌入图像的指南。
回答by Jonathan Arkell
- 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).
- 背景图像不可靠。
- 实际上很简单，但没有 javascript。
- 使用可以让您将当前文件/缓冲区作为电子邮件发送的编辑器，或者至少找到一个可以让您将文件内容作为 HTML 电子邮件发送的程序。 不要通过复制 HTML 并将其粘贴到 Outlook（或任何其他邮件程序）来测试您的电子邮件。
回答by Einstein
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.
如果您要包含样式块，请不要以“.classname”或“.”开始任何新行。任何事物。在经期前放一个支架或其他东西。如果您不这样做，某些 Web 邮件系统将无法正确显示您的样式表。
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.
由于这种行为，许多人错误地认为他们不能在电子邮件中使用 CSS 块...... IIRC “。” 是 SMTP 的正文分隔符。系统将倾向于在其邮件存储中进行转义，以防止将一封邮件的内容误认为是新邮件。处理这种情况的方式往往会打破任何风格，从带有句点的新行开始。
