How To Send a Hidden Version of Your Email That Only Apple Watch Will See

Litmus user Dan Foody has discovered something very exciting about the Apple Watch. There’s a way to send a hidden version of your email campaign that only the Apple Watch will display. This gives you a lot more flexibility in your design.

Usually the Watch displays only the plain text part of your email. This happens because of a quirk. When the Watch notices a remote image in your email, it considers the HTML too complicated, so it shows the plain text version instead. For reference, a remote image is an image that isn’t embedded in the email, but instead loaded from a server using a standard <img> tag—99% of images in emails are loaded this way. Remember, we’re displaying email on a watch here, folks. It needs to be simple!

So, what’s the secret?

First, a bit of background. HTML emails typically contain two parts—HTML (technically with a Content-Type of text/html) and Plain Text (text/plain). Apple, in a recent email to customers, used a third part: text/watch-html.

If you include an additional HTML part in your message, with the Content-Type “text/watch-html”, the Watch will use the additional Watch part instead of the Plain Text part when the HTML part is unsuitable. You may need some help from your ESP or mailing provider to set up the third Watch part. You can also try sending yourself a Watch-enabled email with PutsMail, which supports a third watch-html part. Now you can create content exclusively for the Watch!

Watch-html in action

We took our last newsletter and added a watch-html part. In all other email clients, it looked as if nothing had happened.

But, on the Apple Watch, we were able to show a specific, tailored version that utilized the rich text-like support of the Watch.

How good can email really look on a Watch?

Your emails can look better with this technique, but it’s still fairly limited. The simplest way to think of the Watch’s HTML support is text decoration only. You can create some nicer formatting, but you’re not going to re-create a full multi-column layout.

Check out the HTML used to build the sample email above. You’ll notice there are almost no block-level elements. In fact, it barely looks like HTML at all. This is all because of the way the Watch parses HTML into a rich text view.

Since the Watch isn’t capable of displaying HTML, it actually has the iPhone translate the HTML into rich text before delivering it to the Watch. This is very similar to the rich text viewers that some may remember from the early days of Lotus Notes and AOL. It’s essentially plain text, with some rich content support.

Formatting Tips

Instead of paragraph tags, simply create a paragraph in the source of your email. Don’t use styles or strong tags to increase font weight, use <b> instead. Divs aren’t needed, nor are most styles (with the exception of text colors that are not black) respected. Be sure to avoid indentation or other organization in your HTML—the Watch includes this extra spacing in the message.

Here’s our rundown of what’s supported so far:

Image Support

This first version of the Watch email client has some fairly big problems when it comes to images. Aside from the fact that they must be embedded, there are some big gotchas to note.

There’s a bug in the way images are positioned that results in the image ratio being broken. When the watch resizes your embedded image, it inserts a 2px (4px once on the retina screen) transparent border. Unfortunately, it does this inside the image, causing the image to distort. For example, if you have a 100x50px image, the Watch will resize it to 96x46px, failing to preserve the image ratio.

You could work around this problem by resizing your images to 4px x 4px larger (without preserving image ratio). In this example, the image in your Watch HTML part would be 104x54px. The Watch will resize it back to 100x50px. However, this will result in some distortion.

Additionally, inline images can be unintentionally repositioned anywhere within the Watch view. If the Watch experiences a hiccup while rendering, you may find your image appearing over the top of the subject line, date or even from name!

We fully expect Apple to fix these problems in a software update in the near future, but it’s worth keeping these limitations in mind. If you experiment with embedding images, keep in mind to use them only in the Watch HTML part, as embedded images have poor support for display in the HTML part displayed in other email clients.

Preheader Text

There’s one final consideration to be aware of. Although the Watch will render the Watch HTML, it will still use the standard HTML part for preheader text in the inbox view.

Using watch-html in the wild

How can you actually use this hidden Watch HTML part? You’ll need help from your ESP or mailing provider. The bad news is ESPs don’t support this yet—send them a link to this post! We’ve included the technical details below. Hopefully now that we’ve uncovered the technical details we’ll see adoption in the near future.

How to Send an Email with a watch-html Part

If you are delivering HTML emails yourself, or you’re implementing this for an ESP, let’s cover the technical details of how to send emails that include a Watch HTML part.

To add your Watch HTML part, add an additional, third MIME part. It must use the Content-Type “text/watch-html” and it must be inline.

Content-Type: text/watch-html; charset="utf-8"

Also, and this is very important, you must ensure the Watch HTML part appears before the standard HTML part in your email source, and after the plain text part. If you include the Watch HTML elsewhere, Apple Mail on the desktop will render your Watch HTML as plain text. If you’re having problems getting it to work, check that your mailing software or MTA is not reordering the MIME parts.

Here’s an example email that correctly implements all 3 parts:

From: from@example.org
To: to@example.org
Subject: Apple Watch Example
Content-Type: multipart/alternative; boundary="your-boundary"

--your-boundary
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: quoted-printable
Content-Disposition: inline

This is the plain text part.

--your-boundary
Content-Type: text/watch-html; charset="utf-8"
Content-Transfer-Encoding: quoted-printable
Content-Disposition: inline

<b>This is the Watch HTML part</b>

--your-boundary
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: quoted-printable
Content-Disposition: inline

<p>This is the standard HTML part</p>
<img src=”something-remote”/>

--your-boundary--

Finally, the Watch will only fall back to your watch-html part if there’s something unsuitable in the standard HTML part. A simple remote image, such as a tracking bug or a hidden image, will do the trick.

This technique works because the Apple Watch will try the text/html part, then gradually work its way back up through the MIME parts, looking for suitable content. While we’ve named our Content-Type “text/watch-html”, it could, in reality, be called anything beginning with “text/”.

SEND YOURSELF A WATCH-OPTIMIZED EMAIL

PutsMail lets you send a test email to any address without an ESP. It also has support for watch-html.

Matt Brindley

Matt Brindley is a Litmus co-founder