Письма совместимые с Outlook

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

💡 ㅤБазовая верстка в редакторе EmailMaker уже содержит адаптацию под спецификации Microsoft Outlook. Это гарантирует сохранение структуры и геометрии письма без дополнительной ручной отладки.

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

В результате чего:

• Многие свойства CSS игнорируются или работают не так, как в браузерах.
• В центре внимания — использование таблиц вместо CSS-сеток.
• Отсутствие поддержки отступов, фонов и шрифтов.

Это требует особой внимательности и дополнительных ухищрений при верстке писем.

Ключевые моменты, на которые стоит обратить внимание чтобы отображение в Outlook было корректным.

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

Outlook на Windows не поддерживает flexbox, CSS Grid и медиа-запросы, что затрудняет создание полностью адаптивных писем.

Редактор автоматически добавляет в код условие, которое обеспечивает корректную ширину и структуру вашего письма. Это можно увидеть в коде как закрытые комментарии в начале и в конце письма:

    <!--[if (gte mso 9)|(IE)]>
<table cellpadding="0" cellspacing="0" border="0" width="660"><tr><td>
<![endif]-->

    <!-- Ваша верстка -->

    <!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->

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

Outlook имеет свои ограничения в позиционировании, а именно, отсутствует поддержка свойств position: relative, absolute, fixed.

Редактор изначально формируем блоки вашего контента с использованием тегов <tr> и <td>. Это позволяет вам гибко управлять расположением элементов, обходя ограничения Outlook и обеспечивая корректное отображение ваших писем.

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

Outlook не всегда корректно обрабатывает свойства margin, особенно у внешних блоков.

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

4. Ограничения фоновых изображений

Также могут возникнуть сложности с отображением фоновых изображений, так как CSS-свойство background-image не всегда работает корректно. Рекомендуется вставлять изображения непосредственно с помощью тега <img> или использовать фоновый цвет вместо изображений.

Пример отображения блока с фоном в редакторе и Outlook:

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

Outlook не поддерживает подключение пользовательских шрифтов через @font-face.

Чтобы ваши тексты отображались корректно у всех получателей, рекомендуется использовать стандартные системные шрифты, такие как Arial, Times New Roman или Georgia. Эти шрифты гарантированно доступны в большинстве операционных систем и почтовых клиентах, обеспечивая максимальную совместимость вашей рассылки.

В примере использован шрифт «Manrope», который в почтовом клиенте изменился на классический, что уже визуально изменило верстку:

6. Проблемы с интерактивными элементами и кнопками

Кнопки с закругленными краями (border-radius), тенью или свойством display: inline-block могут отображаться некорректно.

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

7. Особенности отображения справа-налево (dir="rtl")

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

Особенности мобильной версии Outlook

Мобильное приложение Outlook в целом поддерживает медиазапросы, что позволяет создавать адаптивные дизайны писем. Однако, даже при использовании медиазапросов, важно учитывать некоторые особенности: Например, изображения, ширина которых превышает ширину экрана, могут отображаться с нежелательными отступами по краям. Это может нарушить визуальную гармонию вашей рассылки.

Практические советы:

• Оборачивайте мелкие изображения или иконки в «обертки» с фиксированной шириной.
• Проверяйте отображение текстовых блоков при уменьшении ширины.
• Для блоков, не поддерживающих max-width, используйте условные комментарии <![if mso]> для задания фиксированной ширины.

Современный подход к верстке кнопок: отказ от VML

Мы в Emailmaker придерживаемся современного подхода к созданию email-рассылок. В частности, мы приняли решение отказаться от использования VML-кода (Vector Markup Language) при верстке кнопок. Хотя VML в прошлом использовался для обеспечения совместимости с некоторыми версиями Outlook, он значительно усложняет процесс верстки, затрудняет поддержку и, к тому же, необходим лишь небольшому проценту пользователей.

Мы уверены, что современные CSS-технологии позволяют создавать привлекательные и функциональные кнопки, которые корректно отображаются в большинстве почтовых клиентов.