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

Короткий ответ: адаптивный сайт — это один сайт по одному адресу, который сам перестраивает страницы под ширину экрана телефона, планшета или компьютера. Мобильная версия в узком смысле — отдельная копия сайта, обычно на поддомене m., со своей вёрсткой. Для нового сайта почти всегда выбирают адаптив: его проще поддерживать, и его рекомендует Google. Проверить сайт можно самому за 15 минут по чек-листу ниже, а требования к мобильному виду стоит записать в ТЗ и проверить при приёмке.

Что такое адаптивный сайт?

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

Технически адаптив держится на двух вещах. Первая — метатег viewport в коде страницы: без него телефон рисует страницу как на компьютере и уменьшает её целиком. Справка Яндекса приводит его прямо: «meta name="viewport" content="width=device-width, initial-scale=1"». Вторая — правила оформления под разные ширины, так называемые медиазапросы. Разработчик задаёт «точки перелома», после которых раскладка меняется.

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

• 320–360 px — узкие и компактные телефоны. Справка Яндекса рекомендует, чтобы контент помещался без горизонтальной прокрутки на экранах от 320 пикселей.
• 375–430 px — большинство современных смартфонов в вертикальном положении.
• 768–1024 px — планшеты и телефоны, повёрнутые горизонтально.
• 1280 px и шире — ноутбуки и мониторы.

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

	Адаптивный дизайн	Динамическая вёрстка	Отдельная мобильная версия
Адрес страницы	Один для всех устройств	Один для всех устройств	Свой: обычно на поддомене m.
Что отдаёт сервер	Один и тот же HTML, раскладка меняется по ширине экрана	Разный HTML в зависимости от устройства	Отдельный сайт со своей вёрсткой
Что нужно для поиска	Метатег viewport	Определение устройства и заголовок Vary	Редиректы и rel="alternate" для каждой пары страниц
Где обычно ломается	Таблицы, длинные слова, широкие картинки	Устройство определено неверно, версии расходятся	Контент двух версий расходится, правки вносят дважды
Кому подходит	Почти всем сайтам и магазинам	Крупным проектам со своей командой	Когда старый сайт нельзя переверстать, а мобильный вид нужен срочно

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

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

Все три способа описаны в справке Яндекс Вебмастера о сайтах для мобильных устройств и в документации Google о мобильной индексации. Google прямо называет адаптивный дизайн рекомендуемым вариантом — его проще всего сделать и поддерживать.

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

• Двойная работа. Новую услугу, цену или акцию нужно внести в оба сайта. Рано или поздно версии расходятся, и на телефоне клиент видит старый прайс.
• Сложная связка для поиска. Каждая страница основного сайта должна вести на свою пару в мобильной версии — редиректом и тегом rel="alternate". Яндекс отдельно предупреждает: нельзя перенаправлять множество страниц основной версии на одну страницу мобильной. Без правильной связки поисковик не поймёт, что две страницы — одна и та же, и не подставит мобильную в выдачу на телефонах.
• Неполный контент. Мобильную копию часто делают «облегчённой» и выкидывают разделы. Google просит, чтобы на мобильной версии было то же содержание, что и на основной: индексирует он именно мобильную, так что выпавшее на телефоне для него теряется.

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

Как самому проверить сайт на телефоне?

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

Что смотреть, собрано в чек-листе — его удобно распечатать и пройти с телефоном в руке. Важно не просто открыть страницу, а действовать как клиент: нажимать кнопки, заполнять поля, отправлять форму по-настоящему и проверять, дошла ли заявка до почты или Telegram.

Дополнительно можно проверить без телефона:

1. Режим устройств в браузере. В Chrome на компьютере откройте инструменты разработчика (F12) и включите переключатель устройств: страница покажется в ширине выбранного телефона. Это удобно для быстрого обзора, но настоящий телефон не заменяет — касания пальцем и экранная клавиатура там не те.
2. Яндекс Вебмастер. Инструмент «Проверка мобильных страниц» проверяет отдельный адрес за несколько минут. Проверка сайта целиком, по справке Яндекса, занимает до двух недель, рекомендации появляются в разделе «Диагностика сайта».
3. Отчёт о скорости для телефонов. Медленная загрузка на мобильной сети — отдельная тема, как её измерить, разобрано в статье о скорости загрузки сайта.

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

Что проверить	Как	Что считать проблемой
Горизонтальная прокрутка	Провести пальцем влево-вправо на каждой ключевой странице	Страница сдвигается вбок, виден пустой край
Текст	Читать без увеличения двумя пальцами	Приходится приближать, строки уходят за край
Кнопки и ссылки	Нажимать большим пальцем меню, телефон, «Заказать»	Попадаете в соседний пункт, нажатие не срабатывает
Телефон в шапке	Нажать на номер	Номер не набирается, приходится копировать
Форма заявки	Заполнить и отправить по-настоящему	Нет цифровой клавиатуры для телефона, страница прыгает, заявка не дошла
Всплывающие окна	Открыть и закрыть баннер, cookie-плашку, чат	Крестик за краем экрана, окно закрывает кнопку заказа
Таблицы и фото	Пролистать прайс, карточку товара, галерею	Таблица обрезана, фото растянуто или грузится долго
Поворот экрана	Повернуть телефон горизонтально	Шапка занимает пол-экрана, меню не открывается

