Что такое адаптивный дизайн
Адаптивный дизайн (responsive design) - подход к вёрстке сайтов, при котором одна и та же страница автоматически перестраивается под разные размеры экранов. На большом мониторе - в три колонки, на ноутбуке - в две, на телефоне - в одну. Без отдельной мобильной версии.
Адаптивный дизайн простыми словами
Это сайт, который сам подстраивается под устройство пользователя. Открыли на телефоне - текст крупный, кнопки большие, навигация компактная. Открыли на компьютере - картинки в полный размер, удобная сетка, развёрнутое меню. Всё это - на одной странице, без двух разных сайтов для разных устройств.
Зачем нужен адаптивный дизайн
- 60-70% трафика в большинстве ниш приходит с мобильных
- Поисковики (Яндекс и Google) понижают позиции сайтов с плохой мобильной версией
- Без адаптива пользователь видит уменьшенный десктоп с мелким текстом и неудобными кнопками
- Адаптивный дизайн дешевле в поддержке, чем отдельная мобильная версия
Как работает технически
В CSS используются медиа-запросы (media queries): "если ширина экрана меньше 768 пикселей - меняй раскладку". Дизайнер заранее проектирует макеты для 3-5 контрольных разрешений: десктоп (1920, 1440 px), планшет (1024, 768 px), мобильный (414, 375 px).
Что должно быть адаптивным
- Размеры шрифтов (крупнее на телефоне)
- Сетка раскладки (от 4 колонок к 1)
- Размеры кнопок (на мобильном минимум 44 пикселя для удобства тапа)
- Меню (на мобильном - гамбургер-меню вместо горизонтального)
- Изображения (загружаются меньшего размера на мобильном для скорости)
Чем отличается от мобильной версии
- Адаптивный дизайн. Один сайт, одна страница, разная раскладка под устройство.
- Мобильная версия. Отдельный сайт (часто m.example.com) с собственным дизайном и кодом.
Мобильная версия использовалась в 2010-х, сейчас почти везде заменена на адаптивный дизайн. Поддерживать два сайта дороже, чем один адаптивный.