Адаптивная вёрстка: что это и почему нужна вашему сайту

Открываете сайт с телефона, а меню не работает, кнопки крохотные, текст не читается. Знакомо? Это отсутствие адаптивной вёрстки. И это стоит бизнесу 40–70% продаж.

В 2026 году 70% посетителей сайтов в России приходят со смартфонов, ещё 10% — с планшетов, и только 20% — с десктопов. Если сайт нормально работает только на большом экране, вы теряете 4 из 5 потенциальных клиентов. При этом переделка адаптива на существующем сайте стоит 30–150 тыс. ₽, тогда как сразу заложить адаптивность в разработку — почти бесплатно.

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

Что такое адаптивная вёрстка

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

Не путать с:

• Мобильная версия сайта — отдельный сайт (обычно m.site.ru) с упрощённым дизайном. Устаревший подход 2010-х.
• Резиновая вёрстка — сайт «растягивается» пропорционально. Работает плохо на очень маленьких и очень больших экранах.
• Адаптивная вёрстка — сайт перестраивается на определённых точках (breakpoint). Современный стандарт.

Breakpoint: точки переключения макета

Breakpoint — ширина экрана, на которой меняется макет. Стандартные точки в 2026:

Mobile-first: подход 2026 года

Раньше сайт делали для десктопа, потом «допиливали» под мобильные. Сейчас — наоборот: сначала мобильный макет, потом расширяют под большие экраны. Причина: 70% пользователей — на мобильных, и оптимизация под них приоритетна. Плюс mobile-first даёт лучший PageSpeed и SEO.

Что это значит на практике:

• Дизайнер сначала рисует мобильный макет, потом планшетный, потом десктоп
• Разработчик пишет CSS «от узкого к широкому» через media-запросы min-width
• Тестирование идёт с мобильных, а не с десктопов
• Google индексирует сайт «мобильным ботом» — если мобильная версия хуже, страдает весь SEO

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

1. Откройте сайт с настоящего смартфона. Не с эмулятора и не с уменьшенного окна браузера.
2. Проверьте: попадаете ли пальцем в кнопки? Читается ли текст без масштабирования?
3. Прокрутите страницу — есть ли горизонтальная прокрутка? Её быть не должно.
4. Заполните форму — удобно ли вводить? Клавиатура не перекрывает поля?
5. Проверьте через Google Mobile-Friendly Test (search.google.com/test/mobile-friendly).
6. Замерьте PageSpeed Mobile — если ниже 50, проблема не только в скорости, но и в мобильной вёрстке.
7. Откройте Search Console → Удобство пользования на мобильных — там список проблем от Google.

10 типичных ошибок мобильной вёрстки

• Кнопки меньше 44×44 px — палец не попадает
• Шрифт меньше 14 px в основном тексте — приходится увеличивать
• Горизонтальная прокрутка — плохой знак, вёрстка «поехала»
• Меню-гамбургер без обозначения (иконка есть, но неочевидная)
• Формы с полями во всю ширину, без подписей, с плохим фокусом
• Попапы, которые не закрываются на мобильном
• Табличные данные без адаптации (горизонтальный скролл или сжатые нечитаемые столбцы)
• Тяжёлые картинки без ресайза под мобильный (грузятся 8 МБ на 3G)
• Слайдеры-карусели, которые не свайпаются пальцем
• Клик по номеру телефона не открывает звонилку (нет tel:)

Плохо vs хорошо: реальный пример

Плохо: сайт стройфирмы. С десктопа — красиво. С мобильного: логотип на весь экран, меню-гамбургер спрятан в углу без подписи, hero-картинка перекрывает заголовок, кнопка «Заказать» — 30 px в ширину, форма из 8 полей без плейсхолдеров. Конверсия с мобильных — 0,3%.

Хорошо: тот же сайт после переделки. Логотип 40 px в высоту, меню с подписью «Меню», hero-заголовок читается сразу, кнопка 50 px высотой во всю ширину, форма из 3 полей (имя, телефон, сообщение). Конверсия с мобильных — 2,1%. Рост в 7 раз.

Сколько стоит адаптивная вёрстка

• При разработке нового сайта — включена в стоимость (иначе бегите)
• Переделка адаптива на лендинге: 20–50 тыс. ₽
• Переделка на корпоративном сайте: 50–120 тыс. ₽
• Переделка на интернет-магазине: 100–250 тыс. ₽
• Полный редизайн с мобильной оптимизацией — часто дешевле, чем «допилить»

Отдельно у нас на странице услуги мобильная адаптация — там подробно про процесс и цены.

Мобильная адаптивность и SEO

Google с 2020 года использует mobile-first-индексацию: сайт индексируется мобильным ботом, ранжирование определяется мобильной версией. Если мобильная вёрстка плохая, весь SEO страдает — даже если десктоп идеален. Яндекс делает похожее в 2024–2025. Для SEO адаптив — не «бонус», а базовое требование.

Тестирование: устройства, которые должны быть проверены

• iPhone SE (320 px) — самый узкий смартфон в РФ
• iPhone 12/13/14 (390 px) — средний iPhone
• Samsung Galaxy A/S (360 px)
• iPad Mini (768 px) — планшет
• iPad Pro (1024 px)
• Ноутбук (1366 px)
• Full HD десктоп (1920 px)
• 4K/UltraWide (2560 px+)

Если разработчик тестирует только «в браузере через DevTools» — это плохо. Реальные устройства ведут себя иначе: touch-события, клавиатура, ориентация. Требуйте тестирование хотя бы на 3–4 реальных устройствах.

Специфика для интернет-магазинов

У магазинов адаптив — критичен вдвойне. Мобильные покупатели чувствительны к качеству каталога, карточек товара, корзины и оформления заказа. Что должно быть на мобильном:

• Каталог — карточки товаров в 2 колонки на смартфоне, 3–4 на планшете
• Фильтры — не «сайдбар», а bottomsheet или отдельный экран
• Карточка товара — свайп-галерея, кнопка «В корзину» sticky снизу
• Корзина — одностраничная, оплата через Google Pay/Apple Pay/YooMoney
• Формы — минимум полей, автозаполнение адреса

Магазин без нормальной мобильной адаптации теряет 60–80% продаж. Разбираем это отдельно на странице интернет-магазин.

Что делать, если адаптива нет

1. Замерьте потери: сколько трафика приходит с мобильных, какая у них конверсия vs десктоп (обычно в 2–4 раза ниже, если адаптив плохой).
2. Оцените стоимость переделки: 30–150 тыс. ₽ или полный редизайн.
3. Посчитайте окупаемость: если рост конверсии на 30% даёт +100 тыс. ₽/мес прибыли, переделка окупается за 1–2 месяца.
4. Заказывайте у команды, которая делает mobile-first. См. как выбрать подрядчика.

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

Хотите проверить адаптив своего сайта?

Мы делаем бесплатный аудит адаптивности в рамках консультации и переделываем в рамках мобильной адаптации. Смотрите также скорость загрузки сайта — обычно проблемы адаптива и скорости идут в паре.