Главная → Блог → Сайты → Адаптивный сайт

Сайты

Что такое адаптивный сайт и почему мобильная версия критична

Автор: Герман, основатель V³ Creative · Обновлено 8 августа 2026 · Чтение 7 мин · Тип: разбор

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

Адаптивный сайт — это вёрстка, при которой страница сама перестраивается под ширину экрана: телефон, планшет, десктоп. Адрес один, содержимое одно, меняется только расположение блоков. Без этого свойства человек с телефона видит либо крошечный текст, который надо растягивать пальцами, либо обрезанные блоки, либо кнопки, в которые трудно попасть. Поисковики смотрят на сайт с той же стороны: Google индексирует и ранжирует сайт по его мобильной версии, а Яндекс с февраля 2016 года ставит мобилопригодные страницы в мобильной выдаче выше.

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

Что происходит на сайте без адаптива

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

Видимые поломки

Горизонтальный скролл. Страница шире экрана — пользователь скроллит вправо, теряет структуру и уходит.
Мелкий нечитаемый текст. Вёрстка рассчитана на 1280 px, а на экране 390 px — всё сжимается до нечитаемого размера.
Перекрывающиеся блоки. Картинки накладываются на текст, кнопки прячутся под другими элементами.
Кнопки и поля, по которым не попасть. WCAG 2.2 задаёт нижнюю границу прямо: цель для касания — не меньше 24×24 CSS-пикселей (критерий 2.5.8). На десктопной вёрстке, сжатой до телефона, ссылки в меню и поля формы оказываются мельче.

Скрытые потери

Падение в поиске. Google описывает порядок так: при индексировании и ранжировании используется мобильная версия сайта, просканированная роботом для смартфонов. Яндекс объявил алгоритм «Владивосток» 2 февраля 2016 года: мобилопригодные страницы при прочих равных ранжируются в мобильном поиске выше.
Медленная загрузка на телефоне. Неадаптивная страница отдаёт телефону всю десктопную вёрстку и полноразмерные картинки. Хорошим показателем LCP Google считает 2,5 секунды и меньше, причём меряет мобильные и десктопные загрузки отдельно — попасть в этот порог с чужой по размеру вёрсткой трудно.
Потери в рекламе. Вы платите за клик из Яндекс.Директа или VK, пользователь открывает с телефона, видит нечитаемую страницу — деньги потрачены впустую.

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

Три способа сделать адаптивный сайт

Технически адаптивность делают по-разному, и при заказе стоит спрашивать, каким именно способом.

Адаптивная вёрстка (Responsive Web Design)

Один HTML-документ, CSS media queries задают разные стили для разных разрешений. Это стандарт де-факто: один URL, один контент, поисковик видит то же, что пользователь. Такую вёрстку делают при создании сайтов с нуля или при редизайне существующего.

Отдельная мобильная версия (m.site.ru)

Яндекс такой вариант поддерживает, но требует аккуратности: структура поддомена должна совпадать с основным доменом, версии связываются атрибутом rel="alternate", а с десктопного адреса ставится редирект для мобильных пользователей. Поддерживать два сайта дороже, поэтому подход постепенно вышел из обихода. Если встречаете такое у подрядчика — уточняйте, почему именно так.

Конструктор с адаптацией

Tilda, Тур, Битрикс24.Сайты — у большинства конструкторов адаптивность встроена. Но «встроена» не значит «работает хорошо»: автоматическая адаптация часто ломает типографику и сетку на нестандартных блоках. Нужна ручная проверка и правки. Подробнее об особенностях работы на Tilda — в статье «Сайт на Tilda».

Что Яндекс требует от мобильной страницы

Требований немного, и они проверяемые. Первое: одна вёрстка на все экраны и один адрес, если вы не разводите версии по разным URL специально. Второе: мета-тег <meta name="viewport" content="width=device-width, initial-scale=1"> в <head>, а CSS и JS открыты роботу в robots.txt — закрытые стили робот видит как сломанную страницу. Третье: содержимое умещается в экран шириной 320 пикселей без горизонтальной прокрутки. Отдельно Яндекс просит не использовать Flash, Silverlight и Java-апплеты — они на мобильных не работают.

