Адаптивная вёрстка лендинга: почему сжатая версия не равна мобильной

Частая ошибка в одном абзаце

Исполнитель показывает лендинг, заказчик смотрит на своём ноутбуке — красиво. Сдвигает окно, ширина уменьшается — всё масштабируется. “Адаптив есть, принимаем”. Запускает рекламу, через неделю удивляется: стоимость заявки 3 000 рублей вместо прогнозных 1 000.

Причина в том, что “изменяется с шириной окна” и “нормально работает на телефоне” — разные вещи. Первое это технически адаптив. Второе это mobile-first подход к дизайну и вёрстке. Разница огромная, и она напрямую влияет на конверсию.

Ниже разбор, в чём именно разница и что проверять при сдаче-приёмке.

Что такое “просто адаптив”

Adaptive layout это вёрстка, которая реагирует на изменение ширины экрана. Картинки уменьшаются, колонки перестраиваются, текст переносится.

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

В 2026 году любой инструмент разработки делает базовый адаптив из коробки. Tilda, WordPress-темы, Bootstrap на HTML — все они автоматически сжимают контент при уменьшении ширины. Но это не достаточно для мобильного опыта.

Что такое mobile-first

Mobile-first это подход, при котором мобильная версия проектируется первой. Десктоп получается из неё, а не наоборот.

Что это даёт на практике:

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

Десктопная версия в mobile-first подходе выглядит более “спокойно”: меньше плотности, крупнее элементы, больше воздуха. Потому что стартовали с мобильного, где не было места для лишнего.

Таблица: 10 различий между “адаптивом” и mobile-first

В сумме эти 10 различий дают разницу в конверсии 2–4 раза на мобильном трафике.

Почему Tilda “из коробки” не mobile-first

Tilda и многие другие конструкторы делают адаптив автоматически. Блоки масштабируются, картинки сжимаются. Но без отдельной настройки каждого блока под мобильный получается уменьшенная версия десктопа, а не нативный мобильный опыт.

Что делать на Tilda

1. Для каждого блока переключаться на вкладку “Мобильная версия” и править размеры вручную.
2. Для Zero-блоков делать отдельный мобильный Zero-блок.
3. Заменять сложные анимации на простые для мобильного.
4. Грузить отдельные картинки под мобильный через свойство “Mobile image”.

Без этого Tilda будет работать в режиме “просто адаптива”. PageSpeed мобильный окажется 50–70.

Как делают на чистом HTML

На HTML mobile-first реализуется через медиа-запросы:

/* Базовые стили — для мобильного */
.button { font-size: 16px; padding: 14px 24px; }

/* Десктопные стили — поверх */
@media (min-width: 768px) {
  .button { font-size: 14px; padding: 12px 20px; }
}

Сначала прописывается мобильная версия, потом переопределяется для больших экранов. Этот подход называется “progressive enhancement” и даёт лучшую производительность.

Зоны, где mobile-first критичен

Первый экран

На мобильном первый экран это весь ваш оффер. Клиент видит его и решает, листать ли дальше. Неправильно свёрстанный первый экран режет конверсию в 1,5–2 раза.

Ключевые правила:

• Заголовок не больше 2 строк на мобильном.
• Подзаголовок читается, не сливается с фоном.
• CTA-кнопка помещается на экран без скролла.
• Визуал не “перебивает” текст.

Формы

Ввод с экранной клавиатуры отличается от ввода мышкой и обычной клавиатурой. Что важно:

• Поле “телефон” запускает цифровую клавиатуру (type="tel").
• Поле “email” запускает клавиатуру с @ (type="email").
• Плейсхолдеры читаемые, не сливаются с фоном.
• Ошибки валидации видны и понятны.
• Кнопка отправки широкая, в нижней трети экрана.

Меню

Десктопное меню из 7 пунктов в ряд на мобильном не помещается. Варианты:

• Гамбургер-меню (три полоски сверху). Классика, но клик нужен дополнительный.
• Скрытое меню без гамбургера (для лендингов, где меню не критично).
• Фиксированная нижняя панель с 2–4 иконками.

На лендинге меню часто избыточно. Если кнопок CTA достаточно, меню можно вообще убрать с мобильной версии.

Таблицы и большие изображения

На мобильном любая таблица шире 320 пикселей не помещается. Варианты:

• Горизонтальный скролл внутри таблицы.
• Перестройка таблицы в список строк.
• Показ только 3–4 ключевых столбцов с ссылкой “подробнее”.

Большие инфографики и схемы нужно отдельно рисовать под мобильный, а не просто сжимать.

Проверка mobile-first

Инструменты

• DevTools браузера → Device Mode. Переключение между iPhone, iPad, Galaxy.
• Responsively.app — показывает сразу несколько устройств рядом.
• Реальный телефон — ничто не заменит проверку на живом устройстве.
• BrowserStack — для проверки на специфических моделях.

Что проверить на реальном устройстве

1. Первый экран помещается без скролла.
2. Кнопка CTA на первом экране видна.
3. Пролистать весь лендинг пальцем сверху донизу — нет ли горизонтального скролла.
4. Заполнить форму с экранной клавиатуры.
5. Кликнуть на мессенджеры — открываются ли чаты.
6. Проверить на медленной мобильной сети (Settings → Developer → Network Link Conditioner в iOS).

Чек-лист: mobile-first вёрстки

1. Размер шрифта основного текста на мобильном 16+ пикселей.
2. Заголовки первого экрана 32+ пикселей.
3. Кнопки 48×48 пикселей минимум.
4. Между соседними кнопками отступ 8+ пикселей.
5. Отступы между блоками 40–60 пикселей.
6. Нет горизонтального скролла ни на одном блоке.
7. Меню адаптировано (гамбургер или скрыто).
8. Формы используют нативные клавиатуры (tel, email).
9. Таблицы адаптированы (скролл или перестройка).
10. Картинки подгружаются в мобильном разрешении.
11. Сложные анимации упрощены или отключены.
12. PageSpeed мобильный 85+.
13. Проверено на реальных iOS и Android.
14. Проверено на медленной сети.

Частые ошибки

• Делают лендинг на большом мониторе, принимают на нём же. На 24-дюймовом всё выглядит отлично, на iPhone не помещается.
• Используют fixed-размеры в пикселях. Вёрстка ломается на разных экранах.
• Забывают про мобильную клавиатуру. Клиент не может ввести email, потому что @ в 2 клика.
• Грузят одну большую картинку для всех устройств. Мобильный пользователь ждёт 5 секунд.
• Меню из 10 пунктов пытаются впихнуть в мобильную шапку. Пользователь теряется.
• Анимации, которые тормозят на слабом телефоне. Первый экран дёргается, пользователь закрывает.

Если 80% трафика идёт с мобильных (а это стандартная цифра для РФ в 2026), лендинг должен быть сделан под мобильный в первую очередь. Десктоп — приятный бонус, не основное.

Короткий итог

Адаптив и mobile-first — не синонимы. Первое делает Tilda из коробки, второе требует ручной проработки для каждого блока. Разница на экране выражается в конверсии в 2–4 раза.

Если ваш рекламный бюджет идёт на мобильный трафик (а это 80% Директа и почти 100% соцсетей), вам нужен mobile-first, а не просто адаптив. Экономия на мобильной проработке съедает рекламные расходы в разы.

Проверяйте лендинг на реальном телефоне, а не на десктопе в DevTools. Реальное устройство показывает баги, которых в эмуляторе нет: медленная сеть, случайные касания, экранная клавиатура, повёрнутое фото.