Классический безопасный вариант — шаблон шириной 600–640 px. Он стабильно отображается в большинстве почтовых клиентов (десктоп и мобильные приложения). Для мобильных устройств важно добавить адаптивную вёрстку и удобные размеры элементов.
Ширина шаблона
- 600–640 px — универсальный диапазон. Многие клиенты (Gmail, Outlook, Apple Mail, Mail.ru, Яндекс) хорошо обрабатывают такую ширину; на мобильных письмо масштабируется или подстраивается под экран при правильной вёрстке.
- Слишком широкие макеты (800+ px) на узких экранах могут требовать горизонтальную прокрутку или мелкий текст — это ухудшает опыт.
Как сделать письмо удобным для мобильных
- Использовать адаптивную вёрстку — через media queries или готовые адаптивные шаблоны/конструкторы ESP. На узких экранах колонки должны перестраиваться в одну, блоки — растягиваться по ширине.
- Крупный текст и кнопки — шрифт не меньше 14–16 px для основного текста, заголовки читаемые. Кнопки и ссылки — достаточно большие, чтобы было удобно нажимать пальцем (минимум около 44 px по высоте).
- CTA-кнопки — делайте их шириной, удобной для нажатия (не узкие полоски), с достаточным отступом между кнопками и другими кликабельными элементами.
- Не перегружать узкими колонками — на мобильных многоколоночные макеты часто ломаются или становятся нечитаемыми. Простой одноколоночный макет часто выигрывает.
- Оптимизировать изображения по весу — тяжёлые картинки долго грузятся на мобильном интернете; сжимайте и используйте разумные размеры.
- Проверять в реальных клиентах — тестовая отправка в Gmail, Mail.ru, Яндекс Почте и Outlook (в т.ч. мобильные приложения), чтобы убедиться в корректном отображении.
Кратко
Ширина 600–640 px, адаптивная вёрстка, крупный текст и кнопки, одноколоночный макет на мобильных, лёгкие картинки. Лучше простой и удобный шаблон, чем красивый, но тяжёлый и неудобный на телефоне.