[Перевод] Как создать email-письмо, которое увидит только Apple Watch
В блоге компании 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 Жирный шрифт Text Курсив Text Подчеркивание Text Цвет шрифта TextТекст черного цвета (#000000) или не выбранный будет конвертирован в белый (#FFFFFF). Остальные цвета поддерживаются.
Выравнивание
Цитаты
TextДо 7 уровней вложенности цитаты, отступы отсутствуют, но текущий уровень выделяется затемнением.
Нумерованный список
- Элемент 1
- Элемент 1
Поддержка изображений Первая версия «родного» почтового приложения Watch имеет большие проблемы с изображениями. Помимо того, что они должны быть вставлены «эмбедом», есть и другие примечательные моменты.Существует баг в позиционировании изображений, который приводит к «поломке» соотношения его сторон. Когда Watch «ресайзит» изображение, встроенное в письмо, то вставляет прозрачную границу шириной 2 пикселя (4 px на retina-экране). Проблема том, что это происходит «внутри» изображения, что искажает его. К примеру, если у вас есть изображение с соотношением сторон 100×50 px, то Watch ужмет его до 96×46 px, что нарушит соотношение сторон.
Можно попытаться обойти эту проблему, растянув изображение на те самые 4×4 px. В примере ниже изображение имеет размер 104×54 px. В результате Watch ужмет его обратно до 100×50 px. Но этот метод все равно характеризуется искажением картинки:
Инлайн-изображения могут также случайным образом перепозиционироваться внутри экрана часов. Если произойдет такой «глюк», то изобажение может наехать даже на строку с темой письма или поле От кого.
Скорее всего 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
Это часть Watch HTML
--your-boundary Content-Type: text/html; charset=«utf-8» Content-Transfer-Encoding: quoted-printable Content-Disposition: inline
Это стандартная часть HTML
--your-boundary— Кроме того, Apple Watch обратится к части кода watch-html, если встретит что-то неподходящее в стандартном HTML. Чтобы добиться этого, можно использовать простой трюк с изображением, расположенным на внешнем сервере.Этот метод работает, потому что Apple Watch сначала обработает часть text/html, затем пройдет по частям MIMI в поисках подходящего контента. В этом материале Content-Type назван text/watch-html, но на самом деле можно назвать его как угодно, лишь бы все начиналось с text/.
