Я решил проверить, что из рассказов про Outlook правда, а что — ложь. Для этого создал учётную запись на @outlook.com и скачал несколько версий программы:

• Microsoft Outlook 2019 (Windows).
• Microsoft Outlook 2019 (Mac).
• Microsoft Outlook 2013 (Windows).
• Outlook.com (не качал, это веб-клиент).

Себе на почту я прислал несколько десятков писем, чтобы посмотреть, как разные версии Outlook их отображают. Вот, какие страшилки я проверял.

Страшилка №1: Не отображает фоновые изображения

В чём суть. Считается, что Outlook не показывает фоновые картинки, которые вставляются через атрибут или стиль «background».

Поддержка. Какие платформы Outlook поддерживают фоновые изображения:

Что делать. Старайтесь по-минимуму использовать задний фон с картинкой. Если очень нужно — убедитесь, что без него сообщение остаётся читабельным и хорошо отображается на Outlook. Как вариант — задайте цвет фона с помощью «background-color». Чаще всего Outlook отображает этот атрибут правильно.

Верстальщики из Litmus советуют инструмент для создания фона письма backgrounds.cm. Он добавляет в письмо вставку на VML — языке разметки Microsoft Office. Outlook считает этот участок кода и вставит картинку, которая там записана. В backgrounds.cm можно сделать фон для всего письма, отдельной ячейки таблицы, а также указать, какой цвет отображать, если фоновая картинка не загрузилась.

Страшилка №2: Сбрасывает цвет ссылок

В чём суть. Говорят, что в Outlook нельзя поставить свой цвет ссылок — он будет всегда сбрасывать его к значению по умолчанию (синие ссылки, фиолетовые после нажатия).

Задать цвет ссылке можно, но после нажатия она всё равно будет перекрашиваться в стандартный фиолетовый.

Поддержка. В каких клиентах цвет ссылок работает правильно:

* В Outlook 2019 и 2013 можно задать цвет ссылок через стиль «color» в теге «». Но после нажатия ссылка предательски перекрасится в фиолетовый цвет.

Поддержка. Какие клиенты по умолчанию отображают картинки:

Грустно, но alt-текст подписчики десктопных версий Outlook тоже не увидят.

Что делать. Убедитесь, что ваше сообщение хорошо читается и без картинок. Если среди ваших подписчиков много пользователей Outlook, задумайтесь: может стоит перейти на Plain text письма?

Страшилка №4: Неправильно показывает шрифты

В чём суть. Некоторые версии Outlook сбрасывают шрифт письма в Times New Roman:

Для сравнения это же письмо в почте Gmail:

Поддержка. Проблему со шрифтами я обнаружил только в Outlook 2013. Остальные версии нормально отображали шрифты:

Люди на форуме Litmus жалуются, что такой же баг есть во всех версиях Outlook младше 2013.

Что делать. Проверяйте, как отображается шрифт в Outlook 2013 и более старых версиях. Баг срабатывает не всегда — некоторые шрифты он отображает нормально, другие меняет на Times New Roman.

Верстальщики советуют вставлять такой участок VML-кода сразу за тегом :

Говорят, полностью решает проблему замены шрифтов на старых версиях Outlook.

Страшилка №5: Картинки отображаются в соответствии с оригинальным размером

В чём суть. Обычно мы не особо переживаем о размере картинок — в блочном редакторе или HTML-коде всегда можно задать нужные размеры. Но в некоторых случаях Outlook будет отображать картинку в исходном размере:

Вот так это письмо выглядит на Gmail:

Поддержка. Клиенты, которые всегда отображают заданные нами размеры картинок:

Что делать. Прописывайте размеры картинок через атрибуты HTML, а не CSS-стили.

Если не хотите мучиться с ручной вёрсткой, можете изначально подбирать картинки в том размере, в котором они будут в письме. Но тогда мы попадаем на другую проблему: для устройств с Retina-экранами часто советуют добавлять изображения в 2 раза больше области, которую они занимают в письме (так у них будет выше разрешение). Email-маркетологу остаётся только балансировать между двумя огнями: съехавшая вёрстка в письмах на Outlook или не очень чёткие изображения на Retina-экранах (я бы выбрал второй вариант).

Страшилка №6: Не работают GIF

В чём суть. Outlook не проигрывает GIF, а вместо этого показывает только первый кадр.

Поддержка. Какие Outlook-клиенты поддерживают GIF:

В десктопных версиях Outlook 2019 года GIF проигрывается 3 раза и останавливается. Чтобы проиграть её ещё раз, нужно кликнуть на картинку. В версии 2013 года и младше GIF не проигрываются совсем. Вместо этого мы увидим только первый кадр анимации.

Что делать. Позаботится о том, чтобы первый кадр передавал суть анимации. Если показываете товар со всех сторон — проверьте, чтобы в начале был правильный ракурс. Хотите развлечь подписчиков — убедитесь, что смысл GIF считывается с первого кадра.

Страшилка №7: Поддерживает далеко не все теги HTML и CSS

В чём суть. У Outlook очень ограниченная поддержка CSS и HTML. Иногда из-за этого страдает вёрстка:

Как это же письмо отображается в Gmail:

Поддержка. Какие теги и стили поддерживают разные версии Outlook:

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

Страшилка №8: Неправильно отображает кнопки

В чём суть. У кнопок в Outlook часто неправильно отображаются отступы, а закруглённые края пропадают.

Кнопка здорового человека:

Эта же кнопка в Outlook 2019:

Поддержка. Какие клиенты правильно отображают кнопки на Outlook:

Что делать. Нормального отображения кнопок в Outlook можно добиться только подключив VML — язык разметки от Microsoft. Этот участок кода будет работать только в Outlook. Как это выглядит:

Следом за этим будет идти ссылка с кнопкой для всех других клиентов:

Кнопка

Если вам не очень хочется учить новый язык ради того, чтобы делать красивые кнопки для Outlook, в Campaign Monitor есть готовое решение. В их сервисе buttons.cm можно задать параметры кнопки и скопировать готовый код с VML-вставкой.

Страшилка №9: Обрезает письма длиннее 1 800 пикселей

В чём суть. Существует слух, что Outlook обрезает письма длиннее 1 800 пикселей. Я посмотрел несколько длинных писем, но баг не обнаружил. 

Поддержка. Клиенты, которые я проверял, не обрезали длинные письма:

Что делать. Радоваться, что одной проблемой на Outlook стало меньше.

Страшилка №10: Не отображает эмоджи

В чём суть. Поговаривают, что в Outlook есть проблемы с эмоджи: он не отображает их в теме и прехедере.

Поддержка. Из тех версий, на которых я смотрел письма, эмоджи нормально отображались и в теме, и в теле письма.

Что делать. Продолжать использовать эмоджи, чтобы увеличить открываемость рассылок. Только учитывайте, что у Outlook свои наборы смайликов и они довольно…специфические:

Ещё несколько советов

Перед отправкой обязательно проверяйте, как ваше письмо будет отображаться на разных платформах. Проще всего для этих целей использовать специальные тестовые сервисы, например Litmus или Email On Acid.

Как вариант — заведите ящики на большинстве популярных почтовых клиентов и проверяйте перед отправкой, как на них отображаются письма. Это дольше и сложнее, чем проверять в специальных сервисах, зато бесплатно