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

Question 1

我从事网站开发已有十多年了，但很快发现我为电子邮件客户端开发时，许多用于Web开发的习惯都没有用。这给我带来了极大的挫败感，所以我想问一个问题：

对于像我这样不时发现自己为gmail，Outlook等进行设计的其他人，最佳实践和必要的注意事项是什么？

示例： <style>...</style> vs内联CSS。

简而言之：是什么从网络世界转移到了电子邮件世界，而没有呢？

Question 2

对于那些试图学习HTML电子邮件的人来说，这似乎是一个列出一些资源的好地方。这是（可能是）您将在网络上找到的最全面的HTML电子邮件资源列表。学习愉快。

入门指南：

CSS支持和一般指南：

您应该始终在html-email中内联CSS。这是CSS内联工具的列表

响应指南：

模板和框架：

响应式替代示例：

同样，上面的Ted Goas响应式链接也有很好的示例。

故障排除和一般指南：

您需要使用VML来使背景图片在Outlook中工作（在body标签中除外）。以下是一些VML链接：

Question 3

我已经（一段时间）在做这些工作了一段时间。HTML电子邮件有很多陷阱。不同的电子邮件客户端呈现HTML的方式彼此不同，并使IE6看起来更高级。

这是到目前为止我所学的总结。

使用内联CSS：并非始终支持样式。
使用表布局：我知道，但是div布局是css依赖的，许多电子邮件客户端无法应付。
不要使用rowspan：这会导致奇怪的间距问题。
不要使用背景图片：对这些图片的支持是有限的。
使用“ display：block”样式化图像标签：修复hotmail怪异的间距问题。
如果使用多个表，则将它们嵌套在一个父表中：这样可以避免出现更多奇怪的间距问题。
不要使用Javascript：再次没有很好地支持。
确保您的电子邮件清晰可见，没有图像：用户可能无法加载它们。
提供一个在线版本并链接到它：即使用户的电子邮件客户端很糟，这也可以使用户看到预期的内容。
测试，测试，测试：仅仅因为它可以在一个电子邮件客户端中工作，并不意味着它可以在其他电子邮件客户端中工作。最重要的是Outlook2007。它使用Word来呈现HTML（叹气）。

这远没有一个完整的清单，但是应该使大多数人走上正确的道路。

Question 4

内联CSS和表格-考虑一下大约2000年的Web开发，您会感觉很好。Campaign Monitor对于电子邮件客户端可以处理的内容具有极好的资源。也可以使用http://www.emailonacid.com/进行测试-无需发送大量测试。