В блоге компании Litmus опубликован материал, в котором рассказывается, как можно создать «скрытую» версию электронного письма почтовой рассылки, которая будет отображаться только на Apple Watch.

Как правило, Watch отображает только plain text-часть почтового сообщения — когда устройство «замечает», что в письме используется изображение, хранящееся на удаленном сервере, оно решает, что все это слишком сложно, и показывает только текст. Речь все-таки идет о часах.

Так в чем же секрет?

Поговорим немного о базовых вещах. Обычно HTML-письма состоят из двух частей — кода HTML (в качестве Content-Type выбран text/html) и Plain Text-части (text/plain). Не так давно Apple разослала клиентам письмо, содержащее третью часть — text/watch-html.



Если в письмо включить еще одну HTML-часть с Content-Type, установленным в text/watch-html, то Apple Watch будет использовать эту дополнительную часть вместо простого текста.

Для тестовой отправки оптимизированного под Apple Watch сообщения можно воспользоваться сервисом PutsMail.

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

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

Но на часах от Apple появилась возможность отображения оптимизированной версии:

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

С помощью описанной техники можно несколько улучшить отображение письма на часах, но не слишком сильно. Добиться чего-то кроме чуть более красивого текста вряд ли удастся. Иными словами не стоит рассчитывать на отображение письма в привычном многоколоночном виде.

Если посмотреть на использованные для письма выше HTML-код, то выяснится, что там почти нет элементов блочных (block-level). На самом деле, код едва похож на HTML, сего помощью можно совсем чуть-чуть отформатировать текст, но ни о каком многоколоночном виде не идет и речи.

Поскольку Watch не умеет отображать HTML, устройство с помощью iPhone транслирует его в «богатый текст» (rich text) и только затем отображает его на своем экране. Чем-то напоминает «старые деньки» Lotus Notes и AOL — по сути, только текст с небольшими вкраплениями rich-контента.

Советы по вёрстке

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

Ниже представлена информация о том, что поддерживается в настоящий момент:

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

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

Первая версия «родного» почтового приложения Watch имеет большие проблемы с изображениями. Помимо того, что они должны быть вставлены «эмбедом», есть и другие примечательные моменты.

Существует баг в позиционировании изображений, который приводит к «поломке» соотношения его сторон. Когда Watch «ресайзит» изображение, встроенное в письмо, то вставляет прозрачную границу шириной 2 пикселя (4px на retina-экране). Проблема том, что это происходит «внутри» изображения, что искажает его. К примеру, если у вас есть изображение с соотношением сторон 100x50px, то Watch ужмет его до 96x46px, что нарушит соотношение сторон.

Можно попытаться обойти эту проблему, растянув изображение на те самые 4x4px. В примере ниже изображение имеет размер 104x54px. В результате Watch ужмет его обратно до 100x50px. Но этот метод все равно характеризуется искажением картинки:



Инлайн-изображения могут также случайным образом перепозиционироваться внутри экрана часов. Если произойдет такой «глюк», то изображение может наехать даже на строку с темой письма или поле От кого.

Скорее всего Apple устранит эти проблемы в одном из ближайших обновлений, но пока что их следует учитывать. Если вы все же решите поэкспериментировать с изображениями в письмах, то лучше использовать их только в части Apple Watch HTML — поскольку встроенные изображения плохо отображаются многими почтовыми клиентами, не стоит помещать их в «обычную» HTML-часть письма.

Текст превью

Еще один важный момент — несмотря на то, что Watch рендерит Watch HTML, для отображения превью сообщения будет использован стандартный сегмент HTML.

Использование Watch-HTML

Для использования скрытой части Watch HTML необходима помощь почтового провайдера, однако такие сервисы еще только начинают разбираться с данной технологией. Ниже представлены некоторые технические детали работы с такими письмами, которые позволят организовать самостоятельную оправку.

Как отправить письмо с частью Watch-HTML

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

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

Важный момент: часть Watch HTML должна стоять в коде перед стандартным HTML, но после plain text-части.Если разместить ее иначе, то Apple Watch отобразит email как простой текст. Если что-то не работает, нужно проверить, не меняет ли почтовый софт MIMI-части местами.

Ниже представлен код, в котором все три части размещены корректно:

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

Plain text часть письма

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

<b>Это часть Watch HTML</b>

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

<p>Это стандартная часть HTML</p>
<img src=”something-remote”/>

--your-boundary—

Кроме того, Apple Watch обратится к части кода watch-html, если встретит что-то неподходящее в стандартном HTML. Чтобы добиться этого, можно использовать простой трюк с изображением, расположенным на внешнем сервере.

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