Как отправить скрытую версию электронного письма, которую увидят только Apple Watch

Пользователь Litmus Дэн Фуди обнаружил в Apple Watch кое-что очень интересное. Есть способ отправить скрытую версию вашей почтовой кампании, которая будет отображаться только на Apple Watch. Это дает вам гораздо больше гибкости в вашем дизайне.

Обычно часы отображают только текстовую часть вашего электронного письма. Это происходит из-за причуды. Когда Watch замечают удаленное изображение в вашем электронном письме, они считают HTML слишком сложным и вместо этого показывают текстовую версию. Для справки: удаленное изображение - это изображение, которое не встроено в электронное письмо, а вместо этого загружается с сервера с использованием стандартного тега <img> - 99% изображений в сообщениях электронной почты загружаются таким образом. Помните, мы показываем электронную почту на часах , ребята. Это должно быть просто!

Итак, в чем секрет?

Во-первых, немного предыстории. Электронные письма в формате HTML обычно состоят из двух частей: HTML (технически с типом содержимого text / html ) и Plain Text ( text / plain ). Apple в недавнем электронном письме клиентам использовала третью часть: text / watch-html .

Если вы включите дополнительную часть HTML в свое сообщение с Content-Type « text / watch-html », Watch будет использовать дополнительную часть Watch вместо части Plain Text, когда часть HTML не подходит. Вам может потребоваться помощь от вашего ESP или почтового провайдера, чтобы настроить третью часть Watch. Вы также можете попробовать отправить себе электронное письмо с поддержкой Watch с помощью PutsMail, который поддерживает третью часть watch-html . Теперь вы можете создавать контент исключительно для Watch!

Watch-html в действии

Мы взяли наш последний информационный бюллетень и добавили часть для просмотра html . Во всех остальных почтовых клиентах все выглядело так, как будто ничего не произошло.

Но на Apple Watch мы смогли показать конкретную адаптированную версию, в которой использовалась поддержка форматированного текста, как у часов.

Насколько хорошо электронная почта действительно может выглядеть на часах?

Ваши электронные письма могут выглядеть лучше с этой техникой, но она все еще довольно ограничена. Самый простой способ представить себе поддержку HTML в Watch - это только оформление текста. Вы можете создать более приятное форматирование, но вы не собираетесь воссоздавать полный макет с несколькими столбцами.

Просмотрите HTML-код, использованный для создания примера электронного письма выше. Вы заметите, что элементов уровня блока почти нет. Фактически, это вообще почти не похоже на HTML. Это все из-за того, как Watch преобразует HTML в форматированный текст.

Поскольку Watch не может отображать HTML, на самом деле iPhone переводит HTML в форматированный текст, прежде чем доставить его на Watch. Это очень похоже на программы просмотра отформатированного текста, которые некоторые могут помнить с первых дней Lotus Notes и AOL. По сути, это простой текст с некоторой поддержкой богатого контента.

Советы по форматированию

Вместо тегов абзацев просто создайте абзац в источнике вашего электронного письма. Не используйте стили или строгие теги для увеличения веса шрифта, вместо этого используйте <b>. Div не нужны, и при этом не соблюдается большинство стилей (за исключением цветов текста, которые не являются черными). Обязательно избегайте отступов или другой организации в вашем HTML - Watch включает в себя этот дополнительный интервал в сообщении.

Вот наше краткое изложение того, что поддерживается на данный момент:

Концепция Rich Text	Смотреть HTML
Жирный	<b> Текст </b>
Курсив	<i> Текст </i>
Подчеркивание	<u> Текст </u>
Цвет шрифта	<span style = ”color: # 00800;”> Текст </span> Текст, установленный на черный (# 000000) или не указанный, будет преобразован в белый (#FFFFFF). Поддерживаются другие цвета.
Выравнивание	<div style = ”text-align: right;”> Текст </div> Поддерживаются только левый, центральный и правый.
Цитирование	<blockquote type = ”cite”> Текст </blockquote> Вложить котировки глубиной до 7 уровней, отступа нет, но затенение указывает уровень котировки.
Нумерованный список	<ol> <li> Пункт 1 </li> </ol>
Маркированный список	<ul> <li> Пункт 1 </li> </ul>
Изображений	<img src = ”cid:…”> Текст </blockquote> Поддерживаются только встроенные образы, а фактическая поддержка содержит много ошибок. Подробнее об этом ниже.

Поддержка изображений

Эта первая версия почтового клиента Watch имеет довольно большие проблемы с изображениями. Помимо того факта, что они должны быть встроены, следует отметить несколько серьезных ошибок.

