89

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

对于像我这样不时为gmail、outlook等进行设计的其他人来说，最佳实践和必要的考虑是什么？

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

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

4

3 回答 3

143

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

入门指南：

CSS 支持和一般指南：

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

响应指南：

模板和框架：

响应式替代示例：

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

故障排除和一般指南：

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

于 2014-01-29T17:04:18.430 回答
43

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

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

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

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

于 2010-02-09T14:56:02.400 回答
6

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

于 2010-02-09T14:44:02.290 回答