Как сделать мобильную версию сайта: способы, проверка и чек-лист

Мобильная версия сайта в 2026 году — это уже не «второй сайт для телефонов». Google с июля 2024 года сканирует сайты только мобильным роботом и индексирует то, что видно с телефона. Яндекс в мобильной выдаче показывает адаптированные страницы. А покупатели открывают ссылки из рекламы, мессенджеров и карт прежде всего со смартфона.

Разбираем, чем адаптивный сайт отличается от мобильной версии, что требуют Google и Яндекс, как сделать мобильную версию на конструкторе, CMS и в коде, как нарисовать её в Figma, какие цифры проверить и чем это сделать, если привычные инструменты закрылись. Факты — по документации Google, справке Яндекса, стандарту доступности WCAG 2.2 и web.dev на ноябрь 2026 года.

Коротко: почти всем подходит адаптивный дизайн — один сайт, который сам перестраивается под ширину экрана; его рекомендует Google. Отдельную мобильную версию на поддомене m. в 2026 году с нуля делать не стоит. На конструкторе или готовом сайте мобильная версия уже есть — её нужно проверить, а не делать. Для самописного сайта нужны строка meta viewport, гибкая сетка с медиазапросами и картинки, которые сжимаются под экран. Проверяйте ширину от 320 пикселей без прокрутки вбок, кнопки не меньше 44–48 пикселей, основной текст 16 пикселей и скорость по Core Web Vitals. Google Mobile-Friendly Test закрыт с декабря 2023 года, Турбо-страницы Яндекса — с 2025 года: вместо них — Lighthouse, PageSpeed Insights и живой телефон.

Мобильная версия и адаптивный сайт: в чём разница

Google и Яндекс описывают три способа показать сайт на телефоне.

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

Что требуют Google и Яндекс в 2026 году

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

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

Яндекс проверяет 320 пикселей и подставляет мобильные адреса

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

Три мифа

• «Google резко поднимает мобильные сайты». Из всего, что Google называет удобством страницы, в ранжировании он прямо упоминает только Core Web Vitals — показатели скорости и стабильности. Но если на телефоне нет нужного текста, Google его просто не увидит.
• «Для телефонов нужны AMP и Турбо-страницы». AMP не обязательна с 2021 года, а поддержку Турбо-страниц Яндекс прекратил в 2025 году. Достаточно быстрой адаптивной страницы.
• «Мобильная версия на поддомене — это дубли и санкции». Если связать страницы аннотациями canonical и alternate, поисковики понимают, что это одна страница в двух видах. Но поддерживать два сайта сложнее, чем один.

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

Конструктор или готовый сайт — без программиста

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

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

Подробнее о выборе — в статье «Как выбрать шаблон сайта».

Сайт на CMS: адаптивная тема

Если сайт на популярной CMS, проще всего поставить адаптивную тему — их большинство. Google советует искать в документации своей CMS раздел о мобильных сайтах. Старую неадаптивную тему дешевле заменить, чем переделывать.

Самописный сайт: адаптивная вёрстка за три шага

1. Строка meta viewport. Без неё телефон рисует страницу шириной около 980 пикселей и уменьшает, и текст получается мелким:

<meta name="viewport" content="width=device-width, initial-scale=1">

Не добавляйте в неё user-scalable=no и maximum-scale=1: это запрещает увеличивать страницу пальцами и мешает людям со слабым зрением. Safari на iPhone такой запрет с iOS 10 всё равно игнорирует.

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

.cards { display: grid; gap: 16px; }
@media (min-width: 600px) {
  .cards { grid-template-columns: 1fr 1fr; }
}

3. Картинки под экран. Браузер сам выберет файл нужного размера, если перечислить варианты в srcset. Ширина и высота избавят страницу от прыжков при загрузке:

<img src="sofa-800.jpg"
  srcset="sofa-400.jpg 400w, sofa-800.jpg 800w"
  sizes="100vw" width="800" height="600"
  alt="Диван">

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

Если у вас уже есть отдельная m.-версия

Проверьте, что на каждой компьютерной странице есть ссылка rel="alternate" на мобильную пару, на мобильной — rel="canonical" на компьютерную, перенаправление ведёт на ту же страницу, а не на главную, и содержимое совпадает. Если решите перейти на адаптивный дизайн, Google советует настроить постраничное 301-перенаправление с каждого мобильного адреса на его адаптивную страницу.

Как нарисовать мобильную версию в Figma

Если сайт делает дизайнер, мобильный макет рисуют отдельным фреймом: в Figma есть готовые размеры для телефона, планшета и компьютера. Блоки собирают с автолэйаутом — элементы растягиваются и переносятся сами, и макет проще перенести в адаптивную вёрстку. Обычно рисуют два макета: телефон шириной 360–390 пикселей и компьютер, а промежуточные ширины решаются в вёрстке.

Figma в России в ноябре 2026 года работает на бесплатном тарифе Starter, а платные тарифы новым клиентам из России не продаёт. Как выбрать инструменты и подрядчика для дизайна, разобрано в статье «Как сделать дизайн сайта».

Какой должна быть мобильная версия: чек-лист в цифрах

Почему 360: по данным StatCounter за октябрь 2026 года, самые частые мобильные экраны в России — шириной от 360 до 414 пикселей, а 360 — самая распространённая ширина. По стандарту WCAG кнопка должна быть не меньше 24×24 пикселей, Apple советует 44 точки, Android — 48. Для кнопок «Купить», «В корзину» и «Позвонить» держитесь 44–48 пикселей.

Для интернет-магазина

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