Какие ошибки мобильной версии отпугивают клиентов?

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

Типовые поломки, которые мы видим на сайтах, приходящих на редизайн:

• Горизонтальная прокрутка. Её создаёт один слишком широкий элемент: таблица прайса, встроенная карта, длинный адрес электронной почты или слово без переносов. Вся страница начинает «плавать», и человек теряет ощущение, где он.
• Мелкие и слипшиеся кнопки. Пункты меню стоят вплотную, ссылки в тексте крошечные. Стандарт доступности WCAG 2.2 в критерии 2.5.8 задаёт минимум для цели нажатия — 24 на 24 CSS-пикселя или достаточный отступ до соседней; для главных кнопок разумно брать заметно больше.
• Номер телефона текстом. Номер не оформлен как ссылка для звонка, и его приходится копировать. На телефоне это самая короткая дорога к заявке — её нельзя ломать.
• Неудобная форма. В поле телефона открывается буквенная клавиатура, подсказки исчезают при вводе, после отправки страница прыгает наверх без сообщения. В Safari на iPhone поле с мелким шрифтом при нажатии ещё и увеличивает страницу.
• Окна, которые не закрыть. Баннер акции, плашка cookie и кнопка онлайн-чата вместе закрывают половину экрана, а крестик уехал за край.
• Шапка, съедающая экран. Закреплённая шапка с логотипом, двумя телефонами и меню занимает треть высоты — при повороте телефона под контент остаётся полоска.
• Важное спрятано. Цены, условия доставки или кнопка заказа на компьютере видны сразу, а на телефоне оказываются в самом низу после трёх слайдеров.

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

Как мобильная версия влияет на поиск?

Напрямую. Google с июля 2024 года обходит сайты роботом для смартфонов и индексирует и ранжирует их по мобильной версии. Яндекс старается показывать на телефонах мобильный вид сайта и описывает в справке, как его подготовить. Неудобный на телефоне сайт из поиска не исчезает, но посетители с телефона уходят с него быстрее.

Что важно знать заказчику:

• Google смотрит на мобильную версию как на основную. В блоге Google Search Central объявлено: после 5 июля 2024 года даже оставшиеся сайты обходит робот Googlebot для смартфонов, а сайты, недоступные с мобильных устройств, перестанут индексироваться. Значит, всё, что скрыто или выброшено на телефоне, для Google как будто не существует.
• Содержание должно совпадать. Google рекомендует одинаковые тексты, заголовки, описания и микроразметку на обеих версиях. Длинный текст на телефоне можно убрать во вкладки или раскрывающиеся блоки — удалять его нельзя.
• Роботу нужен доступ к стилям и скриптам. Справка Яндекса советует не закрывать файлы CSS и JavaScript в robots.txt — иначе страницы могут некорректно отображаться в результатах поиска.
• Адаптив снимает целый класс ошибок. Нет второй версии — нет рассинхронизации, неправильных редиректов и дублей в выдаче.

Мобильный вид — часть технической основы сайта, но не вся. Остальные пункты, которые должны быть готовы к запуску, собраны в статье о технической SEO-базе. Сам по себе адаптив позиций не обещает: он убирает препятствие, а дальше решают содержание и спрос.

Что прописать в ТЗ?

Не «сайт должен быть адаптивным» — это слишком размыто, чтобы что-то принять или вернуть. Запишите, на каких ширинах и устройствах проверяете, какие сценарии должны работать с телефона и какие элементы обязаны быть видны без прокрутки.

Формулировки, которые можно взять в техзадание почти как есть:

1. Сайт адаптивный: один адрес страницы для всех устройств, метатег viewport на всех страницах.
2. Без горизонтальной прокрутки на ширинах от 320 px до 1920 px, включая таблицы, карты, галереи и формы.
3. Проверочные устройства: iPhone с актуальной версией iOS (Safari) и смартфон на Android (Chrome), а также планшет — укажите модели, которые у вас есть.
4. Основной текст читается без увеличения; кнопки и пункты меню удобны для нажатия пальцем и не стоят вплотную.
5. Номер телефона и мессенджеры кликабельны; в поле телефона формы открывается цифровая клавиатура.
6. Сценарии, которые работают с телефона от начала до конца: найти услугу, увидеть цену, отправить заявку и получить подтверждение. Заявка приходит туда же, куда с компьютера.
7. Всплывающие окна закрываются и не перекрывают кнопку заказа.
8. Содержимое на телефоне то же, что на компьютере: тексты можно сворачивать, но не удалять.

