Адаптивный веб-дизайн (англ. Responsive Web Design) — дизайн веб-страниц, обеспечивающий правильное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.
Целью адаптивного веб-дизайна является универсальность отображения содержимого веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств форматов и с экранами различных разрешений, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств. Главными причинами возникновения и развития технологий адаптивного веб-дизайна стали:
увеличение количества различных разрешений устройств, с которых есть возможность выхода в интернет;
популярность мобильных устройств с выходом в интернет и увеличение мобильного интернет-трафика; рекомендации поисковых систем Яндекс и Google (отсутствие дублирующих страниц и концентрация ссылочной массы на одном домене).
в отзывчивом дизайне
применение гибкого макета на основе сетки (англ. flexible, grid-based layout);
использование гибких изображений (англ. flexible images);
работа с медиа-запросами (англ. media queries);
в дополнение к этому в адаптивном дизайне
применение постепенного улучшения;
проектирование для мобильных устройств с самых ранних этапов
Сначала мобильные («Mobile first»)
Проектирование начинается с адаптивной версии веб-сайта для мобильных устройств. На этом этапе дизайнеры стремятся правильно передать смысл и основные идеи с использованием небольшого экрана и всего одной колонки. Содержимое при необходимости сокращают, удаляя второстепенные информационные блоки и оставляя самое важное.
