样式化 HTML 电子邮件的最佳实践 [关闭]

Posted 2023-02-24

【中文标题】样式化 HTML 电子邮件的最佳实践 [关闭]

【英文标题】：Best practices for styling HTML emails [closed]

【发布时间】：2011-06-17 06:53:23

【问题描述】：

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

【问题讨论】：

这是big list of resources 上的duplicate question。

【参考方案1】：

关于 HTML 电子邮件，我最后总是会提到的资源是 CampaignMonitor's CSS guide。

由于他们的业务仅针对电子邮件传递，因此他们对自己的东西了如指掌

【参考方案2】：

'害怕。我会用样式表制作一个 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 并在电子邮件中使用它。

【讨论】：

你必须小心一点……它不是万无一失的。就像它可能会弄乱事物的宽度，所以在发送之前检查所有内容。

为了解决这个问题，你可以先用 jQuery 隐藏整个文档，然后运行这段代码（也许取消隐藏）——这样检索和应用实际的 CSS 规则而不是计算结果（例如宽度。）

【参考方案3】：

Campaign Monitor 有一个出色的support matrix，详细说明了各种邮件客户端支持和不支持的内容。

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

【讨论】：

+1：不知道 Litmus。这看起来可以节省大量时间。谢谢 :D 不要忘记 CampaignMonitor 上的博客文章，其中还包含一些不错的提示。

【参考方案4】：

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

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

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

基础是：

具有图像的绝对路径（例如。 https://***.com/random-image.png) 使用表格进行布局（从未想过 我会推荐它！） 使用内联样式（和老式 CSS 同样，最多 2.1，box-shadow 例如，不起作用；））

只需在尽可能多的电子邮件客户端中进行测试，或者按照上面其他人的建议使用 Litmus！ （感谢吉姆）

编辑：

Mail chimp 做得很好，将this tool 提供给社区。​​p>

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

【讨论】：

mailchimp 链接已损坏，可能是其中一篇文章，kb.mailchimp.com/article/common-html-email-coding-mistakes 或此kb.mailchimp.com/article/common-mistakes-to-avoid

我已经更新了链接，你建议的第一个是正确的。不幸的是，它在没有添加重定向的情况下被移动。

感谢 CSS 内联工具。我猜会有所帮助。

【参考方案5】：

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

内联样式是你最好的朋友。绝对不要链接样式表，也不要使用<style> 标签（例如，GMail 会删除该标签及其所有内容）。

根据您的判断，使用和滥用表格。 <div>s 只是不会削减它（尤其是在 Outlook 中）。

不要使用背景图片，它们参差不齐，会惹恼你。

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

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

以尽可能少的颜色保存图片以节省大小。

如果可能，将图片嵌入到您的电子邮件中。电子邮件无需访问外部网络服务器即可下载它们，它们也不会显示为电子邮件的附件。

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

【讨论】：

在<div> 上放置背景颜色时，Outlook 不会将颜色扩展到内容之外，这意味着填充不会被着色。

为什么，互联网？为什么我们不能为电子邮件提供漂亮的 html？ 握拳

所以我们可以得到更漂亮的垃圾邮件？

@DavidRivers 也许应该指出，“嵌入图像”并不意味着将图像添加为附件，而是应该将它们包含为 base64 编码的字符串，以替换“普通”中引用的 url @ 987654327@ 标签，像这样：<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...">

@MJafarMash 这是在电子邮件中嵌入图像的错误方法。您必须创建单独的信封并根据其cid 引用图像。

【参考方案6】：

除了此处发布的答案，请务必阅读这篇文章：

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

【参考方案7】：

我发现图像映射效果很好。如果您有任何作为图像的页眉或页脚，请确保您应用 bgcolor="fill in the blank" 因为在大多数情况下 Outlook 不会加载图像，并且您将得到一个透明的页眉。如果您至少指定一种与电子邮件的整体感觉相匹配的颜色，那么对用户来说就不那么震惊了。切勿尝试使用任何样式表。或者CSS！只是避免它。

根据您是从单词复制内容还是从共享的 google Doc 复制内容，请确保 (command+F) 找到所有 (') 和 (") 并在您的编辑软件（尤其是 dreemweaver）中替换它们，因为它们会显示作为代码，它只是不好。

ALT 是你最好的朋友。使用 ALT 标签将文本添加到所有图像。因为很可能它们不会正确加载。而那个 ALT 文本是让人们点击（见图片）按钮的原因。还要定义您的图像宽度、高度并将边界设为 0，这样您就不会在图像周围出现奇怪的线条。

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

我还发现链接下的那一行特别烦人，所以如果你应用 它会移除线条并为您提供所需的外观。

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