Как вообще собрать ТЗ без опыта и что из него можно оставить исполнителю, разобрано в отдельной статье о техническом задании на сайт.

Как принимать мобильную версию у подрядчика?

Пройдите чек-лист из этой статьи на своих телефонах по пунктам ТЗ и запишите замечания со скриншотами: страница, устройство, что не так. По типовому договору студии на приёмку есть 5 рабочих дней, и работу можно вернуть с перечнем замечаний вместо подписания акта.

Несколько практических советов:

• Проверяйте на реальном домене, а не на тестовой копии: виджеты чата, счётчики и формы на рабочем сайте ведут себя иначе.
• Отправьте настоящую заявку с телефона и убедитесь, что она дошла.
• Скриншот с указанием модели телефона экономит день переписки: разработчик сразу воспроизводит проблему.
• Не путайте ошибку со вкусом. «Кнопка уходит за край» — ошибка; «хочу другой цвет кнопки на телефоне» — правка. В тарифах студии до 2 раундов правок, а ошибки по нашей вине исправляем бесплатно 30 календарных дней с даты акта.

Когда отдельная работа над мобильной версией не нужна?

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

• Новый сайт. В прайсе Roboweb адаптив входит в лендинг от 24 000 ₽ — «адаптив под мобильные, планшеты и десктоп» — и в корпоративный сайт от 56 000 ₽. Платить за него второй раз не нужно.
• Сайт и так проходит чек-лист. Если на телефоне всё читается, нажимается и заявки доходят, переделывать ради моды незачем. Лучше вложиться в скорость и содержание.
• Не нужно приложение «чтобы было на телефоне». Удобный адаптивный сайт закрывает большинство задач. Приложение или PWA имеют смысл, когда нужны push-уведомления, работа без сети или ежедневное использование, — сравнение вариантов в статье о PWA и кроссплатформе.
• Нет доступа к исходникам. Если сайт на платформе, где вёрстку менять нельзя, адаптив «поверх» не сделать — честнее считать новый сайт.

Сколько стоит сделать сайт удобным на телефоне?

Для готового сайта это редизайн: в прайсе Roboweb — от 29 000 ₽ и 2–3 дня, «современный вид, скорость, адаптив под мобильные», без переезда и смены адресов страниц. Точную сумму называем после брифа и фиксируем в договоре до старта.

От чего зависит смета:

• Число типов страниц. Важно не общее число страниц, а сколько разных шаблонов: главная, услуга, карточка товара, каталог, статья, контакты.
• Таблицы и сложные блоки. Широкие прайсы, калькуляторы и сравнения требуют отдельной мобильной раскладки, а не простого сжатия.
• Состояние кода. Аккуратную вёрстку адаптировать быстрее, чем сайт, собранный из нескольких тем и плагинов.
• Платформа и доступы. Нужны хостинг, админка и исходники; без них редизайн не начать.

Оплата по договору — 50 % предоплаты и 50 % после подписания акта. Исполнитель освобождён от НДС по п. 1 ст. 145 НК РФ. Если после запуска сайт будет развиваться, мобильный вид новых разделов можно проверять в рамках поддержки — от 7 900 ₽ в месяц.

Пример из наших работ — лендинг «Юнит-1» для строительной компании: продающая структура, аккуратный адаптив под телефон, планшет и компьютер и форма заявки, обращения из которой доходят до владельца.

Короткие ответы на частые вопросы

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

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

Что выбрать: адаптив или мобильную версию?

Для нового сайта — адаптив: его рекомендуют и Google, и справка Яндекса описывает его первым, а правки вносятся в одном месте. Отдельная мобильная версия имеет смысл как временное решение для старого сайта, который нельзя переверстать.

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

Откройте его на телефоне и проведите пальцем влево-вправо: если страница сдвигается вбок, а текст приходится приближать, адаптива нет или он сломан. На компьютере то же видно в режиме устройств инструментов разработчика браузера Chrome, а в Яндекс Вебмастере есть инструмент «Проверка мобильных страниц».

Влияет ли мобильная версия на позиции в поиске?

Да. Google индексирует и ранжирует сайты по их мобильной версии, а Яндекс старается показывать в мобильном поиске мобильный вид сайта. Сайт, который вообще не открывается на телефоне, Google перестаёт индексировать; неудобный — остаётся в поиске, но с ним хуже работают посетители.

Сколько стоит сделать адаптив для готового сайта?

В прайсе Roboweb адаптив входит в редизайн — от 29 000 ₽ за 2–3 дня, без переезда и смены адресов страниц. Условие — доступ к исходникам и платформа, которая позволяет менять вёрстку; точную сумму называем после брифа.

Входит ли адаптив в новый сайт?

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

Услуги и кейсы по теме: лендинги · редизайн сайта · кейс «Юнит-1»: лендинг строительной компании · цены и сроки