Адаптивный дизайн (Responsive Design)

Адаптивный дизайн — подход к дизайну и разработке, при котором сайты плавно подстраиваются под размер экрана пользователя: один и тот же HTML, разный layout в зависимости от viewport. Термин в 2010 году ввёл Итан Маркотт с тремя техническими столпами: fluid grids (процентные ширины вместо фиксированных пикселей), flexible images (max-width: 100 %) и media queries (CSS-правила, срабатывающие на определённых breakpoints). Сегодня адаптивный дизайн — не опция. С 2019 года Google использует mobile-first индексацию: для ранжирования основой служит мобильная версия. 60–70 % трафика в B2C и 40–55 % в B2B приходит со смартфонов. Кто до сих пор держит desktop-оптимизированный сайт с отдельным m.*-URL, теряет и позиции, и пользователей. Современный подход — mobile-first design: layout и приоритизация контента сначала проектируются под экран 375 px, затем через progressive enhancement расширяются под tablet (768 px) и desktop (1280 px+). Технические best practices: breakpoints Tailwind или CSS Container Queries, rem-единицы вместо px для типографики, SVG вместо PNG для иконок (масштабируется без потерь), srcset для разных DPI, тач-таргеты минимум 44 × 44 px, формы с правильным type-атрибутом для мобильных клавиатур (type="email", inputmode="tel"). Частые ошибки: строить десктоп-дизайн первым и «как-то впихивать» в мобильный (получается крошечный текст и горизонтальный скролл), fixed-позиционированные элементы, закрывающие пол-экрана, tap-таргеты меньше 40 px, performance-bloat от неиспользованных desktop-ассетов. Core Web Vitals тесно связаны с адаптивным дизайном: LCP, INP и CLS измеряются прежде всего на мобильных и напрямую влияют на рейтинги.