Это не мелочи: по данным Baymard Institute, покупатели бросают в среднем 70 % корзин, а на телефонах риск выше. Как подключить удобную оплату, разобрано в статье «Как подключить оплату на сайте».

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

На компьютере

• Chrome: нажмите F12 и кнопку переключения устройства или сочетание Ctrl+Shift+M (на Mac — Command+Shift+M). Выберите модель телефона или задайте ширину 320, 360 и 390 пикселей.
• Яндекс Браузер: инструменты разработчика открываются сочетанием Ctrl+Shift+I, дальше режим устройства включается так же.
• Safari на Mac: режим адаптивного дизайна — Control+Command+R.

Это приближение: и Google, и Apple советуют всё равно проверять на настоящем телефоне.

На своём телефоне

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

Скорость: PageSpeed Insights и Lighthouse

PageSpeed Insights показывает два вида данных: реальные замеры посетителей в Chrome за 28 дней и лабораторную проверку Lighthouse. У небольшого сайта реальных данных может не быть — тогда смотрите на лабораторную часть и прежде всего на мобильный результат. Lighthouse встроен в Chrome: F12 → вкладка Lighthouse.

Яндекс Вебмастер и Метрика

В Яндекс Вебмастере есть инструмент «Проверка мобильных страниц». А долю посетителей с телефонов на своём сайте смотрите в Яндекс Метрике: «Отчёты» → «Технологии» → «Устройства». Если со смартфонов приходит большинство, а заказывают они реже, чем с компьютера, — начинайте улучшения с мобильной версии. Как подключить Вебмастер, есть в статье «Как сделать сайт в Яндексе».

Какие инструменты больше не работают

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

Сколько стоит мобильная версия в 2026 году

Цены — по предложениям на биржах и в каталогах агентств, ноябрь 2026 года. Чтобы сравнить сметы, просите оценку по шаблонам страниц: главная, каталог, карточка товара, корзина, текстовая страница. Общие цены на сайты — в статье «Сколько стоит сайт».

Частые ошибки

1. Нет строки meta viewport — сайт на телефоне выглядит уменьшенной копией компьютерного.
2. Масштабирование запрещено, а текст мелкий.
3. На телефоне спрятаны тексты и характеристики — Google их не проиндексирует.
4. Таблицы и картинки шире экрана, страница прокручивается вбок.
5. Кнопки маленькие и стоят вплотную — нажимается не та.
6. Всплывающее окно закрывает весь экран, а крестик крошечный.
7. Главная картинка весит несколько мегабайт.
8. Номер телефона не нажимается.
9. Мобильную версию проверяли только в эмуляторе на компьютере.
10. Для проверки используют закрытый Mobile-Friendly Test или ждут Турбо-страниц.

Мобильная версия на BITCAT

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

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

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

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

Адаптивный сайт — один сайт, который перестраивается под ширину экрана. Отдельная мобильная версия — второй сайт для телефонов, обычно на поддомене m. Сейчас почти всем подходит адаптивный вариант.

Нужна ли отдельная мобильная версия на поддомене?

Нет, если делаете сайт с нуля: Google рекомендует адаптивный дизайн, а поддерживать два сайта дороже. Если m.-версия уже есть, настройте аннотации и перенаправления или переходите на адаптив с постраничными 301-перенаправлениями.

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

В Chrome нажмите F12, затем Ctrl+Shift+M и выберите модель телефона или ширину экрана. В Яндекс Браузере инструменты открываются сочетанием Ctrl+Shift+I, в Safari на Mac режим включается сочетанием Control+Command+R.

Почему на телефоне сайт открывается как на компьютере?

Либо в браузере включена «Версия для ПК», либо на сайте нет строки meta viewport. Первое исправляется в меню браузера, второе — в коде сайта.

Можно ли сделать мобильную версию без программиста?

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

Какую ширину экрана брать для мобильного макета?

Рисуйте макет шириной 360–390 пикселей и проверяйте, что на 320 пикселях ничего не уезжает вбок. В России чаще всего встречаются экраны шириной от 360 до 414 пикселей.

Какого размера делать кнопки и текст?

Кнопки — 44–48 пикселей, абсолютный минимум по стандарту доступности — 24. Основной текст и поля ввода — 16 пикселей.

Чем проверить мобильную версию, если Mobile-Friendly Test закрыт?

Lighthouse в Chrome, PageSpeed Insights и инструментом «Проверка мобильных страниц» в Яндекс Вебмастере. И обязательно — на настоящем телефоне.

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

Да, но не так, как обещают мифы. Google индексирует мобильную версию, поэтому то, чего нет на телефоне, он не учтёт, а в ранжировании использует Core Web Vitals. Яндекс учитывает адаптированность и подставляет в мобильной выдаче адаптированные страницы.

Работает ли Figma в России?

Бесплатный тариф Starter работает, а платные тарифы новым клиентам из России Figma не продаёт. Для мобильного макета бесплатного тарифа обычно хватает.

Итог

Мобильная версия в 2026 году — это адаптивный сайт, который одинаково хорошо работает на экране от 320 пикселей и на компьютере. На конструкторе или готовом сайте она уже есть: проверьте её по чек-листу и на настоящем телефоне. На самописном сайте начните со строки viewport, гибкой сетки и сжатых картинок. Не прячьте контент от телефона, не запрещайте масштабирование и проверяйте скорость в PageSpeed Insights — закрытые инструменты прошлых лет больше не помогут.

Статья актуальна на ноябрь 2026 года. Цены — по открытым предложениям на биржах и в каталогах агентств, у конкретных исполнителей они могут отличаться.