如何发送只有 Apple Watch 才能看到的隐藏版电子邮件

已发表: 2015-05-11

Litmus 用户 Dan Foody 发现了有关 Apple Watch 的一些非常令人兴奋的东西。 有一种方法可以发送只有 Apple Watch 才会显示的电子邮件营销活动的隐藏版本。 这为您的设计提供了更大的灵活性。

通常 Watch 只显示电子邮件的纯文本部分。 这是因为一个怪癖。 当 Watch 在您的电子邮件中注意到远程图像时,它认为 HTML 太复杂,因此它显示纯文本版本。 作为参考,远程图像是未嵌入电子邮件中的图像,而是使用标准 <img> 标签从服务器加载的图像——电子邮件中 ​​99% 的图像都是通过这种方式加载的。 请记住,伙计们,我们在这里在手表上显示电子邮件。 它需要简单!

那么,秘诀是什么?

首先,介绍一下背景。 HTML 电子邮件通常包含两部分 - HTML(技术上具有text/html的内容类型)和纯文本( text/plain )。 Apple 在最近给客户的一封电子邮件中使用了第三部分: text/watch-html

时事通讯苹果邮箱

如果您在消息中包含额外的HTML 部分,内容类型为“ text/watch-html ”,当 HTML 部分不合适时,Watch 将使用额外的 Watch 部分而不是纯文本部分。 您可能需要 ESP 或邮件提供商的帮助来设置第三个 Watch 部分。 您还可以尝试使用 PutsMail 向自己发送启用 Watch 的电子邮件,它支持第三个watch-html部分。 现在,您可以专门为 Watch 创建内容!

Watch-html 在行动

我们获取了上一份时事通讯并添加了watch-html部分。 在所有其他电子邮件客户端中,似乎什么也没发生。

但是,在 Apple Watch 上,我们能够展示一个特定的、量身定制的版本,它利用了 Watch 的类似富文本的支持。

newsletter-watch-1
newsletter-watch-2
newsletter-watch-3

电子邮件在 Watch 上看起来有多好?

使用这种技术可以使您的电子邮件看起来更好,但它仍然相当有限。 考虑 Watch 的 HTML 支持的最简单方法是仅文本修饰。 您可以创建一些更好的格式,但您不会重新创建完整的多列布局。

查看用于构建上述示例电子邮件的 HTML。 您会注意到几乎没有块级元素。 事实上,它看起来一点也不像 HTML。 这都是因为 Watch 将 HTML 解析为富文本视图的方式。

由于 Watch 不能显示 HTML,它实际上让 iPhone 在将 HTML 传输到 Watch 之前将其转换为富文本。 这与有些人可能记得的 Lotus Notes 和 AOL 早期的富文本查看器非常相似。 它本质上是纯文本,具有一些丰富的内容支持。

格式化提示

无需段落标签,只需在电子邮件源中创建一个段落即可。 不要使用样式或强标签来增加字体粗细,而是使用 <b>。 不需要 Div,也不需要大多数样式(除了黑色的文本颜色)。 一定要避免在 HTML 中使用缩进或其他组织方式——Watch 在消息中包含这种额外的间距。

这是我们迄今为止支持的内容的概要:

富文本概念

观看 HTML

胆大

<b>文字</b>

斜体

<i>文字</i>

强调

<u>文字</u>

字体颜色

<span style="color: #00800;">文字</span>