Три требования закрывает любая нормальная адаптивная вёрстка, а невыполненное Вебмастер покажет сам, без аудита со стороны.

Разборы упаковки и брендинга — в Telegram

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

Подписаться в Telegram

Насколько адаптив влияет на заявки?

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

Отдельная история — посадочные страницы для рекламы. Если вы запускаете контекстную рекламу в Яндекс.Директе, неадаптивный лендинг означает, что часть бюджета конвертируется в ноль: клик оплачен, а страница не работает на мобильном. Как собирается страница, которая доводит до заявки, разобрано в материале «Структура продающего лендинга».

Важно. Адаптивность — это про геометрию, а не про качество страницы. Сайт может идеально перестраиваться под телефон и всё равно не приносить заявок, если на первом экране непонятно, что за компания и что она предлагает. Адаптив снимает препятствие, а не заменяет содержание.

Как проверить свой сайт прямо сейчас

Несколько простых способов — от быстрых к детальным.

Открыть сайт с телефона. Банально, но многие владельцы проверяют только с компьютера. Попробуйте разные сценарии: читать текст, нажать кнопку, заполнить форму.
DevTools в браузере. Chrome или Firefox, F12 → иконка телефона → выбрать устройство. Ширину имеет смысл довести до 320 px: это та граница, на которой Яндекс ждёт отсутствия горизонтальной прокрутки.
PageSpeed Insights. Сервис Google (pagespeed.web.dev) даёт оценку отдельно для мобильных и десктопа. Шкала описана в документации Lighthouse: 0–49 — красная зона, 50–89 — требует улучшения, 90–100 — хорошо. Там же видно LCP: цель — уложиться в 2,5 секунды.
Инструмент мобилопригодности в Яндекс.Вебмастере. Проверяет конкретную страницу сразу, весь сайт — автоматически в течение двух недель.
Яндекс.Метрика → Устройства. Смотрите показатель отказов и конверсию в разбивке по типу устройства. Если на мобильных они заметно хуже — проблема есть.

Что делать, если сайт неадаптивный

Варианта два. Первый — точечные правки: если сайт молодой и вёрстка сделана относительно аккуратно, фронтендер может добавить media queries за разумные деньги. Второй — редизайн: когда сайт старый, вёрстка запутана или визуальная часть устарела одновременно с адаптивностью. Редизайн обходится дороже точечных правок, но даёт предсказуемый результат и обновлённый дизайн заодно.

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

Частые вопросы

Адаптивный сайт — это то же самое, что мобильная версия?

Не совсем. Мобильная версия — отдельный сайт на поддомене m.*, который показывается только мобильным пользователям. Адаптивный сайт — один и тот же сайт, который сам перестраивается под экран. Яндекс поддерживает оба варианта, но у поддомена есть цена: структура версий должна совпадать, их нужно связать атрибутом rel="alternate" и настроить редирект, а поддерживать придётся два сайта вместо одного.

Влияет ли адаптивность на позиции в Яндексе?

Да. Ещё 2 февраля 2016 года Яндекс объявил алгоритм «Владивосток» и сформулировал прямо: мобилопригодные страницы при прочих равных ранжируются в мобильном поиске выше. Проверить, считает ли Яндекс вашу страницу мобилопригодной, можно инструментом в Вебмастере.

Google действительно смотрит только на мобильную версию?

В справке Google сказано, что при индексировании и ранжировании используется мобильная версия сайта, просканированная роботом для смартфонов. При этом Google отдельно оговаривает: создавать мобильную версию необязательно для того, чтобы попасть в выдачу. Речь о том, что качество мобильного отображения влияет на результат, а не о запрете на существование.

Сколько стоит сделать сайт адаптивным?

Зависит от объёма работы. Точечные правки к существующему сайту — от 30 000 ₽. Полноценный редизайн с адаптивной вёрсткой — от 150 000 ₽ в пакете Старт. Точную цифру называем после изучения текущего сайта и объёма страниц. Свяжитесь с нами через форму на сайте — разберём ситуацию и предложим решение под ваш бюджет.

Источники:

Пока вы выбираете подрядчика, конкурент уже упаковался

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

Обсудить проект