Responsive Design

Адаптивный дизайн – подход к веб-дизайну, при котором сайты и приложения плавно подстраиваются под разные размеры экранов, устройства и ориентации. Он использует гибкие сетки, резиновые изображения и CSS media queries, чтобы обеспечить оптимальное отображение от настольных мониторов до мобильных телефонов. Вместо создания отдельных сайтов под каждое устройство единая кодовая база перестраивает и масштабирует контент в зависимости от размеров viewport.

Техническая основа опирается на три столпа: резиновые сетки на относительных единицах вроде процентов вместо фиксированных пикселей, гибкие медиа, масштабирующиеся внутри контейнера, и CSS media queries, применяющие разные стили на заданных контрольных точках. Современные возможности CSS – Flexbox, Grid и container queries – заметно расширили инструментарий. Сегодня адаптивный дизайн учитывает также различия в способах ввода, размеры сенсорных целей и нестабильные сетевые условия на мобильных устройствах. Google применяет mobile-first индексирование, то есть для ранжирования оценивает прежде всего мобильную версию сайта, поэтому адаптивная реализация напрямую влияет на видимость в поиске и органический трафик.