Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн, в чем разница?

Источник: habrahabr

Taritsyn

С тех пор, как вышли книги "Adaptive Web Design" Аарона Густафсона и "Responsive Web Design" Итана Маркотта (русское издание называется "Отзывчивый веб-дизайн"), в сообществе веб-дизайнеров и разработчиков ведутся споры о том, чем отличаются эти 2 подхода. Одни считают, что эти 2 понятия являются синонимами, а другие, что это совершенно разные понятия. Но, как известно, истина всегда где-то посередине, поэтому предлагаю вашему вниманию перевод статьи финского веб-дизайнера и разработчика Вильями Салминена (Viljami Salminen) "Adaptive vs. Responsive, what"s the difference?":

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

"Отзывчивый веб-дизайн" (Responsive Web Design) является частью более широкого понятия, которое называется "Адаптивный веб-дизайн" (Adaptive Web Design). Когда идет речь об отзывчивом веб-дизайне, то мы имеем в виду только макет веб-страницы (Итан Маркотт, "резиновый" макет, гибкие изображения и медиазапросы).

С другой стороны, "Адаптивный веб-дизайн" включает в себя гораздо больше, чем просто "резиновый" макет. На практике это почти одно и то же, что и прогрессивное улучшение (progressive enhancement), если говорить кратко, то это понятие означает, что мы стремимся предоставить лучшие возможности для максимально широкой аудитории. Также: нельзя смешивать понятия "Адаптивный веб-дизайн" и "Адаптивный макет" (Adaptive layout), т.к. это совершенно разные вещи.

И, наконец, "Адаптивный макет" означает макет, сделанный путем сочетания множества фиксированных горизонтальных размеров (ширины). Сейчас, мне кажется, если все сделано правильно и блоки фиксированной ширины сочетаются с "резиновыми" блоками, то Адаптивный макет можно считать одной из форм отзывчивого веб-дизайна, а не просто его альтернативой. Зельдман уже высказывал немного похожую идею в 2011 году в одной из записей своего блога.

Примечание переводчика. К сожалению, из текста Вильями Сальминена сложно понять, что такое "Адаптивный макет", поэтому я постараюсь объяснить, что это означает своими словами. Подход Итана Маркотта предусматривает использование "резинового" макета (ширина, отступы и поля задаются в процентах), а адаптивный макет предполагает, что для каждого размера экрана у нас используются свои стилевые правила, в которых жестко заданы фиксированные размеры элементов (в пикселях). Более развернутое описание данного подхода вы можете найти в статье "Switchy McLayout: An Adaptive Layout Technique" (перевод).

Ссылки

Update v1. Если моя статья сделала эти 2 понятия более сложными для восприятия, чем они есть на самом деле, то постараюсь объяснить все в двух словах: отзывчивый веб-дизайн является частью адаптивного. Отзывчивый веб-дизайн = "резиновый" макет, в то время как адаптивный веб-дизайн = "резиновый" макет + прогрессивное улучшение.

Ссылки по теме