Специфика отображения HTML-писем в Outlook: основные трудности и рекомендации

Лилит Ханджян
Время чтения: 4 мин

Привет, маркетологи и немаркетологи! На связи Лилит из enKod’а 👩🏽‍💻

Сталкивались с ситуацией, когда письма, которые на Gmail, Mail.ru и других почтовых сервисах отображаются корректно, сильно искажаются на Outlook?

Это частая боль тех, кто давно занимается емейл-маркетингом и тестирует письма.

Совместно с нашим техническим специалистом Антоном собрали практические советы, которые помогут сделать HTML-письма совместимыми с Outlook.

Почему возникают проблемы с восприятием CSS-стилей в Outlook?

HTML и CSS — это два основных языка веб-разработки, которые широко используются в email-письмах для создания красивых и функциональных шаблонов. HTML в письмах служит для создания основной структуры и содержания. CSS же отвечает за внешний вид HTML-элементов: определяет цвета, шрифты, отступы, размеры и расположение. Он придаёт веб-странице стиль и улучшает пользовательский интерфейс.

Outlook использует движок Microsoft Word для отображения HTML-контента. Это приводит к искажению внешнего вида писем, так как Word имеет ограниченные возможности рендеринга CSS и HTML.

Отсутствие поддержки Outlook многих CSS-стилей вызывает ряд проблем, с которыми лично сталкивалась:

1. Ограниченная адаптивность

Outlook на Windows не поддерживает flexbox, CSS Grid и медиа-запросы, что делает адаптивную вёрстку сложной, иногда – невозможной.

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

2. Некорректное позиционирование и выравнивание элементов

Позиционирование через position: relative, absolute или fixed в Outlook не поддерживается. Это мешает гибко располагать элементы.

Для выравнивания и создания макетов разработчики вынуждены использовать таблицы и добавлять дополнительные <tr> и <td>, чтобы разместить контент правильно, что увеличивает объём HTML и усложняет код.

3. Отсутствие поддержки отступов (margin):

Outlook игнорирует свойства margin, особенно для внешних блоков, а также может неправильно обрабатывать отступы у вложенных элементов.

Чтобы обойти это, разработчикам приходится использовать внутренние отступы (padding) или вставлять дополнительные пустые <td> для создания нужного пространства.

4. Отсутствие поддержки фоновых изображений:

Свойство background-image не поддерживается, из-за чего в письмах невозможно добавить фоновые изображения с помощью CSS.

Это ограничивает возможности дизайна и требует либо использования простых фонов, либо вставки изображений как отдельных элементов.

5. Отсутствие поддержки псевдоклассов и псевдоэлементов:

Псевдоклассы (:hover, :active, :first-child) и псевдоэлементы (::before, ::after) в Outlook не работают, что исключает интерактивные элементы и эффекты при наведении.

Это снижает интерактивность письма и исключает дополнительные стили для динамического контента.

6. Отсутствие поддержки кастомных шрифтов:

Outlook игнорирует @font-face, поэтому приходится использовать только базовые системные шрифты, что ограничивает креативные решения и нарушает брендовый стиль.

Кастомные шрифты приходится заменять на стандартные — Arial, Times New Roman, Georgia и т.п., — которые поддерживаются всеми клиентами.

7. Проблемы с отображением кнопок и интерактивных элементов:

Кнопки в Outlook иногда выглядят некорректно, если применены сложные стили (например, border-radius или тени).

Элементы с display: inline-block и padding могут вести себя непредсказуемо, что усложняет создание адаптивных кнопок и ссылок.

8. Непредсказуемая работа таких CSS-свойств, как как float и display:

float и display: inline-block работают нестабильно, из-за чего создаются непредсказуемые пробелы и переносы элементов.

К примеру, два inline-block элемента могут неправильно переноситься, а float игнорироваться.

Для наглядности покажу на реальном примере, как одно и то же письмо может выглядеть в Gmail и Outlook:

Другие особенности Outlook

1. VML-код для поддержки кнопок и других элементов

Чтобы сохранить стили кнопок и других важных элементов, необходимо включать в HTML-код VML-код (Vector Markup Language).

Этот код добавляется для специфических элементов вроде кнопок, чтобы они корректно отображались в Outlook. VML-код помогает удерживать нужные стили и цвета, придавая им требуемый вид.

2. Проблемы с отображением изображений и вложениями

Отображение картинок в Outlook можно улучшить, если отправлять их как вложения, а не ссылки. Но эта тактика сработает только для Outlook, поскольку другие почтовые клиенты (например, Gmail или Яндекс) могут не поддерживать эту функциональность и не отображать изображения.

Поэтому нужно оценить, какая часть базы клиентов использует Outlook. Если она достаточно велика, тогда есть смысл подстраивать под них отправку писем.

3. Поддержка корпоративных аккаунтов и сегментация базы данных

Outlook часто используется для корпоративных почт, и для B2B-коммуникаций поддержка этого почтового клиента особенно важна.

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

Выводы и рекомендации

Что делать, чтобы письма корректно отображались в Outlook – рекомендации Антона:

  1. Верстать письма в enKod, через редактор Stripo. Обязательно включите Поддержку Outlook для кнопок, так они точно будут корректно отображаться.
  1. Включать VML-код для ключевых элементов (кнопок и фонов), чтобы компенсировать ограниченную поддержку CSS-стилей.
  1. Отправлять изображения как вложения для пользователей Outlook, если они составляют значительную часть базы. В остальных случаях лучше использовать ссылки на изображения, чтобы избежать искажения на других платформах.
  2. Сегментировать базу клиентов на основании используемых почтовых сервисов, особенно если значительная часть корпоративных пользователей работает через Outlook.

Больше рекомендаций по эффективной автоматизации маркетинга – в нашей полезной рассылке, подпишитесь ! =)

Другие наши статьи

В этой статье совместно с нашим техническим специалистом Антоном собрали ключевые факторы, влияющие на доставляемость сообщений на Gmail, и рекомендации по предотвращению попадания писем в спам.

Что делать, если привычный инструмент email-маркетинга вдруг становится недоступным? Разберём кейс «Кантаты» о том, как эффективно переехать на новую платформу.

В этой статье собрала подробный сравнительный обзор функционала сервисов enKod и mindbox. Расскажу, какие задачи в каждом сервисе можете реализовать, а какой выбрать – решать вам =)