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

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

关于HTML电子邮件，我最后总是回到的资源是

---

由于他们的业务仅限于电子邮件发送，因此他们和其他人一样了解自己的工作。我将创建一个带有样式表的HTML页面，然后使用jQuery将样式表应用于每个元素的样式属性。大概是这样的：

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非常详细地介绍了各种邮件客户端中支持的内容和不支持的内容

---

您可以使用一项服务，如查看电子邮件在多个客户端上的显示方式，以及它们是否被过滤器捕获等。

Mail chimp有一篇关于不该做什么的文章。（我知道这听起来与你想要的不符）

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

基本原则是：

• 具有图像的绝对路径（例如。 )
• 使用表格进行布局（从未想过 我推荐！）
• 使用内联样式（和老式css） 同样，最多2.1，框阴影 不起作用（例如；））

只要测试尽可能多的电子邮件客户端，你可以得到你的手上，或使用石蕊别人建议以上！（归功于吉姆）

编辑：

邮差黑猩猩通过向社区提供信息做了大量工作

---

它为您将CSS类应用到html元素中

我以前打过HTML电子邮件大战。下面是我的一些关于电子邮件客户端之间最大兼容性的样式设置的提示

• 内联样式是您最好的朋友。绝对不要链接样式表，也不要使用
  标记（例如，GMail会剥离该标记及其所有内容）

• 与您更好的判断相反，使用和滥用表格
  s只是无法削减它（尤其是在Outlook中）

• 不要使用背景图像，它们是参差不齐的，会惹恼你

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

• 小心将实际链接超链接到不同的内容。例如，不要键入

  http://www.google.com

  然后将其链接到

  https://gmail.com/

  。有些客户端会将邮件标记为垃圾邮件或垃圾邮件

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

• 如果可能，将图像嵌入电子邮件中。电子邮件不必通过外部web服务器下载，也不会作为附件显示在电子邮件中

---

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

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

---

我发现图像映射非常有效。如果您有任何属于图像的页眉或页脚，请确保应用bgcolor=“填空”，因为outlook在大多数情况下不会加载图像，您将保留一个透明的页眉。如果你至少指定了一种与邮件整体感觉相匹配的颜色，那么对用户来说就不会那么震惊了。切勿尝试使用任何样式表。或者CSS！只要避开它

根据您是从word还是共享google文档复制内容，请确保（command+F）找到所有（'）和（“），并在您的编辑软件（尤其是dreemweaver）中替换它们，因为它们将显示为代码，这并不好

ALT是你最好的朋友。使用ALT标记将文本添加到你的所有图像中。因为它们很可能无法正确加载。而ALT文本正是让人们单击（请参见图像）按钮的原因。还可以定义图像的宽度、高度，并将边框设为0，这样图像周围就不会出现奇怪的线条

考虑在Photoshop中编辑所有图像，图像两侧各有一个15px的边框（使背景透明并另存为PNG 24）。有时电子邮件客户端不读取应用于图像的任何填充样式，因此避免了任何奇怪的格式

此外，我还发现链接下的行特别烦人，因此如果应用它将去除线条，为您提供所需的外观

---

有很多东西真的会影响整体外观。

+1：我不知道Litmus。这看起来可以节省大量时间。谢谢你：D，别忘了CampaignMonitor上的博客文章，其中还包括一些很好的提示。不过你必须小心一点……它不是万无一失的。它可能会弄乱东西的宽度s、 因此，在发送之前只需检查所有内容即可。为了避免这个问题，您可以先用jQuery隐藏整个文档，然后运行此代码（可能会取消隐藏）-通过这种方式检索并应用实际的CSS规则，而不是计算结果（例如宽度）当在

上放置背景色时，Outlook不会将颜色扩展到内容之外，这意味着填充物不会被着色。为什么，互联网？为什么我们不能为电子邮件提供漂亮的html？挥动拳头，这样我们就可以得到更漂亮的垃圾邮件？@daviders也许应该指出“嵌入的图像”并不意味着将图像添加为附件，而是应将其作为base64编码字符串包含，以替换“正常”中引用的url