В блоге компании 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 для повышения веса шрифта, лучше обойтись простым
. Нецелесообразно использование дивов, не поддерживается большинства стилей (кроме цветов текста, которые не черные).
Ниже представлена информация о том, что поддерживается в настоящий момент:
Элемент форматирования
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/.