Как адаптировать email-рассылку интернет-магазина под мобильные устройства

Покупатель чаще всего открывает email рассылку для интернет магазина со смартфона: в очереди, в транспорте, между делами. Если письмо «разъезжается», обрезается по краям или требует горизонтальной прокрутки, решение о покупке не принимается — палец просто смахивает сообщение. Поэтому мобильная версия — не отдельная опция, а основная сцена, на которой разворачивается вся коммуникация с подписчиком.

Вторая причина не менее важна: почтовые клиенты на iOS и Android по-разному масштабируют письма, а Gmail, Apple Mail и Outlook применяют собственные правила обработки стилей. Аккуратная адаптивность снижает риск того, что клиент покажет вашу вёрстку в непредсказуемом виде.

Что видит пользователь на экране смартфона

Ширина экрана большинства телефонов — примерно 360–430 логических пикселей. Письмо, свёрстанное на 600–640 px без адаптации, автоматически ужимается, и вместе с ним уменьшаются шрифты, кнопки и картинки. Пользователю приходится «щипать» экран, а это самый надёжный способ потерять клик по ссылке.

Ширина, отступы и безопасная зона

• Базовый контейнер — 600 px для десктопа с обязательным переключением на 100% на узких экранах.
• Боковые отступы на мобильных — 16–24 px, чтобы текст не лип к краям.
• Вертикальные интервалы между блоками — 24–32 px: воздух помогает сканировать письмо глазами.

Типографика, которую не нужно увеличивать

Минимальный размер основного текста — 16 px, заголовков — 22–28 px. Меньшие значения выглядят аккуратно только в макете, а в реальном письме превращаются в «мелкий шрифт», который никто не станет читать. Межстрочный интервал держите в пределах 1,4–1,6, а длину строки — около 40–50 символов.

Отдельно проверьте контраст: цвет текста и фона должен различаться заметно, иначе на солнце или при пониженной яркости элемент просто исчезает с экрана.

Технические приёмы адаптации

Резиновая и адаптивная вёрстка

Резиновая (fluid) вёрстка задаёт ширине значение в процентах и ограничивает её через max-width — такая конструкция тянется и сжимается сама. Адаптивная (responsive) добавляет медиазапросы и перестраивает блоки: две колонки превращаются в одну, боковая панель уходит вниз, картинка занимает всю ширину экрана.

Оптимальный подход — комбинированный: резиновая сетка для планшетов и медиазапросы для узких экранов смартфонов.

Медиазапросы и классы

В служебную часть письма добавляют метатег viewport с параметром width=device-width, initial-scale=1. Затем описывают правила вида @media only screen and (max-width: 480px), а нужным элементам присваивают классы вроде stack, full-width или hide-mobile.

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

Контент, который работает на маленьком экране

Прехедер и первые 300 пикселей

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

Кнопки и кликабельные зоны

• Минимальная высота кнопки — 44–48 px.
• Отступы вокруг кнопки — не меньше 10–12 px, чтобы палец не попадал по соседней ссылке.
• Одна кнопка — одно действие: «В корзину», «Смотреть каталог», «Забрать скидку».
• Ссылки в тексте делайте отдельными строками, а не плотным перечислением подряд.

Изображения и товарные карточки

Картинки задавайте в процентах и обязательно подписывайте через атрибут alt: часть клиентов не показывает изображения по умолчанию. Товарную сетку 2×2 на мобильном лучше превращать в вертикальный список — так у карточки хватает места для названия, цены и кнопки.

Крупные баннеры с текстом внутри картинки — плохая идея: при сжатии надпись становится нечитаемой. Выносите ключевой текст в HTML-слой.

Пошаговый чек-лист адаптации

1. Проверьте ширину контейнера и переключение на 100% для узких экранов.
2. Установите шрифты не меньше 16 px для текста и 22 px для заголовков.
3. Перестройте многоколоночные блоки в одну колонку.
4. Увеличьте кнопки до 44 px по высоте и разнесите их между собой.
5. Перепишите прехедер и соберите «первый экран» без прокрутки.
6. Уберите лишнее: дублирующее меню, длинные подписи, второстепенные баннеры.
7. Прогоните письмо через тесты на реальных устройствах и в тёмной теме.

Типичные ошибки

• Фиксированная ширина без max-width: письмо уезжает за пределы экрана.
• Текст мельче 14 px и низкий контраст кнопок.
• Ссылки и кнопки, стоящие вплотную друг к другу.
• Игнорирование тёмной темы, в которой часть изображений сливается с фоном.
• Отсутствие alt-текста у товарных картинок.
• Единственная проверка — в браузере на компьютере.

Как тестировать мобильную версию

Начните с реальных устройств: iPhone, Android-смартфон и планшет покрывают большинство сценариев. Проверяйте письмо в приложениях Gmail, Apple Mail, Outlook mobile и Яндекс Почты — именно там вёрстка ведёт себя по-разному.

Дополнительно используйте сервисы предпросмотра вроде Litmus или Email on Acid: они показывают рендеринг в десятках клиентов и экономят время на ручных проверках. Отдельно смотрите письмо с отключёнными изображениями и с увеличенным системным шрифтом.

Что в итоге

Мобильная адаптация — это не украшение, а условие того, что email рассылка для интернет магазина вообще будет прочитана и приведёт к переходу на сайт. Ширина, шрифты, кнопки и порядок блоков влияют на конверсию сильнее, чем формулировки в теле письма.

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

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