Что такое адаптивный сайт?
Адаптивный сайт показывает один и тот же контент на устройствах с экраном от 360 до 1920 пикселей и шире, меняя только раскладку. На смартфоне блоки встают в одну колонку, меню прячется за кнопку, таблицы прокручиваются внутри своего контейнера, а текст остаётся читаемым без увеличения пальцами. Адрес страницы, код и тексты общие для всех устройств, поэтому правка делается один раз. Google индексирует сайты по мобильной версии страниц (mobile-first indexing), так что корректное отображение на мобильных устройствах давно стало базовым требованием, а не опцией.
Адаптив, мобильная версия и приложение: характеристики
Мобильных пользователей обслуживают 3 способами, и основные параметры у этих способов сильно различаются:
| Характеристика | Адаптивный сайт | Отдельная мобильная версия | Приложение (PWA или из магазина) |
|---|---|---|---|
| Адрес | один для всех устройств | отдельный, обычно m.site.ru | иконка на экране телефона |
| Код и контент | общие | два шаблона, контент нужно синхронизировать | PWA использует код сайта, нативное приложение пишут заново |
| Поддержка | одна кодовая база | две версии, правки дважды | сайт плюс приложение, публикация обновлений в магазинах |
| SEO | проще всего: один адрес и одна страница | нужны связки rel=alternate и canonical | приложение не заменяет сайт в поиске |
| Когда выбирать | почти всегда | тяжёлый старый сайт, который пока нельзя переделать | частые повторные визиты, push-уведомления, офлайн |
Google прямо рекомендует адаптивный дизайн как самый простой для поддержки вариант мобильной версии.
Мобильная разработка сайта: что выбрать бизнесу
Из 3 вариантов мобильной разработки сайта бизнесу почти всегда подходит адаптив: сайту услуг, интернет-магазину и корпоративному сайту не нужны две версии и тем более приложение. Отдельную мобильную версию делают, когда большой старый сайт нельзя переверстать быстро, а мобильный трафик терять уже нельзя. Приложение оправдано, если пользователь возвращается часто: заказывает еду, записывается к мастеру, смотрит баланс в личном кабинете. В остальных случаях деньги лучше вложить в удобный адаптивный интерфейс и скорость загрузки.
Что такое адаптивная вёрстка сайта?
Адаптивная вёрстка сайта держится на 4 инструментах CSS: мета-теге viewport, гибких сетках, относительных единицах размера и медиазапросах. Viewport сообщает браузеру реальный размер экрана, сетки на Flexbox и Grid перестраивают блоки, относительные единицы масштабируют шрифты и отступы, а медиазапросы меняют раскладку в контрольных точках. Без адаптивной вёрстки смартфон рисует страницу как на компьютере и уменьшает её целиком, и пользователю приходится увеличивать текст пальцами. Адаптивную вёрстку закладывают в код с первой строки, а не добавляют в конце проекта.
Как устроена адаптивная вёрстка: 6 приёмов
- Мета-тег viewport со значением width=device-width, initial-scale=1. Без него мобильные браузеры показывают страницу в условной ширине около 980 пикселей и уменьшают её под экран.
- Гибкие сетки. CSS Grid с функциями minmax() и auto-fit сам решает, сколько карточек поместится в ряд, а Flexbox переносит элементы на новую строку без отдельного кода под каждый размер.
- Относительные единицы. Размеры в rem, процентах и единицах vw, а для заголовков функция clamp(): размер шрифта плавно растёт от минимального на смартфоне до максимального на мониторе.
- Медиазапросы и контейнерные запросы. Пример медиазапроса: @media (min-width: 768px) меняет раскладку, когда окно шире 768 пикселей. Правило @container меняет вид блока по размеру его родителя, и такие запросы уже поддерживают все современные браузеры.
- Адаптивные изображения. Атрибуты srcset и sizes отдают смартфону картинку меньшего размера, тег picture подставляет другой кадр, форматы WebP и AVIF уменьшают вес. Атрибуты width и height у изображения бронируют место, и страница не прыгает при загрузке.
- Учёт сенсорного ввода. Наведения на телефоне нет, поэтому важные действия не прячут в подсказки по hover, а эффекты наведения включают только медиазапросом (hover: hover).
В адаптивной вёрстке нет одного правильного шаблона: приёмы сочетают под структуру конкретной страницы. Простой пример: каталог товаров в адаптивной вёрстке на Grid показывает 4 карточки в ряд на ноутбуке, 2 на планшете и 1 на смартфоне без единого медиазапроса.
Под какие ширины экрана верстать?
Контрольные точки адаптивной вёрстки ставят по 4 группам устройств, но проверяют страницу на всём диапазоне, а не только в этих точках:
| Устройство | Ширина в CSS-пикселях | Что обычно меняется в макете |
|---|---|---|
| Смартфон | 360-430 | одна колонка, меню за кнопкой, крупные кнопки и поля форм |
| Планшет | 768-1024 | две колонки, часть меню видна, карточки по 2-3 в ряд |
| Ноутбук | 1280-1536 | полная раскладка десктопа, боковые колонки |
| Монитор | от 1920 | ограничение ширины контента, чтобы строки не растягивались |
Реальные размеры экранов вашей аудитории показывают отчёты группы «Технологии» в Яндекс Метрике. Точку перелома ставят там, где ломается контент, а не под модель конкретного телефона.
Как делают адаптивный дизайн сайта?
Адаптивный дизайн сайта рисуют минимум в 3 макетах: для смартфона, планшета и компьютера, причём чаще начинают с узкого экрана (подход mobile first). На смартфоне помещается мало, поэтому сразу видно, какой контент главный, а какой можно убрать ниже. Макеты собирают из компонентов с автоматической раскладкой (Auto Layout в Figma), и верстальщик видит, как ведут себя кнопки, карточки и формы при сужении. В макете дизайнер показывает и состояния интерфейса: открытое меню, ошибку в поле, длинное название товара. Подробнее о процессе рассказали в статье про веб-дизайн.
Правила удобного мобильного интерфейса
Адаптивный дизайн проверяют по 6 правилам, которые чаще всего нарушают в мобильной версии:
- Крупные кнопки
WCAG 2.2 требует зону нажатия не меньше 24 на 24 CSS-пикселя, Apple рекомендует 44 на 44 пункта, Google в Material Design 48 на 48. Мелкие ссылки рядом друг с другом дают промахи пальца пользователя.
- Шрифт в полях от 16 пикселей
Safari на iPhone увеличивает страницу при фокусе на поле с более мелким шрифтом, и интерфейс уезжает за край экрана.
- Правильная клавиатура
Типы полей tel и email, атрибуты inputmode и autocomplete открывают цифровую клавиатуру и подставляют данные пользователя.
- Главное действие под пальцем
Кнопка заказа или звонка в зоне большого пальца, ссылка tel: на номере телефона, короткие формы без лишних полей.
- Никакой горизонтальной прокрутки
Страница не шире экрана, длинные таблицы и код прокручиваются внутри своих блоков.
- Читаемый текст
Основной текст от 16 пикселей, достаточный контраст и межстрочный интервал, длинные строки разбиты на абзацы.
Как сделать мобильную версию сайта?
Мобильную версию сайта делают за 6 шагов, и первый из них не вёрстка, а аналитика:
- 01Посмотреть данные
В Метрике сравните долю визитов со смартфонов, отказы и конверсию по типам устройств. Так видно, где сайт теряет пользователей.
- 02Выбрать способ
Адаптив в текущем коде, редизайн или отдельная версия. Если сайт свёрстан таблицами или на устаревшем шаблоне, адаптивную вёрстку проще сделать в рамках редизайна.
- 03Собрать структуру экрана
Порядок блоков на узком экране, мобильное меню, формы. Удобно начать с прототипа для смартфона.
- 04Нарисовать макеты
Минимум 3 размера экрана: смартфон, планшет, компьютер, с состояниями элементов интерфейса.
- 05Сверстать
Viewport, гибкие сетки, медиазапросы, адаптивные изображения, проверка Core Web Vitals на мобильном.
- 06Проверить на реальных устройствах
Эмулятор не ловит всё: шрифты, клавиатуру, вырезы экрана и скорость на мобильной сети видно только на живом телефоне. Там же проверяют, корректно ли отправляются формы.
Создать мобильную версию в конструкторе проще: стандартные блоки уже адаптивны, а свободные блоки (в Тильде это Zero Block) раскладывают вручную под каждый размер. Плюсы и минусы этого пути разобрали в статье о сайте на Тильде.
Как сделать приложение из сайта?
Приложение из сайта делают 3 способами: PWA, обёрткой для магазинов приложений и нативной разработкой. PWA (прогрессивное веб-приложение) ставится на экран смартфона прямо из браузера и работает на коде сайта. Обёртка показывает сайт внутри приложения и публикуется в Google Play или RuStore. Нативное приложение пишут отдельно под iOS и Android, и по сути это новый продукт с отдельным бюджетом. Для большинства бизнесов первым шагом хватает PWA: иконка на экране, запуск без адресной строки и push-уведомления без публикации в магазинах.
Что нужно, чтобы создать PWA
Для PWA нужны 3 технические части и 2 способа установки:
- HTTPS. Без защищённого соединения браузер не предложит установку.
- Манифест веб-приложения. Файл с названием, иконками размером 192 и 512 пикселей, стартовым адресом start_url и режимом display: standalone, в котором приложение открывается без интерфейса браузера.
- Сервис-воркер. Скрипт кеширует файлы, позволяет открывать страницы при слабой связи и принимать push-уведомления.
- Установка на Android. Chrome сам предлагает установить приложение, или пользователь выбирает пункт «Установить приложение» в меню.
- Установка на iPhone. В Safari кнопка «Поделиться» и пункт «На экран «Домой»». Push-уведомления для таких приложений Apple поддерживает с iOS 16.4.
Публикация в магазинах приложений: 3 пути
- Google Play. PWA упаковывают в Android-приложение по технологии Trusted Web Activity (инструменты Bubblewrap или PWABuilder), а право на домен подтверждают файлом assetlinks.json.
- Обёртка WebView. Фреймворки Capacitor и Cordova собирают приложение из веб-кода и дают доступ к камере, геолокации и другим функциям телефона.
- App Store. Apple по правилу 4.2 руководства для разработчиков отклоняет приложения, которые просто повторяют сайт: нужны функции, которых на сайте нет.
Стандарты и требования к мобильной версии
Перед запуском мобильную версию сверяют с 5 требованиями:
- Core Web Vitals на мобильном: LCP до 2,5 с, INP до 200 мс, CLS до 0,1. Медленный сайт на телефоне теряет посетителей ещё до первого экрана, подробнее в статье о скорости загрузки.
- Индексация по мобильной версии: у Google основная версия страницы для индекса мобильная, поэтому на смартфоне должен быть весь важный контент, а не урезанный.
- Доступность: зона нажатия не меньше 24 на 24 CSS-пикселя (WCAG 2.2), контраст текста, подписи к полям форм.
- Формы по 152-ФЗ от 27.07.2006: согласие на обработку персональных данных и ссылка на политику видны и на узком экране.
- Валидный код и разметка Schema.org одинаковы для всех устройств, потому что страница одна.
Как проверить адаптив сайта и работы подрядчика?
Адаптив проверяют 4 способами, и ни один не заменяет остальные. Режим устройств в инструментах разработчика Chrome (F12, затем Ctrl+Shift+M) показывает страницу на экране любого размера. PageSpeed Insights на вкладке для мобильных измеряет скорость. Инструмент «Проверка мобильных страниц» в Вебмастере показывает, как страницу видит поисковый робот. Последний и самый честный способ: открыть сайт на своём телефоне, заполнить форму и пройти путь до заявки.
Так же проверяют подрядчика. Отзывы на сайте студии ничего не скажут о вёрстке, а живой проект скажет: откройте работы из портфолио с телефона. Хороший пример для проверки: у интернет-магазина Rilis каталог на 7 774 позиции и 182 подкатегории, и на смартфоне легко понять, корректно ли работает поиск товара и удобно ли оформлять заказ.
Сколько стоит адаптивный сайт?
Адаптивная вёрстка входит в стоимость любого нового сайта: лендинг с мобильной версией стоит от 95 000 ₽ и делается от 2 недель. Отдельно платить за адаптив приходится только при доработке старого сайта. Цены на октябрь 2026 года указаны «от», смету фиксируем в договоре, этапы оплаты договорные.
| Задача | Цена | Срок |
|---|---|---|
| Новый лендинг с адаптивом | от 95 000 ₽ | от 2 недель |
| Корпоративный сайт с адаптивом | от 250 000 ₽ | от 4 недель |
| Редизайн старого сайта под мобильные устройства | от 90 000 ₽ | от 3 недель |
| Доработка адаптива на текущем сайте | от 30 000 ₽ в месяц в рамках поддержки или смета после аудита | по объёму работ |
| Разработка веб-приложения с личным кабинетом и PWA | от 150 000 ₽ | от 4 недель |
Предварительную сумму покажет калькулятор стоимости на главной.
Что советуем по опыту
Первый совет: не делайте адаптивную вёрстку заплатками поверх старого кода, если сайт свёрстан таблицами или фиксированными ширинами. Каждая новая правка ломает соседний блок, и в сумме доработки выходят дороже аккуратного редизайна. Начинайте с данных Метрики: если смартфоны дают большую часть визитов, мобильный макет рисуйте первым.
Второй совет: приложение из сайта делайте тогда, когда пользователи уже возвращаются на сайт регулярно. Для первого заказа человеку не нужна иконка на экране, ему нужна быстрая страница с понятной кнопкой. Сначала хороший адаптивный сайт, потом PWA, и только после этого разработка нативного приложения.
Частые вопросы
Чем адаптивный сайт отличается от мобильной версии?
Адаптивный сайт один: тот же адрес и тот же код перестраиваются под размер экрана. Отдельная мобильная версия живёт на своём адресе, обычно m.site.ru, со своим шаблоном, и её контент нужно синхронизировать с основным сайтом. Для поиска и поддержки адаптив проще: одна страница, одна правка, никаких связок между версиями.
Можно ли сделать адаптив для старого сайта без редизайна?
Можно, если вёрстка построена на блоках, а не на таблицах и фиксированных ширинах: тогда добавляют viewport, медиазапросы и правят сетку. Если сайт свёрстан таблицами или на устаревшем шаблоне, правки затронут почти каждую страницу, и выгоднее редизайн от 90 000 ₽. Что подходит вашему сайту, видно после аудита кода.
Влияет ли адаптивность на позиции в поиске?
Влияет. Google индексирует страницы по мобильной версии, а Яндекс с 2016 года учитывает удобство сайта на мобильных устройствах в мобильной выдаче (алгоритм «Владивосток»). Неудобный на телефоне сайт теряет и позиции, и посетителей. При этом одна адаптивность не выводит сайт в топ: нужны контент под запросы и техническая чистота.
Сколько стоит сделать приложение из сайта?
Превратить готовый адаптивный сайт в PWA можно доработкой: в рамках поддержки от 30 000 ₽ в месяц или разовой сметой после аудита. Если приложению нужны личный кабинет, оплата и уведомления, это веб-приложение от 150 000 ₽ и от 4 недель. Нативное приложение для магазинов считают отдельным проектом.
Нужно ли адаптировать сайт под планшеты?
Нужно, хотя бы проверять. Планшет шириной 768-1024 пикселя попадает между мобильным и десктопным макетом, и именно там чаще всего ломаются меню, таблицы и карточки. Отдельный макет для планшета рисуют, если в Метрике заметная доля визитов с таких устройств. Клиентов с планшетами обычно меньше, но сломанное меню отпугнёт и их.
