Outlook для Windows часто рендерит письма не как современный браузер. Flexbox, grid, фоновые изображения и часть CSS могут игнорироваться, поэтому аккуратный шаблон из веб-просмотра разваливается в настольном клиенте.

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

Что сделать в первую очередь

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

Почему возникает проблема

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

  • Макет построен на flex или grid.
  • CSS находится в head и удаляется промежуточным сервисом.
  • У изображений нет фиксированных HTML-атрибутов width и height.
  • Фоновая картинка или border-radius не поддерживаются движком Outlook.

Пошаговая диагностика

  • Провалидируйте таблицы, закрывающие теги и вложенность элементов.
  • Проверьте, какие стили дошли inline в итоговое письмо.
  • Замените проблемный блок минимальной таблицей и повторите отправку.
  • Проверьте письмо при 100 и 125 процентах масштаба.
  • Сравните Outlook desktop, Outlook web, Gmail и мобильные клиенты.

Как исправить

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

  • Используйте презентационные таблицы с role="presentation" для основной сетки.
  • Критические стили размещайте inline и задавайте безопасные fallback.
  • Указывайте размеры изображений в атрибутах и ограничивайте их ширину.
  • Для фоновых блоков и некоторых кнопок используйте условный VML только для Outlook.
  • Добавьте текстовую версию письма и ссылку на веб-просмотр.

Как проверить результат

  • Главный контент читается и кнопка доступна во всех целевых клиентах.
  • Макет не выходит за ширину окна и не создает горизонтальную прокрутку.
  • При отключенных изображениях сохраняются alt, структура и смысл письма.

Как не допустить повторения

  • Соберите библиотеку проверенных email-компонентов.
  • Тестируйте итоговое MIME-письмо перед каждым значимым релизом шаблона.
  • Не переносите веб-компоненты в email без адаптации.

Частые вопросы

Почему нельзя сверстать письмо как обычную страницу?

Почтовые клиенты ограничивают HTML и CSS по-разному, а Outlook desktop использует отдельный движок рендеринга.

Обязательно ли поддерживать старый Outlook?

Это зависит от аудитории. Решение принимают по статистике клиентов и бизнес-ценности получателей.

Когда стоит обратиться за помощью

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

Итог

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