102

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

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

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

其中包含以下准则:

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

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

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

我想用更多的指导方针和从战壕中获得的经验来充实这个列表。

你能提供任何进一步的建议吗?

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

4

9 回答 9

64

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

为了获得最佳结果,想象一下 1999 年。

  • 返回表格进行布局(或者最好不要尝试任何复杂的布局)
  • 害怕背景图像(它们在 Outlook 2007 和 Gmail 中中断)。
  • style-tag-in-the-body 是因为 Hotmail 曾经以这种方式接受它——不过我很确定他们现在把它去掉了。style如果必须使用 CSS,请使用带有属性的内联样式。
  • 完全忘记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 支持)。Gmail 也很挑剔。令人惊讶的是,Yahoo 的 webmail 非常好,有很好的 CSS 支持。

祝你好运 ;)

更新以回答更多问题:

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

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

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

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

于 2008-09-24T14:39:01.923 回答
13

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

于 2008-09-24T14:25:40.893 回答
9

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

于 2008-09-24T14:42:35.720 回答
3

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

于 2011-12-22T09:39:09.520 回答
2

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

MIME-Version:
Content-Type:

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

于 2008-09-24T15:02:42.847 回答
1
  • 背景图像不可靠。
  • 几乎不费吹灰之力,但没有 javascript
  • 使用可以让您将当前文件/缓冲区作为电子邮件发送的编辑器,或者至少找到一个可以让您将文件内容作为 HTML 电子邮件发送的程序。 不要通过复制 HTML 并将其粘贴到 Outlook(或任何其他邮件程序)来测试您的电子邮件。
于 2008-09-24T14:31:35.247 回答
1

建议三个字:测试、测试、测试。

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

(顺便说一下,8.0 之前的 Lotus Notes 真的非常讨厌 HTML 邮件)

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

于 2009-02-19T16:45:51.777 回答
1

嵌入您的图像,不要链接到它们。

这是不好的 :

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

这很好:

<img src=cid:myImage/>

是的,这看起来很奇怪,但请查看本指南关于在电子邮件中嵌入图像

于 2010-11-25T15:08:20.830 回答
0

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

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

于 2009-06-19T16:13:38.933 回答