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

Question

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

关于Stack Overflow问题的一个不相关的答案表明:

其中包含以下准则:

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

我也有一些"未经证实"的事实,我不记得我在哪里阅读它们.

我想从战壕中获得更多的指导和经验,充实这份清单.

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

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

Answer 1

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

为了获得最佳效果,想象一下它是1999年.

返回表格进行布局(或者最好 - 不要尝试任何复杂的布局)
害怕背景图片(他们在Outlook 2007和Gmail中破解).
身体中的样式标签是因为Hotmail曾经以这种方式接受它 - 我很确定他们现在就把它剥掉了.style如果必须使用CSS,请使用带有属性的内联样式.
完全忘了 float
请记住,您的图像可能会被阻止 - 使用背景和文本颜色对您有利 - 确保有一些可读文本禁用图像
要非常小心的链接时,要特别警惕的东西,看起来像在链接文字中的网址-你会触怒"网络钓鱼"过滤器(例如<a href="http://domain.tld">www.someotherdomain.tld</a>是坏)
请记住,webmail客户端上的"折叠"往往在页面上非常高(在1024x768屏幕上,大多数界面不会显示超过一百个像素左右) - 在顶部获取您的身份信息,以便收件人知道你是谁.
最新版本的outlook有一个"纵向"预览窗格,它比你想象的要窄得多 - 对固定宽度布局非常警惕,如果必须使用它们,请尽量缩小它们.
甚至不要考虑 flash,Javascript,SVG,canvas或类似的东西.
测试,很多.确保你在最近的Outlook中进行测试(事情发生了很大变化!它现在使用Word作为其HTML渲染引擎,并且它已经瘫痪了:Word 2007 HTML/CSS支持).Gmail也非常挑剔.令人惊讶的是雅虎的网络邮件非常好,有很好的CSS支持.

祝好运 ;)

更新以回答进一步的问题:

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

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

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

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

Answer 2

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

Answer 3

Campaign Monitor背后的人员还启动了一个包含大量有用信息的电子邮件标准项目网站.