在 Outlook 中创建和嵌入 HTML 电子邮件模板的终极指南

根据 Gitnux 的 MarketData 2024 报告，美国 16% 的电子邮件用户使用 Outlook 作为主要电子邮件提供商，将 Outlook 列为该国最常用的电子邮件平台之一。

全球有超过 4 亿用户，如果您是电子邮件营销人员，您的电子邮件进入 Outlook 收件箱的机会很高。 考虑到这一点，了解 Outlook 的功能和限制对于创建适合每个收件人良好显示的电子邮件非常重要。

了解 Outlook 的 HTML 设计限制

尽管 Outlook 很受欢迎，但它主要用于同事之间的日常通信，而不是大规模营销活动。 因此，Outlook 在呈现 HTML 电子邮件时存在一些限制，例如：
‍
Outlook Web 或 App 的一些最重要的呈现问题包括：

• 使用 GIF 上的播放图标渲染 gif
• 字体不匹配
• 布局中的额外空间
• 图标相互堆叠或未对齐
• 背景图像不匹配
• 电子邮件元素之间未对齐

这些限制意味着，无论花费多少时间创建最具吸引力和品牌特色的电子邮件，Outlook 都可能向收件人提供不同的结果，从而影响电子邮件的可读性和影响力。

尽管我们建议不要使用 Outlook 作为发送平台，而使用 HubSpot 和 Mailchimp 等专业解决方案，但我们知道这并不总是可行。

许多使用 Outlook 的电子邮件营销人员发现了克服其呈现限制的创造性方法，通常选择基于图像的电子邮件或最大限度地提高仅包含文本的电子邮件的影响。 对于 HTML 电子邮件，虽然难以管理，但对于那些想要驾驭 Outlook 特性并相应优化其设计的人来说，它们仍然是一个可行的选择。

设计与 Outlook 兼容的 HTML 电子邮件模板的最佳实践

您可以通过两种方式为 Outlook 创建 HTML 电子邮件模板。 第一种是使用 CSS 手动编写 HTML 代码，然后将电子邮件另存为 Outlook 模板。 尽管这种方法不需要额外的软件工具，但它可能非常耗时并且需要 CSS 专业知识。

您还可以使用 Beefree 等外部电子邮件设计工具来创建 HTML 电子邮件模板。 这种方法更加用户友好和高效，因为它不需要 CSS 知识和手动编码。

无论您选择哪个选项，都可以遵循以下一些最佳实践：

• 简单是关键： 设计简单的单列模板。 复杂的布局虽然很有吸引力，但可能无法正确显示。
• 使用表格进行布局结构： 对表格进行试验，以确保您的设计元素保持在预期位置，从而帮助解决 Outlook 的错位问题。

• 使用内联 CSS： 如果可能，将内联 CSS 直接嵌入到 HTML 元素中以控制格式和布局； 这将有助于最大限度地减少 Outlook 对外部和内置样式表的有限支持。
• 使用安全网络字体： 在设计 Outlook 时，Arial、Times New Roman 或 Verdana 都是安全的选择。
• 替代文本： 由于 Outlook 默认情况下会阻止图像，因此请务必始终包含图像的替代文本，以确保可访问性，同时确保图像的缺失不会遗漏电子邮件的重要上下文。

使用 Beefree 在 Outlook 中设计 HTML 电子邮件模板

在 Outlook 中设计高性能 HTML 电子邮件模板时，使用正确的工具可以大大简化流程并确保遵循最佳实践。
‍
Beefree 作为一个多功能平台脱颖而出，不仅有利于创造性的电子邮件设计，而且还支持特定的 Outlook 渲染要求，例如：

• 设计简单： Beefree 的拖放功能可以轻松创建单列布局。 在 Beefree 中，用户可以轻松地为移动和桌面设备自定义电子邮件对齐方式、间距、高度等，确保跨多个设备的一致体验。
• 安全网络字体： 在 Beefree 中，您可以将网络安全字体设置为默认字体，以确保字体在所有电子邮件客户端（尤其是 Outlook）中一致呈现。
• 替代文本： 这可以手动或通过我们的人工智能集成供电。
• 响应式设计： 尽管 Outlook 不提供对响应式设计的强大支持，但 Beefree 允许用户创建具有流畅布局和可扩展元素的适合移动设备的电子邮件模板。 这可确保您的电子邮件适应不同的屏幕尺寸和设备，从而改善用户体验，无论收件人如何通过 Outlook 访问其电子邮件。

在最终确定电子邮件设计之前，必须执行彻底的测试，以确保它们在不同版本的 Outlook 上正确显示。 我们建议使用 Beefree 的预览功能来查看您的电子邮件在不同屏幕尺寸上的显示方式。 我们还建议向多个 Outlook 收件人发送测试电子邮件，以帮助识别 Beefree 和 Outlook 之间的任何呈现差异。

虽然我们希望保证 Beefree 能够 100% 按预期呈现电子邮件，但请务必记住 Outlook 是电子邮件客户端而不是发送平台。 因此，它可以忽略、删除或修改我们代码中的 HTML 元素。 这可能会导致我们无法解决的渲染问题。 请记住，您的设计越复杂，您就越有可能遇到 Outlook 呈现问题。

熟悉我们的 Outlook 渲染注意事项：

• 展望应用程序： https://support.beefree.io/hc/en-us/articles/18904867308818-Exporting-to-Outlook-App#h_01HZ0G5V4RXFPAW35S17P6KBBA
  ‍
• 展望网页： #01H3WEHFRX79TRG6JSVW69HA0Z

集成 Outlook HTML 电子邮件模板

按照上述最佳实践在 Beefree 中设计电子邮件后，您可以轻松将其导出到 Outlook Web 或 Outlook App。

展望网页
在设计之前或完成之后将 Beefree 连接到您的 Outlook Web 帐户。 直接从生成器或通过电子邮件详细信息页面，单击“发送到您的发送系统”。 几秒钟后，电子邮件将另存为新模板并显示在您的 Outlook 帐户中。

要了解有关如何完成入职流程的更多信息，请访问：

对于分步过程：

Outlook Web 和企业电子邮件帐户
如果您要将 Beefree 中设计的电子邮件导出到您的 Outlook 企业帐户，请按照与上述相同的步骤操作。

将 Beefree 与 Outlook 企业帐户集成时，您可能会遇到一条消息，指出需要批准或授权才能成功连接。 要继续，您需要获得必要的批准或更改 Outlook Web 工作帐户的权限设置以确保成功连接。 展望应用程序
Outlook 应用程序与 Beefree 集成允许您将电子邮件模板下载为 OFT 和 EMLTPL 文件，然后将其加载到 Outlook 应用程序中。 要下载文件，请按照下列步骤操作：

1. 导航到您要导出的电子邮件设计。
2. 在导出设计之前进行并保存任何所需的更改。
3. 选择推送到您的发送系统。
4. 单击 Outlook 应用程序连接器。
5. 系统将提示您下载 Outlook 应用程序。
6. 如果您需要 OFT 文件，请选择“下载 Windows”；如果您需要 EMLTPL 文件，请选择“下载 macOS”。

要了解有关如何完成嵌入过程和导入 HTML 的更多信息，请观看以下视频：

或访问：

准备好开始设计与 Outlook 兼容的电子邮件了吗？

无论您是要了解 Outlook 的呈现特性，还是希望通过响应式设计提高参与度，Beefree 都是一种直观的解决方案，可确保您的消息在所有 Outlook 版本和设备上有效产生共鸣。