样式化HTML电子邮件的最佳实践

Question

我正在为电子邮件简报设计HTML模板.我了解到许多电子邮件客户端忽略了链接的样式表,而其他许多(包括Gmail)完全忽略了CSS块声明.内联样式属性是我唯一的选择吗？样式化HTML电子邮件的最佳做法是什么？

Answer 1

我之前曾参与过HTML电子邮件大战.以下是有关样式的一些提示,以实现电子邮件客户端之间的最大兼容性.

• 内联样式是你最好的朋友.绝对不要链接样式表,也不要使用<style>标签(GMail,例如,标签及其所有内容).

• 反对你更好的判断,使用和滥用表格. <div>只是不会削减它(特别是在Outlook中).

• 不要使用背景图片,它们很不稳定会让你烦恼.

• 请记住,某些电子邮件客户端会自动将输入的超链接转换为链接(如果您不<a>自己锚定它们).这有时会产生负面影响(例如,如果您在每个超链接上放置一种样式以显示不同的颜色).

• 小心超链接实际链接与不同的东西.例如,不要输入http://www.google.com然后将其链接到https://gmail.com/.某些客户端会将邮件标记为垃圾邮件或垃圾邮件.

• 将图像保存为尽可能少的颜色以节省大小.

• 如果可能,请将您的图片嵌入电子邮件中.电子邮件不必与外部Web服务器联系以下载它们,它们也不会显示为电子邮件的附件.

最后,测试,测试,测试!每个电子邮件客户端的操作方式与浏览器不同.

Answer 2

Campaign Monitor有一个很好的支持矩阵,详细说明了各种邮件客户端支持的内容和不支持的内容.

您可以使用Litmus等服务来查看电子邮件在多个客户端中的显示方式以及是否被过滤器等捕获.

Answer 3

邮件黑猩猩有关于不该做什么的相当不错的文章.(我知道这听起来像是错误的方式)

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

一般来说,你学到的所有东西都是网页设计的不良做法,似乎是html电子邮件的唯一选择.

基础是:

• 拥有图像的绝对路径(例如 https://stackoverflow.com/random-image.png)
• 使用表格进行布局(从未想过我会推荐!)
• 使用内联样式(和旧学校css一样,最多2.1,box-shadow也不会起作用;))

只需测试尽可能多的电子邮件客户端,或者像上面提到的其他人一样使用Litmus!(归功于吉姆)

编辑:

邮件黑猩猩通过向社区提供此工具做得很好.

它将CSS类应用于内联的html元素!

Answer 4

除了这里发布的答案,请务必阅读本文:

http://24ways.org/2009/rock-solid-html-emails

Answer 5

我最终回到HTML电子邮件的资源是CampaignMonitor的CSS指南.

由于他们的业务完全围绕电子邮件传递,他们知道他们的东西以及任何人都会

Answer 6

'这样.我创建一个带有样式表的HTML页面,然后使用jQuery将样式表应用于每个元素的样式attr.像这样的东西:

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

然后复制DOM并在电子邮件中使用它.