代码之家 › 专栏 › 技术社区 › Jonathan Sampson

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

html-email css html

Jonathan Sampson · 技术社区 · 6 年前

我已经开发网站十多年了,但很快发现,我在开发电子邮件客户端时,许多为网络开发的习惯都是无用的。这给我带来了巨大的挫败感,所以我想我会问一个问题,希望能为像我这样不时为gmail、outlook等设计的人提供最佳实践和必要的考虑。

例子: <style>...</style> vs内联CSS。

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

5 回复 | 直到 11 年前

123

John 5 年前

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

入门指南:

CSS支持和一般指南:

你应该总是把你的CSS嵌入到html电子邮件中。以下是 CSS Inlining Tools

响应指南:

模板和框架:

响应性备选示例:

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

故障排除和一般指南:

你需要使用 VML 使背景图像在Outlook中工作(除了 in the body tag ). 以下是一些VML链接:

Adam V 15 年前

我做这些(有时)已经有一段时间了。HTML电子邮件有很多陷阱。不同的电子邮件客户端呈现不同的HTML,使IE6看起来更高级。

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

使用内联CSS :不总是支持样式。
使用表格布局 :我知道,但div布局依赖于css,许多电子邮件客户端无法处理。
不要使用rowspan :这会导致奇怪的间距问题。
不使用背景图像 :对这些的支持是有限的。
使用“显示:块”设置图像标记样式 :这修复了hotmail的奇怪间距问题。
如果使用多个表,则将它们嵌套在一个父表中 :这会阻止更多奇怪的间距问题。
不要使用Javascript :同样不太受支持。
确保您的电子邮件清晰易读,没有图像 :用户不能加载它们。
提供联机版本并链接到它 :这允许用户看到预期的内容,即使他们的电子邮件客户端很糟糕。
测试,测试,测试 :仅仅因为它在一个电子邮件客户端中工作并不意味着它在其他客户端中工作。《2007年展望》让你大吃一惊。它使用word来呈现HTML(sigh)。