Адаптивный дизайн
Адаптивный дизайн — подход к проектированию сайтов, при котором интерфейс автоматически перестраивается под размер экрана: десктоп, планшет, смартфон. Один HTML, разные раскладки.
Определение адаптивного дизайна
Адаптивный дизайн (responsive design) — технология вёрстки, при которой одна страница автоматически адаптирует расположение элементов, размер шрифтов и навигацию под ширину экрана пользователя. Термин ввёл Итан Маркотт в статье на A List Apart в 2010 году. По данным StatCounter, в 2024 году мобильный трафик составляет 56% веб-трафика в мире и 58% в РФ. Сайт без адаптива теряет половину аудитории и проседает в выдаче: Google перевёл индексацию на mobile-first в 2019 году, Яндекс учитывает мобильную пригодность с 2016 года (алгоритм «Владивосток»).
Подходы: responsive, adaptive, mobile-first
Под общим зонтиком «адаптивности» существуют три разных инженерных подхода, и их часто путают.
| Подход | Как устроен | Когда выбирать |
|---|---|---|
| Responsive (резиновый) | Гибкая сетка на процентах и rem, плавно тянется между брейкпойнтами | Дефолт для 90% сайтов: лендинги, корпоративные, блоги |
| Adaptive (отзывчивый) | Несколько фиксированных макетов, сервер отдаёт нужный по ширине | Тяжёлые приложения, где под каждое устройство нужна своя логика |
| Mobile-first | Проектирование начинается с экрана 360 px, дальше расширяется вверх | Проекты, где мобильный трафик более 60%: e-commerce, услуги |
На практике побеждает связка responsive + mobile-first: сначала мобильный макет, затем через media queries добавляют колонки для широких экранов. Эта логика с 2015 года заложена в Bootstrap и Tailwind CSS по умолчанию.
Как работает адаптивный дизайн
Реализация — через CSS media queries, гибкую сетку (flexbox, CSS Grid) и относительные единицы (%, rem, vw вместо фиксированных px). Дизайн проектируется в трёх-пяти брейкпойнтах. Адаптив — обязательный этап разработки сайта и часть общего фирменного стиля: на всех устройствах бренд должен выглядеть одинаково узнаваемо.
| Брейкпойнт | Ширина | Типичные устройства |
|---|---|---|
| Mobile S | 320–480 px | iPhone SE, бюджетные Android |
| Mobile L | 481–768 px | iPhone Pro, средний Android |
| Tablet | 769–1024 px | iPad, Android-планшеты |
| Desktop | 1025–1440 px | ноутбуки, средние мониторы |
| Wide | 1441+ px | 24-дюймовые мониторы и больше, 4K |
Стандартный подход — mobile-first: сначала проектируется мобильная версия, затем макет расширяется до десктопа. Без строки viewport в head (width=device-width, initial-scale=1) смартфон отрисует страницу в окне 980 px и уменьшит масштаб — media queries не сработают.
Инструменты и метрики
Адаптивность проверяют по двум осям: корректность раскладки и скорость на слабом мобильном железе.
| Что проверяем | Инструмент | Порог |
|---|---|---|
| Раскладка на разных экранах | DevTools Chrome (около 20 пресетов), реальные устройства | Без горизонтального скролла на 360 px |
| Мобильная пригодность | Google PageSpeed Insights, Яндекс Вебмастер | Без ошибок «текст мелкий», «элементы близко» |
| Скорость и стабильность | Core Web Vitals через PageSpeed | LCP до 2,5 с, CLS до 0,1, INP до 200 мс |
Мини-кейс: на сайте услуг с 70% мобильного трафика горизонтальный скролл и кнопка заявки шириной 28 px давали отказ 71% на смартфонах. После перевода на mobile-first, увеличения touch-зоны до 48 px и шрифта до 16 px отказы упали до 49%, а конверсия в заявку выросла с 1,3% до 2,1% за полтора месяца.
Частые ошибки
- Отсутствие viewport meta-tag — самая частая причина «сломанного» мобильного: media queries написаны, но не применяются.
- Фиксированные ширины в px у контейнеров и картинок — блок не помещается в экран 360 px и вылезает за край, появляется горизонтальный скролл.
- Шрифт тела меньше 16 px — Safari на iOS зумит поле ввода при фокусе, страница «прыгает».
- Touch-зоны меньше 44×44 px — палец промахивается по кнопкам; Apple требует минимум 44 px, Material Design — 48 px.
- Скрытие важного контента — display: none на важных блоках ради «чистого мобильного» лишает пользователей информации и SEO-веса.
Связанные концепции
- UX — на мобильном пользовательский путь короче и менее терпелив; адаптив должен учитывать пальцы (touch-зоны 44×44 px минимум) и одно направление скролла.
- UI — визуальная составляющая дизайна, которая в адаптиве масштабируется и перестраивается по правилам сетки.
- Core Web Vitals — Google измеряет эти метрики скорости отдельно на мобильных и десктопе и для мобильной выдачи использует только мобильные значения.
- Лендинг — формат, где адаптив критичен: вся посадочная страница и форма заявки должны идеально работать на смартфоне.
- CMS — современные шаблоны Tilda, Bitrix и WordPress адаптивны по умолчанию, но требуют ручной проверки нестандартных блоков.
Частые вопросы
Чем адаптивный дизайн отличается от мобильной версии?
Адаптивный — один HTML с CSS-правилами под разные экраны, одна копия сайта и один URL. Мобильная версия (m.example.com) — отдельный сайт с дублированным контентом, который поддерживается параллельно. С 2019 года Google индексирует по mobile-first, и адаптив стал рекомендуемым подходом. Отдельная m-версия осталась лишь у некоторых крупных порталов с особой логикой.
Сколько брейкпойнтов нужно?
Минимум три: мобайл, планшет, десктоп. Современный стандарт — 4–5 точек с учётом крупных мониторов от 1920 px. Bootstrap использует 5 (xs, sm, md, lg, xl), Tailwind CSS — тоже 5 по умолчанию. Меньше трёх — проблемы на промежуточных устройствах, больше шести — переусложнение поддержки без заметной пользы.
Какой размер шрифта на мобильном?
Минимум 16 px для основного текста: при меньшем размере Safari на iOS автоматически зумит поле ввода. Заголовок H1 — 24–32 px. Кнопки — высотой минимум 44 px по гайдлайнам Apple и 48 px по Material Design. На десктопе шрифты увеличивают на 20–40%, а отступы — на 50–100%.
Что делать с таблицами на мобильном?
Три рабочих подхода. Первый — горизонтальный скролл всей таблицы через overflow-x: auto. Второй — карточный вид: каждая строка превращается в карточку с парами «колонка: значение». Третий — скрытие неприоритетных колонок через display: none. Для больших массивов данных предпочтителен карточный вид — он читается без горизонтального движения.
Как тестировать адаптивный дизайн?
Минимум — DevTools Chrome или Firefox с пресетами устройств. Полноценная проверка — на реальном железе: хотя бы один iPhone, один Android и планшет. Облачные сервисы кросс-браузерного теста: BrowserStack, LambdaTest. Перед запуском в РФ проверьте сайт в мобильном Яндекс Браузере — у него своя отрисовка части CSS-свойств.
Адаптивный дизайн дороже обычного?
Сегодня адаптив — норма, а не опция: верстальщики работают в mobile-first по умолчанию, фреймворки адаптивны из коробки. Надбавка к стоимости простой вёрстки — в пределах 10–20% за нестандартные блоки. Заказ «неадаптивного» сайта в 2026 году обойдётся не дешевле, а в перспективе дороже из-за потерь трафика и SEO.