等待。 我的电子邮件刚刚发生了什么？ 网络研讨会录音

已发表: 2016-02-11

几乎每个设计师和开发人员都必须在他们职业生涯的某个阶段建立电子邮件——无论他们是否愿意。 但是，数量庞大的电子邮件客户端——每个都有自己的渲染问题——让许多人在失败中摇头，对电子邮件设计问题的冲击感到困惑。

在经历了许多这样的场景之后，我们与来自 Sendwithus 的 Alex Mohr 联手阐明了电子邮件新手面临的最常见问题，更重要的是，提供了这些问题的一些解决方案。

如果您没有机会参加网络研讨会，“等等。 我的电子邮件怎么了？”，别担心。 您可以下载幻灯片并查看下面的录音。

查看幻灯片和录制 →

尽我们所能，我们无法解决网络研讨会期间提出的每个问题。 还有一些很棒的。 因此，我正在利用这个机会回答那些刚刚涉足电子邮件营销和设计的人提出的一些更常见的问题。

为什么 Google 和 Microsoft 在呈现电子邮件方面如此糟糕？

所有电子邮件客户端都无法呈现一些 HTML 和 CSS——用于编码电子邮件活动的两种语言。 这是因为它们都使用不同的渲染引擎。 渲染引擎是电子邮件应用程序的底层部分，它决定将哪些代码渲染到屏幕上以及如何实际渲染。

渲染引擎

在 Google 的 Gmail 中，出于安全原因，预处理器用于从电子邮件中删除特定部分的代码。 虽然现在几乎所有其他 webmail 客户端都已经解决了这个问题，但 Gmail 基本上去除了电子邮件 <head> 中嵌入的 CSS 样式。 而且，由于许多设计师使用这些样式来确定他们的广告系列的外观，因此这些电子邮件在 Gmail 中会受到影响。

这在 Gmail 的移动客户端上尤其明显，因为媒体查询（传统响应式设计中使用的 CSS 触发器）位于该部分。 这就是为什么开发了混合（或海绵）编码等技术，作为 Gmail 糟糕的呈现能力的直接解决方案。

对于 Microsoft 的 Outlook 客户端，问题在于 Outlook 实际上使用 Microsoft Word 作为其呈现引擎。 没错，学生和商界人士都使用富文本编辑器来呈现 HTML 和 CSS 代码（或者至少它尝试这样做）。 虽然旧版本的 Outlook 使用已安装的 Microsoft 网络浏览器 Internet Explorer 版本来呈现电子邮件代码，但从 Outlook 2007 开始，Word 已用于使 Outlook 用户更容易进行富文本编辑。

不幸的是，对于电子邮件设计人员来说，Word 对 Web 和电子邮件活动中常用的 HTML 和 CSS 的支持非常有限。 这种对 Web 标准的有限支持导致电子邮件活动在 Outlook 中看起来很糟糕。 就此而言，了解这种支持是使电子邮件在 Outlook 或任何电子邮件客户端中看起来不错的第一步。

以下是一些资源，可帮助您更好地了解电子邮件客户端对 HTML 和 CSS 的支持：

  • Campaign Monitor 的 CSS 终极指南
  • 了解 Gmail 和 CSS：第 1 部分和第 2 部分
  • 在 Microsoft Outlook 客户端中呈现差异的指南
  • 设备、操作系统、应用程序和引擎如何影响渲染
  • 桌面渲染问题？ 将初始测试集中在少数渲染引擎上
  • Webmail 渲染解释：为什么预处理器是敌人

使用 Web 字体时，您如何处理 Outlook 未显示正确字体的问题？

Web 字体（通过 Web 提供而不是安装在用户设备上的字体）越来越受欢迎。 由于它们允许公司通过排版保持品牌并鼓励实时文本，因此它们是电子邮件营销人员的理想工具。 不幸的是，并非所有电子邮件客户端都支持它们。 而且，在 Outlook 的情况下，缺乏支持会导致显示 Times New Roman 而不是 HTML 中声明的任何后备字体的情况。

我们之前已经通过一个解决方案解决了这个问题，该解决方案需要受影响文本的 HTML 类和一些特定于 Outlook 的 CSS。 虽然此解决方案仍然有效，但更清洁、更易于维护的解决方案已获得关注。 最初由 Action Rocket 的人提出，这个解决方案需要使用 @font-face 规则来提供字体并将它们包装在电子邮件头部的媒体查询中。

 <style type="text/css"> @media screen { @font-face { font-family: 'Family Name'; font-style: normal; font-weight: 400; src: local(), local(), url() format(); } } </style>

此解决方案是一种极好的方法，因为它不需要 HTML 类属性污染您的代码，同时仍确保 Outlook 回退到您声明的字体堆栈。 查看 Action Rocket 的原始文章以了解有关该技术的更多信息。

您如何阻止蓝色链接在移动设备上发生？

移动设备是有用的工具。 为了让它们更有用，像 Apple 这样的公司在他们的电子邮件客户端中添加了一项功能，允许用户快速向他们的联系人、日历或地图应用程序添加信息。 您很有可能在电子邮件中看到过这样的内容：

ios_links

特定的类似文本的地址、日期、时间和电话号码以蓝色带下划线的链接突出显示，以表明可以与之交互。 不幸的是，这些蓝色链接有时会导致设计和可访问性方面的问题。 当深色背景上的浅色文本变成蓝色时，这些链接现在很难（如果不是不可能的话）阅读，更不用说与之交互了。

蓝色链接可访问性

