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

 Существует два принципиально разных подхода к созданию дизайна сайтов для мобильных: Adaptive web design и Responsive web design.

Что такое отзывчивый дизайн

Отзывчивый дизайн (Responsive website design) — подход к созданию дизайна сайта, при котором сайт разрабатывается с расчетом на то, чтобы обеспечить наиболее простое его использование: удобный просмотр сайта с минимумом ресайзов и лишних прокруток — на самом широком спектре устройств.

Отзывчивый дизайн обладает следующими особенностями:

  • При верстке отзывчивого дизайна используются исключитьельно HTML и CSS — без подключения JavaScript для определения «отзвычивости» элементов дизайна.
  • Отзывчивая верстка определяет, как будут выглядеть элементы сайта на разных устройствах; однако эти элементы не скрываются/не заменяются другими, а их поведение, равно как и выполняемые ими функции, не меняется.

Три основных принципа отзывчивого дизайна:

  1. расположение всех элементов в рамках модульной сетки;
  2. все элементы верстки и медиа-файлы (в т.ч. изображения) являются «резиновыми» (flexible) — их размеры зависят от размера экрана;
  3. работа с Media queries — модулем CSS3, позволяющим задавать разные стили (или даже таблицы стилей) в зависимости от разрешения экрана, его размеров и прочих харатеристик.
Что такое адаптивный дизайн сайта

Адаптивный дизайн сайта (Adaptive website design) — это дизайн, основанный на операциях с разными макетами сайта или его разметкой для обеспечения наилучшего его использования на определенных, заданных заранее устройствах и разрешениях экрана. При этом элементы сайта могут скрываться, заменяться другими; могут меняться поведение и функции отдельно взятых элементов веб-сайта.

Обеспечение одинакового вида сайта и его функционала в разных браузерах не является обязательным при создании адаптивного дизайна.

Путаница в определениях

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

Особенности подходов

Несколько ключевых отличий между сайтами с “адаптивным” и “отзывчивым дизайном” :

  • Скорость работы сайта. Сайт, созданный по принципам адаптивного дизайна, может загружаться в несколько раз быстрее, так как пользователю будет необходимо загружать с сервера только те части дизайна, которые необходимы для работы сайта на его устройстве. В случае с отзывчивым дизайном пользователь будет вынужден ждать, пока загрузятся все стили и изображения, не зависимо от используемого посетителем девайса.
  • Сложность разработки. Создание сайта с адаптивным дизайном требует от разработчика более высокого профессионального уровня. В частности, основательного опыта работы с JavaScript.
  • SEO-аспект. По слухам, Google намного более лояльно относится к отзывчивым сайтам, нежели к адаптивным.
На практике

На практике отзывчивый дизайн веб-сайта встречается достаточно часто, в отличие от адаптивногоь – он легче в реализации и освоении. Большинство шаблонов, которые продаются на маркетплейсах, являются отзывчивыми, а не адаптивными.