有哪些 HTML 电子邮件设计指南？ [关闭]答案

【问题标题】：What guidelines for HTML email design are there? [closed]有哪些 HTML 电子邮件设计指南？ [关闭]
【发布时间】：2010-09-12 18:04:08
【问题描述】：

您可以为电子邮件中的丰富 HTML 格式提供哪些指导，同时在许多客户端和基于 Web 的电子邮件界面中保持良好的视觉稳定性？

关于 Stack Overflow 上一个问题的不相关答案建议：

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

其中包含以下指南：

将样式表放在<body> 而不是<head>
一些电子邮件客户端会从头部删除 CSS，但如果样式块（无效）在正文中，则将其保留。
尽可能使用内联样式
Gmail 将删除任何样式表，无论是在 <head> 还是在 <body> 中，但尊重使用 style="" 属性分配的内联样式
返回表格
由于使用 Microsoft Word 渲染引擎的 Outlook 2007，近年来电子邮件标准实际上已经倒退了一大步。在没有样式表的情况下，忘掉大部分关于定位的知识。
不要依赖图片
大多数客户端和大多数基于 Web 的电子邮件客户端不会显示图像，除非用户明确要求显示它们。

我还有一些“未经证实”的事实，我不记得我在哪里读到它们了。

不要在表格中使用超过两层的嵌套
这是真的。如果我这样做，可能会发生什么？是否有任何特定的客户对此感到窒息？
小心在单元格/表格中嵌套背景图片
据我了解，您可能会遇到将背景图像完全重新应用于降序表/单元格的情况，而不仅仅是“闪耀”。再次，真实与否？哪些客户？

我想用更多的指导和经验来充实这个列表。

您能否提供进一步的建议？

更新：我特别要求 HTML 中的设计部分 及其一致性。关于 avoiding spam filters 和 common courtesy 的一般准则的问题已经在 SO 上。

【问题讨论】：

这是big list of resources 上的very similar question。

标签： html email

【解决方案1】：

始终使用多部分 mime 并提供纯文本替代方案。

【讨论】：

【解决方案2】：

背景图片不可靠。
几乎不费吹灰之力，但没有 javascript。
使用可以让您将当前文件/缓冲区作为电子邮件发送的编辑器，或者至少找到一个可以让您将文件内容作为 HTML 电子邮件发送的程序。 不要通过复制 HTML 并将其粘贴到 Outlook 中来测试您的电子邮件（或任何其他邮件程序）。

【讨论】：

【解决方案3】：

如果您从“现代 HTML 和 CSS”的角度来处理它，实际上真的很难制作出像样的 HTML 电子邮件。

为了获得最佳效果，想象一下现在是 1999 年。

返回表格进行布局（或者最好不要尝试任何复杂的布局）
害怕背景图像（它们在 Outlook 2007 和 Gmail 中会损坏）。
style-tag-in-the-body 的东西是因为 Hotmail 过去接受这种方式 - 不过我很确定他们现在把它去掉了。如果必须使用 CSS，请使用带有 style 属性的内联样式。
完全忘记float
请记住，您的图片可能会被阻止 - 使用背景和文本颜色来发挥您的优势 - 确保有一些可读的文本已禁用图片
对链接要非常小心，尤其要警惕链接文本中看起来像 URL 的任何内容 - 您会激怒“网络钓鱼”过滤器（例如，<a href="http://domain.tld">www.someotherdomain.tld</a> 是糟糕）
请记住，webmail 客户端上的“折叠”往往在页面上非常高（在 1024x768 屏幕上，大多数界面不会显示超过 100 像素左右） - 将您的身份信息放在顶部以便收件人知道您是谁。
最近版本的 Outlook 有一个“纵向”预览窗格，它比您预期的要窄得多 - 要非常小心固定宽度的布局，如果您必须使用它们，请尽可能缩小它们。
甚至不要考虑 flash、Javascript、SVG、canvas 或类似的东西。
测试，很多。确保您在最近的 Outlook 中进行了测试（情况发生了很大变化！它现在使用 Word 作为其 HTML 呈现引擎，并且已经瘫痪：Word 2007 HTML/CSS support）。 Gmail 也很挑剔。令人惊讶的是，Yahoo 的 webmail 非常好，有很好的 CSS 支持。

祝你好运；）

更新以回答更多问题：

不要在表格中使用超过两层的嵌套

我相信这是与 Lotus Notes 相关的旧指南。嵌套表应该没问题，但实际上，如果您的布局复杂到需要它们，那么您可能无论如何都会遇到麻烦。保持布局简单。

小心在单元格/表格中嵌套背景图片

这可能与上述有关，同样适用，如果您变得如此复杂，那么您将遇到问题。最新版本的 Outlook 根本不支持背景图片，因此最好完全忘记它们。

【讨论】：

为什么 HTML 电子邮件支持没有那么大的发展？我们为什么要继续实施所有这些不良做法，就好像我们回到了 1999 年一样？
有支持 bgimages stackoverflow.com/a/17358553/413032 的解决方法。交替使用 ms-word html.@smonff 我完全同意你的看法。 ........为什么是由 MS-Word 呈现的 html ！
从石蕊中检查Email Coding 101，希望有所帮助。

【解决方案4】：

Campaign Monitor 背后的人还创建了一个 Email Standards Project 网站，其中包含很多有用的信息。

【讨论】：

【解决方案5】：

我认为这比您提出的问题要低，但如果您真的希望尽可能多的客户正确查看 html 电子邮件，请确保它使用有效的 MIME。特别是，对于被视为有效 MIME 的电子邮件，标头必须（在 RFC 意义上）包含以下两个标头：

MIME-Version:
Content-Type:

如果缺少其中一个或另一个，非常严格的客户端会将您的 HTML 显示为原始文本。您会惊讶于有多少本应更了解的大型在线供应商把这件事搞砸了（值得注意的是，我收到过缺少 MIME-Version：来自亚马逊和 ACM 的标头的 HTML 电子邮件）

【讨论】：

【解决方案6】：

三个忠告：测试、测试、测试。

查看 LitmusApp.com 的电子邮件测试服务。您向他们发送一条消息，然后他们将其呈现在一堆客户端中，并向您显示结果的屏幕截图。它并不完美，但它非常好。

（顺便说一下，8.0 之前的 Lotus Notes 对于 HTML 邮件来说真的，真的很臭）

此外，除了内联 CSS 样式，我建议尽可能切换到标签。

【讨论】：

【解决方案7】：

如果您包含样式块，请不要以“.classname”或“.”开始任何新行。任何事物。在月经前放一个支架什么的。如果您不这样做，一些网络邮件系统将无法正确显示您的样式表。

由于这种行为，许多人错误地认为他们不能在电子邮件中使用 CSS 块... IIRC“。”是 SMTP 的正文分隔符。系统将倾向于在其邮件存储中逃逸，以防止将一封邮件的内容误识别为新邮件。这种处理方式往往会破坏任何以句点开头的新行的样式。

【讨论】：

【解决方案8】：

嵌入您的图片，不要链接到它们。

这很糟糕：

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

这很好：

<img src=cid:myImage/>

是的，看起来很奇怪，但请查看 guide regarding embedding images in emails。

【讨论】：

【解决方案9】：

看看这个样板，它就像 html5样板，但对于电子邮件： http://htmlemailboilerplate.com/

【讨论】：

糟糕，它现在已经消失了。