Я решил проверить, что из рассказов про Outlook правда, а что — ложь. Для этого создал учётную запись на @outlook.com и скачал несколько версий программы:
Себе на почту я прислал несколько десятков писем, чтобы посмотреть, как разные версии Outlook их отображают. Вот, какие страшилки я проверял.
В чём суть. Считается, что Outlook не показывает фоновые картинки, которые вставляются через атрибут или стиль «background».
Поддержка. Какие платформы Outlook поддерживают фоновые изображения:
| Outlook.com |  |
| Outlook 2019 (Windows) |  |
| Outlook 2019 (Mac) | |
| Outlook 2013 (Windows) | |
Что делать. Старайтесь по-минимуму использовать задний фон с картинкой. Если очень нужно — убедитесь, что без него сообщение остаётся читабельным и хорошо отображается на Outlook. Как вариант — задайте цвет фона с помощью «background-color». Чаще всего Outlook отображает этот атрибут правильно.
Верстальщики из Litmus советуют инструмент для создания фона письма backgrounds.cm. Он добавляет в письмо вставку на VML — языке разметки Microsoft Office. Outlook считает этот участок кода и вставит картинку, которая там записана. В backgrounds.cm можно сделать фон для всего письма, отдельной ячейки таблицы, а также указать, какой цвет отображать, если фоновая картинка не загрузилась.
В чём суть. Говорят, что в Outlook нельзя поставить свой цвет ссылок — он будет всегда сбрасывать его к значению по умолчанию (синие ссылки, фиолетовые после нажатия).
Задать цвет ссылке можно, но после нажатия она всё равно будет перекрашиваться в стандартный фиолетовый.
Поддержка. В каких клиентах цвет ссылок работает правильно:
| Outlook.com | |
| Outlook 2019 (Windows) | * |
| Outlook 2019 (Mac) | * |
| Outlook 2013 (Windows) | * |
* В Outlook 2019 и 2013 можно задать цвет ссылок через стиль «color» в теге «<a>». Но после нажатия ссылка предательски перекрасится в фиолетовый цвет.
Что делать. Прописывайте цвет ссылок и не переживайте — они будут отображаться правильно. С тем, что в Outlook 2013-2019 ссылка перекрасится после нажатия, ничего не поделаешь.
В чём суть. При первом заходе в десктопные версии Outlook мы не увидим картинок. Вместо них будут противные белые прямоугольники с текстом:
Поддержка. Какие клиенты по умолчанию отображают картинки:
| Outlook.com | |
| Outlook 2019 (Windows) | |
| Outlook 2019 (Mac) | |
| Outlook 2013 (Windows) | |
Грустно, но alt-текст подписчики десктопных версий Outlook тоже не увидят.
Что делать. Убедитесь, что ваше сообщение хорошо читается и без картинок. Если среди ваших подписчиков много пользователей Outlook, задумайтесь: может стоит перейти на Plain text письма?
Заходим в «Файл» → «Параметры» → «Центр управления безопасностью» → «Параметры центра управления безопасностью» → убираем галочку напротив «Не скачивать автоматически рисунки в обычных сообщениях и элементах RSS».
Готово, при следующем заходе Outlook загрузит картинки. В Outlook 2013 алгоритм похожий, лишь немного отличается дизайн меню.
В чём суть. Некоторые версии Outlook сбрасывают шрифт письма в Times New Roman:
Для сравнения это же письмо в почте Gmail:
Поддержка. Проблему со шрифтами я обнаружил только в Outlook 2013. Остальные версии нормально отображали шрифты:
| Outlook.com | |
| Outlook 2019 (Windows) | |
| Outlook 2019 (Mac) | |
| Outlook 2013 (Windows) | |
Люди на форуме Litmus жалуются, что такой же баг есть во всех версиях Outlook младше 2013.
Что делать. Проверяйте, как отображается шрифт в Outlook 2013 и более старых версиях. Баг срабатывает не всегда — некоторые шрифты он отображает нормально, другие меняет на Times New Roman.
Верстальщики советуют вставлять такой участок VML-кода сразу за тегом <body>:
<!—[if mso]>
<style type=»text/css»>
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]—>
Говорят, полностью решает проблему замены шрифтов на старых версиях Outlook.
В чём суть. Обычно мы не особо переживаем о размере картинок — в блочном редакторе или HTML-коде всегда можно задать нужные размеры. Но в некоторых случаях Outlook будет отображать картинку в исходном размере:
Вот так это письмо выглядит на Gmail:
Поддержка. Клиенты, которые всегда отображают заданные нами размеры картинок:
| Outlook.com | |
| Outlook 2019 (Windows) | |
| Outlook 2019 (Mac) | |
| Outlook 2013 (Windows) | |
Что делать. Прописывайте размеры картинок через атрибуты HTML, а не CSS-стили.
Если не хотите мучиться с ручной вёрсткой, можете изначально подбирать картинки в том размере, в котором они будут в письме. Но тогда мы попадаем на другую проблему: для устройств с Retina-экранами часто советуют добавлять изображения в 2 раза больше области, которую они занимают в письме (так у них будет выше разрешение). Email-маркетологу остаётся только балансировать между двумя огнями: съехавшая вёрстка в письмах на Outlook или не очень чёткие изображения на Retina-экранах (я бы выбрал второй вариант).
В чём суть. Outlook не проигрывает GIF, а вместо этого показывает только первый кадр.
Поддержка. Какие Outlook-клиенты поддерживают GIF:
| Outlook.com | |
| Outlook 2019 (Windows) | |
| Outlook 2019 (Mac) | |
| Outlook 2013 (Windows) | |
В десктопных версиях Outlook 2019 года GIF проигрывается 3 раза и останавливается. Чтобы проиграть её ещё раз, нужно кликнуть на картинку. В версии 2013 года и младше GIF не проигрываются совсем. Вместо этого мы увидим только первый кадр анимации.
Что делать. Позаботится о том, чтобы первый кадр передавал суть анимации. Если показываете товар со всех сторон — проверьте, чтобы в начале был правильный ракурс. Хотите развлечь подписчиков — убедитесь, что смысл GIF считывается с первого кадра.
В чём суть. У Outlook очень ограниченная поддержка CSS и HTML. Иногда из-за этого страдает вёрстка:
Как это же письмо отображается в Gmail:
Поддержка. Какие теги и стили поддерживают разные версии Outlook:
Таблица с поддержкой стилей и тегов
| Outlook.com | Outlook 2019 (Windows) | Outlook 2019 (Mac) | Outlook 2013 (Windows) | |
| Глобальные стили в <head> | |
|
|
|
| Инлайн-стили | |
|
|
|
| Медиа-запросы | |
|
|
|
| Селекторы атрибутов CSS | |
|
|
|
| Классы | |
|
|
|
| ID | |
|
|
|
| alt-текст | |
|
|
|
| Стили для alt-текста | |
|
|
|
| Потоковое видео | |
|
|
|
| Padding | |
|
|
|
| Margin | |
|
|
|
| Max-width | |
|
|
|
| Заголовки | |
|
|
|
| CSS-позиционирование (inline, block, inline-block) | |
|
|
|
| <p> | |
|
|
|
| Веб-шрифты | |
|
|
|
| AMP-интерактивность | |
|
|
|
| CSS-анимация | |
|
|
|
Что делать. Представьте, что играете в «Сапёра» — аккуратно обходите элементы, которые будут плохо отображаться в разных версиях Outlook. К сожалению, здесь тяжело дать какое-то одно универсальное решение — в каждой рассылке для Outlook верстальщики будут встречаться с проблемами, для которых нужно будет придумывать какие-то безопасные варианты обхода.
В чём суть. У кнопок в Outlook часто неправильно отображаются отступы, а закруглённые края пропадают.
Кнопка здорового человека:
Эта же кнопка в Outlook 2019:
Поддержка. Какие клиенты правильно отображают кнопки на Outlook:
| Outlook.com | |
| Outlook 2019 (Windows) | |
| Outlook 2019 (Mac) | |
| Outlook 2013 (Windows) | |
Что делать. Нормального отображения кнопок в Outlook можно добиться только подключив VML — язык разметки от Microsoft. Этот участок кода будет работать только в Outlook. Как это выглядит:
<!—[if mso]>
<v:roundrect xmlns:v=»urn:schemas-microsoft-com:vml» xmlns:w=»urn:schemas-microsoft-com:office:word» href=»unisender.com» style=»height:40px;v-text-anchor:middle;width:170px;» arcsize=»5%» strokecolor=»#EB7035″ fillcolor=»#EB7035″>
<w:anchorlock/>
<center style=»color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;»>I am a button →</center>
</v:roundrect>
<![endif]—>
Следом за этим будет идти ссылка <a> с кнопкой для всех других клиентов:
<a href=»unisender.com» style=»background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;»>Кнопка</a>
Если вам не очень хочется учить новый язык ради того, чтобы делать красивые кнопки для Outlook, в Campaign Monitor есть готовое решение. В их сервисе buttons.cm можно задать параметры кнопки и скопировать готовый код с VML-вставкой.
В чём суть. Существует слух, что Outlook обрезает письма длиннее 1 800 пикселей. Я посмотрел несколько длинных писем, но баг не обнаружил.
Поддержка. Клиенты, которые я проверял, не обрезали длинные письма:
| Outlook.com | |
| Outlook 2019 (Windows) | |
| Outlook 2019 (Mac) | |
| Outlook 2013 (Windows) | |
Что делать. Радоваться, что одной проблемой на Outlook стало меньше.
В чём суть. Поговаривают, что в Outlook есть проблемы с эмоджи: он не отображает их в теме и прехедере.
Поддержка. Из тех версий, на которых я смотрел письма, эмоджи нормально отображались и в теме, и в теле письма.
| Outlook.com | |
| Outlook 2019 (Windows) | |
| Outlook 2019 (Mac) | |
| Outlook 2013 (Windows) | |
Что делать. Продолжать использовать эмоджи, чтобы увеличить открываемость рассылок. Только учитывайте, что у Outlook свои наборы смайликов и они довольно…специфические:
Перед отправкой обязательно проверяйте, как ваше письмо будет отображаться на разных платформах. Проще всего для этих целей использовать специальные тестовые сервисы, например Litmus или Email On Acid.
Как вариант — заведите ящики на большинстве популярных почтовых клиентов и проверяйте перед отправкой, как на них отображаются письма. Это дольше и сложнее, чем проверять в специальных сервисах, зато бесплатно
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы и интервью с экспертами диджитала.
