Разница между адаптивным (Adaptive) и отзывчивым (Responsive) дизайном

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

Адаптивный (Adaptive) веб-дизайн представляет собой набор дизайнерских методов, опирающихся на опыт применения различных устройств пользователем, а не на сам браузер. Он создается путем наложения определенных размеров, CSS и JavaScript кодов таким образом, чтобы пользователь мог применять имеющееся в наличии оборудование. Адаптивный дизайн, по сути, является синонимом “прогрессивного улучшения (progressive enhancement)”.

В отличии от адаптивного дизайна, который означает «резиновый» макет, изменяющийся в зависимости от установленного экрана и размера устройств, отзывчивый (responsive) дизайн — это, в действительности, разновидность адаптивного дизайна, представляющая собой только «резиновый» макет, т.е. макет, который трансформируется в зависимости от ширины экрана.

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

Сайты, основывающиеся на отзывчивом (responsive) дизайне, предоставляют всем устройствам одни и те же наборы URL, где каждый URL обеспечивает все устройства общим HTML кодом, поэтому модификация сайта под различные экраны достигается путем использования лишь CSS кода. Сайты, сверстанные на адаптивном (adaptive) веб-дизайне, динамически сообщают всем устройствам общие URL, но каждый URL содержит различный HTML (и CSS) код, в зависимости от типа аппаратного обеспечения.