Outlook 电子邮件呈现：我如何学会停止担心和热爱 Outlook

已发表: 2021-07-02

我们都去过那里。您可以使用有趣的 GIF、可访问的按钮和引人注目的图像创建精美的电子邮件。然后你测试它，它看起来很棒……除了在 Outlook 中，它完全坏了。人们无法按照您希望的方式与损坏的电子邮件互动。

长期以来，Outlook 一直困扰着电子邮件营销人员，但必须如此吗？我们如何使用它？继续阅读以了解我是如何爱上 Outlook 的，尽管它有很多缺点。我将介绍：

Outlook 的版本
Outlook 怪癖的提示
进行修复的代码

许多版本的 Microsoft Outlook

“Outlook”这个名字涵盖了几个不同的电子邮件客户端，它们有几个不同的渲染引擎和至少两种不同的查看设置。如果你任其发展，所有这一切都可能令人头疼。让我们深入研究一下，看看我们是否可以把它理顺一点。

展望 2007-2019

这些是 Outlook 的 Windows 桌面版本。它们使用 Word 作为渲染引擎，这在电子邮件就像写信一样的时候很有意义。啊，简单的时代。但是，对于电子邮件营销人员来说，它并没有削减它来呈现 HTML 电子邮件。

120 DPI （每英寸点数）增加了复杂性。 Windows 用户可以选择 120 DPI 来增加他们的屏幕分辨率。如果他们这样做，桌面电子邮件客户端将尊重这一点，并将更新图像和文本以更大。这可能会对您的电子邮件造成严重破坏。

Mac 版 Outlook

这是 Outlook 的 Mac 桌面版本。它使用 Webkit 作为渲染引擎。这意味着就电子邮件呈现而言，它通常与 Apple Mail 和 iOS 相当。如果它在您的浏览器中看起来不错，那么它在这里看起来也不错。

Outlook.com 和 Outlook 移动应用

这些客户端使用 Webkit 或基于 Webkit 的渲染引擎，因此它们提供良好的 HTML 渲染并且通常不会破坏您的电子邮件。

展望办公室 365

Outlook Office 365 有两个不同版本，桌面电子邮件客户端和基于 Web 的电子邮件客户端。桌面版与 Outlook 2007-2019 类似，使用 Word 作为渲染引擎（难以用于电子邮件）。基于 Web 的电子邮件客户端使用 Webkit 或 Blink 并以类似于 Outlook.com 的方式呈现电子邮件（更容易）。

不再有损坏的电子邮件

在 90 多个电子邮件客户端、应用程序和设备（包括所有版本的 Outlook）中预览您的电子邮件，以确保获得品牌一致、无错误的订阅者体验。

了解如何 →

一个展望来统治一切

一月份，微软宣布了他们的“One Outlook”愿景，即从 2022 年的某个时候开始，用一个可以在任何地方运行的客户端取代桌面客户端。

新的电子邮件客户端将基于当前的 Outlook Web 应用程序。所以希望它有一个基于 Webkit 的渲染引擎，并且能够很好地渲染 HTML 电子邮件。不幸的是，当这种情况发生时，所有那些旧的桌面客户端不会消失，因此它们仍然需要在一定程度上得到支持。

做或者不做，不可以尝试

你的头还晕吗？

如果是，那么让我们为您提炼它：关键要点是我们正在使用两种不同的渲染引擎——Word 和 Webkit。 Webkit 更容易编码，而 Word 更难。两者都没有好坏之分。它们只是需要不同的方法，并且需要考虑不同的怪癖。

让我们看看 Outlook 桌面客户端中的一些常见呈现问题以及如何解决这些问题。

请在图像上包含宽度和高度属性

Outlook 不支持宽度和高度的 CSS 样式，如果您不包含宽度和高度属性，Outlook 将以其实际大小显示您的图像。如果您使用的是视网膜图像（应该如此），这意味着您将获得会破坏电子邮件的巨大图像。

包括 ALT 文本

不要让 Outlook 的安全消息代表您的图像。确保包含 ALT 文本。特别是因为 Outlook 默认不显示图像，除非人们打开该功能。

使用表格

电子邮件已经走了很长一段路，您可以在许多电子邮件客户端中使用 <div> 块，但 Outlook 不是其中之一。 Outlook 将忽略您应用于 <div> 标签的大多数样式，包括宽度和填充。因此，为您的内容使用 <table> 标签很重要。

一定要使用 Outlook 特定的代码来解决呈现问题

这可能无法解决您的所有问题，但很多时候包含一些特定于 Outlook 的 CSS 可以帮助您解决仅在 Outlook 上看到的呈现问题。或者你可以隐藏不上的Outlook工作小块，和使用条件代码来显示一个版本，将用于Outlook的特定版本。（稍后会详细介绍条件代码。）

