Мобильная адаптация писем: как обеспечить корректное отображение для разных устройств и почтовых клиентов

В 2026 году более 55% электронных писем открывают со смартфонов и планшетов. Это значит, что рассылки должны сохранять читаемость, удобство и рабочую структуру одновременно и на десктопе, и на мобильных устройствах.

Но как верстать email-шаблоны, чтобы они корректно адаптировались под разные экраны и устройства? И что учитывать для аккуратного отображения писем в различных почтовых клиентах? Рассказываем в этой статье.

Какие особенности email-среды нужно учитывать при адаптации писем

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

Медиа-запросы

В веб-разработке медиа-запросы — краеугольный камень адаптивности. Они позволяют менять отображение в зависимости от ширины экрана, ориентации (книжная или альбомная), плотности пикселей и темы (светлая или тёмная). Например, можно переключить отображение с двух колонок на одну при определённой ширине окна.

Вот только с почтовыми клиентами история совсем иная. Далеко не все клиенты понимают медиа-запросы: значительная часть работает с ними ограниченно или вообще их не поддерживает, из-за чего медиа-запросы в профессиональной email-вёрстке не следует рассматривать как основной механизм адаптации.

Два наиболее ярких примера — Яндекс Почта и мобильная web-версия Gmail. Медиа-запросы здесь не работают, поэтому письмо на их основе теряет адаптивность (а иногда и читаемость).

Mobile First в емейлах

Подход Mobile First следует упомянуть отдельно. Его идея заключается в том, что письмо или страница изначально верстается для маленьких экранов, а затем через медиа-запросы адаптируется под десктопы и ноутбуки. Без медиа-запросов получатель видит одноколоночную мобильную вёрстку, а при их срабатывании — полноценную десктопную. Такой подход, в частности, использует фреймворк MJML.

Но если медиа-запросы не сработали, на десктопе отобразится мобильная версия письма. Например, с такой проблемой можно столкнуться при открытии рассылки в Яндекс Почте. Поэтому полагаться на подход Mobile First, особенно для рассылок в России — не лучший вариант.

Как организовать надёжную мобильную адаптацию

Для грамотной адаптации подойдёт таблично-блочный подход с аккуратным, точечным применением медиа-запросов. Суть его следующая:

• за основу берутся таблицы, формирующие каркас письма;
  
  
• адаптивные блоки внутри них реализуются через CSS-свойства, которые понимает большинство email-клиентов;
  
  
• медиа-запросы задействуются только для косметических улучшений;
  
  
• вспомогательная структура для Outlook строится на условных комментариях.

Разберём слои этого подхода по порядку.

Таблицы как фундамент

Табличная структура (<table>) в email-вёрстке ведёт себя предсказуемо и поддерживается большинством клиентов. Таблицы задают внешнюю сетку письма: ширину, расположение основных секций, фоновые цвета.

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

Блоки для адаптации без медиа-запросов

Основной ингредиент, обеспечивающий мобильную перестройку даже в отсутствие медиа-запросов — это обычные div с атрибутом:

style="display: inline-block"

Элементы с inline-block располагаются в строку, пока хватает ширины родительского блока. Если места недостаточно, последний элемент переносится на следующую строку. Подход исправно работает в Яндекс Почте, мобильной web-версии Gmail и других клиентах.

На практике базовая мобильная адаптация выглядит следующим образом.

Предположим, что в десктопной версии письма есть две колонки по 300 px без отступов. Они умещаются внутри контейнера шириной 600 px. Но в мобильном клиенте доступная ширина будет составлять, к примеру, 430 px. Здесь колонки уже не помещаются в одну линию и вместо этого автоматически перестраиваются друг под друга.

Медиа-запросы как слой тонкой настройки

Иногда после перестроения у блоков остаётся пустое место слева или справа. Это происходит из-за того, что блоки не растягиваются сами по себе: вместо этого они сохраняют ту ширину, которая была задана для десктопа.

В этой ситуации как раз могут пригодиться медиа-запросы. С их помощью можно:

• изменить ширину блоков на 100%, чтобы они равномерно заполняли экран;

