我正在为电子邮件时事通讯设计一个HTML模板。我了解到许多电子邮件客户端忽略了链接的样式表,而其他许多客户端(包括Gmail)完全忽略了CSS块声明。内联样式属性是我唯一的选择吗?样式化HTML电子邮件的最佳实践是什么?


当前回答

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

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

其他回答

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

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

Campaign Monitor有一个很好的支持矩阵,详细说明在各种邮件客户端中支持什么,不支持什么。

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

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

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)。有时电子邮件客户端不读取任何填充样式,你应用到图像,这样就避免了任何奇怪的格式!

此外,我发现链接下的行特别烦人,所以如果你应用< style="text-decoration:none;颜色:随便你想要什么颜色!”>它将删除线,给你想要的外观。

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

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