为小图像或表格单元格添加行高

Outlook 设置表格单元格和图像的最小高度。因此，如果您使用表格单元格作为分隔符或有一个小图像，请确保为元素添加一个行高属性，该属性等于您希望它们出现的高度。例如：

<tr>
     <td style="font-size: 5px; line-height: 5px; mso-line-height-rule: exactly;">&nbsp;</td>
</tr>

纠正 DPI 缩放问题

在 Windows 计算机上，有一个人们可以更改的全局设置（或者在某些情况下，默认情况下设置得更高）可以放大文本和图形元素以使其更大且更易于阅读。这对于可访问性来说非常有用，但对于 Outlook 来说不是那么好，因为只有某些元素被放大而其他元素没有。

幸运的是，有一个修复程序。首先，您必须向 HTML 标记添加一个 XML 命名空间：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">

然后，在 </head> 标记之前添加一些代码来修复图像缩放：

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

最后，确保将任何设置的宽度作为带有像素的 CSS 属性包含在内，而不是作为表格的属性。

✗不是这个宽度=“600” ：

<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="600">

是的，就像这样style="width:600px;" ：

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">

这将解决 120 DPI 客户端的大部分问题。看看这个修复前后的并排比较：

Outlook 2013 120 DPI （无修复）	120 DPI 时的 Outlook 2013 （带修复）

有什么区别吧？

不要指望悬停效果起作用

Outlook 不支持悬停伪类。您仍然应该包含它以创建交互以增加您的电子邮件在其他电子邮件客户端中的可访问性，但如果它在 Outlook 中不起作用，请不要感到惊讶。

不要依赖动画 GIF 来表达您的观点

Outlook 桌面客户端不支持动画 GIF。您可以让初始帧显示您想要在 Outlook 中显示的图像，或者您可以在 Outlook 中隐藏动画 GIF 并使用条件编码来显示您想要的静止图像。（同样，接下来将详细介绍条件编码。）

不要在没有后备的情况下使用交互式内容

交互式电子邮件是 Outlook 的一大禁忌。它们取决于 AMP 编码或复选框 hack，这两者在 Outlook 上均不受支持。

对于电子邮件的 AMP，将显示 HTML 文件而不是 AMP 文件，因此无需额外编码。对于复选框黑客交互，您必须隐藏交互内容并显示 Outlook 后备。同样，条件编码在这里是您的朋友。

不要向图像添加填充或边距

Outlook 会去除图像的填充和边距。确保在图像周围的表格单元格中添加填充。或者，如果图像与副本位于同一单元格中，请为副本周围的标签添加边距（<h1>、<h2>、<p> 等）。

恐惧是电子邮件杀手：应对 Outlook 恐惧所需的代码

为 Outlook 的桌面电子邮件客户端编写出色的电子邮件需要跳出“正常”的 HTML 和 CSS。三种类型的代码可帮助您的电子邮件在这些客户端中脱颖而出：条件编码、MSO 属性和 VML。

使用新事物可能会令人恐惧，但我保证这是值得的。当你让它正常工作的那一刻？您会觉得自己在不到 12 秒差距内完成了 Kessel Run。

条件编码

条件编码是一种编码，它查看您的订阅者使用的电子邮件客户端或浏览器，并且仅在满足评论中的条件时才显示代码，例如：

<!--[if mso]>
<p>This content is only visible on Outlook desktop clients</p>
<![endif]-->

您甚至可以通过添加版本号来使用它来定位特定版本的 Outlook 桌面客户端：

<!--[if mso 14]>
<p>This content is only visible on Outlook 2010 desktop client</p>
<![endif]-->

但是，Outlook 并不简单，因此版本号与电子邮件客户端的名称不对应：

展望 2000 = mso 9
展望 2002 = mso 10
展望 2003 = mso 11
展望 2007 = mso 12
展望 2010 = mso 14
展望 2013 = mso 15
Outlook 2016、Outlook 2019 和 Office 365 桌面版 = mso 16

然后，您可以通过针对小于 (lt)、大于 (gt)、小于或等于 (lte) 或大于或等于 (gte) 的一系列客户来获得更复杂的结果。例如：

<!--[if (gte mso 9) | (lte mso 11)]>
<p>This content is only visible on Outlook 2000 to Outlook 2003</p>
<![endif]-->

因此，如果您只看到特定客户端上发生的一些疯狂的事情，您可以专门针对该客户端并为其隐藏和显示更好的内容。

