Мобильная версия письма: как верстать, чтобы 60% аудитории не закрыли сразу

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

Письмо, которое выглядит отлично на мониторе и разваливается на телефоне, теряет больше половины аудитории в момент открытия.

Почему мобильная версия отличается от десктопной

Экран телефона в 2–3 раза уже десктопного. Шрифт 14px на мониторе — читаемый. Тот же шрифт на телефоне — мелкий. Кнопка 30px высотой на десктопе — нормальная. На телефоне пальцем по ней не попасть.

Плюс поведение пользователя другое. На телефоне письмо читают в транспорте, на ходу, одной рукой. Внимание рассеянное, терпение низкое. Если за первые две секунды непонятно что в письме — закрывают.

Базовые правила мобильной вёрстки

Ширина письма

Стандартная ширина письма — 600px. На мобильных она схлопывается до ширины экрана устройства (от 320px до 428px). Все элементы должны корректно масштабироваться в этом диапазоне.

Для изображений шире 300px обязательно прописывать width в процентах с max-width в пикселях:

width: 100%; max-width: 600px

Это позволяет картинке занять всю доступную ширину на мобильном и не выйти за пределы на десктопе.

Размер шрифта

Gmail на iOS автоматически увеличивает текст меньше 13px до 13px. Это ломает вёрстку если не предусмотреть. Чтобы отключить: -webkit-text-size-adjust: none; в теге html.

Кнопки

Минимальная область нажатия — 44x44px. Это стандарт Apple Human Interface Guidelines. Кнопки меньше этого размера пользователи промахиваются пальцем.

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

Колоночная вёрстка на мобильных

Две и более колонок на десктопе при сужении экрана должны складываться в одну. Это называется перестроение — каждый блок занимает 100% ширины и выстраивается вертикально.

Реализуется через медиазапросы и CSS-класс, который задаёт ширину 100% при ширине экрана меньше 620px:

.mob_100 { width: 100% !important; }

Этот класс присваивается блокам которые должны разворачиваться на мобильном. Яндекс Почта медиазапросы не поддерживает — письмо там будет выглядеть как десктопная версия.

Тёмная тема на мобильных

Значительная часть пользователей iPhone и Android включает тёмный режим. При этом почтовые клиенты по‑разному обрабатывают инверсию цветов.

• Apple Mail и Outlook 2019 делают частичную инверсию: меняют светлый фон на тёмный, но не трогают картинки
• Gmail на Android может полностью инвертировать все цвета — фирменный синий становится желтым

Что делать: логотипы и иконки готовить в PNG с прозрачным фоном, проверять контраст текста на тёмном фоне, тестировать в тёмной теме перед отправкой. В Letteros кнопка предпросмотра тёмной темы есть прямо в редакторе.

Подробнее про тёмную тему: letteros.com/blog/sovety/temnaya-tema-v-email-kak-podgotovit-rassylku-k-dark-mode-i-ne-poteryat-chitatelej

Что проверить перед отправкой

• Открыть письмо на реальном телефоне — не в эмуляторе браузера
• Проверить все кнопки: можно ли нажать пальцем не промахиваясь
• Прочитать текст без увеличения — читаемо ли
• Проверить в тёмной теме — не пропали ли логотип и текст
• Убедиться что изображения не обрезаются и не растягиваются

В Letteros тестирование в 100+ почтовых клиентах доступно прямо из редактора: letteros.com/blog/instructions/testirovanie-pisma