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

小开

关于HTML电子邮件，我总是回到CampaignMonitor的CSS指南。

由于他们的业务完全围绕电子邮件传递，所以他们比任何人都了解自己的业务

小开

“胆小鬼。我将使用样式表制作一个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并在电子邮件中使用它。

小开

最佳答案

Campaign Monitor有一个优秀的支持矩阵详细说明了在各种邮件客户端中支持什么和不支持什么。

你可以使用像石蕊这样的服务来查看一封电子邮件如何在多个客户端之间出现，以及它们是否被过滤器捕获等等。

小开

邮件黑猩猩有一篇很好的文章，告诉你什么是不该做的。(我知道这听起来和你想要的完全相反)

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

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

基本原则是:

https://stackoverflow.com/random-image.png

使用表格布局(从未想过我推荐!)

只要在尽可能多的电子邮件客户端中进行测试，或者像上面其他人建议的那样使用Litmus !(credit to Jim)

编辑:

邮件黑猩猩通过将这个工具提供给社区做了一项伟大的工作。

它应用你的CSS类到你的html元素内联为你!

小开

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

内联样式是你最好的朋友。绝对不要链接样式表，也不要使用<style>标记(例如，GMail会剥离该标记及其所有内容)。

与您更好的判断相反，使用和滥用表。__abc只是不能削减它(特别是在Outlook)。

不要使用背景图片，它们有斑点，会让你烦恼。

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

小心用超链接把一个实际的链接和一个不同的链接链接起来。例如，不要输入http://www.google.com，然后将其链接到https://gmail.com/。一些客户端会将消息标记为垃圾邮件或垃圾邮件。

将图像保存为，颜色越少越好，以节省尺寸。

如果可能，嵌入您的图像在您的电子邮件中。电子邮件将不必连接到外部网络服务器来下载它们，它们也不会作为附件出现在电子邮件中。

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

小开

除了这里发布的答案，一定要阅读这篇文章:

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

小开

我发现图像映射工作得很好。如果你有任何页眉或页脚是图像，确保你应用了bgcolor="fill in the blank"，因为outlook在大多数情况下不会加载图像，你会留下一个透明的页眉。如果你至少指定了一种与电子邮件整体感觉一致的颜色，用户就不会感到震惊。不要尝试使用任何样式表。或者CSS !尽量避免。

如果你是从一个单词或共享的谷歌文档中复制内容，一定要(command+F)找到所有的(')和(")，并在你的编辑软件(尤其是dreemweaver)中替换它们，因为它们会显示为代码，这是不好的。

ALT是你最好的朋友。使用ALT标签添加文本到所有的图像。因为它们很可能无法正确加载。而ALT文本是什么让人们点击(见图片)按钮。同时定义你的图像宽度，高度，并使边界为0，这样你就不会在你的图像周围得到奇怪的线条。

考虑在Photoshop中编辑所有图像，每边都有15px的边框(使背景透明并保存为PNG 24)。有时电子邮件客户端不读取任何填充样式，你应用到图像，这样就避免了任何奇怪的格式!

此外，我发现链接下的行特别烦人，所以如果你应用<风格= "文字修饰:没有;颜色:随便你想要什么颜色!”>它将删除线，给你想要的外观。

有很多东西真的会扰乱整体的外观和感觉。