RWD — адаптивная вёрстка сайтов¶

RWD (англ. Responsive Web Design, «отзывчивый веб-дизайн») — подход к проектированию и вёрстке веб-страниц, при котором интерфейс автоматически адаптируется под разрешение экрана, размер окна браузера и тип устройства (десктоп, планшет, смартфон). Основная идея RWD — одна верстка сайта, которая корректно отображается на любых устройствах без создания отдельных мобильных версий.

¶История

Термин «Responsive Web Design» ввёл американский веб-дизайнер Итан Маркотт (Ethan Marcotte) в статье, опубликованной на сайте A List Apart в мае 2010 года. В ней он описал три ключевых технологических компонента: гибкую сетку на основе относительных единиц измерения, адаптивные изображения и медиазапросы CSS3.

Идея гибкой вёрстки существовала и раньше: ещё в 1996 году веб-дизайнер Кэмерон Адамс (Cameron Adams) продемонстрировал экспериментальные приёмы адаптивности. С широким распространением смартфонов (с 2007 года, после выхода iPhone) и планшетов (после запуска iPad в 2010 году) потребность в едином адаптивном сайте стала массовой. К 2012–2013 годам RWD стал одним из основных стандартов индустрии, а в 2015 году Google официально объявил мобильную адаптацию одним из факторов ранжирования в поисковой выдаче.

¶Ключевые технологии

RWD опирается на три основных механизма веб-стандартов:

¶Гибкая (жидкая) сетка

Вместо фиксированных пиксельных ширин блоков используются относительные единицы — проценты (%), вьюпорты (vw, vh), а также модульная сетка на 12 колонок. Контейнеры задаются через max-width, width: 100%, что позволяет макету растягиваться и сжиматься вместе с окном браузера.

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

Медиазапросы CSS3 позволяют применять разные стили в зависимости от характеристик устройства: ширины экрана, высоты, ориентации, плотности пикселей (DPR). Типичный пример:

``css @media (max-width: 768px) { .sidebar { display: none; } .container { padding: 10px; } } ``

Наиболее распространённые «точки перелома» (breakpoints): 320, 480, 768, 1024, 1200 и 1440 пикселей. Выбор конкретных значений зависит от статистики разрешений аудитории конкретного сайта.

¶Адаптивные изображения

Атрибуты srcset и sizes тега <img>, а также элемент <picture> позволяют браузеру загружать изображение нужного размера и формата в зависимости от плотности экрана и ширины вьюпорта. Это экономит трафик мобильных пользователей.

¶Методологии и фреймворки

Для ускорения адаптивной вёрстки используются CSS-фреймворки:

Также применяются CSS Grid Layout — двухмерная модель сетки, появившаяся в стандартах W3C и получившая поддержку всех основных браузеров к 2017 году.

¶Мобильный и десктопный подход

Существуют две стратегии проектирования:

• Mobile-first — сначала верстается мобильная версия, затем через min-width добавляются стили для больших экранов. Рекомендуется Google и считается современным стандартом, так как улучшает производительность на слабых устройствах.
• Desktop-first — сначала верстается десктопная версия, затем через max-width упрощается для мобильных. Более традиционный подход, использовавшийся до распространения смартфонов.

¶Адаптивность и SEO

С 2015 года Google использует алгоритм Mobilegeddon, понижающий в выдаче сайты, не адаптированные для мобильных устройств. Адаптивный сайт предпочтительнее отдельной мобильной версии (m.example.com), так как весь трафик и ссылочный вес концентрируются на одном домене. Яндекс также учитывает мобильную дружелюбность при ранжировании в мобильной выдаче.

¶Критика

К недостаткам RWD относят:

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

¶См. также

• Веб-дизайн
• Каскадные таблицы стилей
• Мобильная версия сайта
• Прогрессивное веб-приложение

¶Источники

• Marcotte E. Responsive Web Design. — A List Apart, 2010.
• Маркотт И. Отзывчивая веб-разработка. — СПб.: БХВ-Петербург, 2013.
• Мейер Д., Вахт Д. CSS. Полное руководство. — 4-е изд. — М.: Вильямс, 2018.
• Документация W3C по медиазапросам и CSS Grid Layout.