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

Адаптивная вёрстка давно перестала быть отдельной услугой и стала гигиеной. Тем не менее в сметах она периодически всплывает как платная опция, а на приёмке проверяется по принципу «открылось на телефоне — значит нормально».

Разбираем, что это на самом деле и что проверять.

Что такое адаптивность

Один сайт с одним адресом, вёрстка которого перестраивается в зависимости от ширины экрана: меняются число колонок, размеры шрифтов, порядок блоков, вид навигации.

Альтернатива из прошлого — отдельная мобильная версия на поддомене — сейчас почти не используется: два сайта нужно поддерживать параллельно, содержимое расходится, а поисковые системы приходится специально уведомлять о связи версий.

Почему это не опция

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

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

Заявки теряются молча. Неудобная форма на маленьком экране не выдаёт ошибку — человек просто уходит, и вы никогда не узнаете, сколько таких было.

Поэтому адаптивность стоит в списке того, на чём нельзя экономить, рядом с тестированием и скоростью.

«Открывается» — не значит «работает»

Ключевое различие, из-за которого принимают неработающие сайты.

Технически на телефоне откроется любой сайт: браузер уменьшит масштаб и покажет десктопную версию целиком. Формально требование выполнено. Практически пользоваться этим невозможно.

Настоящая адаптивность — это продуманный мобильный сценарий:

• текст читается без увеличения масштаба;
• кнопки и ссылки достаточно крупные, чтобы попасть пальцем;
• телефон нажимается и сразу звонит, адрес открывает карту;
• форма короткая, клавиатура подставляется правильная — цифровая для телефона, почтовая для адреса электронной почты;
• таблицы либо прокручиваются отдельно, либо превращаются в карточки;
• боковой фильтр становится отдельным экраном, а не сжимается в нечитаемую полосу;
• ничего не уезжает за правый край экрана.

Что проверять при приёмке

Не полагайтесь на слова «адаптив сделан». Проверьте сами, и обязательно на реальном телефоне, а не только в браузере на компьютере.

Пройдите полный сценарий. От главной до отправки заявки. Именно так, как это сделает клиент.

Проверьте на маленьком экране. Не на последнем флагмане, а на устройстве попроще — там всплывает большая часть проблем.

Посмотрите горизонтальную прокрутку. Если страница ездит вбок — что-то не помещается.

Проверьте самые сложные страницы. Обычно это карточка товара, каталог с фильтрами, таблица с ценами, форма записи. Главная почти всегда сделана нормально, потому что её показывают.

Замерьте скорость на мобильном канале. Красивая адаптивная страница, которая грузится восемь секунд, всё равно теряет посетителя. Как это измеряется — в статье про Core Web Vitals.

Mobile-first: почему проектируют с телефона

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

Причина в дисциплине. На маленьком экране помещается только главное, и это заставляет отобрать действительно важное. Обратный порядок — сначала десктоп, потом «ужать» — обычно приводит к тому, что на телефоне остаётся всё то же самое, только мельче.

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

Сколько стоит

Если закладывается изначально — входит в стоимость вёрстки. Отдельной строки быть не должно. Влияет на объём дизайна: мобильные макеты — это 30–40% дизайнерского времени, и они обязаны быть в составе работ. Подробнее в разборе сколько стоит дизайн сайта.

Если добавляется к существующему сайту — 40–70% стоимости новой вёрстки. Переделывать приходится почти всё: адаптивность не накладывается сверху, она заложена в структуру разметки.

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

Красный флаг в смете

Если вы видите строку «адаптивная вёрстка» как отдельную платную опцию — задайте прямой вопрос, что представляет собой базовый вариант.

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

Итог

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

Если сайт делается с нуля — убедитесь, что мобильные макеты есть в составе дизайна, а не появляются «по ходу вёрстки». Если сайт уже есть и адаптива нет — считайте не стоимость починки, а стоимость новой вёрстки: скорее всего, разница окажется небольшой.