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

我已经开发了十多年的网站，但很快就发现，我开发网络的许多习惯在为电子邮件客户端开发时没有任何用处。这给我带来了巨大的挫折感，所以我想我会问一个问题，希望能为像我这样可能会不时地为gmail，outlook等设计的其他人提供最佳实践和必要的考虑。

例如： <style>...</style> vs inline CSS。

简而言之：从网络世界转移到电子邮件世界的是什么，什么不是。

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

入门指南：

CSS支持和一般指南：

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

响应式指南：

模板和框架：

响应替代示例：

上面的Ted Goas Responsive链接也是一个很好的例子。

疑难解答和一般指南：

您将需要使用VML来获取在Outlook中工作的背景图像（除了在body标签中）。这里有一些VML链接：

我一直在做这些（在相当长的时间）为我的工作一段时间。 HTML电子邮件有很多缺陷。不同的电子邮件客户端呈现不同的HTML，使IE6先进。

这是我迄今为止学到的一个总结。

使用内联CSS ：样式并不总是被支持。
使用表格布局 ：我知道，但div布局依赖于CSS，许多电子邮件客户端无法应付。
不要使用rowspan ：这会导致奇怪的间距问题。
不要使用背景图片 ：支持这些是有限的。
带有“display：block”的样式图片标签 ：这样可以修复hotmail的奇怪间距问题。
如果使用多个表将它们嵌套在一个父表中 ：这会阻止更奇怪的间距问题。
不要使用Javascript ：再次支持不好。
确保您的电子邮件清晰无图 ：用户可能无法加载它们。
提供一个在线版本和链接 ：即使他们的电子邮件客户端是可怕的，这可以让用户看到预期的内容。
测试，测试，测试 ：仅仅因为它在一个电子邮件客户端中工作并不意味着它在其他工作。一个大的是Outlook 2007。它使用word来呈现HTML（叹气）。

这还不是一个全面的清单，但应该让大多数人走上正轨。

内联的CSS和表 – 认为约2000年的Web开发，你会没事的。活动监视器对于电子邮件客户端可以处理的内容有很好的资源。也可以使用http://www.emailonacid.com/进行测试; – 不必发送大量测试。

我自己也发现这个指南非常有用：指导电子邮件客户端的CSS支持。

这也不错，所以看看什么电子邮件浏览器支持内联CSS： http : //www.campaignmonitor.com/css/

我也建议litmusapp（谷歌它！）。这是检查事物的好工具。