Outlook — один из самых популярных почтовых клиентов, особенно в корпоративной среде. Но он использует собственный движок для отображения писем (на базе Microsoft Word), который по-другому интерпретирует HTML и CSS по сравнению с другими клиентами. Из-за этого рассылки, идеально выглядящие в редакторе, могут «поехать» в Outlook: исчезнуть изображения, сломаться кнопки, измениться шрифты.
💡 Это не ошибка сервиса — так устроен сам почтовый клиент. Но зная особенности Outlook, можно создавать письма, которые будут корректно отображаться везде.
Изображения
Outlook часто блокирует изображения, загруженные со сторонних серверов. Получатель видит пустое место или значок «изображение заблокировано».
⚠️ Даже если вы загрузили картинку через редактор DashaMail, Outlook может не показать её до тех пор, пока пользователь не разрешит загрузку изображений вручную.
Решение:
-
Всегда добавляйте альтернативный текст (alt) к изображениям — так пользователь поймёт содержание, даже если картинка не загрузилась.
-
Для критически важных элементов (логотип, призыв к действию) продублируйте информацию текстом рядом с изображением.
-
Избегайте слишком больших изображений — оптимальный размер до 1 МБ.
Фоновые изображения. Outlook плохо поддерживает фоновые картинки для отдельных блоков. Вместо этого:
-
Замените блок с фоном на обычное изображение с текстом внутри.
-
Если фон обязателен — используйте инструмент backgrounds.cm для генерации VML-кода (специальный формат для Outlook). Но учтите: в одном письме может быть только один объект VML.
Шрифты
Кастомные шрифты (Google Fonts, Adobe Fonts и др.) в Outlook заменяются на системные — обычно Times New Roman или Arial. Дизайн теряет задуманный вид.
Решение:
-
Используйте веб-безопасные шрифты: Arial, Verdana, Georgia, Trebuchet MS, Courier New.
-
Указывайте стек шрифтов в порядке приоритета:
font-family: Arial, sans-serif; -
Для заголовков допустимо использовать изображения с текстом — но не злоупотребляйте, чтобы не нарушить баланс текст/картинка.
Кнопки
Кнопки, созданные через CSS (border-radius, градиенты), в Outlook часто отображаются как простой текст или прямоугольник без скруглений:
Решение:
-
Самый надёжный вариант — кнопка-изображение в формате PNG с прозрачным фоном. Добавьте к ней ссылку через редактор.
-
Альтернатива — использовать простую текстовую ссылку с подчёркиванием и контрастным цветом.
-
Для продвинутых случаев можно сверстать кнопку через VML или табличную вёрстку, но это требует ручной работы с HTML и подходит только при загрузке кастомного шаблона.
📌 Совет: если кнопка критически важна для конверсии, протестируйте её отображение в Outlook перед массовой отправкой.
Таблицы
Сложные таблицы с объединёнными ячейками, разным размером колонок или вложенными структурами могут отобразиться с нарушением разметки.
Решение:
-
Используйте простые таблицы без объединения ячеек (
colspan,rowspan). -
Задавайте ширину колонок в процентах или пикселях напрямую в тегах.
-
Избегайте вложенных таблиц (таблица внутри таблицы).
-
Для сложных макетов рассмотрите вариант замены таблицы на изображение с сохранением текстового дубляжа рядом.
Общие рекомендации для корректного отображения
-
Баланс текста и изображений. Письма, состоящие только из картинок, чаще попадают в спам и хуже отображаются. Соотношение текст/изображение должно быть примерно 60/40.
-
Проверяйте домен отправителя. Настроенный домен с корректными записями SPF/DKIM/DMARC снижает риск попадания в спам и блокировки контента.
-
Тестируйте перед отправкой. Используйте функцию «Предпросмотр» в DashaMail или отправьте тестовое письмо на адрес с Outlook (включая мобильную версию).
-
Упрощайте дизайн. Чем меньше сложных элементов (градиенты, анимация, тени), тем выше шансы на корректное отображение во всех клиентах.
Чек-лист перед отправкой в Outlook
✅ Все изображения имеют альтернативный текст
✅ Критически важные элементы продублированы текстом
✅ Используются системные шрифты (Arial, Verdana и т.д.)
✅ Кнопки либо изображения, либо простые текстовые ссылки
✅ Таблицы простые, без объединённых ячеек
✅ Соотношение текст/изображение около 60/40
✅ Письмо протестировано в Outlook (десктоп и мобильная версия)