如何在 HTML 电子邮件中编写实时动态 Twitter 提要

已发表: 2015-05-26

当我们在 2015 年开始确定 Litmus Live（前身为电子邮件设计会议）的后勤工作时，关于让我们的发布电子邮件比去年更大更好的讨论开始了。 我们如何在电子邮件中使用 HTML5 视频背景技术？ 通过使用动态内容：实时 Twitter 提要。

是的，电子邮件中的 Twitter 提要。

我们的目标是双重的：激发对会议的兴趣，并在电子邮件中使用创新和鼓舞人心的技术来做到这一点。 经过多次头脑风暴会议，我们决定使用动态内容的常见方法，但有所不同。

tedc15-email

在浏览器中查看完整电子邮件 →

您还可以在此处查看完整代码和在此处查看 Litmus 测试结果，以了解它在 40 多个电子邮件客户端中的显示情况。

电子邮件中的动态内容

电子邮件中的动态内容并不是一个新概念。 事实上，它经常用于创建个性化、有针对性的电子邮件。 从历史上看，动态内容严格通过使用文本或图像来实现，并通过 ESP 拉取合并标签或变量。 动态图像链接到单个源文件，该文件被动态覆盖以根据预定义的个性化参数为特定订阅者子集显示新图像。 这两种方法都使您能够为订阅者创建独特的个性化电子邮件体验。

我们在发布电子邮件中使用了动态图像，使实时动态 Twitter 提要在多个流行的电子邮件客户端上运行。 但是，我们还使用了一种全新的方法来实现动态内容：动态 CSS。

虽然动态 CSS 适用于 WebKit 客户端，但我们需要使用动态图像为使用非 WebKit 客户端的订阅者实现适当的回退。 话虽如此，以下收件箱支持实时 Twitter 提要（以一种或另一种方式！）：

  • 美国在线邮件
    动态图像
  • 苹果邮箱
    动态 CSS
  • iOS（本机电子邮件应用程序）
    动态 CSS
  • 展望（2000-2013）
    动态图像
  • Mac 版 Outlook（2011 年和 2016 年）
    动态 CSS
  • 展望网
    动态图像
  • 雷鸟
    动态图像
  • 视窗电话
    动态图像
  • 视窗邮件
    动态图像
  • Windows Live 邮件
    动态图像
  • 雅虎！ 邮件
    动态图像

WebKit 电子邮件客户端的动态 CSS 内容

虽然我们可以为所有电子邮件客户端使用动态图像，但我们选择使用动态 CSS 在 WebKit 电子邮件客户端（如 iPhone 和 iPad 原生电子邮件客户端）中进行渐进式增强，以使 Twitter 提要感觉更逼真。

那么我们是如何让它发挥作用的呢？ 使用包含#TEDC15 主题标签的 15 条最新推文，我们默认显示前 5 条推文，然后在一分钟内对其余推文进行动画处理。 这使我们能够使推文流感觉实时，并具有让人们参与更长时间的额外好处。

虽然我们每 10 秒更新一次 CSS 文件，但电子邮件中的实际内容无法以同样的方式更新——它需要完全刷新文档才能工作。 用户需要重新打开电子邮件或刷新网络版本才能看到更新的推文。 虽然不理想，但事实证明它非常引人入胜！

为了让实时 twitter 提要工作，我们使用了只能在 WebKit 客户端中显示的 HTML 和 CSS。 为了实现这一点，我们创建了空的 <div> 和 <span> 并使用 content CSS 属性来添加 Twitter 用户姓名、句柄、时间戳和推文副本的内容。

这是 HTML：

 <div class="tweet"> <div class="tweet-avatar-wrapper"> <div class="avatar"></div> </div> <div class="tweet-wrapper"> <span class="name"></span> <span class="handle"></span> <span class="timestamp"></span> <span class="copy"></span> </div> </div>

为了动态覆盖 CSS，我们依赖于每 10 秒更新一次并包含在我们的电子邮件中的外部样式表，如下所示：

 <link href="http://assets.insights.litmus.com/campaigns/tedc-2015/assets/tweets.css" type="text/css" rel="stylesheet" />

