为什么我的电子邮件在 Outlook 客户端中看起来很糟糕？

已发表: 2018-07-04

让我们面对真相。创建电子邮件是一项非常简单的任务。但是将这些电子邮件格式化为与 Outlook 兼容是一项艰巨的任务。事实上，比你想象的要难。

Outlook 是您将找到的最常用但历史悠久的电子邮件客户端。但是，它不支持您在 Gmail 等其他电子邮件客户端中发现的多项改进。

示例：

如果您使用了具有背景透明度的 PNG 图像，Outlook 会吓坏的！它不知道如何渲染这样的图像。同样，您可能想知道为什么圆形按钮（使用border-radius CSS 属性创建）在Outlook 客户端中看起来是方形的。因为 Outlook 不支持border-radius 和其他几个CSS 属性。

以下是您的 Outlook 电子邮件看起来很糟糕的原因以及您可以采取哪些措施来改进您的电子邮件设计。

为什么我的电子邮件在 Outlook 中看起来很糟糕？

现在电子邮件营销人员面临的最大挑战是为 Outlook 构建电子邮件模板。这是因为，从 Outlook 2007 开始，Microsoft 已停止使用 Internet Explorer 来呈现电子邮件，并开始使用 Microsoft Word 作为其呈现引擎。这种转换最适合 Microsoft Office 用户，因为它允许他们将内容从 Word 或 Excel 复制或粘贴到 Outlook 电子邮件中。但是，这使得基于 HTML 的电子邮件生成器的场景变得艰难。由于 HTML 电子邮件在外观上看起来不同，要克服某些挑战，请按照以下步骤改进电子邮件活动。

使用 Outlook 呈现电子邮件的挑战

电子邮件营销人员在设计电子邮件活动之前需要考虑很多。他需要了解使用 Outlook 的客户订阅。 Outlook 的桌面版、移动版和网页版在呈现电子邮件方面完全不同。当谈到使用 Outlook 呈现电子邮件时，以下是需要注意的事项。

为什么图像被剪裁和加载缓慢

在电子邮件中包含图像时，Outlook 对图像大小有一定的限制。

电子邮件通讯在电子邮件营销活动中发挥着重要作用。通过向其中添加图像使它们变得动态。有时，当将长图像添加到广告系列的模板时，它会在接收端被剪裁或重新缩放。这是因为 Outlook 剪辑了超过 1728 像素高度的图像顶部。因此，在这种情况下，我们需要调整 1728 像素以下的图像大小，使其看起来不被裁剪。

在无法调整图像大小的情况下，最好的替代方法是将图像裁剪成两个单独的图像，然后在广告系列中使用。

图像未调整大小

Outlook 不适用于受 HTML 约束的图像。也就是说，如果电子邮件模板添加了使用 HTML 调整大小的图像，Outlook 将仅以原始大小而不是调整大小的值显示图像。因此，我们需要确保图像在用于任何电子邮件自动化之前已调整好大小。

背景图片

让客户“惊叹”的最佳策略是创建一封带有品牌背景图片的电子邮件。我们可以通过在图像上叠加实时文本来使背景图像更有目的性。即使在没有向客户显示图像的情况下，实时文本也将帮助我们传达电子邮件的目的。

但是，Outlook 不支持带有 HTML 的背景图像。我们需要对订阅者查看的背景图像使用 VML（矢量标记语言）。

在 HTML 的<body>标记中输入以下代码，以使背景图像覆盖整个电子邮件窗口

<div> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="/IMAGE.png" color="#000000"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="IMAGE.png">

上面的代码完美地显示了在 Outlook 2007、2010 和 2013 中打开的电子邮件的背景图像。但 Windows Mail 10 需要在代码中进行一些修改，以添加图像及其源允许背景图像。