• скорректировать выравнивание (например, переключиться с левого на центральное);
  
  
• скрыть или подменить элементы (например, в десктопной версии показывать горизонтальный баннер, а при срабатывании медиа-запроса на мобильных устройствах — квадратный);

• трансформировать отступы: схлопывать ненужные зазоры, превращать горизонтальные разделители в вертикальные.

Принципиально важно, что если медиа-запросы не поддерживаются, получатель увидит «базовую» адаптацию с чуть менее эстетичными, но полностью функциональными элементами.

Условные комментарии для Outlook

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

Причина здесь следующая:

• Outlook рендерит письма через движок Word, который игнорирует большинство CSS-свойств, необходимых для адаптивного поведения.
  
  
• Из-за этого классические методы перестроения контента (такие как inline-block, float, flex и grid) либо работают непредсказуемо, либо не работают вообще.

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

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

<!--[if mso]> ... <![endif]-->

Внутри них с помощью таблиц обычно формируется часть структуры: к примеру, многоколоночный блок, который в других клиентах строится на inline-block, для Outlook раскладывается в отдельную табличную строку с ячейками.

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

Как ведут себя отступы при мобильной адаптации (и что с этим делать)

Проблема отступов возникает из-за того, что одна и та же вёрстка реализуется в трёх версиях: блочной с inline-block (базовая адаптация), улучшенной блочной с медиа-запросами и табличной для Outlook.

Представим, что в десктопном письме две колонки. У левой колонки есть правый отступ (padding-right).

• В табличной вёрстке для Outlook отступ работает как надо.
  
  
• На мобильном устройстве колонки перестраиваются друг под друга. При этом правый отступ левой колонки сохраняется, что приводит к появлению лишнего пустого пространства справа от неё.

Решений здесь три:

• Первое — сделать отступы симметричными: добавить у каждого элемента (например, карточек товаров) равные паддинги слева и справа, а в родительском элементе задать центральное выравнивание. Тогда при переносе блоки будут отцентрированы.

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

• Второе — оставить асимметричный отступ справа, но сделать выравнивание по левому краю. Тогда перестроенные блоки прижмутся к левой границе, а «лишний» отступ просто окажется у правого края, сохраняя единую ширину контентной части.

• Третье — убрать отступ в мобильной версии с помощью медиа-запросов. Но это не самый надёжный способ, так как если почтовый клиент не поддерживает медиа-запросы, отступ останется.

Как устроена адаптация AMP-писем

Технология AMP for Email поддерживается только в современных почтовых клиентах, среди которых — Gmail и Mail.ru. AMP-письма не требуют специальных обходных решений: здесь доступны практически все возможности CSS, включая flex, grid и медиа-запросы.

Таблицы в AMP — скорее лишний код: они утяжеляют разметку и затрудняют поддержку. В то же время семантическая блочная вёрстка даёт и гибкость, и производительность.

Следует отметить, что AMP не отменяет необходимости в классическом HTML-шаблоне. Наличие HTML-версии в AMP-письме является обязательным требованием.

Как мобильная адаптация email-шаблонов работает в Pixcraft

Автоматическая адаптация писем реализована в Pixcraft на уровне email-конструктора. Мы используем комбинирование подходов в зависимости от выбранного режима адаптации. Благодаря этому блоки перестраиваются аккуратно и не теряют визуальной структуры даже при отсутствии поддержки медиа-запросов.

Для почтовых клиентов, поддерживающих медиа-запросы, в редакторе доступны различные сценарии адаптации. Например, здесь можно:

• настроить расширение колонок на всю ширину экрана или оставить перестроение без растягивания;
  
  
• выбрать более сложные схемы перестроения (к примеру, поместить одну колонку с расширением в отдельную строку, а две другие — под ней без расширения).

Заключение

В email-вёрстке адаптивность строится из нескольких слоёв. Сначала закладывается максимально надёжная база, подходящая для большинства почтовиков, а затем — улучшения для email-клиентов с более широкими возможностями. Такая стратегия обеспечивает предсказуемый результат на разных устройствах и в различных почтовых клиентах.

Конструктор писем Pixcraft следует этим принципам в логике работы. Попробуйте его бесплатно в течение 14 дней и оцените возможности сами. А если хотите узнать о Pixcraft больше — напишите нам, и мы обсудим интересующие вас вопросы.