Мы продолжаем рассказывать о верстке почтовых рассылок.

Как правило, 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 имеет большие проблемы с изображениями. Помимо того, что они должны быть вставлены «эмбедом», есть и другие примечательные моменты.

Существует баг в позиционировании изображений, который приводит к «поломике» соотношения его сторон. Когда 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/”.Источник: https://litmus.com/blog/how-to-send-hidden-version-email-apple-watch