下面的代码将使图像的顶层透明并有助于修复背景图像。

 <td valign="top" height="700" background="Image Live URL Here" bgcolor="#f7901e"> <!--[if gte mso 9]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" src="/Image Live URL Here" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"> <v:fill opacity="0%" color="#f7901e" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div> <!-- HTML Content Here --> </div> <!--[if gte mso 9]> </v:textbox> </v:fill> </v:rect> </v:image> <![endif]--> </td>

动画 GIF不适合

视频胜于雄辩。

但是，从技术上讲，电子邮件模板需要复杂的编码来支持视频。考虑替代方案，作为电子邮件营销人员，我认为 GIF 是一种动态选择。 GIF 是动画图像，以最简单的形式传达信息。 Outlook 不支持 GIF。

GIF 图像加载，但只有 GIF 的第一帧呈现给客户。

如果您的电子邮件列表中有 Outlook 订阅者，请确保图像的第一帧共享 GIF 的主要上下文。

考虑使用动画部分为其他电子邮件客户端的订阅者提供额外的优势。

边界半径属性

说到电子邮件营销，号召性用语按钮是一项使电子邮件产生潜在客户的功能。我们点击了多少次圆形的 CTA 按钮？

边框半径属性是一个常见的 CSS 属性，但这不适用于 Outlook。在 Outlook 中，为订阅者提供了带有方形边框的 CTA 按钮。

额外的空格

有时，在使用 Outlook 呈现电子邮件后，图像上方的空格就像我们过去在打印预览选项中看到的那样。

正如之前在博客中所说，这是因为 Outlook 2007 使用 Microsoft Word 来呈现 HTML 电子邮件。

因此，电子邮件看起来与实际设计有些不同。

主要字体问题

如果订阅者的设备缺少主要字体样式，Outlook 将使用 Times New Roman 呈现整个电子邮件，而忽略代码中提到的后备字体。

 <!--[if mso]> <style> h1 { font-family: Primary font, Fallback font; } </style> <![endif]-->

电子邮件模板应该是完美的

您为电子商务商店运行电子邮件活动。您设计的模板应该有助于发送有效的电子邮件，因为这不是客户亲自与您见面的旧传统现场营销。

营销人员的长相决定了品牌的可信度。那么，我们现在发送什么来代表我们的品牌？

电子邮件。电子邮件的设计模板会给客户留下您品牌的第一印象。电子邮件与内容看起来越好，品牌就越好

但是，我们不能随意使用高级格式选项来使我们的电子邮件看起来有吸引力。我们可能会看到电子邮件在 Outlook 中看起来很完美，但是当它被其他电子邮件收件人呈现时，情况就不是这样了。

您应该坚持在电子邮件 html 中使用表格。不要尝试使用具有位置和浮动的 div 元素，因为 Outlook 不支持它。不幸的是，目前还没有解决方法。

取消订阅选项是必须的

管理电子商务商店，我们始终希望让客户与我们的品牌保持互动。

怎么做？

时事通讯。向客户提供有关您的业务领域的趋势和更新的潜在信息。

但最终决定是否遵循您的品牌的是客户。向我们订阅的客户应该可以随时选择退出订阅列表。

退订按钮是我们发送给客户的每份时事通讯中必须的，如果我们的客户没有看到这个按钮，
期待什么？
我们可能会收到垃圾邮件！

从 Outlook 发送电子邮件会使我们的品牌面临这种风险，因为它没有提供此标准选项。

链接更改为带下划线的蓝色/紫色文本

作为电子邮件营销人员，我们需要充分利用我们发送给客户的电子邮件。

我们可以包括订阅链接、指向我们趋势博客的链接、指向我们网站的重定向链接，以实现客户参与。

当从 Outlook 发送 HTML 电子邮件时，当在不同的电子邮件客户端上查看时，此类链接会以带下划线的蓝色/紫色文本显示。

为避免此问题，请使用<font>标记并用<span>标记和样式属性包装文本。

尝试使用以下代码 -

 <a> <span> <font color="#E3A216"> Click me </font> </span> </a>

Outlook 可以很好地填写您的个人收件箱。

但是，说到业务 - 开箱即用。