Адаптивная вёрстка: принципы и проверка

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

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

По данным Яндекс.Радара, более 70% пользователей Рунета заходят на сайты с мобильных устройств. Google использует mobile-first индексацию — то есть оценивает сайт прежде всего по мобильной версии. Без адаптивности сайт теряет и пользователей, и позиции в поисковой выдаче.

Принципы адаптивной вёрстки

Mobile First

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

Гибкая сетка (Fluid Grid)

Используйте относительные единицы (%, vw, vh, rem) вместо фиксированных пикселей. CSS Grid и Flexbox — основные инструменты для создания гибких сеток.

Медиа-запросы (Media Queries)

CSS-правила, которые применяются при определённой ширине экрана. Стандартные брейкпоинты: 320px (мобильный), 768px (планшет), 1024px (ноутбук), 1440px (десктоп).

Гибкие изображения

Изображения должны масштабироваться вместе с контейнером. Используйте max-width: 100%, атрибуты srcset и тег <picture> для отдачи разных размеров изображений. Подробнее про оптимизацию изображений читайте в статье про формат WebP.

Чек-лист проверки адаптивности

• Текст читается без горизонтальной прокрутки на экране 320px
• Кнопки и ссылки имеют область нажатия не менее 44×44px
• Меню удобно работает на мобильных (бургер-меню)
• Формы корректно отображаются и работают на всех устройствах
• Изображения не выходят за границы экрана
• Таблицы адаптированы (горизонтальный скролл или переформатирование)
• Видео масштабируется пропорционально
• Попапы и модальные окна корректно работают на мобильных
• Шрифт не менее 16px для основного текста на мобильных
• Межстрочный интервал (line-height) не менее 1.5

Инструменты проверки адаптивности

• Chrome DevTools — встроенный эмулятор устройств (F12 → Toggle Device Toolbar)
• Google Mobile-Friendly Test — проверка мобильной дружелюбности от Google
• BrowserStack — тестирование на реальных устройствах в облаке
• Responsively App — бесплатный инструмент для одновременного просмотра на нескольких экранах
• PageSpeed Insights — показывает проблемы мобильной версии (подробнее в статье про оптимизацию PageSpeed)

Типичные ошибки адаптивной вёрстки

• Скрытие контента на мобильных — информация должна быть доступна, просто по-другому организована
• Слишком мелкие элементы управления — кнопки, ссылки, поля форм должны быть удобны для пальца
• Горизонтальная прокрутка — абсолютное зло на мобильных устройствах
• Тяжёлые изображения — на мобильных нужно отдавать уменьшенные версии
• Не тестируют на реальных устройствах — эмулятор не заменяет реальный смартфон

Адаптивность vs мобильная версия

Раньше создавали отдельную мобильную версию сайта (m.site.ru). Сегодня это устаревший подход: два сайта сложно поддерживать, и поисковые системы предпочитают единую адаптивную версию. Google прямо рекомендует адаптивный дизайн.

Нужна качественная адаптивная вёрстка? Обратитесь в DZ Digital — все наши проекты проходят тщательное тестирование на мобильных устройствах.