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

Что показывает такая проверка

Вы открываете статистику сайта и видите: 60–70% посетителей заходят с телефона. Заявок с мобильных почти нет. При этом с компьютера заявки идут. Знакомая картина?

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

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

Дело не в том, что с телефона люди меньше хотят покупать. Дело в том, что им физически неудобно это делать на вашем сайте. А Яндекс это видит и учитывает.

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

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

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

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

Адаптивный сайт — это один и тот же сайт, который подстраивается под размер экрана. Текст перестраивается в одну колонку, меню сворачивается в бургер, кнопки становятся крупнее, картинки масштабируются. Человеку не нужно pinch-zoom (растягивать пальцами), чтобы прочитать цену или нажать «Заказать».

Это отличается от отдельной мобильной версии, когда создаётся второй сайт на поддомене типа m.vash-sayt.ru. Отдельные мобильные версии сейчас почти не делают — это сложнее в поддержке, и Яндекс предпочитает единый адаптивный сайт.

Что именно должно работать на мобильной версии:

Навигация. Меню должно сворачиваться и не занимать пол-экрана. Категории должны открываться без проблем.
Кнопки и ссылки. Минимальный размер касания — примерно 44×44 пикселя. Если кнопки мелкие и стоят вплотную, человек будет попадать мимо. Он разозлится и уйдёт.
Текст. Без зума читается шрифт от 16 пикселей. Меньше — это мучение для глаз.
Формы заявки. Поля должны быть крупными, клавиатура не должна перекрывать то, что человек печатает. Лучше минимум полей: имя, телефон, и всё.
Контент. Текст, таблицы, характеристики — всё должно быть доступно с телефона, а не спрятано.
Картинки. Не должны вылезать за границы экрана или искажаться.

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

Бесплатный SEO-аудит

Покажем, что мешает сайту расти

Проверим структуру, индексацию, посадочные страницы и первые точки роста. После заявки можно перейти в Telegram с уже заполненным контекстом.

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

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

Что делать при ограниченном бюджете. Полная переделка сайта под мобильные может стоить дорого. Но можно действовать по приоритетам. Сначала исправьте самые критичные страницы — те, через которые должны идти заявки: главная, услуги, контакты, корзина. На этих страницах почините меню, увеличьте кнопки, сделайте читаемый текст и рабочую форму. Это уже даст эффект.

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

Самая частая и дорогая ошибка — скрытый контент на мобильных. Когда на десктопе страница полная: описание услуги, цены, таблица характеристик, отзывы. А на мобильной версии всё это сворачивается в аккордеоны или просто убирается «для экономии места». Человек видит только заголовок и кнопку «Заказать».

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

Другие типичные ошибки:

Попап на весь экран. Человек зашёл с телефона, а ему сразу на весь экран — баннер, подписка, предложение скидки. Кнопка закрытия крошечная в углу. Это не только раздражает, но и может расцениваться Яндексом как навязчивый интерститиал — фактор, который напрямую тянет позиции вниз.
Фиксированная шапка на пол-экрана. Логотип, телефон, меню — всё это занимает столько места, что контента почти не видно. Человек скроллит, но видит одну и ту же шапку.
Неработающие элементы. Слайдер не свайпается, выпадающие списки не открываются, галерея не листается. На десктопе всё работает мышкой, а на тач-экране — нет.
Тяжёлые элементы. На мобильном интернет медленнее, а ресурсов устройства меньше. Если страница грузится долго из-за неоптимизированных картинок или скриптов, человек уйдёт до того, как увидит вашу кнопку заявки.

На что обращать внимание при работе с подрядчиками. Если вам говорят: «Мы сделаем вам мобильную версию за 15 000 рублей за три дня» — уточните, что именно подразумевается. Часто за эту сумму делают простейшую переделку, при которой половина контента пропадает, а формы не работают. Требуйте показать примеры их мобильных адаптаций и откройте эти примеры с телефона сами.

Красные флаги: подрядчик обещает, что адаптивность «само подстроится», не спрашивает про ваши ключевые страницы, не уточняет, какой контент критически важен для конверсии с мобильных. Хороший специалист сначала спросит: «С каких страниц у вас идут основные заявки? Давайте начнём с них».

С чего начать, если бюджет ограничен. Откройте Яндекс.Вебмастер, посмотрите ошибки мобильной версии. Выпишите страницы, которые приносят заявки с десктопа, но не приносят с мобильных. Проверьте их вручную с телефона. Почините меню, увеличьте кнопки, верните скрытый контент, сделайте рабочую форму. Это базовый минимум, который уже изменит ситуацию.

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