Адаптация сайта под мобильные устройства

Вы открываете отчёт в Яндекс.Метрике и видите: 60–70% посетителей заходят с телефона. При этом конверсия с мобильных в два-три раза ниже, чем с компьютера. Заявок почти нет. Причина часто не в текстах, не в ссылках и не в позициях — сайт просто неудобно использовать на экране смартфона. Человек пытается нажать на крошечную кнопку, промахивается, листает туда-сюда, закрывает вкладку и уходит к конкуренту. Яндекс это видит. И постепенно опускает такой сайт ниже в выдаче.

Хотите понять, относится ли это к вашему сайту?Проверим сайт и вернёмся с коротким планом.

Получить аудит

На что смотреть в первую очередь

Адаптивный сайт — это не просто уменьшенная копия десктопной версии. Это отдельный способ подачи контента, при котором всё — шрифты, картинки, кнопки, отступы — подстраивается под ширину экрана. Пользователь не должен pinch-зумить, горизонтально скроллить или вслепую тыкать в мелкий текст.

Яндекс уже несколько лет использует мобильно-первичный индекс. Это значит, что робот в первую очередь смотрит именно мобильную версию сайта. Если на телефоне страница выглядит криво, часть текста скрыта, а меню не открывается — Яндекс воспринимает страницу как плохую. Даже если на компьютере она выглядит отлично.

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

Как проверить, адаптирован ли сайт

Самый быстрый способ — открыть сайт с телефона и попробовать выполнить ключевое действие: найти телефон, заполнить форму, добавить товар в корзину. Если вы промахиваетесь по кнопкам, если текст сливается в пятно, если приходится увеличивать экран — сайт не адаптирован.

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

Проверка оптимизации в Яндекс.Вебмастере — показывает конкретные страницы с проблемами мобильной версии и описывает, что именно не так.
PageSpeed Insights от Google — хотя это инструмент другого поисковика, он даёт понятную диагностику: какие элементы перекрывают друг друга, какой текст слишком мелкий, где не хватает отступов.

Практические особенности и варианты применения

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

Адаптивная вёрстка

Один и тот же HTML-код страницы по-разному отображается в зависимости от ширины экрана. Элементы перестраиваются: на компьютере они идут в три колонки, на телефоне — в одну. Это самый распространённый и правильный вариант. Все современные сайты на популярных CMS (Битрикс, WordPress, Joomla) делаются именно так.

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

Контент и структура

Покажем, какие страницы могут привести трафик

Оценим семантику, структуру разделов, статьи и коммерческие посадочные, чтобы контент работал как часть SEO-системы.

Разобрать структуру

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

Раньше это был стандартный подход — делали упрощённую копию сайта на поддомене. Сейчас Яндекс официально не рекомендует этот вариант. Отдельная версия означает дублирование контента, проблемы с индексацией и двойную поддержку. Если вам предлагают сделать отдельную мобильную версию с нуля — это скорее всего устаревший подход, который создаст больше проблем, чем решит.

Доработка существующей адаптивной вёрстки

Чаще всего владельцу сайта не нужно делать мобильную версию с нуля. Нужно исправить то, что есть. Это и есть реалистичный путь при небольшом бюджете.

Что обычно дорабатывают:

Размер шрифта. На мобильных основной текст должен быть не меньше 14–16 пикселей. Меньше — человек не читает, даже если не осознаёт этого.
Отступы между кликабельными элементами. Если две ссылки стоят вплотную, пользователь будет попадать не туда. Минимальное расстояние — около 8 пикселей между элементами.
Размер кнопок. Кнопка «Заказать звонок» или «Отправить» должна быть достаточно крупной, чтобы нажать пальцем, а не кончиком иголки.
Таблицы и прайс-листы. Широкие таблицы на мобильных — это катастрофа. Их нужно превращать в карточки или делать горизонтальную прокрутку с явной подсказкой.
Меню. Гамбургер-меню (три полоски) должно открываться корректно, не перекрывать контент и закрываться при выборе раздела.
Попапы и формы. Если на мобильном открывается всплывающее окно, оно должно занимать почти весь экран. Иначе человек не сможет ни заполнить форму, ни закрыть это окно.

Ошибки, ограничения и что учитывать на практике

Самая частая ошибка — проверить сайт на своём большом смартфоне и сказать «всё нормально». На экране 6.7 дюймов почти любой сайт выглядит приемлемо. Проблемы проявляются на устройствах 5–5.5 дюймов, которых у клиентов всё ещё много.

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

На что обращать внимание при работе с подрядчиком

Если вы нанимаете человека для доработки мобильной версии, есть несколько красных флагов:

Подрядчик говорит «сделаю мобильную версию» и не уточняет, будет ли это доработка текущей вёрстки или отдельный поддомен. Если не уточняете вы — уточняйте.
Обещают «идеальную адаптацию за 5 000 рублей». Реальная доработка с исправлением шрифтов, отступов, таблиц, форм и меню — это минимум несколько дней работы специалиста.
Показывают только главную страницу. Главная почти всегда адаптирована лучше остальных. Попросите показать карточку товара, страницу услуги, прайс-лист, форму обратной связи — именно там прячутся проблемы.

Ограничения маленького бюджета

При бюджете до 15 000–20 000 рублей на доработку не стоит ждать переделки всего сайта. Реалистично исправить самые критичные моменты: шрифты, кнопки, меню, основные формы. Это уже даст заметный эффект и на конверсию, и на отношение Яндекса к сайту.

То, что можно отложить: анимации, сложные эффекты при скролле, тонкая настройка каждой второстепенной страницы. Это важно, но не критично на старте.

С чего начать

Откройте сайт с телефона и пройдите путь клиента: от поиска услуги до попытки оставить заявку.
Запишите, где именно стало неудобно — конкретно: «не могу нажать на номер», «таблица не помещается», «меню закрыло текст».
Откройте Яндекс.Вебмастер и посмотрите раздел с диагностикой мобильных страниц — там будет конкретный список проблем.
Передайте этот список подрядчику с просьбой оценить объём доработок. Это даст вам адекватную цену и понимание, что именно будут делать.

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