Как работать с адаптивной версткой писем
Сегодня больше 60% всех писем открываются на мобильных устройствах.
Это значит, что если ваше письмо не адаптивное — половина аудитории видит сломанный макет.
В этой статье расскажем, что такое адаптивная вёрстка писем, зачем она нужна и как её настроить даже без верстальщика.
Что такое адаптивная вёрстка?
Адаптивная вёрстка — это когда макет письма подстраивается под размер экрана:
- на десктопе письмо выглядит широко и развёрнуто,
- на смартфоне блоки перестраиваются, кнопки увеличиваются, текст становится читаемым.
Это делается с помощью:
- медиазапросов (CSS),
- блоковой структуры (таблицы + вложенные элементы),
- компонентов редактора (в Letteros уже встроены).
Почему это важно?
✔ Улучшает читаемость → больше кликов.
✔ Снижает отписки → меньше раздражения.
✔ Выглядит профессионально → растёт доверие.
Письма без адаптации выглядят на мобильных так:
❌ мелкий текст,
❌ обрезанные картинки,
❌ слишком маленькие кнопки.
Как настроить адаптивность в Letteros
Шаг 1. Используй готовые блоки
В редакторе Letteros:
- блоки и модули уже адаптивные,
- таблицы, колонки, кнопки перестраиваются автоматически.
Не нужно писать медиазапросы — достаточно собирать письмо из готовых элементов.
Шаг 2. Проверяй предпросмотр
Перед отправкой:
- открой предпросмотр,
- проверь десктоп и мобильный вид,
- протестируй размер шрифтов и кнопок.
Совет: кнопки должны быть минимум 44×44 px, чтобы по ним можно было удобно нажимать с телефона.
Шаг 3. Избегай фиксированных размеров
❌ Не вставляй изображения шириной 1000 px без адаптации.
❌ Не задавай фиксированную ширину таблицам.
Используй относительные размеры (например, ширина блока 100%) или ограничивай ширину через контейнеры (макс. 600–650 px).
Шаг 4. Проверь на реальных устройствах
- Отправь тестовое письмо себе.
- Открой его на телефоне, планшете, ноутбуке.
- Проверь, не съехало ли что‑то.
Частые ошибки
⚠ Сложные сетки с большим числом колонок — лучше упрощать.
⚠ Шрифты меньше 14 px — плохо читаются на мобильных.
⚠ Скрытые элементы (через display: none) иногда всё равно показываются в старых клиентах.
Заключение
Адаптивная вёрстка — это не про «верстать руками», а про правильное использование готовых инструментов. В Letteros ты можешь собрать адаптивное письмо за пару часов, даже если раньше не писал ни строчки кода.