Почему письма ломаются в Outlook 2021 — и как это исправить без программиста

Всё дело в движке. Современные почтовые клиенты — Gmail, Яндекс Почта, Apple Mail, веб-версия Outlook — отображают письма примерно так же, как браузер рендерит сайт. Они понимают современный CSS и HTML.

Outlook 2021 (и более ранние версии десктопного приложения) устроен иначе. Он использует движок Microsoft Word для рендеринга писем. Word — это текстовый редактор, а не браузер, и он просто не умеет работать с большей частью современного CSS.

Конкретно не поддерживается:

• border-radius — скруглённые углы у кнопок и блоков
• CSS-позиционирование на основе div — контейнеры разъезжаются
• border-spacing — отступы между элементами ломаются
• Фоновые изображения — заданные через CSS, они просто не отображаются
• overflow: hidden — содержимое вылезает за границы блока
• Цвета ссылок — Outlook перекрашивает их в свой синий, игнорируя ваши стили

Именно поэтому письмо, идеально выглядящее в браузере, разваливается в десктопном Outlook.

В мире email-разработки давно существует стандартный подход: вёрстка на основе таблиц (table-based HTML). Да, как в 2000-х. Outlook надёжно рендерит таблицы, потому что они понятны даже движку Word.

Это означает:

• Вместо <div> — <table><tr><td>
• Вместо CSS-отступов — пустые строки-распорки высотой несколько пикселей
• Вместо <hr> — таблица с цветной ячейкой в 1px
• Вместо CSS-кнопок с border-radius — специальная VML-разметка (векторный язык Microsoft), дублируемая обычной кнопкой для других клиентов
• Фоновые цвета задаются одновременно атрибутом bgcolor и CSS-свойством background-color

Звучит сложно? На практике это большой объём рутинной работы по переписыванию кода, которую сейчас можно делегировать ИИ.

Мы в CleverData столкнулись с этой проблемой при работе с рассылками в CleverData Join. Письма корректно отображались во всех клиентах, кроме Outlook 2021 у получателей.

После изучения проблемы мы разработали промпт для Claude, который берёт HTML письма и автоматически переделывает его под требования Outlook — сохраняя при этом внешний вид в других почтовых клиентах.

Как пользоваться:

• Откройте новый чат в Claude
• Вставьте промпт ниже
• В конце вместо [ВСТАВЬ СВОЙ HTML ЗДЕСЬ] вставьте HTML-код письма из вашего редактора
• Скопируйте результат и замените им исходный код шаблона

Важно: прежде чем делать рассылку, обязательно проверьте результат — как в Outlook, так и в других почтовых клиентах. Адаптация под Outlook может убрать скруглённые углы у кнопок и блоков, так как border-radius там не поддерживается.

Перед тобой HTML-код письма для email-рассылки. Он корректно отображается в Gmail, Яндекс Почте и веб-браузерах, но некорректно в Outlook 2021 — потому что Outlook использует движок Microsoft Word, который не поддерживает многие современные CSS-свойства.

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

Выполни следующие исправления:

1. ТАБЛИЦЫ ВМЕСТО DIV
Все блоки-обёртки (шапка, тело, футер, промо-блок и т.д.), которые сейчас реализованы через <div>, переведи на <table><tr><td>. Outlook надёжно рендерит только таблицы.

2. УБЕРИ border-spacing
Outlook не поддерживает CSS-свойство border-spacing. Если между элементами нужны отступы — используй пустые строки-распорки:
<tr><td height="6" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;">&nbsp;</td></tr>

3. ЗАМЕНИ <hr> НА ТАБЛИЦУ
Вместо тега <hr> используй таблицу с тремя строками: верхний отступ, цветная линия, нижний отступ. Пример:
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr><td height="28" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;">&nbsp;</td></tr>
<tr><td height="1" bgcolor="#EAEAEA" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly; background-color:#EAEAEA;"></td></tr>
<tr><td height="28" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;">&nbsp;</td></tr>
</table>
Важно: в ячейке с цветной линией НЕ должно быть &nbsp; и текста — только пустая ячейка с bgcolor и background-color.

4. ОТСТУПЫ ЧЕРЕЗ СТРОКИ-РАСПОРКИ
Outlook игнорирует margin на таблицах. Все вертикальные отступы между блоками заменяй пустыми строками:
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr><td height="28" style="font-size:1px; line-height:1px; mso-line-height-rule:exactly;">&nbsp;</td></tr>
</table>

5. УБЕРИ overflow:hidden
Outlook не поддерживает это свойство. При table-based вёрстке оно не нужно.

6. КРУГЛАЯ ТОЧКА-БУЛЛЕТ
CSS border-radius:50% на <span> не работает в Outlook. Замени на Unicode-символ &#9679; напрямую в тексте.

7. ЦВЕТ ССЫЛОК
Outlook перекрашивает ссылки в синий. На все теги <a> добавь атрибут mso-color-alt со нужным цветом:
<a href="..." style="color:#141414; mso-color-alt:#141414;">текст</a>

8. КНОПКИ — VML ДЛЯ OUTLOOK
Если в письме есть кнопка с border-radius, добавь VML-версию для Outlook и скрой её для остальных клиентов:
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="ССЫЛКА"
style="height:36px; v-text-anchor:middle; width:160px;" arcsize="16%" fillcolor="#141414" strokecolor="#141414">
<w:anchorlock/>
<center style="color:#ffffff; font-family:Arial,sans-serif; font-size:12px; font-weight:bold;">Текст кнопки</center>
</v:roundrect>
<![endif]--><!--[if !mso]><!-->
<a href="ССЫЛКА" style="display:inline-block; background-color:#141414; color:#ffffff; font-family:Arial,sans-serif; font-size:12px; font-weight:bold; padding:10px 18px; border-radius:6px; text-decoration:none; white-space:nowrap;">Текст кнопки</a>
<!--<![endif]-->

9. ИЗОБРАЖЕНИЯ
У каждого тега <img> должны быть:
- атрибуты width и height (числом, без px)
- style="display:block; border:0;"
- атрибут alt с описанием
- bgcolor на родительской <td>, если нужен цвет фона

10. ШРИФТ
Везде добавь font-family:Arial,sans-serif как fallback — Outlook не загружает Google Fonts.

11. ФОНОВЫЕ ЦВЕТА
На <td> используй одновременно атрибут bgcolor и CSS background-color:
<td bgcolor="#ffffff" style="background-color:#ffffff;">

12. УСЛОВНЫЕ КОММЕНТАРИИ ДЛЯ OUTLOOK
Если нужно задать ширину только для Outlook, используй:
<!--[if mso]><style>body, table, td { font-family: Arial, sans-serif !important; }</style><![endif]-->

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

Вот HTML письма:

[ВСТАВЬ СВОЙ HTML ЗДЕСЬ]

Это зависит от вашего инструмента рассылок. В CleverData Join HTML-код шаблона доступен напрямую в редакторе — можно скопировать его, обработать промптом и вставить обратно. Если ваш инструмент не даёт доступ к коду, стоит уточнить это у технической поддержки.

Если переверстка всего письма кажется излишней, есть более простые шаги, которые закрывают часть проблем:

• Не используйте фоновые изображения — вместо фонового изображения вставляйте картинку как отдельный элемент письма. Фоны в Outlook не работают, а обычные — работают.
• Проверяйте письма в Outlook перед отправкой — идеально иметь тестовый ящик на Outlook и включать его в список для тестовых рассылок.
• Используйте онлайн-сервисы для предпросмотра писем в разных клиентах — например, Email on Acid или Litmus.

Проблема совместимости email-вёрстки с Outlook существует давно и вряд ли исчезнет в ближайшие годы. Зато с современными инструментами — в том числе ИИ-ассистентами — справляться с ней стало заметно проще: не нужно быть разработчиком, чтобы правильно подготовить письмо для любого почтового клиента.