有哪些HTML电子邮件设计指南?
我们可以为电子邮件中的丰富HTML格式提供什么准则,同时在许多客户端和基于Web的电子邮件界面上保持良好的视觉稳定性?
关于堆栈溢出问题的不相关答案建议:
http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html
其中包含以下准则:
- 将样式表放置在" <body>"而不是" <head>"中。一些电子邮件客户端会将CSS从头部剥离,但是如果样式块(无效)在主体中,则将其保留。
- 只要有可能,Gmail都会使用内联样式,无论是在<head>还是在<body>中,Gmail都会剥离任何样式表,但应使用使用style =""属性分配的内联样式
- 返回表近年来,由于使用Microsoft Word呈现引擎的Outlook 2007,电子邮件标准实际上已经倒退了一大步。取消学习我们在不使用样式表的情况下所学到的大部分知识。
- 不要依赖图像除非用户明确要求显示图像,否则大多数客户端和大多数基于Web的电子邮件客户端都不会显示图像。
我也有一些"未经证实"的事实,我不记得在哪里读过。
- 在表中不要使用超过两个级别的嵌套是真的。如果这样做我可能会发生什么?是否有任何特定的客户对此感到cho恼?
- 注意将背景图像嵌套在单元格/表中据我所知,我们可能会遇到这样的情况:背景图像完全重新应用于降序表/单元格中,而不仅仅是"直通"。再一次,对与错?哪些客户?
我想用更多的指导和经验来充实这份清单。
我们能提供更多建议吗?
更新:我专门要求HTML中设计部分的指南及其一致性。关于避免垃圾邮件过滤器的一般准则以及常见礼节的问题已经在SO上了。
解决方案
始终使用多部分mime并提供纯文本替代。
- 背景图像不可靠。
- 几乎不用理会,但是没有javascript。
- 使用允许我们将当前文件/缓冲区作为电子邮件发送的编辑器,或者至少找到一个可以使我们将文件内容作为HTML电子邮件发送的程序。不要通过复制HTML并将其粘贴到Outlook(或者与此相关的任何其他邮件程序)中来测试电子邮件。
如果我们从"现代HTML和CSS"的角度进行处理,实际上很难制作出像样的HTML电子邮件。
为了获得最佳效果,请想象是1999年。
- 返回表格进行布局(或者最好-不要尝试任何复杂的布局)
- 担心背景图片(它们在Outlook 2007和Gmail中损坏)。
- 样式标记在体内是因为Hotmail曾经以这种方式接受它-我很确定他们现在已经将其剥离了。如果必须使用CSS,则将内联样式与
style
属性一起使用。 - 完全忘记" 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支持。
祝你好运 ;)
更新以回答其他问题:
Don't use more than two levels of nesting in tables
我相信这是关于Lotus Notes的较旧指南。嵌套表应该可以,但实际上,如果布局足够复杂以至于无法使用它们,则可能会遇到麻烦。保持布局简单。
Be careful of nesting background images in cells/tables
这可能与上述情况相关,并且同样适用,如果我们变得如此复杂,则将遇到问题。最新版本的Outlook根本不支持背景图片,因此最好建议我们完全忽略它们。
Campaign Monitor背后的人们还建立了一个电子邮件标准项目网站,其中包含很多有用的信息。
我认为这比我们提出的问题要低,但是如果我们确实希望尽可能多的客户端正确查看html电子邮件,请确保它使用的是有效的MIME。特别是,对于要被视为有效MIME的电子邮件,标头必须(在RFC的意义上)必须包含以下两个标头:
MIME-Version: Content-Type:
如果其中的一个或者另一个丢失,则非常严格的客户端会将HTML显示为原始文本。我们会惊讶于有多少应该更了解的大型在线供应商搞砸了(值得注意的是,过去我收到了带有MIME版本的HTML电子邮件:过去来自Amazon和ACM的标头)
忠告三个词:测试,测试,测试。
查看LitmusApp.com的电子邮件测试服务。我们向他们发送一条消息,然后他们在大量客户端中呈现该消息,并向我们显示结果的屏幕截图。它不是完美的,但是相当不错。
(顺便说一下,8.0之前的Lotus Notes确实非常讨厌HTML邮件)
另外,除了内联CSS样式外,我建议尽可能切换到标签。
如果要包含样式块,请不要以" .classname"或者"。"开头任何新行。任何事物。在月经之前放一个支架或者其他东西。如果不这样做,则某些Web邮件系统将无法正确显示样式表。
许多人错误地认为,由于这种行为,他们无法在电子邮件中使用CSS块... IIRC"。"。是SMTP的主体定界符。系统倾向于在其邮件存储区中转义,以防止将一条消息的内容误识别为新消息。这种处理方式往往会破坏以句点换行的任何样式。
嵌入图片,不要链接到它们。
这不好 :
<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>
这很好:
<img src=cid:myImage/>
是的,看起来很奇怪,但是请查阅有关在电子邮件中嵌入图像的本指南。