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

Отзывчивый веб-дизайн (англ. responsive web design) — подход к разработке сайтов, который позволяет создавать веб-страницы, гибко подстраивающиеся на стороне посетителя под любые размеры экрана и сохраняющие при этом оптимальный внешний вид. У такого сайта есть один макет, который может динамически меняться при увеличении или уменьшении окна браузера.
Адаптивный веб-дизайн (англ. adaptive web design) — подход к разработке сайтов, который подразумевает создание нескольких отдельных макетов сайта с фиксированными размерами и набором особых функциональных возможностей для разных категорий устройств и загрузку подходящего макета при каждом посещении. Оптимальный макет для отправки посетителю сайта выбирается на стороне сервера и в браузере уже не может меняться динамически, так как имеет фиксированные размеры для конкретного устройства.

Основные различия адаптивного и отзывчивого веб-дизайна

1.

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

При адаптивном веб-дизайне существует несколько макетов сайта фиксированных размеров для разных устройств (например, с шириной 320 пикселей для смартфонов, 760 — для планшетов, 960 — для компьютеров; в реальности лучше вводить поддержку большего количества размеров). Тип устройства посетителя определяется на стороне сервера, и там же для него выбирается подходящий макет, содержащий только нужный в этом конкретном случае код и изображения, оптимизированные для этого размера экрана. В результате скорость загрузки сайта выше, чем при отзывчивом веб-дизайне.

2.

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

Адаптивный дизайн может быть внедрен на существующем сайте без столь глубоких и радикальных изменений. Это важно для больших и сложных сайтов.

3.

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

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

Какой из двух подходов выбрать?

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

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

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

Наши статьи по теме

Книги по теме

  • Ethan Marcotte. Responsive Web Design. Издана на русском языке: «Отзывчивый веб-дизайн», Итан Маркотт.
  • Ben Frain. Responsive Web Design with HTML5 and CSS3.
  • Tim Kadlec, Aaron Gustafson. Implementing Responsive Design: Building sites for an anywhere, everywhere web (Voices That Matter).
  • Aaron Gustafson. Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement.
  • Luke Wroblewski. Mobile First. Издана на русском языке: «Сначала мобильные!», Люк Вроблевски.
Изображение: MPFphotography