我们之前写过关于此问题的解决方案，该解决方案允许您在该文本上维护样式，但同样，更新的解决方案越来越受欢迎。 事实证明，包含以下代码段会杀死 iOS 上的蓝色链接，而无需在 HTML 中添加额外的标记。 只需将其包含在您的电子邮件的头部并发送出去。

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

一些网络研讨会与会者敏锐地指出，上述 CSS 专门针对 Apple 设备。 虽然我最近的测试表明蓝色链接在 Android 上没有问题，但一些 Litmus 社区成员在 Android 和 Gmail 链接电话号码等内容时遇到了问题。 查看社区讨论以了解一些巧妙的解决方法。

处理响应式图像的最佳方法是什么？ 视网膜图像怎么样？

随着越来越多的人采用响应式电子邮件设计，对响应式图像的需求也在增加。 我处理响应式图像的最佳建议是我为 Julie Ng 学习的一种技术，Julie Ng 是令人敬畏的电子邮件开发通讯背后的开发人员。

基本上，您可以在 img 标签中以多种方式声明图像尺寸。 为了防止某些电子邮件客户端以完整尺寸显示较大的视网膜图像，您可以使用 width 属性声明宽度。 这以像素为单位提供了良好的基线宽度。 对于响应式电子邮件，然后将图像的宽度、最大宽度和最小宽度声明为内联 CSS。 下面是一个例子：

 <img alt="Hello" src="http://example.com/image.png" width="600" border="0">

自然地，您需要为禁用图像并声明 display:block; 时提供一些 ALT 文本。 以防止图像周围出现不必要的空白。 如果您需要对图像进行额外的控制，您可以在电子邮件的头部使用类和 CSS 来定位它。 请记住，并非所有地方都支持嵌入式 CSS。

当涉及到视网膜图像时，最好的办法是简单地以电子邮件中图像的预期显示尺寸的两倍创建图像。 例如，如果您有一个 600 像素 x 200 像素的图像，您可以将其创建并保存为 1200 像素 x 400 像素的图像。 通常将其包含在您的电子邮件中。 我之前提到的宽度属性将防止它在 Outlook 等客户端中显示为荒谬的巨大图像，并且您的图像在具有视网膜屏幕的设备上看起来既漂亮又清晰。

对于希望在电子邮件中使用动画 GIF 的人有什么建议吗？

去吧！ 动画 GIF 是为您的电子邮件活动添加动感和兴趣的绝佳方式。 我们非常喜欢这项技术，因此编写了一份在电子邮件中使用动画 GIF 的详尽指南。

只是理解它们并非在任何地方都受支持，最显着的是 Microsoft Outlook，它只显示动画的第一帧。 最好确保 GIF 中的任何图像都用于说明目的，而不是向订阅者传达重要信息。 此类信息应始终显示为电子邮件中的实时文本，以便订阅者即使在禁用 GIF 和图像等内容时也可以阅读。

虽然很多人认为 GIF 只是为了好玩，但大量产品公司正在使用动画 GIF 来炫耀与他们的产品的互动，并基本上在人们接触产品之前教他们如何使用产品。 这是 MailChimp 的一个很好的例子：

mailchimp-interface-gif

GIF 是每个电子邮件营销人员工具箱的重要补充。 不过，建议之一是谨慎使用它们。 如果每个活动都包含一堆 GIF，他们很快就会失去惊喜感。 当您真的想引起人们对活动或展示一些很酷的东西的注意时，偶尔使用它们。

您对在电子邮件中使用视频有何看法？

就像动画 GIF 一样，视频可以成为吸引订阅者注意力的绝佳方式。 不幸的是，视频本身在电子邮件客户端中的支持更少。 虽然我们曾经能够在电子邮件中使用视频背景，但只有 Apple Mail 和 Outlook for Mac 支持它。

不过，这不应该阻止您将视频与电子邮件结合使用。 人们非常喜欢视频，公司越来越多地使用视频营销来增加与用户的互动。 在电子邮件中使用视频的最佳方法是在电子邮件活动中包含视频的静止图像和链接到登录页面的播放按钮。 用户立即明白这是一个视频，并可以在登录页面上查看视频。

虽然电子邮件中的嵌入视频可以提供良好的用户体验，但我们在 Wistia 的朋友就为什么登陆页面是更好的解决方案提出了一些很好的观点。

  • 登陆页面上的视频可以在其他地方重复使用。 这是一个永久的内容资源。
  • 登陆页面促进了进一步的交互。 看完收件箱中的视频后，还有什么可做的？
  • 人们可以更轻松地在着陆页上分享视频。

所以，一定要在你的电子邮件活动中使用视频，但至少现在，接受并不意味着在电子邮件中查看视频的事实。

您有推荐的响应式电子邮件框架吗？

我们在网络研讨会中提到了一些用于构建更好的电子邮件活动的资源，但它们绝对值得在这里重复和扩展。

就响应式电子邮件框架和模板而言，有很多可用的：

  • 来自 Ted Goas 的 Cerberus
  • MailChimp 的电子邮件蓝图
  • Zurb 的电子邮件基金会
  • Mailjet 的 MJML

我们最喜欢的一个是我们自己的 Slate，它包括五个用于各种发送场景的响应模板。 无论您选择何种选项，请务必在电子邮件客户端中对其进行测试，以确保您的订阅者不会有任何意外。

查看幻灯片和录音

我们涵盖了很多内容，“等等。 我的邮箱怎么了？” 除了确定最常见的电子邮件问题及其解决方案外，我们还谈到了测试每封电子邮件的重要性，甚至研究了如何使用 Sendwithus 测试交易电子邮件。 如果您第一次错过了，您可以下载幻灯片并查看下面的录音。

查看幻灯片和录制 →