您还可以使用条件注释来隐藏 Outlook 中的内容，方法是说“if !mso”，意思是“if not mso”：

<!--[if !mso]><!-->
<p>This is visible on anything except Outlook desktop clients</p>
<!--<![endif]-->

请记住：条件代码仅适用于 Outlook 桌面客户端。由于这是许多问题发挥作用的地方，因此您可能比网络邮件客户端的任何修复更需要这些。

但是也有一些方法可以定位 Web 客户端，但无法定位一个 Outlook Web 客户端而不是另一个。因此，当您定位 Outlook.com 时，您还将定位 Office 365 Web 客户端（但不是桌面客户端）。

您可以利用 Outlook 将“x_”附加到所有类名的事实来定位 Outlook Web 客户端，但不会为属性选择器执行此操作。因此，如果您有一个“foo”类并希望对 Outlook Web 客户端进行不同的处理，您可以使用以下代码定位它：

[class~="x_foo"] { }

（感谢 Mark Robbins 的修复和 Dylan Smith 的 howtotarget.email。）

MSO 属性

如上所述，您可以添加特定于 Outlook 的 CSS，这些 CSS 只会影响 Outlook 桌面电子邮件客户端。这里有一些你会发现很常见的，你可能已经听说过它们：

mso-hide：全部；

此属性将对 Outlook 桌面客户端隐藏所有内容。转发电子邮件时，它确实会被删除，因此如果您知道订阅者经常利用该功能，请谨慎使用它。如果您是“以防万一”编码器，则可以将其与“if not mso”条件代码配对。

mso-line-height-rule: 完全正确；

此属性可确保 Outlook 以您在 line-height 属性中指定的高度显示您的行高。没有它，Outlook 不一定会尊重您的行高。如果您在一个以精度为关键的行业工作，您可能非常熟悉此属性。

mso-padding-alt

这个不太常见，但我不得不不时使用它。它允许您声明特定于 Outlook 的填充。因此，如果您在单元格上的正常填充在 Outlook 中无法正确呈现，您可以使用mso-padding-alt设置适合您的 Outlook 设计的值。

mso-ansi-字体大小

这是我只偶尔使用的另一种。它允许您设置特定于 Outlook 的字体大小。因此，如果 Outlook 将您的字体渲染得比其他电子邮件客户端大一些，并且您最终得到的是您不想要的最后一行短文，请添加mso-ansi-font-size并设置适合您的副本的字体大小。

您可以使用更多 MSO 属性，因此请继续查看是否有任何内容可以为您解决渲染问题。

虚拟机

VML 代表矢量标记语言。它是 Microsoft 的 SVG 版本，但该语言已经贬值并且很少使用（是的电子邮件！）。 Microsoft 确实有在线存档的 VML 文档，因此您仍然可以查找如何使用它在 Outlook 中创建矢量，它仍然受支持。从理论上讲，当 Microsoft 过渡到他们的“One Outlook”模型时，我们将能够将 VML 抛在后面。

确保包含 VML 命名空间声明。我通常将它添加到样板模板中的 <html> 元素中，这样我就可以在需要时使用 VML：

<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">

一旦你有了它，你就可以在 MSO 条件中将任何 VML 添加到你的代码中：

<!--[if mso]>
    <v:rect fillcolor="blue" stroked="false" style="width:200px; height:50px;"></v:rect>
 <![endif]-->

该代码将创建一个 200 像素 x 50 像素的蓝色矩形。也许您实际上无法在电子邮件中使用某些东西，但是您可以使用 VML 将圆角按钮添加到您的代码、背景图像和背景渐变中。 Campaign Monitor 有两个由 Stig 创建的工具，可帮助您创建带圆角的背景图像或按钮。我发现这些是在您刚刚学习时添加 VML 的好方法。

您还可以使用 VML 创建虚假绝对定位、阴影效果或后备以支持 Outlook 中的 CSS 艺术。一旦你深入了解 VML，你就可以做很多事情。

长寿和电子邮件

Outlook 长期以来一直是电子邮件营销人员的祸根，但并非必须如此。

使用正确的工具，您可以创建在 Outlook 中正确呈现的精美电子邮件。查看本文中的资源以建立您的 Outlook 编码能力，并使用 Litmus Builder 和电子邮件预览在您的电子邮件中进行测试。将 Outlook 编码视为等待解决的难题，您可能会发现自己喜欢 Outlook 及其所有怪癖。

使用 Litmus 在 Outlook 中测试您的电子邮件

在点击发送之前查看您的电子邮件在 Outlook 中的外观并解决任何问题。使用 Litmus，您可以确信您正在创建订阅者可以参与的像素完美的电子邮件。

开始免费试用 →