В мире веб-дизайна кто-то считает, что понятия “отзывчивый дизайн” (его англоязычный аналог - responsive design), и “адаптивный дизайн” (adaptive design на английском) имеют отличия, кто-то считает, что это одно и то же, и что непонимание произошло в результате неправильного перевода двух культовых в мире веба книг - «Adaptive Web Design» Аарона Густафсона и «Responsive Web Design» Итана Маркотта. Прежде всего, стоит сказать, что макеты в веб-дизайне (в этой статье я рассматриваю не PSD-макеты, а полноценную HTML-страницу) делятся на:
- фиксированные (на настоящий момент практически не используемые, это макеты, в которых ширина страницы задана в пикселях и не изменяется вне зависимости от ширины экрана)
- резиновые (в переводе с англ. liquid, также устаревший подход в мире веба, потому что в этом варианте страница принимает размер любого экрана за счет того, что для структурных элементов используют процентные показатели вместо статических, что негативно влияет на отображение сайта на устрйоствах со слишком большой или слишком маленькой шириной)
- адаптивные (в этом типе макет прыгает по “контрольным точкам” в зависимости от ширины экрана, соответственно медиа-запросы описывают фиксированные положения макета для каждой контрольной точки. Из минусов - то, что невозможно контролировать правильное отображение на всех девайсах, так как контрольные точки зачастую могут быть очень далеки друг от друга)
- отзывчивые (эти макеты основываются на принципах резиновых, точно также опираясь на медиа-запросы, но в результате страница не скачет по контрольным точкам, а плавно меняется между ними)
- смешанные (это все остальные, иногда и неправильные, подходы к созданию макетов, так, например, в этот пункт входят макеты, сделанные по технологии mobile last)
Приближаясь к теме данной статьи, стоит четко обозначить, что отзывчивый дизайн соединяет в себе “адаптивность” и “резиновость”, и, хотя, на первый взгляд, это одно и то же, на самом деле эти подходы к дизайну дополняют друг друга и подходят каждый для своей цели.
Чем же отличаются отзывчивый и адаптивный дизайны?
Отзывчивый дизайн сложнее
Отзывчивый дизайн требует повышенное внимание к CSS, чтобы убедиться, что сайт отображается корректно на всевозможных размерах экранов, ведь куда проще сделать несколько макетов с определенными размерами, нежели делать один макет, корректно отображающийся на всех устройствах.
Адаптивный дизайн менее гибок
Отзывчивые сайты будут правильно отображаться даже на тех устройствах, которые будут выпущены после создания макета, тогда как адаптивные сайты отображаются корректно только на тех экранах, к которым они были заранее приспособлены.