这是相应的 CSS，在 content 属性中包含推文信息：

 #tweet-1 .name::before { content: "Kevin Mandeville"; } #tweet-1 .handle::after { content: "@KevinMandeville"; } #tweet-1 .copy::before { content: "I'm excited for #TEDC15! Who's going?"; } #tweet-1 .timestamp::after { content: "1m"; }

推文的 CSS 被封装在一个媒体查询中，允许我们仅在基于 WebKit 的电子邮件客户端中显示它：

 @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert CSS here */ }

通过将空的 <div> 用于默认结构，非 WebKit 电子邮件客户端不会显示内容。 然后，我们回到了非 WebKit 订阅者的动态 Twitter 提要的图像。

使用 WebKit-targeting 和 content 属性的唯一缺点是一些电子邮件客户端，例如 Airmail 和 Outlook iOS 和 Android 应用程序，将支持 WebKit-targeted 媒体查询而不是 content 属性，从而使推文不可见。 但是，鉴于这些电子邮件客户端只占我们受众的很小一部分（不到 1%），这是值得做出的牺牲。

非 WebKit 电子邮件客户端的动态图像

对于非 WebKit 电子邮件客户端，我们使用了更传统的显示动态图像的方法，因为 WebKit 之外的电子邮件客户端不支持 CSS 内容属性。

在电子邮件中，我们引用了 Twitter 提要的动态图像：

 <img src="/uploads/article/137983/1JLxfeWJnz4EGtoE.jpg" width="600" height="902" border="0" class="webkit-hide" alt="tweet #TEDC15 to show up in the live feed!"/>
推特#TEDC15 出现在实时提要中！

我们使用电子邮件中的相同 HTML 和 CSS 创建了一个仅包含 Twitter 提要的简单网页。 我们只是通过命令行实用程序 wkhtmltoimage 截取了相同尺寸 600×902 的提要截图，并每 10 秒动态更新相同的图像。

由于我们在 WebKit 视图中使用 HTML 和 CSS，我们将图像隐藏在 WebKit 中以避免重复提要：

 @media screen and (-webkit-min-device-pixel-ratio: 0) { .webkit-hide { display: none; } }

使用这种技术，即使是最麻烦的客户（咳咳，Outlook），实时 Twitter 提要也能工作，并允许我们的大多数订阅者加入其中！

这种动态图像实现的唯一主要缺点是 Gmail 会缓存其图像。 因此，Gmail 用户无法体验实时 Twitter 提要。 相反，他们看到了 8 条最新的推文和一条特殊信息，用于查看电子邮件的网络版本以获得完整效果：

gmail-twitter-feed

我们如何构建动态 Twitter 集成

我们的营销开发人员凯文·汤普森 (Kevin Thompson) 是实际 Twitter 集成背后的策划者。 他创建了一个基于 Sinatra 框架并托管在 Heroku 上的非常简单的应用程序。 您可以按照 Github 上的说明查看代码并亲自试用。 这个初始测试证明可以在 CSS 中生成推文，在少数电子邮件客户端加载外部样式表，并且这些客户端可以在每次打开电子邮件时获取最新的 CSS。

从那时起，应用程序开始变得稍微复杂一些。 由于 Twitter 对您向 API 发出的请求数量施加了限制，因此我们需要确保不会超过分配给搜索查询的每 15 分钟 150 个请求的限制。 为了解决这个问题，我们在 Heroku 应用程序中添加了第二个进程。 这个过程在后台运行，每 10 秒获取一次推文，并将它们存储在缓存中。 然后，主应用程序进程将从缓存中加载推文，而不是直接通过 Twitter 搜索它们。

Kevin 还必须考虑可扩展性和速度。 虽然我们有一个保持在 Twitter 的 API 限制内的解决方案，但我们的单个服务器可能无法处理来自我们电子邮件的 200,000 多个收件人的预期数量的请求。 为了解决这个问题，我们实施了 Amazon CloudFront CDN，使我们能够支持对我们资产的更多请求，并将它们分发到全球，以确保为我们的所有受众快速加载文件。 在我们的 Sinatra 应用程序中，Kevin 还添加了 Cache-Control 标头，指示 CloudFront 在 10 秒后使资产过期。 这迫使它更频繁地从我们的应用程序请求新内容。

为了在不超过 Twitter 的 API 速率限制的情况下保持结果尽可能新鲜，我们每 10 秒渲染和缓存一次动态 CSS 和图像文件以及我们的 Twitter 搜索结果。

