HTML电子邮件devise的准则是什么?

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

关于堆栈溢出问题的无关答案build议:

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

其中包含以下准则:

  1. 将样式表放在<body>而不是<head>
    有些电子邮件客户端会将CSS从头部剥离,但是如果样式块在主体中(无效)则将其保留。
  2. 尽可能使用内联样式
    无论是在<head>还是在<body> ,Gmail都会去掉任何样式表,但是可以使用style=""属性来分配内联样式
  3. 返回到表格
    由于Outlook 2007使用了Microsoft Word渲染引擎,电子邮件标准近年来实际上已经向后退了一大步。 忘掉你在没有样式表的位置学习的大部分内容。
  4. 不要依赖图像
    大多数客户端和大多数基于Web的电子邮件客户端将不会显示图像,除非用户明确要求显示图像。

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

  1. 不要在表中使用两层以上的嵌套
    这是真的。 如果我这样做可能会发生什么? 有什么特定的客户/客户扼杀在这个?
  2. 小心嵌套在单元格/表格中的背景图像
    据我所知,你可能会遇到这样的情况:背景图像在降序表/单元格中被完全重新应用,而不仅仅是“闪耀”。 再次,真实与否? 哪些客户?

我希望通过更多的战略指导和经验来充实这份清单。

你能提供进一步的build议吗?

更新:我特别要求HTML中的devise部分的指导原则和一致性。 关于避免垃圾邮件filter的一般指导方针以及常见的礼节问题已经在SO上。

如果你从一个'现代的HTML和CSS'的angular度来看待它,那么制作一个体面的HTML邮件真的很难。

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

  • 回到表格布局(或者最好 – 不要尝试任何复杂的布局)
  • 害怕背景图片(他们在O​​utlook 2007和Gmail中破解)。
  • 因为Hotmail用这种方式来接受它 – 我很确定它们现在将它剥离出来。 如果您必须使用CSS,请使用style属性使用内联样式。
  • 完全忘记float
  • 记住你的图像可能会被阻止 – 使用背景和文字颜色,以确保有一些可读的文本与图像被禁用
  • 要小心链接,尤其要警惕任何在链接文本中看起来像URL的东西 – 你会愤怒'钓鱼'filter(例如<a href="http://domain.tld">www.someotherdomain.tld</a> 不好
  • 请记住,网页邮件客户端上的“折叠”往往是非常高的页面(在1024×768的屏幕上,大多数界面不会显示超过一百个像素左右) – 让您的身份在顶部正确的东西,所以收件人知道你是谁。
  • 最近的Outlook版本有一个“肖像”预览窗格,比你期望的要窄得多 – 对固定宽度的布局非常谨慎,如果你必须使用它们,尽可能缩小它们。
  • 甚至不要考虑 Flash,Javascript,SVG,canvas或其他类似的东西。
  • testing,很多。 确保你在最近的Outlook中进行testing(事情已经发生了很大的变化!它现在使用Word作为它的HTML渲染引擎,并且已经被削弱了: Word 2007 HTML / CSS支持 )。 Gmail也相当挑剔。 令人惊讶的是,雅虎的webmail非常好,CSS支持很好。

祝你好运 ;)

更新以回答更多问题:

不要在表中使用两层以上的嵌套

我相信这是一个有关Lotus Notes的旧指南。 嵌套表格应该没问题,但是如果你的布局足够复杂以至于无法使用,那么你可能会遇到麻烦。 保持你的布局简单

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

这可能与上述相关,同样适用,如果你变得复杂,那么你有问题。 最近的Outlook版本根本不支持背景图片,所以最好build议完全忘记它们。

总是使用多部分MIME并提供纯文本替代。

Campaign Monitor背后的人们也启动了一个电子邮件标准项目网站,提供了很多好的信息。

我认为这比你提出的问题要低,但是如果你真的想让一个html电子邮件被尽可能多的客户端正确的查看,那么确保它使用的是有效的MIME。 特别是,为了使电子邮件被认为是有效的MIME,头文件必须(在RFC的意义上)包含这两个头文件:

 MIME-Version: Content-Type: 

非常严格的客户端将显示您的HTML作为原始文本,如果其中一个丢失。 你会惊讶有多less大的在线厂商谁应该知道这个了(特别是,我收到了HTML电子邮件w /缺lessMIME-Version:亚马逊和ACM过去的标题)

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

  • 背景图片不可靠。
  • 几乎毫不费力,但没有JavaScript
  • 使用一个编辑器,可以将当前文件/缓冲区作为电子邮件发送,或者至less可以find一个程序,让您将文件内容作为HTML电子邮件发送。 不要通过复制HTML来testing您的电子邮件,并将其粘贴到Outlook (或任何其他邮件程序)。

三个build议的话:testing,testing,testing。

查看LitmusApp.com的电子邮件testing服务。 您向他们发送消息,然后将其呈现在一堆客户端中,并向您显示结果的截图。 这不是完美的,但很好。

(顺便提一下,8.0之前的Lotus Notes真的很臭,

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

embedded你的图片,不要链接到他们。

这不好 :

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

这很好:

 <img src=cid:myImage/> 

是的,它看起来很奇怪,但看看这个指南关于embedded图像的电子邮件 。

如果包含一个样式块,则不要使用“.classname”或“。”开始新行。 任何东西。 在期间之前放一个大括号或东西。 如果你不这样做,一些networking邮件系统将不能正确显示你的样式表。

许多人错误地认为他们不能在电子邮件中使用CSS块,因为这种行为… IIRC“。” 是SMTP的主体分隔符。 系统会倾向于在他们的邮件存储区中逃脱,以防止一个邮件的内容被误认为新邮件。 处理这种方式往往会打破任何风格,开始一段新的时间。