От автора: все мы должны быть знакомы с термином отзывчивый дизайн, но описывает ли он именно то, о чем мы думаем? Для нас отзывчивый дизайн это процесс создания сайтов, которые правильно отображаются на всех устройствах и экранах. Однако некоторые считают, что такой дизайн лучше называть «адаптивным».
Правда ли это, или это одно и то же?
Или же адаптивный дизайн означает что-то совершенно другое?
И к чему больше относится жидкий дизайн?
На первый взгляд вопрос довольно простой, но изучив тему, я понял, что в нем есть второй смысл, о котором я и не думал. Вопросы даже достаточно спорные. Существует два доминирующих определения адаптивности:
Определение 1: отзывчивый дизайн – это селфи палка – адаптивный дизайн – это зонтик
По этому определению отзывчивый продукт, как селфи палка, можно использовать во множестве состояний: от полностью разложенного до полностью сложенного и в промежуточных состояниях. Конечно, какие-то брейкпоинты и ширины экрана намного важнее других, но новый макет формируется под каждую ширину экрана.
Адаптивный дизайн больше похож на зонтик. У него есть рабочие, заранее заданные состояния. Когда зонт открыт, он защищает от дождя. В закрытом состоянии зонт удобно перевозить. Промежуточные состояния не имеют значения.
Есть пара GIF-изображений, наглядно иллюстрирующих концепцию.
В 2015 году Джеф Грэхэм подчеркнул разницу подходов. Он сказал, что отзывчивые макеты адаптируются под ширину окна браузера в любой момент времени, в то время как адаптивные макеты адаптируются только под заданные брейкпоинты.
Джеф сказал, что отзывчивый дизайн основан на процентах (т.е. то же самое, что и жидкий дизайн), а адаптивный дизайн основан на фиксированных единицах измерения. Оба подхода используют медиа запросы.
Определение 2: адаптивный дизайн изменяется от всех параметров устройства (не только экрана)
Если заглянуть в комментарии к статье Джефа, можно заметить, что не все согласны с этим утверждением.
Комментарий сверху: «Отзывчивый дизайн может быть жидким или фиксированным, т.е. он может быть адаптивным. Разница в том, что отзывчивому дизайну не нужно знать, какой браузер вы используете, он отвечает на размер окна браузера и перестраивает под него макет. И напротив, адаптивный дизайн подстраивается под настройки браузера специально, он может принимать в расчет, а может и не принимать в расчет текущий размер окна браузера.» zzzzBov.
Со слов zzzzBov адаптивный дизайн управляется через JS и больше реагирует на тип устройства, нежели на размер экрана. К примеру, планшет может иметь экран с высоким разрешением, но и элементы для касания должны иметь больший размер. На телефонах нужна другая система навигации.
В этом споре участвует множество крупных имен, таких как UXPin и Mozilla, но к общему мнению никто так и не пришел.
Что я думаю на эту тему
Разберем реальный пример, лампу с настраиваемой яркостью: отзывчивый дизайн – это когда вы щелкаете переключатель, и лампа включается. Адаптивный дизайн – это когда вы можете плавно настраивать яркость, чтобы лучше видеть объекты.
Если сайт не отвечает на ваше с ним взаимодействие, он не очень отзывчивый. Если же сайт не может адаптироваться под окружение (т.е. экран устройства), он не очень адаптивный. Оба фактора значительно влияют на UX.
Почему отзывчивый дизайн – это не отзывчивый дизайн
Отзывчивость – это действие, результат другого действия. Например, если кнопка на сайте сменила фоновый цвет при наведении на нее курсора мыши. Действие здесь – наведение курсора, ответ – смена фонового цвета.
Обычно, если мы говорим, что сайт отзывчивый, мы думает, что он адаптируется под любой размер экрана на всех устройствах, но на самом деле это должно значить, что сайт отвечает на взаимодействие с пользователем. И вот почему.
На мобильном устройстве пользователь не может менять размер окна браузера. На десктопе же пользователь может менять размер окна браузера, но обычно этого делать не нужно, чтобы взаимодействовать с сайтом. Это ненормальное поведение для пользователя. Конечно, мы, веб-дизайнеры часто изменяем размер окна браузера для проверки сайта, но для обычного пользователя это ненормально.
Почему, на мой взгляд, адаптивный дизайн более точное определение
Так как обычно используется стандартный размер экрана (вы или не можете, или вам просто не нужно менять размер экрана), то термин адаптивный дизайн больше подходит в данном случае. Веб-сайты (по крайней мере, хорошо спроектированные) будут изменять макеты под устройство пользователя. Это непроизвольное действие, пользователь не должен ничего нажимать, чтобы сайт перестроил макет. Адаптивный дизайн также может описывать оптимизацию скорости загрузки страниц и восприятие производительность на маленьких устройствах.
Тогда что такое жидкий дизайн?
В начале 2000-ых разгорелись большие дебаты вокруг темы «фиксированный макет или жидкий». Жидкие макеты использовали проценты и растягивались под размер окна браузера. Фиксированные дизайны ограничивались одним макетом с заданной шириной в пикселях.
Проблемы были в обоих макетах. Фиксированные макеты отлично смотрелись на одних экранах и были совершенно непригодны к использованию на маленьких экранах. Жидкие макеты были более гибкие, но на широких мониторах смотрелись слишком узко и растянуто.
Этан Маркотт пришел к идее отзывчивого дизайна. Классический «тягучий» RWD – это более взрослая версия жидкого дизайна. Дизайн растягивается, чтобы заполнить окно и перестраивается по необходимости.
Джеф же дает другое определение адаптивного дизайна, с которым многие не соглашаются. Адаптивный дизайн – это более взрослая версия фиксированного дизайна, не одного фиксированного макета, а трех, четырех.
Заключение
Вот вы и узнали, что я думаю об отзывчивом и адаптивном дизайне. После этой статьи вы будете называть вещи своими именами, или все же легче продолжать говорить об отзывчивом дизайне, как о способе адаптации сайта к множеству размеров экрана?
А у вас когда-нибудь были моменты, когда вы произносили «адаптивный дизайн», а люди вас не понимали? Пишите об этом в комментариях, мне интересно!
Автор: Daniel Schwarz
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