为了管理推文的内容，推特搜索词和被阻止的内容/用户都使用环境变量进行控制。 虽然更改 Heroku 上的环境变量意味着我们的应用程序需要重新启动，但由于资产是通过 CDN 分发的，并且应用程序非常简单，因此重新启动只需几秒钟，并且完全不会引起注意。 此外，由于 Heroku 提供了用于编辑环境变量的用户界面，我们的营销团队能够根据需要更改搜索词并阻止内容。

如果这些方法对您来说太复杂或太耗时，那么有专门从事电子邮件动态内容的第三方公司，例如 Movable Ink、LiveClicker、PowerInbox 和 Avari。

过滤不良推文

在合并实时动态 twitter 提要时，我们的一个大问题是放弃对我们电子邮件内容的控制——导致一些“糟糕的推文”出现在信息流中。 Twitter 上的一些人指出了这一点：

与此同时，我们希望提供尽可能接近原始、未经过滤的推文提要，以保持“哇”的因素。 我们的假设是，糟糕的推文将是一种边缘情况，并且会通过不断的活动从提要中清除。 因此，我们最初依靠 Twitter 的搜索过滤器来剔除不太理想的内容。

但是，我们希望有额外的过滤器，因此我们还让自己能够在从 Twitter 获取结果后阻止特定的用户名和文本字符串。 我们最终决定完全不允许推文照片出现在流中，因为这可能会变得不守规矩，而且比文字更有害。 此外，不可能通过内容 CSS 属性动态注入链接，因此任何推文中的链接也无法正常工作——它们只是显示为文本。 所有推文都直接链接到#TEDC15 推文流。

作为最后的故障保护，我们可以选择完全禁用实时 Twitter 搜索结果，从我们的 @emaildesignconf Twitter 帐户返回到过滤后的收藏推文列表。 最后，只有几条糟糕的推文需要删除。 而且，到目前为止，我们根本不必使用切换到最喜欢的推文的最终故障保护措施 - 高 5 #emailgeeks！

钥匙？ 确保我们从上到下测试了所有内容。 确保您的设计在订阅者使用 Litmus 的收件箱中看起来很棒。

从上到下测试一切

在 50 + 上预览电子邮件并在尝试最疯狂的电子邮件功能时松一口气，例如实时 Twitter 提要。

免费试用 Litmus →

压倒性的积极反应

我们的听众绝对喜欢这种有趣且独特的电子邮件实现方式。 它实际上使电子邮件成为一种每个人都可以参与的交互式和公共体验。Twitter 的反应是无价的，甚至遵循了一些类似的主题。

有些人质疑它是否真的存在：

许多人只是盯着它：

https://twitter.com/hannahsmeznik/status/601464682180816896

一群人跟别人打招呼：

https://twitter.com/WebDevRich/status/601669735483363328

有几次提到魔法、巫术和哈利波特：

https://twitter.com/oompt/status/601495402962116611

一系列的愚蠢和恶作剧也随之而来：

https://twitter.com/MrMoon123/status/601658129349214209

https://twitter.com/capitocapito/status/601458692161019904

最重要的是，很多人的头脑都被吹走了：

https://twitter.com/adamrandazzo/status/601450740964466688

https://twitter.com/MattRoxo/status/601782360460251137

性能概览

我们对这次活动的结果感到震惊！ 我们超过 53% 的打开来自 WebKit 电子邮件客户端，因此我们的许多用户看到了逐步增强的版本。 在发送电子邮件后的前 24 小时内，总共有 750 多条关于#TEDC15 的推文。 此外，这封电子邮件帮助我们的网站吸引了 4,000 多名新访问者，并在相同的时间内产生了 1,000 多名新潜在客户！ 更不用说，这封电子邮件在我们发送过的任何电子邮件中都获得了最好的参与度——几乎 60% 的用户查看了这封电子邮件超过 18 秒！

屏幕截图 2015-05-26 at 3.48.42 PM

如果您有任何问题，请随时在下面的评论中提问，加入 Litmus 社区主题主题，或推特 @KevinMandeville 和 @KevinThompson！

收到很棒的电子邮件

不要错过我们的下一封令人兴奋的电子邮件 - 注册以接收有关 Litmus 发生的一切的新闻和信息。