电子邮件中的交互式热点：分步指南

已发表: 2020-03-30

交互性仍然是电子邮件设计中最热门的趋势之一，而交互热点是营销人员工具包中最受欢迎的交互元素之一。 热点让您的订阅者在他们悬停或单击您的电子邮件中的项目时发现更多信息，并允许营销人员为其电子邮件提供额外的细节层，而不会让您的电子邮件设计感觉过于拥挤。

在我们的月刊 2 月版中，我们利用交互式热点的强大功能来展示我们对 Litmus 平台所做的一些令人兴奋的更新：

在我们发送活动后，我们收到了许多电子邮件极客同行的问题，询问我们究竟是如何创建热点的，以及我们如何让它们在 Gmail 中工作。 这就是我们在这里分享分步指南的原因。

阅读下面有关我们如何设计和编码热点的详细信息，或查看Litmus Builder 上的热点代码- 您可以在此处找到我们下面描述的所有代码元素的确切位置。

1. 开始之前：重要注意事项

悬停还是点击？

有许多不同的方法可以在电子邮件中对交互式热点进行编码。 例如，如果我想要仅在点击或点击时激活的热点，我会考虑使用Checkbox Hack 。 但是，出于一些原因，我们采用了在悬停时激活的热点。

首先，电子邮件客户端对:hover的支持比:checked更好——尤其是在我们最大的电子邮件客户端之一 Gmail 中。 其次，交互性在电子邮件中仍然不是很常见，所以我想让用户尽可能容易地发现他们可以与之交互。 毕竟，将鼠标悬停在热点上并立即看到工具提示出现，比悬停然后单击更省力。 因为我想找到一种方法来平衡功能和对尽可能广泛的受众的支持，所以悬停热点是要走的路。

电子邮件客户端支持：热点对您的受众有效吗？

交互式热点是使您的电子邮件更具吸引力和更有效的好方法，但与许多交互式技术一样，并非所有电子邮件客户端都支持它们。

在将此技术纳入您的曲目之前，您肯定要考虑哪些电子邮件客户端对您和您的利益相关者最重要。 根据电子邮件客户端市场份额，79% 的所有电子邮件客户端支持该热点技术的完全交互式版本。 但是您的受众的电子邮件客户端使用情况可能与全球平均水平完全不同。 仔细查看您自己企业的市场份额，以获得最准确的数据。

在 Litmus，我们使用电子邮件分析跟踪来确定我们的一些顶级客户是 Gmail (36.8%)、Apple Mail (20.0%) 和 iPhone (13.2%)，它们占我们受众的大多数 (70%)。 将显示后备版本的电子邮件客户端仅占我们受众的 30%。

有了这些数据，我们有必要专注于为我们的用户创造出色的交互体验，但如果您的受众更倾向于 Windows 版 Outlook，则情况可能并非如此。 但是，您应该不断跟踪和测试，以确保您拥有最准确和最新的分析数据！ 随着某些客户端和设备变得越来越流行（例如，许多公司已从 Outlook 切换到 GSuite），电子邮件客户端市场份额会随着时间的推移而发生变化，因此最好不要依赖历史知识来了解事情一直是如何完成的。

在下面检查您的顶级电子邮件客户端支持的功能级别。

完全交互式 - 桌面
这是热点在桌面视口中完全发挥作用的地方。

  • 苹果邮箱
  • iPad
  • Gmail
  • 展望 (MacOS)

完全互动 - 移动
这是热点在移动视口中完全发挥作用的地方。

  • iPhone 邮件
  • Gmail 应用程序 (Android)*
  • 三星邮箱

后备 - 动画 PNG
 这些客户端（带有星号 ** 的客户端除外）支持动画 PNG和暗模式定位，因此我们使用了自定义后备透明动画 PNG可以在任何背景上设置动画。

  • 展望网
  • 展望应用
  • 美国在线
  • 美国在线应用程序
  • 雅虎
  • 雅虎应用
  • 展望 (Windows)**
  • 视窗邮件**

* Gmail 应用程序 (iOS) 显示热点，但无法点击。

