C недавних пор в мире веб-разработки появились два весьма неоднозначных понятия: адаптивный веб-дизайн и отзывчивый веб-дизайн. Разговоры об этих направлениях в дизайне появились после выхода книги «Отзывчивый веб-дизайн», написанной Аароном Густафсоном и Итаном Маркотта. Сообщество веб-дизайнеров разделилось на два фронта: одни считают, что эти понятия имеют один и тот же смысл, другие уверены, в том, что это совершенно разные вещи.

Отзывчивый веб-дизайн

Разберемся же, что именно означают эти термины. Отзывчивый веб-дизайн (Responsive Web Design), считается частью такого широкого понятия, как адаптивный веб-дизайн (Adaptive Web Design). Понятие отзывчивого веб-дизайна включает в себя сами макеты страниц, разработанные в соответствии с принципом «резины», то есть с изменяемым размером некоторых блоков и изображений, а также с медиазапросами.

Адаптивный веб-дизайн

В свою очередь, адаптивный веб-дизайн – это не только «резиновый» макет. Этот вид дизайна включает в себя значительно больше, в том числе и прогрессивное улучшение, то есть стремление охватить как можно широкую аудиторию. Прогрессивное улучшение подразумевает создание более динамичного и красочного сайта с использованием CSS3 и HTML5, а также обеспечение его корректного отображения на любых устройствах вплоть до мобильных телефонов. И еще разными понятиями в веб-разработке, является адаптивный дизайн и адаптивный макет. Не стоит их путать.

Адаптивный макет представляет собой макет сайта, в который входят несколько блоков фиксированной ширины. И при этом веб-дизайн считается отзывчивым, если в макете блоки фиксированной ширины комбинируются с «резиновыми». То есть такой подход предполагает, что веб-разработчик будет задавать значения размеров блоков и отступов в процентном соотношении. А в адаптивном дизайне часть блоков имеют минимальную фиксированную ширину в пикселях. Кроме того адаптивный веб-дизайн подразумевает использование определенных стилевых значений для просмотра сайта на каком-либо определенном устройстве, то есть разные стили для разных размеров окна браузера.