Адаптивная вёрстка
Синонимы: responsive, адаптивность, mobile-friendly
NAME
Адаптивная вёрстка — веб-разработка
DESCRIPTION
Адаптивная вёрстка — подход, при котором сайт автоматически подстраивается под размер экрана: десктоп, планшет, смартфон. Меню превращается в «гамбургер», таблицы скроллятся, кнопки становятся крупнее под палец.
Почему это обязательно в 2026:
| Фактор | Влияние |
|---|---|
| Мобильный трафик | 65-75% посетителей |
| Google Mobile-First | Ранжирует по мобильной версии |
| Яндекс | Понижает неадаптивные сайты |
| Конверсия | На кривом мобильном -50-70% |
Что проверяем при адаптации:
- Breakpoints: 320px, 768px, 1024px, 1440px, 1920px
- Текст читается без зума (шрифт от 16px)
- Кнопки от 44px (не промахнуться пальцем)
- Формы не перекрываются клавиатурой
- Таблицы скроллятся, а не ломают макет
- Тестируем на 10+ реальных устройствах
Как проверить свой сайт:
- Откройте с телефона
- Прочитайте текст без увеличения
- Заполните форму
- Пройдите Google Mobile-Friendly Test
Кейс WEBVISUAL: Клиент — интернет-магазин мебели. Было: 68% трафика с мобильных, конверсия на них 0.4%. Сделали адаптивную вёрстку (mobile-first): конверсия 1.9% (×4.7), выручка с мобильных +380% за квартал. Бюджет: 90 000 ₽.
СМ. ТАКЖЕ
Core Web Vitals(7), Фронтенд(7)