Такие термины, как адаптивный и адаптивный дизайн веб-сайта, часто путаются и воспринимаются многими как идентичные. Но разница есть, и очень существенная.
Существует два принципиально разных подхода к созданию дизайна сайтов для мобильных: Adaptive web design и Responsive web design.
Что такое отзывчивый дизайн
Отзывчивый дизайн (Responsive website design) — подход к созданию дизайна сайта, при котором сайт разрабатывается с расчетом на то, чтобы обеспечить наиболее простое его использование: удобный просмотр сайта с минимумом ресайзов и лишних прокруток — на самом широком спектре устройств.
Отзывчивый дизайн обладает следующими особенностями:
- При верстке отзывчивого дизайна используются исключитьельно HTML и CSS — без подключения JavaScript для определения «отзвычивости» элементов дизайна.
- Отзывчивая верстка определяет, как будут выглядеть элементы сайта на разных устройствах; однако эти элементы не скрываются/не заменяются другими, а их поведение, равно как и выполняемые ими функции, не меняется.
Три основных принципа отзывчивого дизайна:
- расположение всех элементов в рамках модульной сетки;
- все элементы верстки и медиа-файлы (в т.ч. изображения) являются «резиновыми» (flexible) — их размеры зависят от размера экрана;
- работа с Media queries — модулем CSS3, позволяющим задавать разные стили (или даже таблицы стилей) в зависимости от разрешения экрана, его размеров и прочих харатеристик.
Что такое адаптивный дизайн сайта
Адаптивный дизайн сайта (Adaptive website design) — это дизайн, основанный на операциях с разными макетами сайта или его разметкой для обеспечения наилучшего его использования на определенных, заданных заранее устройствах и разрешениях экрана. При этом элементы сайта могут скрываться, заменяться другими; могут меняться поведение и функции отдельно взятых элементов веб-сайта.
Обеспечение одинакового вида сайта и его функционала в разных браузерах не является обязательным при создании адаптивного дизайна.
Путаница в определениях
Понятия отзывчивого и адаптивного дизайна повсеместно чуть ли не отождествляются между собой. Стоит понимать, что эти подходы различаются прежде всего задачами, для решения которых они применяются.
Особенности подходов
Несколько ключевых отличий между сайтами с “адаптивным” и “отзывчивым дизайном” :
- Скорость работы сайта. Сайт, созданный по принципам адаптивного дизайна, может загружаться в несколько раз быстрее, так как пользователю будет необходимо загружать с сервера только те части дизайна, которые необходимы для работы сайта на его устройстве. В случае с отзывчивым дизайном пользователь будет вынужден ждать, пока загрузятся все стили и изображения, не зависимо от используемого посетителем девайса.
- Сложность разработки. Создание сайта с адаптивным дизайном требует от разработчика более высокого профессионального уровня. В частности, основательного опыта работы с JavaScript.
- SEO-аспект. По слухам, Google намного более лояльно относится к отзывчивым сайтам, нежели к адаптивным.
На практике
На практике отзывчивый дизайн веб-сайта встречается достаточно часто, в отличие от адаптивногоь – он легче в реализации и освоении. Большинство шаблонов, которые продаются на маркетплейсах, являются отзывчивыми, а не адаптивными.
