Настройка отображения лендинга на мобильных устройствах

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

Однако для тонкой настройки под конкретный дизайн доступны специальные опции в свойствах элементов. Они позволяют контролировать, как именно будет выглядеть страница на мобильных устройствах.

💡 60% сайтов открываются с мобильных устройств. Даже небольшие правки в адаптивной версии могут заметно повысить конверсию.

Как настроить отображение на мобильных#

Все настройки находятся в правой панели свойств строки. Рассмотрим ключевые опции.

Складывать колонки на телефоне#

Эта опция определяет, как поведут себя колонки, если открыть лендинг на мобильном устройстве.

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

Включено: колонки выстраиваются вертикально — одна под другой. Это стандартное поведение для большинства макетов и обеспечивает комфортное чтение на узком экране.

Обратный порядок: колонки меняются местами:

📌 Совет: для макетов с 3+ колонками всегда включайте «Складывать колонки на телефоне» — иначе элементы станут слишком узкими и нечитаемыми.

Видимость#

Иногда часть контента нужна только на десктопе (например, сложная инфографика) или только на мобильных (упрощённая версия кнопки).

• «На мобильных» — элемент будет виден только на десктопе

• «На десктопе» — элемент покажется только на смартфонах и планшетах

⚠️ Используйте эту опцию аккуратно: не скрывайте критически важный контент (призыв к действию, контакты), чтобы не терять конверсию на одной из платформ.

Внутренние поля#

Отступы, которые вы задаёте в основном режиме, могут быть недостаточными или, наоборот, избыточными на мобильных. В свойствах строки есть отдельные поля «Внутренние поля (Мобильные)» — укажите здесь значения, оптимальные для узких экранов.

Например:

• На десктопе: отступы 40 пикселей сверху и снизу

• На мобильном: отступы 20 пикселей — чтобы страница не выглядела «размазанной»

Выравнивание изображений для мобильных#

Для картинок доступна опция «Выравнивание (Мобильные)». Это полезно, когда на десктопе изображение выравнивается по правому краю (обтекание текстом), а на мобильном логичнее разместить его по центру.

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

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

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

В левом верхнем углу редактора найдите иконку 📱 Телефон и нажмите на неё. Редактор переключится в режим просмотра с разрешением смартфона — вы сразу увидите, как расположатся колонки, изменятся отступы и отобразятся скрытые элементы.

✨ Совет: переключайтесь между десктопным и мобильным видом несколько раз во время редактирования — так вы заметите проблемные места ещё до публикации лендинга.

Практические рекомендации#

• Кнопки делайте крупнее на мобильных — минимальная высота 44 пикселя (стандарт доступности).

• Шрифт основного текста — не меньше 14 пт, заголовков — 18–24 пт.

• Между ссылками оставляйте пространство — на сенсорном экране легко промахнуться и кликнуть не туда.

• Не используйте мелкие элементы — иконки меньше 24×24 пикселей сложно нажать пальцем.

• Тестируйте на реальном устройстве — откройте лендинг на вашем смартфоне.