Все шаблоны в онлайн-редакторе DashaMail адаптивны по умолчанию — письма корректно отображаются на смартфонах без дополнительных настроек. Текст увеличивается до комфортного размера, колонки выстраиваются вертикально, кнопки становятся крупнее.
Однако для тонкой настройки под конкретный дизайн доступны специальные опции в свойствах элементов. Они позволяют контролировать, как именно будет выглядеть письмо на мобильных устройствах.
💡 60% писем открываются с мобильных устройств. Даже небольшие правки в адаптивной версии могут заметно повысить конверсию.
Как настроить отображение на мобильных
Все настройки находятся в правой панели свойств элементов (строки, изображения, кнопки). Рассмотрим ключевые опции.
Наложение на мобильном — управление колонками
Эта опция определяет, как поведут себя колонки при переходе на мобильное устройство.
Выключено: колонки остаются в одном ряду, уменьшаясь по ширине. Подходит для простых элементов — например, двух иконок соцсетей.
Включено: колонки выстраиваются вертикально — одна под другой. Это стандартное поведение для большинства макетов и обеспечивает комфортное чтение на узком экране.
📌 Совет: для макетов с 3+ колонками всегда включайте «Наложение на мобильном» — иначе элементы станут слишком узкими и нечитаемыми.*
Скрыть — показывать элемент только на определённых устройствах
Иногда часть контента нужна только на десктопе (например, сложная инфографика) или только на мобильных (упрощённая версия кнопки).
В свойствах элемента найдите переключатель «Скрыть» и выберите:
-
«На мобильных» — элемент будет виден только на десктопе
-
«На десктопе» — элемент покажется только на смартфонах и планшетах
⚠️ Используйте эту опцию аккуратно: не скрывайте критически важный контент (призыв к действию, контакты), чтобы не терять конверсию на одной из платформ.
Мобильные отступы
Отступы, которые вы задаёте в основном режиме, могут быть недостаточными или, наоборот, избыточными на мобильных. В свойствах строки есть отдельные поля «Отступы для мобильных» — укажите здесь значения, оптимальные для узких экранов.
Например:
-
На десктопе: отступы 40 пикселей сверху и снизу
-
На мобильном: отступы 20 пикселей — чтобы письмо не выглядело «размазанным»
Выравнивание изображений для мобильных
Для картинок доступна опция «Выравнивание на мобильных». Это полезно, когда на десктопе изображение выравнивается по правому краю (обтекание текстом), а на мобильном логичнее разместить его по центру.
Выберите нужное выравнивание в свойствах изображения — оно применится только при открытии письма на смартфоне или планшете.
Как проверить мобильную версию
Перед отправкой обязательно протестируйте, как письмо выглядит на мобильных устройствах.
В левом верхнем углу редактора найдите иконку 📱 Мобильный вид и нажмите на неё. Редактор переключится в режим просмотра с разрешением смартфона — вы сразу увидите, как расположатся колонки, изменятся отступы и отобразятся скрытые элементы.
✨ Совет: переключайтесь между десктопным и мобильным видом несколько раз во время редактирования — так вы заметите проблемные места ещё до отправки тестового письма.
Практические рекомендации
-
Кнопки делайте крупнее на мобильных — минимальная высота 44 пикселя (стандарт доступности).
-
Шрифт основного текста — не меньше 14 пт, заголовков — 18–24 пт.
-
Между ссылками оставляйте пространство — на сенсорном экране легко промахнуться и кликнуть не туда.
-
Не используйте мелкие элементы — иконки меньше 24×24 пикселей сложно нажать пальцем.
-
Тестируйте на реальном устройстве — отправьте тестовое письмо на свой смартфон и откройте в родном почтовом приложении.
Краткий чек-лист адаптивности
✅ Включите «Stack on mobile» для всех строк с колонками
✅ Проверьте, что кнопки достаточно крупные для нажатия пальцем
✅ Убедитесь, что текст читается без увеличения масштаба
✅ Протестируйте письмо в режиме мобильного просмотра в редакторе
✅ Отправьте тест на реальный смартфон перед массовой рассылкой