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

101

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

有关堆栈溢出问题的不相关答案建议：

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的电子邮件客户端都不会显示图像。

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

在表中不要使用超过两个级别的嵌套
是真的。如果这样做我可能会发生什么？是否有任何特定的客户对此感到cho恼？
注意将背景图像嵌套在单元格/表中
据我所知，您可能会遇到这样的情况：背景图像完全重新应用于降序表/单元格中，而不仅仅是“直通”。再一次，对与错？哪些客户？

我想用更多的指导和经验来充实这份清单。

您能否提供其他建议？

更新：我专门要求HTML中设计部分的指南及其一致性。有关避免垃圾邮件过滤器的一般准则以及常见礼节的问题已经在SO上了。

html email

— a
source

这里是一个资源大名单上的一个非常类似的问题。

— 约翰

63

它实际上真的很难作出像样的HTML电子邮件，如果你从一个'现代的HTML和CSS的角度接近它。

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

返回表格进行布局（或者最好-不要尝试任何复杂的布局）
担心背景图片（它们在Outlook 2007和Gmail中损坏）。
样式标记在体内是因为Hotmail曾经以这种方式接受它-我很确定他们现在已经将其剥离了。style如果必须使用CSS ，请在属性中使用内联样式。
完全忘记 float
请记住，您的图像可能会被遮挡-使用背景和文本颜色来发挥优势-确保禁用了一些可读的文本
请特别小心链接，尤其要警惕链接文本中看起来像URL的任何内容-您会激怒“网络钓鱼”过滤器（例如<a href="http://domain.tld">www.someotherdomain.tld</a>，错误的）
请记住，Webmail客户端上的“折叠”在页面上往往非常高（在1024x768屏幕上，大多数界面显示的像素不会超过一百像素左右）-将身份信息放在顶部，以便收件人知道你是谁。
Outlook的最新版本具有一个“人像”预览窗格，该窗格比您预期的要窄得多-请特别注意固定宽度的布局，如果必须使用它们，请使其尽可能地窄。
甚至不要想 Flash，Javascript，SVG，画布或类似的东西。
测试，很多。确保在最近的Outlook中进行测试（事情发生了很大变化！它现在使用Word作为其HTML呈现引擎，并且它已残废：Word 2007 HTML / CSS支持）。Gmail也相当挑剔。出乎意料的是，雅虎的网络邮件非常出色，并具有很好的CSS支持。

祝好运 ;）

更新以回答其他问题：

在表格中不要使用超过两个级别的嵌套

我认为这是关于Lotus Notes的较旧指南。嵌套表应该可以，但实际上，如果您的布局过于复杂而需要它们，那么无论如何您可能都会遇到麻烦。保持布局简单。

注意将背景图像嵌套在单元格/表中

这可能与上述情况有关，并且同样适用，如果您变得如此复杂，则会遇到问题。最新版本的Outlook根本不支持背景图片，因此，建议您完全不要使用背景图片。

— 担
source

3

为什么对HTML电子邮件的支持没有那么重要？为什么我们应该继续实施所有这些不良做法，就像我们回到1999年一样？

— smonff

有支持bgimages stackoverflow.com/a/17358553/413032的解决方法。我完全同意您的意见，将ms-单词html。@ smonff交替显示。........为什么要用MS-Word渲染HTML？

— DavutGürbüz13年

1

检查石蕊的电子邮件编码101，希望能对您有所帮助。

— shaijut 2015年

13

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

— 吉比
source

9

Campaign Monitor背后的人们还建立了一个电子邮件标准项目网站，其中包含很多有用的信息。

— 约翰·希恩
source

3

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

— welldan97
source

糟糕，现在不见了。

— 肖恩·麦克米兰

2

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

MIME-Version:
Content-Type:

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

— jj33
source

1

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

— 乔纳森·阿克尔
source

1

忠告三个词：测试，测试，测试。

查看LitmusApp.com的电子邮件测试服务。您向他们发送一条消息，然后他们在大量客户端中呈现该消息，并向您显示结果的屏幕截图。它不是完美的，但是相当不错。

（顺便说一下，8.0之前的Lotus Notes确实非常讨厌HTML邮件）

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

— 以利
source

1

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

这不好：

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

这很好：

<img src=cid:myImage/>

是的，看起来很奇怪，但请查阅有关在电子邮件中嵌入图像的本指南。

— 安德烈·雷内（AndreiRînea）
source

0

如果要包含样式块，请不要以“ .classname”或“。”开头任何新行。任何东西。在月经之前放一个支撑物或其他东西。如果您不这样做，则某些Web邮件系统将无法正确显示样式表。

由于这种行为，许多人错误地认为他们无法在电子邮件中使用CSS块... IIRC“。” 是SMTP的主体定界符。系统倾向于在其邮件存储中转义，以防止将一条消息的内容误识别为新消息。处理该方法的方式往往会破坏以句点换行的任何样式。

— 爱因斯坦
source