Письмо выглядит по-разному в разных почтовых клиентах: почему и что делать
Шесть клиентов, шесть наборов ограничений и один код, который работает везде
Mailvex · 31 августа 2026 · 4 мин чтения
Одно и то же письмо в Gmail выглядит правильно, в Outlook разъезжается, а в Apple Mail меняет цвета. Причина не в ошибке вёрстки: у почтовых клиентов нет общего стандарта отображения, и каждый обрабатывает код по-своему. Решение — писать код так, чтобы он работал в самом ограниченном клиенте, а остальные его просто поймут.
Почему единого стандарта нет
Браузеры договорились о стандартах, почтовые клиенты — нет. Каждый использует свой движок отображения, и некоторые из них старше десяти лет.
Плюс безопасность: почта не может позволить письму выполнять код или загружать что угодно извне. Поэтому клиенты вырезают из письма всё, что считают лишним — внешние таблицы стилей, скрипты, часть свойств оформления.
Отсюда правило, которое экономит время: не пытайтесь заставить все клиенты выглядеть одинаково. Целиться нужно в то, чтобы письмо было понятным и рабочим везде, даже если детали отличаются.
Что ломается в каждом клиенте
Шесть групп клиентов покрывают почти всю аудиторию. У каждой свой набор ограничений.
| Клиент | Что ломается | Что делать |
|---|---|---|
| Outlook для Windows | скругления, тени, кнопки, медиазапросы | добавить код VML, кнопку собрать на таблице |
| Gmail в браузере | вырезает внешние стили, обрезает тяжёлые письма | стили писать прямо в тегах, держать вес до 100 КБ |
| Apple Mail | инвертирует цвета в тёмной теме | задать цвета явно, добавить мета-теги тёмной темы |
| Мобильные приложения почты | часть не понимает медиазапросы | вёрстка в одну колонку по умолчанию |
| Корпоративные системы | блокируют картинки и внешние ресурсы | альтернативные тексты, смысл в тексте |
| Веб-версии старых почт | не поддерживают современные свойства | таблицы вместо блоков, полные коды цветов |
Обратите внимание на первую строку: Outlook для Windows создаёт больше всего проблем, потому что использует движок текстового редактора вместо браузерного.
Три приёма, которые закрывают большинство различий
Большинство различий закрываются тремя приёмами, а не индивидуальной подгонкой под каждый клиент.
- раскладка на таблицах вместо современных блоков — понимают все клиенты без исключения
- стили прямо в тегах вместо внешней таблицы стилей — их не вырежут
- кнопка на таблице с добавлением кода VML — кликается целиком даже в Outlook
- полные коды цветов из шести знаков вместо сокращённых из трёх
- ширина 600 пикселей и одна колонка по умолчанию
- шрифты из системного набора с запасными вариантами
Эти шесть правил снимают примерно девять из десяти различий. Оставшееся — мелочи вроде разного межстрочного расстояния, которые никто не заметит.
Где проверять и в каком порядке
Проверять письмо в двадцати клиентах не нужно. Достаточно четырёх, покрывающих основные движки.
- мобильный почтовый клиент — там открывают большинство писем
- Outlook для Windows — самый требовательный
- Gmail в браузере — самая массовая веб-почта
- любая почта в тёмной теме — покажет проблемы с цветами
Порядок важен: начинайте с мобильного. Если письмо работает на узком экране, на широком оно почти наверняка тоже будет в порядке. Обратное неверно.
Чего не стоит пытаться исправить
Часть различий исправить невозможно, и попытки только тратят время.
Скругления углов и тени в Outlook не появятся никогда — их не поддерживает движок. Шрифт из интернета в части клиентов заменится системным. Анимация покажется не везде. Это нормально: письмо должно работать без них, а где они отображаются — это приятный бонус.
Как это решается в конструкторе
В конструкторе Mailvex письмо собирается из блоков, а компилятор превращает их в код, совместимый со всеми клиентами: таблицы вместо блоков, стили в тегах, отдельный код VML для кнопок в Outlook, полные коды цветов.
Тестовая отправка на свой адрес доступна прямо из редактора — можно открыть письмо в своей почте и увидеть результат до выгрузки.
Соберите письмо, которое работает во всех клиентах.
Смотреть шаблоныЧастые вопросы
Можно ли добиться, чтобы письмо выглядело одинаково везде?
Полностью — нет, и не нужно. Скругления и тени в Outlook не появятся никогда. Цель другая: письмо должно быть понятным и рабочим в каждом клиенте, даже если детали оформления отличаются.
В каких клиентах обязательно проверять письмо?
В четырёх: мобильный почтовый клиент, Outlook для Windows, Gmail в браузере и любая почта в тёмной теме. Они покрывают основные движки отображения. Начинать нужно с мобильного.
Почему в Outlook всё ломается сильнее всего?
Классический Outlook для Windows использует движок текстового редактора вместо браузерного. Он не понимает медиазапросы, скругления, тени и фоновые изображения, а кнопки, собранные обычным способом, кликаются только по тексту.