** 这些客户端仅显示动画 PNG 的第一帧，不支持暗模式定位。 即使我们使用动画 GIF，纯色背景也会与暗模式视图不匹配。 最重要的是，由于这些客户端也不支持暗模式定位，因此您无法交换明/暗模式 GIF。 对于这些客户，我们确保动画 PNG 的第一帧看起来仍然不错。

2. 设计规划：为所有用例绘制订户体验

您是否确定您有使用交互式热点的可靠商业案例，并且您的大部分观众将能够享受它？ 伟大的！ 现在我们可以开始设计要构建的潜在视图。

你问为什么需要不同的观点？ 热点元素在移动设备和桌面设备上看起来不一样。 另外，您必须为无法看到元素的交互式版本的每个人设计一个后备。 对我们来说，我们确定了在设计阶段解决的四个关键用例：

交互式：桌面宽度

在为此设计布局时，尽量不要将工具提示与热点重叠太多。

我们使用动画 PNG来制作热点图像，因为我们需要实现只有 PNG 才能提供的平滑 alpha 通道透明度，以便它们可以覆盖背景图像，而轻微的动画——你看到热点脉动——引起了人们的注意您可以与他们互动。

回退：桌面宽度，可灵活调整为移动设备宽度

后备版本还使用整个英雄部分的动画 PNG 版本来模拟触发热点的效果。

在 Litmus，我们已经使用混合流体方法进行移动调整大小，因此我们可以预期所有这些后备图像将平滑调整到任何屏幕宽度，而无需特定的移动响应版本。

互动：移动宽度

因为我们希望工具提示在较小的屏幕上仍然清晰可辨，所以我们必须重新配置设计，以便在热点悬停时所有工具提示都显示在一个中心位置，而不是单独附加到每个热点。

黑暗模式

当然，您不想忽略暗模式视图。

3. 构建关键组件框架

我们需要哪些元素来完成这项工作？ 在这里，我将分解每个类的作用。 （为什么我使用类而不是使用其他方法（如特异性或链接）来定位 CSS 选择器？使用较短的选择器可以提高性能，良好的类命名法使其更易于理解和维护，因此您可以一次又一次地使用它！）

.wrapper-primary

  • 整个交互部分的包装。

.bgimg

  • 您将在其上放置所有热点和工具提示的背景图像基础。

.wrapper-次要

  • 每个部分的包装器，具有绝对定位技巧。 （请参阅下面“定位”部分的说明。）

.hot-tool-wrapper

  • 包含每个单独的热点/工具提示部分的包装器，具有定位在桌面布局内的内联样式。

.hotspot-01 、 .hotspot-02 、 .hotspot-03等……

  • 热点图标的实际图像。 它们具有单独的类别名称，因为它们需要单独定位。 此外，您不需要使用图像 - 如果您愿意，也可以使用编码形状。

.tooltip 包装器

  • 工具提示的包装器和附加的可选插入符号。

.caret （可选）

  • 这些是可选的，因为您可能需要也可能不想为您的设计添加插入符号。 它们具有使用边距将其定位在.tooltip-wrapper 中的自定义内联 CSS 。
  • 这些隐藏在移动响应视图下，因为它们对新布局没有意义。
  • 与热点图像一样，如果您愿意，这也可以是编码的 CSS 形状。

.tooltip-内容

  • 激活热点时显示的实际工具提示内容。

4. 把它们放在一起

定位热点和工具提示

因为这些热点和工具提示部分不可避免地相互重叠，所以我需要一个类似于绝对定位的解决方案来放置它们——不幸的是，这在电子邮件中没有得到很好的支持。 幸运的是，我从 Mark Robbins 和 Justin Khoo （我最喜欢的两个#EmailGeeks！）的技术中找到了一些灵​​感，这些技术使用max-height:0 、 max-width:0和 margins 在电子邮件中定位元素！

CSS

 .wrapper-secondary { max-height: 0px; max-width: 0px; } .hot-tool-wrapper { position: relative; display: inline-block; max-width: 0px; }

HTML

 <div class="wrapper-secondary"> <div class="hot-tool-wrapper"> [Hotspot & Tooltip content in here] </div> </div>