Ошибка в позиционировании изображений, из-за которой соотношение сторон изображения нарушается. Когда часы изменяют размер встроенного изображения, они вставляют прозрачную границу размером 2 пикселя (4 пикселя один раз на экране сетчатки). К сожалению, это происходит внутри изображения, вызывая искажение изображения. Например, если у вас есть изображение размером 100x50 пикселей, Watch изменит его размер до 96x46 пикселей, не сохранив пропорции изображения.

Вы можете обойти эту проблему, изменив размер изображений на 4 x 4 пикселя (без сохранения соотношения сторон изображения). В этом примере изображение в HTML-части Watch будет иметь размер 104x54px. Часы вернут его размер до 100x50 пикселей. Однако это приведет к некоторому искажению.

Кроме того, встроенные изображения могут быть непреднамеренно перемещены в любое место в представлении Watch. Если во время рендеринга часы заикаются, вы можете обнаружить, что ваше изображение появляется поверх темы, даты или даже названия!

Мы полностью ожидаем, что Apple исправит эти проблемы с помощью обновления программного обеспечения в ближайшем будущем, но стоит помнить об этих ограничениях. Если вы экспериментируете со встраиванием изображений, не забывайте использовать их только в части "Просмотр HTML", поскольку встроенные изображения плохо поддерживают отображение в части HTML, отображаемой в других почтовых клиентах.

Текст предзаголовка

Есть еще одно последнее соображение, о котором следует знать. Хотя Watch будет отображать Watch HTML, он по-прежнему будет использовать стандартную часть HTML для текста предзаголовка в представлении папки «Входящие».

Использование watch-html в дикой природе

Как на самом деле можно использовать эту скрытую HTML-часть Watch? Вам понадобится помощь вашего ESP или почтового провайдера. Плохая новость в том, что ESP пока не поддерживают это - отправьте им ссылку на этот пост! Мы включили технические подробности ниже. Надеюсь, теперь, когда мы раскрыли технические детали, мы увидим принятие в ближайшем будущем.

Как отправить электронное письмо с частью watch-html

Если вы сами доставляете электронные письма в формате HTML или реализуете это для ESP, давайте рассмотрим технические детали того, как отправлять электронные письма, которые включают часть Watch HTML.

Чтобы добавить HTML-часть Watch, добавьте дополнительную, третью часть MIME. Он должен использовать Content-Type «text / watch-html» и должен быть встроенным.

 Тип содержимого: текст / часы-html; charset = "utf-8"

Кроме того, и это очень важно, вы должны убедиться, что часть Watch HTML отображается перед стандартной частью HTML в вашем источнике электронной почты и после части с простым текстом. Если вы включите Watch HTML в другом месте, Apple Mail на рабочем столе отобразит ваш Watch HTML как обычный текст. Если у вас возникли проблемы с его работой, убедитесь, что ваше почтовое программное обеспечение или MTA не переупорядочивают части MIME.

Вот пример письма, в котором правильно реализованы все 3 части:

 От: [email protected]
Кому: [email protected]
Тема: Пример Apple Watch
Тип содержимого: составной / альтернативный; border = "ваша-граница"

--ваша-граница
Content-Type: текст / простой; charset = "utf-8"
Content-Transfer-Encoding: цитируется-печатается
Content-Disposition: встроенный

Это часть обычного текста.

--ваша-граница
Тип содержимого: текст / часы-html; charset = "utf-8"
Content-Transfer-Encoding: цитируется-печатается
Content-Disposition: встроенный

<b> Это часть просмотра HTML </b>

--ваша-граница
Тип содержимого: текст / html; charset = "utf-8"
Content-Transfer-Encoding: цитируется-печатается
Content-Disposition: встроенный

<p> Это стандартная часть HTML </p>
<img src = "что-то удаленное" />

--ваша-граница -

Наконец, Watch вернутся к вашей части watch-html только в том случае, если в стандартной части HTML есть что-то неподходящее. Простое удаленное изображение, такое как ошибка отслеживания или скрытое изображение, поможет.

Этот метод работает, потому что Apple Watch пробует часть текста / html, а затем постепенно возвращается через части MIME в поисках подходящего контента. Хотя мы назвали наш Content-Type «text / watch-html», в действительности его можно было бы назвать чем угодно, начинающимся с «text /».

ОТПРАВИТЬ САМ ОПТИМИЗИРОВАННУЮ ЭЛЕКТРОННУЮ ПОЧТУ

PutsMail позволяет отправлять тестовое письмо на любой адрес без ESP. Он также поддерживает watch-html .