Адаптивный веб-дизайн (в английском языке «responsive web design») - это дизайн веб-страниц, обеспечивающий отличное восприятие на различных устройствах, подключенных к Интернету. Это значит, что один и тот же сайт можно просматривать на самых разных устройствах, независимо от разрешения и формата экрана, - смартфонах, планшетах, ноутбуках и т.д. Адаптивный дизайн - это один из вариантов реализации мобильной версии сайта. Главной чертой адаптивного дизайна является отсутствие отдельной версии сайта.

Верстка адаптивного дизайна производится благодаря CSS3, с помощью медиа-запросов - Media Queries. Самое важное, что адаптивный дизайн выполняется один для всех устройств, как для компьютеров, так и для телефонов и планшетов, то есть он не является отдельным сайтом. Целью адаптивного веб-дизайна является универсальность отображения содержимого веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств форматов и с экранами различных разрешений, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств.

Сегодня подобный дизайн страниц сайта является не просто модным, а необходимым в веб-разработке. Причиной этому служит большое количество различных устройств и платформ, которые отличаются разными разрешениями. Адаптивная версия сайта будет работать на всех платформах с любым разрешением. Это позволяет потратить меньше усилий для реализации идеи, а также обходится заказчику намного дешевле разработки отдельной мобильной версии и версии для ПК. Согласно последним исследованиям TNS Web Index, было замечено, что в последние несколько лет с компьютеров на сайты заходит всего лишь 29% пользователей. А вот большая половина использует и компьютеры, и смартфоны или планшеты. Если принимать во внимание возрастную категорию младше 35 лет, то здесь результаты еще интереснее: только 10% пользователей вообще не пользуются мобильными устройствами для просмотра сайтов в интернете.

Первым из них был так называемый резиновый дизайн, когда контент растягивался или сжимался. Для разных разрешений стационарных мониторов такой подход был вполне применим, но адаптировать дизайн сайта для маленьких экранов смартфонов он уже не мог. Изображение и текст становились слишком мелкими. Поэтому появились более функциональные методы.

Адаптивный макет. В этом случае проект сайта создается на основе нескольких макетов, фиксированных для стандартных размеров экранов. Фактически дизайнер проектирует несколько разных дизайнов, между которыми выполняется автоматическое переключение. Размеры блоков сайта в этом случае всегда заданы жестко (в px).

Отзывчивый макет. При таком подходе создается проект сайта с гибкой сеткой, гибкими изображениями и медиазапросами. Иначе говоря, размер блоков задается не в пикселях, а в процентах от размера экрана. Для такого дизайна не имеет значения, открыт сайт на мобильном устройстве или на десктопе - макет в любом случае будет выглядеть хорошо.

Смешанный макет. Если дизайнер хочет сделать макет максимально адаптированным к всевозможным размерам экранов, он может комбинировать оба подхода. В одних случаях выставлять размеры в пикселях, в других - в процентах, увеличить насколько возможно количество возможных разрешений экранов. Такой подход называют mobile last (от англ. - «последними мобильные»). Его чаще всего используют при создании мобильного сайта на основе классического. Обратите внимание, что термин «адаптивный макет сайта» - это совсем не то же самое, что адаптивный дизайн сайта. Макет - это лишь изображение, показывающее расположение элементов сайта.

В отличие от ресурса, который адаптирован и имеет один URL, мобильная модификация создается на поддомене. Мобильная версия сайта подразумевает максимальное упрощение страницы, избавление части контента и функциональных возможностей. Наряду с более быстрой загрузкой (адаптивная версия веб-страниц в этом проигрывает и требует дополнительной оптимизации скорости загрузки), создание мобильной версии ресурса дорогостоящее и стоит столько же, как и разработка мобильного приложения. Все недостатки гибкого сайта являются достоинствами мобильного типа сайта, а его недостатки - преимуществами адаптивного сайта. Так или иначе, это принципиально различные версии веб-ресурса, они требуют разных технических действий, поэтому сама страница по-разному выглядит при загрузке с мобильного устройства.