设置悬停交互

导致工具提示出现的机制实际上非常简单。 工具提示（ .tooltip-wrapper ）默认是隐藏的，然后当热点（ .hot-tool-wrapper ）悬停在上面时，工具提示就会显示出来。 就是这样！

不透明度和过渡样式添加轻微掉色的相互作用，使其感觉更加流畅。

CSS

 .tooltip-wrapper { max-height: 0; opacity: 0; overflow: hidden; transition: 0.3s; } .hot-tool-wrapper:hover .tooltip-wrapper { max-height: none !important; opacity: 1 !important; transition: 0.3s; }

想要了解如何在电子邮件中使用悬停效果？ 看看这篇博文。

使其移动响应

要将桌面设计转换为移动设计，我需要：

  1. .wrapper-primary , .bgimg
     调整包装和背景图像的大小
  2. .hot-tool-wrapper
     将原来的桌面定位归零，更容易在手机上分离热点和工具提示定位
  3. .hotspot-01
     重新定位各个热点以适合较小的背景图像
  4. .插入符号
    隐藏插入符号
  5. .hotspot-01 + .tooltip-wrapper
     重新定位工具提示，使它们都出现在底部的一个区域中

CSS

 @media only screen and (max-width: 480px) { .wrapper-primary, .bgimg { width: 350px !important; height: 235px !important; } .hot-tool-wrapper { margin-top: 0 !important; margin-left: 0 !important; } .caret { display: none !important; } .hotspot-01 { margin-left: 130px !important; margin-top: 0 !important; } .hotspot-01 + .tooltip-wrapper { margin-left: 60px !important; margin-top: 130px !important; } }

设置后备

最后，这里是确保交互式和后备版本为正确的电子邮件客户端显示的所有部分。 许多这些技术可以在如何定位电子邮件客户端中找到。 在这里，我已按电子邮件客户端分离出每种定位技术，以便更轻松地了解正在发生的事情。 请返回原始代码，看看这些是如何在最终产品中组合在一起的。

针对所有 Outlook（MacOS 除外）：CSS

 .outlookshow { display: none !important; } body[data-outlook-cycle] .outlookshow { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;} body[data-outlook-cycle] .outlookhide { display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; } [class~="x_outlookshow"] { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;} [class~="x_outlookhide"] { display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }

针对所有 Outlook（MacOS 除外）：HTML

 <!--[if !mso]><! --> <div class="outlookhide"> [Interactive Content Here] </div> <!--<![endif]--> <!--[if !mso]><! --> <div class="outlookshow"> <!--<![endif]--> [Fallback Content Here] <!--[if !mso]><! --> </div> <!--<![endif]-->

针对雅虎：CSS
这也必须嵌套在<body>标记中以定位 Yahoo App，并且您可以使用任何 unicode 字符代替，只要它不会被您的 ESP 自动转换。 这种技术也恰好针对 AOL，这是一个不幸的副作用，因为 AOL 实际上很好地支持交互性。 但由于 AOL 的市场份额对我们的观众来说并不是很重要，我不得不做出判断来削减它。

 <body> <!-- START force fallback on Yahoo --> <style> .& # .yahoohide {display: none !important;} .& # .yahooshow {display: block !important;} </style> <!-- END force fallback on Yahoo --> </body>

定位雅虎：HTML

 <table><tr><td> <div class="yahoohide"> [Interactive Content Here] </div> <div class="yahooshow"> [Fallback Content Here] </div> </td></tr></table>

最终结果

要了解所有这些元素如何在最终产品中组合在一起，请查看元素的完整代码或查看我们二月时事通讯的完整代码，以在电子邮件的上下文中查看所有内容。

现在，交给你了！

您是否打算在即将开展的任何活动中使用热点？ 您过去是否使用过热点但使用不同的技术构建它们？ 我们很想看看像您这样有创意的电子邮件营销人员如何使用热点使您的电子邮件更加特别。 在下面的评论中分享您的想法和想法，或在 Twitter 上联系 @litmusapp。

我们迫不及待地想看到您将创建的所有精美的交互式电子邮件！