Адаптивная верстка — это способ построения сайта, при котором один и тот же HTML-код меняет расположение блоков, размер шрифтов и структуру навигации в зависимости от ширины экрана устройства. Пользователь с телефона и пользователь с монитора 27 дюймов открывают один и тот же адрес и видят разный, но одинаково удобный интерфейс.
До 2013-2015 годов многие компании решали проблему мобильного трафика иначе: делали отдельную версию сайта на поддомене вида m.site.ru. Технически это работало, но требовало поддерживать два кода одновременно, и версии быстро расходились по функциям и контенту. Адаптивная верстка закрывает эту проблему на уровне CSS, без дублирования сайта.
Как это работает технически
Основа адаптивной верстки — медиа-запросы (media queries) в CSS. Разработчик задаёт брейкпоинты, то есть пороговые значения ширины экрана, при пересечении которых меняются правила отображения. Типичные брейкпоинты: около 480px для смартфонов, 768px для планшетов, 1024px и выше для десктопов. Внутри каждого диапазона блоки перестраиваются через flexbox или grid: трёхколоночный блок на десктопе превращается в одну колонку на телефоне, меню из горизонтального списка сворачивается в гамбургер-иконку.
Второй технический слой — относительные единицы измерения вместо фиксированных пикселей. Ширина в процентах, шрифты в rem, отступы через clamp() позволяют элементам плавно масштабироваться внутри брейкпоинта, а не только скачком между ними. Хороший адаптивный сайт выглядит корректно не только на трёх стандартных ширинах, а на любом промежуточном значении, включая половину экрана в оконном режиме на десктопе.
Почему Google требует это по умолчанию
С 2019 года Google перевёл всю индексацию на mobile-first: робот сканирует и оценивает сайт так, будто заходит на него с телефона, и именно эта версия определяет позиции в выдаче, даже для запросов с десктопа. Если мобильная версия обрезана, неудобна или в ней скрыт контент, который есть на десктопе, это напрямую бьёт по видимости сайта в поиске.
Добавим сюда практику: по данным большинства аналитических сервисов, доля мобильного трафика на коммерческих сайтах в Казахстане и СНГ обычно превышает половину, а во многих нишах доходит до 65-70%. Сайт без нормальной адаптации теряет не абстрактные позиции в рейтинге, а конкретных посетителей, которые закрывают вкладку в первые секунды.
Чем адаптивная верстка отличается от просто "мобильной версии"
Часто эти термины путают. Мобильная версия — отдельный набор шаблонов и иногда отдельный URL под мобильные устройства. Адаптивная верстка — один шаблон, который сам подстраивается. Есть промежуточный вариант, отзывчивая (responsive) верстка, где вместо жёстких брейкпоинтов элементы тянутся плавно на любой ширине без разрывов. На практике границу между адаптивным и отзывчивым подходом проводят редко, оба решают одну задачу: сайт остаётся рабочим на любом экране без дублирования кода.
Что теряет бизнес без нормальной адаптации
Несколько типичных проблем неадаптированных сайтов: текст мельче 12px, который невозможно прочитать без зума; кнопки и ссылки, расположенные так близко, что палец промахивается; горизонтальный скролл, когда контент вылезает за пределы экрана; формы, где поле ввода перекрывается всплывающей клавиатурой. Каждая из этих мелочей увеличивает показатель отказов и снижает конверсию в заявку или покупку, потому что человек уходит раньше, чем успевает понять предложение.
При разработке в SolaLab адаптивная верстка закладывается сразу в макет и код, а не проверяется постфактум на готовом сайте. Каждый блок собирается с учётом трёх-четырёх ширин экрана ещё на этапе вёрстки, поэтому на выходе клиент получает сайт, который одинаково работает и с телефона, и с ноутбука, без отдельного этапа "доработки под мобильные".
Как проверить адаптивность своего сайта
Быстрый способ без установки инструментов — открыть сайт в Chrome, нажать F12 и включить режим устройства (иконка телефона и планшета в панели разработчика). Так видно, как страница ведёт себя на разных ширинах, включая горизонтальный скролл и обрезанный контент. Второй источник, уже с реальными данными посетителей, — отчёт "Удобство для мобильных" в Google Search Console: он показывает конкретные страницы с проблемами и тип ошибки, например мелкий текст или кликабельные элементы слишком близко друг к другу.
Если после такой проверки на сайте нашлись проблемы с мобильной версией, есть смысл обсудить это до того, как трафик и позиции просядут дальше. Напишите в Telegram (https://t.me/Gooood_daay) с адресом сайта, посмотрю макет и скажу, что чинить в первую очередь и сколько это займёт по времени.