设置为黑色 (#000000) 或未指定的文本将转换为白色 (#FFFFFF)。 支持其他颜色。

结盟

<div style="text-align: right;">Text</div>

仅支持左、中和右。

引用

<blockquote type="cite">文本</blockquote>

嵌套引用最多 7 级深,不会出现缩进,但阴影确实表示引用级别。

编号列表

<ol><li>项目 1</li></ol>

项目符号列表

<ul><li>项目 1</li></ul>

图片

<img src="cid:...">文本</blockquote>

仅支持嵌入图像,实际支持非常有问题。 更多关于这在下面。

图像支持

Watch 电子邮件客户端的第一个版本在图像方面存在一些相当大的问题。 除了它们必须嵌入这一事实之外,还有一些重要的问题需要注意。

图像定位方式存在错误,导致图像比例被破坏。 当手表调整嵌入图像的大小时,它会插入一个 2px(在视网膜屏幕上一次 4px)的透明边框。 不幸的是,它在图像内部执行此操作,导致图像失真。 例如,如果您有一张 100x50 像素的图像,手表会将其调整为 96x46 像素,从而无法保留图像比例。

您可以通过将图像大小调整为 4px x 4px(不保留图像比例)来解决此问题。 在此示例中,Watch HTML 部分中的图像为 104x54px。 Watch 会将其重新调整为 100x50px。 但是,这会导致一些失真。

坏形象

此外,内嵌图像可能会无意中重新定位在 Watch 视图中的任何位置。 如果 Watch 在渲染时遇到问题,您可能会发现您的图像出现在主题行、日期甚至名称的顶部!

我们完全希望 Apple 在不久的将来通过软件更新来解决这些问题,但牢记这些限制是值得的。 如果您尝试嵌入图像,请记住仅在 Watch HTML 部分使用它们,因为嵌入的图像对在其他电子邮件客户端中显示的 HTML 部分的显示支持很差。

报头文本

最后还有一个需要注意的问题。 尽管 Watch 将呈现 Watch HTML,但它仍将使用标准 HTML 部分作为收件箱视图中的预标题文本。

在野外使用 watch-html

你如何真正使用这个隐藏的 Watch HTML 部分? 您需要 ESP 或邮寄服务提供商的帮助。 坏消息是 ESP 尚不支持此功能 - 向他们发送此帖子的链接! 我们在下面提供了技术细节。 希望现在我们已经发现了技术细节,我们将在不久的将来看到采用。

如何使用 watch-html 部分发送电子邮件

如果您自己发送 HTML 电子邮件,或者您正在为 ESP 实现此功能,让我们介绍如何发送包含 Watch HTML 部分的电子邮件的技术细节。

要添加您的 Watch HTML 部分,请添加额外的第三个 MIME 部分。 它必须使用内容类型“text/watch-html”并且必须是内联的。

 内容类型:text/watch-html; 字符集=“utf-8”

此外,这是非常重要的,你必须确保你的电子邮件来源的标准HTML部分观看HTML部分出现,以及纯文本部分之后。 如果您在其他地方包含 Watch HTML,桌面上的 Apple Mail 会将您的 Watch HTML 呈现为纯文本。 如果您在使用它时遇到问题,请检查您的邮件软件或 MTA 是否没有重新订购 MIME 部件。

这是一个正确实现所有 3 个部分的示例电子邮件:

 来自:来自@example.org
至:[email protected]
主题:Apple Watch 示例
内容类型:多部分/替代; 边界=“你的边界”

--你的边界
内容类型:文本/纯文本; 字符集=“utf-8”
内容传输编码:引用打印
内容处置:内联

这是纯文本部分。

--你的边界
内容类型:text/watch-html; 字符集=“utf-8”
内容传输编码:引用打印
内容处置:内联

<b>这是观看 HTML 部分</b>

--你的边界
内容类型:文本/html; 字符集=“utf-8”
内容传输编码:引用打印
内容处置:内联

<p>这是标准的 HTML 部分</p>
<img src="something-remote"/>

--你的边界--

最后,如果标准 HTML 部分中存在不合适的内容,Watch 只会回退到您的 watch-html 部分。 一个简单的远程图像,例如跟踪错误或隐藏图像,就可以解决问题。

这种技术是有效的,因为 Apple Watch 会尝试 text/html 部分,然后逐渐返回 MIME 部分,寻找合适的内容。 虽然我们将内容类型命名为“text/watch-html”,但实际上,它可以被称为以“text/”开头的任何内容。

向自己发送手表优化的电子邮件

PutsMail 允许您向任何地址发送测试电子邮件,而无需 ESP。 它还支持watch-html