编写 HTML 电子邮件时的最佳实践和注意事项 [关闭]答案

【问题标题】：Best Practices & Considerations when writing HTML Emails [closed]编写 HTML 电子邮件时的最佳实践和注意事项 [关闭]
【发布时间】：2011-01-14 20:21:40
【问题描述】：

我已经开发网站十多年了，但很快发现我为 Web 开发的许多习惯在为电子邮件客户端开发时毫无用处。这让我非常沮丧，所以我想我会问一个问题：

对于像我这样不时发现自己为 gmail、outlook 等进行设计的其他人，有哪些最佳实践和必要考虑因素？

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

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

【问题讨论】：

【解决方案1】：

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

入门指南：

CSS 支持和一般指南：

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

响应式指南：

模板和框架：

响应式替代示例：

上面的 Ted Goas Responsive 链接也有一个很好的流畅示例。

疑难解答和一般指南：

您需要使用 VML 才能在 Outlook 中使用背景图像（in the body tag 除外）。以下是一些 VML 链接：

【讨论】：

【解决方案2】：

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

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

使用内嵌 CSS：样式并不总是受支持。
使用表格布局：我知道，但 div 布局依赖于 css，许多电子邮件客户端无法应对。
不要使用 rowspan：这会导致奇怪的间距问题。
不要使用背景图片：对这些图片的支持有限。
使用“display:block”设置图片标签：这修复了 hotmail 奇怪的间距问题。
如果使用多个表将它们嵌套在一个父表中：这样可以避免更多奇怪的间距问题。
不要使用 Javascript：同样不能很好地支持。
确保您的电子邮件清晰易读，没有图片：用户可能无法加载它们。
提供在线版本并链接到它：这让用户可以看到预期的内容，即使他们的电子邮件客户端很糟糕。
测试、测试、测试：仅仅因为它适用于一个电子邮件客户端并不意味着它适用于其他电子邮件客户端。 Outlook 2007 是一大亮点。它使用 word 来呈现 HTML（叹气）。

这远非一个完整的列表，但应该能让大多数人走上正轨。

【讨论】：

【解决方案3】：

内联 CSS 和表格 - 想想 2000 年左右的 Web 开发，你会没事的。广告系列监控器为电子邮件客户可以处理的内容提供了极好的资源。还可以使用http://www.emailonacid.com/ 进行测试 - 无需发送大量测试。

【讨论】：