Question

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

Answer 1

之前我曾参与过HTML电子邮件大战。以下是有关样式的一些提示，以便最大程度地兼容电子邮件客户端。

内嵌样式是你最好的朋友。绝对不要链接样式表，也不要使用<style>标签（例如，GMail标记标签及其所有内容）。
违反您的判断，使用和滥用表格。 <div>只是不会削减它（特别是在Outlook中）。
不要使用背景图片，它们很不稳定会让你烦恼。
请记住，某些电子邮件客户端会自动将输入的超链接转换为链接（如果您不自己锚定<a>）。这有时会产生负面影响（例如，如果您在每个超链接上放置样式以显示不同的颜色）。
小心地将实际链接与不同的链接进行超链接。例如，请勿键入http://www.google.com，然后将其链接到https://gmail.com/。有些客户将邮件标记为垃圾邮件或垃圾邮件。
将图片保存为少量颜色以节省尺寸。
如果可能，在您的电子邮件中嵌入您的图片。电子邮件不必与外部网络服务器联系以下载它们，它们也不会作为电子邮件的附件出现。

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

Answer 2

Campaign Monitor有一个很好的support matrix详细说明了支持的内容以及各种邮件客户端之间的内容。

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

Answer 3

邮件黑猩猩有一篇很好的文章说明了什么不该做。（我知道这听起来像是错误的方式）

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

一般而言，您所学到的所有对网页设计都不好的事情似乎是html电子邮件的唯一选择。

基础知识是：

拥有图像的绝对路径（例如 https://stackoverflow.com/random-image.png）
使用表格进行布局（从未想过我推荐！）
使用内联样式（和旧学校css 也是，最多2.1，箱形阴影不会起作用;））

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

编辑：

通过向社区提供this tool邮件黑猩猩做得很好。

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

Answer 4

除了此处发布的答案外，请务必阅读本文：

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

Answer 5

我总是回到关于HTML电子邮件的资源是CampaignMonitor's CSS guide。

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

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并在电子邮件中使用它。

Answer 7

我发现图像映射效果很好。如果您有任何图像的页眉或页脚，请确保您应用bgcolor =“填充空白”，因为在大多数情况下，Outlook不会加载图像，您将留下透明标题。如果你至少指定一种适用于电子邮件的全部感觉的颜色，那么对用户来说就不那么容易受到冲击了。切勿尝试使用任何造型床单。或者根本就是CSS！避免它。

取决于你是从一个单词复制内容还是共享google文档，请确保（命令+ F）找到所有（'）和（“）并在编辑软件（尤其是dreemweaver）中替换它们，因为它们会显示作为代码，它只是不好。

ALT是你最好的朋友。使用ALT标记将文本添加到所有图像中。因为赔率是他们不会正确加载。 ALT文本是让人们点击（见图片）按钮的原因。同时定义您的图像宽度，高度并使边界为0，这样您就不会在图像周围出现奇怪的线条。

考虑在Photoshop中使用15px边框编辑所有图像（使背景透明并保存为PNG 24）。有时，电子邮件客户端不会读取您应用于图像的任何填充样式，因此它可以避免任何奇怪的格式化！

此外，我发现链接下的行特别烦人，所以如果你申请＆lt; style =“text-decoration：none; color：#wour你想要的颜色！” ＆GT;它会移除线条并为您提供所需的外观。

有很多东西可以真正搞乱整个外观和感觉。

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

7 个答案: