编写HTML电子邮件时的最佳实践和注意事项

Question

我已经开发了十多年的网站了,但很快就发现,在为电子邮件客户开发时,我开发网络的许多习惯都没用.这让我感到非常沮丧,所以我想我会提出一个问题,希望能够为像我这样的人发现最佳实践和必要的考虑因素,这些人可能会不时地设计gmail,outlook等.

示例: <style>...</style> vs内联CSS.

简而言之:什么从网络世界转移到电子邮件世界,什么没有.

Answer 1

这似乎是一个为试图学习HTML电子邮件的人列出一些资源的好地方.这可能是您在网上找到的最全面的HTML电子邮件资源列表.快乐学习.

入门指南:

CSS支持和一般指南:

你应该总是在html-email中内联你的CSS.这是一个CSS内联工具列表

响应指南:

模板和框架:

响应性替代示例:

此外,上面的Ted Goas Responsive链接也有一个很好的流动示例.

故障排除和一般指南:

您需要使用VML来获取在Outlook中工作的背景图像(在body标签中除外).以下是一些VML链接:

Answer 2

我一直在做这些(很长一段时间)我的工作一段时间了.HTML电子邮件存在许多陷阱.不同的电子邮件客户端呈现的HTML彼此不同,使IE6看起来更先进.

以下是迄今为止我所学到的内容的总结.

使用内嵌CSS:并不总是支持样式.
使用表格布局:我知道,但div布局依赖于CSS,许多电子邮件客户端无法应对.
不要使用rowspan:这会导致奇怪的间距问题.
不要使用背景图像:对这些图像的支持是有限的.
带有"display:block"的样式图像标签:这解决了hotmail的奇怪间距问题.
如果使用多个表将它们嵌套在一个父表中:这会阻止更多奇怪的间距问题.
不要使用Javascript:再次不受支持.
确保您的电子邮件清晰,没有图像:用户可能无法加载它们.
提供在线版本并链接到它:这使用户可以看到预期的内容,即使他们的电子邮件客户端很糟糕.
测试,测试,测试:仅仅因为它在一个电子邮件客户端中工作并不意味着它在其他电子邮件中工作.一个很大的问题是Outlook 2007.它使用word来呈现HTML(叹息).

这远不是一个全面的清单,但应该让大多数人走上正轨.

Answer 3

内联css和表 - 想想大约2000年的网络开发,你会没事的.Campaign监视器为电子邮件客户端可以处理的内容提供了极好的资源.还可以使用http://www.emailonacid.com/进行测试 - 节省必须发送大量测试.