问设置HTML电子邮件样式的最佳实践

EN

Campaign Monitor有一个很好的support matrix，详细说明了在各种邮件客户端中支持什么和不支持什么。

您可以使用像Litmus这样的服务来查看电子邮件在多个客户端上的显示情况，以及它们是否被过滤器捕获等。

我以前也打过HTML电子邮件之战。下面是我的一些技巧，关于如何在电子邮件客户端之间实现最大的兼容性。

• Inline styles是你最好的朋友。绝对不要链接样式表，也不要使用<style>标签(例如，GMail，剥离标签和所有它是你更好的判断，使用和滥用表格。<div>s就是不能剪切它(特别是在Outlook).
• Don't中使用背景图片)，它们是斑驳的，并且会惹恼you.
• Remember，因为一些电子邮件客户端会自动将键入的超链接转换为链接(如果你不自己锚定它们的话)。这有时会产生负面影响(例如，如果您将样式放在每个超链接上以不同的颜色显示)。
• 要小心将实际的链接与不同的内容进行超链接。例如，不要键入http://www.google.com，然后将其链接到https://gmail.com/。有些客户端会将邮件标记为垃圾邮件或垃圾邮件。
• 将您的图像保存为尽可能少的颜色以节省大小。
• 如果可能，在您的电子邮件中嵌入您的图像。电子邮件无需连接到外部web服务器即可下载它们，它们也不会显示为电子邮件的附件。

最后，测试，测试，测试！每个电子邮件客户端的处理方式都与浏览器不同。

邮件黑猩猩有一篇很好的文章，关于什么不能做。(我知道这听起来不是你想要的)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

一般来说，你所学到的所有对网页设计不好的东西似乎都是html电子邮件的唯一选择。

基本情况是：

• 具有图像的绝对路径(例如，https://stackoverflow.com/random-image.png)
• Use表格用于布局(从没想过我会推荐它！)
• 使用内联样式(也是老式的css，最多2.1，框阴影不起作用;) )

只要尽可能多地测试你的电子邮件客户端，或者按照别人的建议使用Litmus就可以了！(归功于Jim)

编辑：

邮件黑猩猩已经做了很好的工作，使this tool可用于社区。

它将你的CSS类应用到内联的html元素中！