Question

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

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

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

其中包含以下准则：

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

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

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

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

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

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

Answer 1

如果从“现代HTML和CSS”的角度来看，实际上真的很难做出体面的HTML电子邮件。

为了获得最佳效果，请想象它是1999年。

返回表格进行布局（或者最好 - 不要尝试任何复杂的布局）

害怕背景图片（它们在Outlook 2007和Gmail中中断）。

正文中的样式标签是因为Hotmail过去常常接受它 - 我很确定他们现在就把它剥掉了。如果必须使用CSS，请使用带style属性的内联样式。

完全忘记float

请记住，您的图片可能会被屏蔽 - 使用背景和文字颜色为您带来好处 - 确保有一些可读的文字，图片已停用

对链接要非常小心，特别要注意链接文本中看起来像URL的任何内容 - 你会愤怒的“网络钓鱼”过滤器（例如<a href="http://domain.tld">www.someotherdomain.tld</a> 错误）

请记住，网页邮件客户端上的“折叠”往往在页面上非常高（在1024x768屏幕上，大多数界面不会显示超过100个像素左右） - 在顶部获取您的身份信息所以收件人知道你是谁。

最新版本的outlook有一个“纵向”预览窗格，它比你想象的要窄得多 - 对固定宽度的布局非常警惕，如果必须使用它们，请尽量缩小它们。

甚至认为关于flash，Javascript，SVG，canvas等等。

测试，很多。确保你在最近的Outlook中进行测试（事情已经发生了很大的变化！它现在使用Word作为它的HTML渲染引擎，它已经瘫痪了：Word 2007 HTML/CSS support）。 Gmail也非常挑剔。令人惊讶的是雅虎的网络邮件非常好，有很好的CSS支持。

祝你好运;）

更新以回答更多问题：

不要在表格中使用两个以上的嵌套级别

我认为这是一个与Lotus Notes相关的旧指南。嵌套表应该没问题，但实际上，如果你的布局足够复杂，需要它们，你可能会遇到麻烦。保持布局简单。

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

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

Answer 2

始终使用multipart mime并提供纯文本替代。

Answer 3

Campaign Monitor背后的人们还启动了一个Email Standards Project网站，其中包含大量有用信息。

Answer 4

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

Answer 5

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

MIME-Version:
Content-Type:

非常严格的客户端会将您的HTML显示为原始文本，如果缺少其中一个或另一个。你应该感到惊讶的是，许多应该知道更好的大型在线供应商搞砸了这一点（特别是，我收到的HTML电子邮件缺少MIME版本：过去亚马逊和ACM的标题）

Answer 6

背景图片不可靠。
实际上很简单，但没有javascript 。
使用允许您将当前文件/缓冲区作为电子邮件发送的编辑器，或者至少找到一个允许您将文件内容作为HTML电子邮件发送的程序。 不要通过复制HTML并将其粘贴到Outlook （或任何其他邮件程序）来测试您的电子邮件。

Answer 7

三个建议：测试，测试，测试。

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

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

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

Answer 8

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

这很糟糕：

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

这很好：

<img src=cid:myImage/>

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

Answer 9

如果您要包含样式块，请不要使用“.classname”或“。”开始任何新行。任何东西。在此期间之前放一个支具或东西。如果您不这样做，某些Web邮件系统将无法正确显示您的样式表。

许多人错误地认为他们不能在电子邮件中使用CSS阻止因为这种行为...... IIRC“。”是SMTP的正文分隔符。系统将倾向于在其邮件存储中转义，以防止将一条消息的内容误识别为新消息。处理此方法往往会破坏任何样式，从具有句点的新行开始。

有哪些HTML电子邮件设计指南？

9 个答案: