Как быстро адаптировать письмо под Outlook без верстальщика

Microsoft Outlook остаётся одной из самых сложных платформ для email-маркетинга. Даже красиво сверстанное письмо может в нём сломаться. Но не всегда нужно звать верстальщика — часть проблем можно решить быстро и без кода.

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

Почему Outlook проблемный?

Outlook использует:

• движок Word (да, именно Microsoft Word!) для рендеринга писем,
  
• плохую поддержку современного CSS,
  
• специфические баги с кнопками, изображениями, колонками.
  

Если вы используете drag-and-drop-редактор, вроде Letteros, часть этих проблем уже решена за вас. Но есть лайфхаки, которые помогут доработать письмо своими силами.

Шаг 1. Избегайте сложных эффектов

❌ Не используйте:

• градиенты,
  
• тени на текстах и кнопках,
  
• SVG-изображения,
  
• flexbox и grid.
  

✅ Замените на простые варианты:

• фоновые цвета вместо градиентов,
  
• PNG или JPEG вместо SVG,
  
• таблицы вместо сложных макетов.
  

Шаг 2. Используйте встроенные шрифты

Outlook не поддерживает Google Fonts и сторонние шрифты.
Лучше сразу использовать стандартные шрифты:

• Arial,
  
• Times New Roman,
  
• Verdana,
  
• Tahoma.
  

Если хотите красивый шрифт, настройте fallback: font-family: «Custom», Arial, sans-serif;

Шаг 3. Проверяйте ширину письма

Оптимальная ширина письма для Outlook — 600–650 пикселей.
В редакторе Letteros это уже заложено, но если вы что‑то вставляете вручную, следите за шириной таблиц и изображений.

Шаг 4. Проверяйте картинки

Outlook часто:

• блокирует загрузку картинок,
  
• ломает большие изображения.
  

Советы:

• добавляйте alt-тексты,
  
• используйте изображения не шире 600 px,
  
• не вставляйте изображения в виде фонового стиля (background-image), а только через <img>.
  

Шаг 5. Проверяйте кнопки

Кнопки, созданные через <a> с оформлением, могут сломаться.
В Letteros есть специальный компонент «Кнопка для Outlook» — используйте его, если важно, чтобы кнопка выглядела одинаково.

Если верстаете вручную:

• делайте кнопки через <table> с вложенной ссылкой.
  

Шаг 6. Протестируйте письмо

В Letteros есть инструмент «Тестирование писем», где можно посмотреть, как письмо выглядит в Outlook.
Если тест показывает ошибки — исправляйте их в редакторе или выбирайте готовые безопасные блоки.

Заключение

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

И главное: используйте редактор, который изначально адаптирован под Outlook — например, Letteros!