Frontender Magazine

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

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

Я постараюсь разложить все по полочкам и объяснить принципиальную разницу между типами макетов и подходами к веб-разработке.

Типы HTML-макетов

Под макетом в данной статье подразумевается не изображение в формате PSD, а уже готовая разметка HTML-страницы.

Фиксированные макеты

px

Фиксированный макет — макет страницы, ширина контента которой жестко задана в пикселях и не меняется в зависимости от размеров окна браузера.

Фиксированная верстка является пережитком прошлого, когда ширина контента страницы была строго продиктована разрешением самых популярных экранов (800 на 600, затем 1024 на 768 и так далее). Даже сейчас еще легко можно встретить сайты с фиксированной шириной контента в 960 пикселей.

Иллюстрация

Резиновые макеты

%

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

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

Иллюстрация

Адаптивные макеты

px + media-queries

Адаптивный макет является очень близким к следующему типу — отзывчивому и базируется на использовании медиа запросов (англ. media queries) для адаптации контента под различные параметры экранов.

Главное отличие от отзывчивого типа состоит в том, что при данном типе верстки страница «прыгает» по контрольным точкам, смещаясь и адаптируя контент каждый раз к наиближайшей следующей из них. То есть медиа-запросы описывают фиксированные положения контента для каждой из контрольных точек. В итоге мы имеем набор из нескольких фиксированных макетов для работы с различными разрешениями экранов.

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

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

Иллюстрация

Отзывчивые макеты

% + media-queries

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

В итоге, отзывчивая страница не «прыгает» по контрольным точкам, а плавно изменяется между ними.

Иллюстрация

Смешанный

px + % + media-queries

Не стоит отрицать, что существуют и иные решения для создания макетов.

Например адаптация под различные устройства может быть чем-то между адаптивной и отзывчивой версткой страниц. Данная ситуация довольно часто встречается как попытка оптимизации уже существующего сайта под различные типы устройств («mobile last»).

Подходы к созданию веб-сайтов и веб-приложений

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

Отзывчивый веб-дизайн

% + media-queries + %-media

Отзывчивый веб-дизайн был описан впервые в статье на A List Apart. Название подхода взято по примеру отзывчивой архитектуры, области архитектурной практики и исследований. Отзывчивая архитектура здания предполагает адаптацию самого строения (формы, цвета) в зависимости от состояния окружающей среды.

В 2011 Маркотте опубликовал одноименную книгу, в которой он собрал в единую технику некоторые давно известные приемы адаптации контента.

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

Подход основывается на резиновых макетах, медиа запросах и отзывчивых («резиновых») медиа-элементах (изображения, видео).

Следовательно отзывчивый макет страницы плюс использование отзывчивых изображений и видео.

Заметим что техника отзывчивого веб-дизайна использует только средства HTML и CSS для решения задачи адаптации контента под различные устройства.

Адаптивный веб-дизайн

% + media-queries + %-media + JavaScript + magic

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

Прогрессивное улучшение — это стратегия веб-разработки, которая основывается на доступности контента и семантике на самом низком уровне, а остальные же уровни, такие как стилизация (CSS) и дополнительные скрипты (JavaScript), — лишь дополнения, которые делают жизнь проще. Стратегия была представлена в 2003 году на знаменитой конференции SXSW Стивеном Чампионом. В отличие от концепции постепенной деградации, когда разработчики ориентируются только на современные браузеры и "урезают" возможности для более старых, прогрессивное улучшение идет с обратной стороны, делая контент доступным для наибольшего количества устройств и браузеров. Так как эта проблема в наше время стоит довольно серьезно, данная стратегия даже была названа Top #1 трендом в веб-дизайне на 2012-й год.

В уже далеком 2011-ом Люк Вроблевски с помощью «A Book Apart» выпустил книгу под названием «Mobile First», которая, как и многие книги этого издателя, быстро стала бестселлером. Несложно догадаться, что книга освящает стратегию, которая предполагает, что вся разработка от планирования бизнес-целей, UX и веб-дизайна до последней строчки кода будет вестись начиная от самой компактной «мобильной версии» до настольных компьютеров, приставок или телевизоров.

Адаптивный веб-дизайн как подход был описан в одноименной книге Аарона Густафсона. Подход берет лучшее из идей «сначала мобильные» и прогрессивного улучшения и дополняет их. В простом изложении данная стратегия предполагает использование чистого HTML как базиса и дальнейших улучшений и фич за счет использования слоев CSS и JavaScript. Если для какого-то определенного браузера или устройства доступна какая-то новая фича, то ее можно использовать только после проверки на ее доступность, сохраняя обратную совместимость с не поддерживающими устройствами (например, тач-события).

«Чистый HTML работает везде.»
— Кто-то на какой-то конференции

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

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

И в заключение

«Вы мне это прекратите!»
— Братья Стругацкие, «Понедельник начинается в субботу» (1965)

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

В наше время довольно остро стоит вопрос с терминологией и ее пониманием в сообществе веб-разработчиков. Такая тенденция появилась неспроста и наблюдается не только на пост-советском пространстве, но и во всем мире (проверить достаточно просто — запросить в Google «adaptive vs. responsive web design» и посмотреть разнообразие в понимании терминологии в различных постах).

Еще одним ярким примером такого недопонимания является недавний пост русского дизайнера Ильи Бирмана.

Материалы для дальнейшего чтения

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Илья Пухальский

Комментарии (18 комментариев, если быть точным)

Автар пользователя
SilentImp

Фиксированная верстка является пережитком прошлого

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

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

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

p.s. Статья Бирмана неожиданно неприятно удивила.

Автар пользователя
SilentImp

Кстати, очень большой вопрос насколько осмысленно разделять термины «адаптивный» и «отзывчивый» относительно макетов. Я не буду спорить с предложенной системой, но не проще ли их «смешать» а конкретное поведение описывать в Т.З.? Все равно ближайшее время вряд ли появится общепринятая и общеизвестная классификация, как бы нам этого не хотелось…

Автар пользователя
gladkih

Думаю, что нет особого смысла разделять отзывчивый от адативного — по большей части это одно и тоже. Как часто люди меняют размер браузера во время просмотра страницы? Так что не так сильно заметна разница этих двух понятий.

Автар пользователя
pukhalski

Думаю, что если бы не было смысла, то никто бы и не разделял.

Люди не изменяют часто размер браузера во время просмотра, но у каждого под рукой по парочке устройств, которые уже сами об этом заботятся. Но я не вижу аналогии между разделением адаптивного и отзывчивого с тем, меняют ли люди размер браузера во время серфинга?

Автар пользователя
bezdna

поправьте ссылку на статью Бирмана в последнем абзаце

Автар пользователя
SilentImp

Cпасибо, поправил.

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

Автар пользователя
d1ldo

Это все конечно хорошо и технологично, но у адаптивного дизайна есть одна существенная проблема. Человек зайдя сначала с настолького ПК, а затем с мобильного может потеряться в навигации. Привычные ему вещи могут либо исчезнуть либо находиться в непривычном месте. И это также очень актуально при ресайзе окна браузера. Допустим я хочу просто сделать окно уже, мне нравится читать короткие строки. И что же происходит? Зачастую на такого рода сайтах теряется контекст, причем иногда полностью пропадает с экрана то, что я видел до ресайза. Мне нужно заново разбираться что тут и где. Поэтому со всей этой адаптивностю стоит быть осторожным и использовать в меру. Еще один момент. Адаптивная верстка кушает существенно больше килобайт CSS-a, скриптов. И на мобилке будет грузиться сильно дольше, чем стандартная мобильная версия. Кроме того, в мобилку пойдут "взрослые" большие картинки, заресайзеные этой ваше йадаптивностью, но не потерявшие при этом в размере. В результате сайт может грузиться в 2 и более раза дольше, нежели мобильная версия. Так что я пока скептически отношусь к этому подходу и не считаю 960 устаревшим. С мобильника также не испытываю дискомфорта при посещении такого рода сайтов.

Автар пользователя
d1ldo

Кстати, предпоследий абзац статьи Бирмана как раз то, о чем я говорю.

Автар пользователя
SilentImp

Человек зайдя сначала с настолького ПК, а затем с мобильного может потеряться в навигации.

Если навигация и лаяут продуманы, то смена одного представления на другое не вызовет сложностей в пользовании ресурсом.

Адаптивная верстка кушает существенно больше килобайт CSS-a, скриптов.

Не правда.

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

А об отзывчивых изображениях и способах «не грузить больше чем надо» говорили уже неоднократно. Если есть необходимость, то эта проблема решаема.

Если сайт грузится в 2 раза дольше … то вас где то круто обманули :)

Автар пользователя
d1ldo

Ну, во-первых, я сказал "может грузиться в 2 и больше", а не "будет точно грузиться в 2 раза дольше, инфа 100%". Все конечно зависит от ситуации. Но то что будет дольше — факт. В зависимости от сложности сайта (например, на фронте сайта присутствует много рюшечек — карусели, слайдеры и прочее.) Это далеко не 1 кб лишнего ненужного кода.

Во-вторых,

«Если навигация и лаяут продуманы, то смена одного представления на другое не вызовет сложностей в пользовании ресурсом.». В том то и дело, что задача эта архитрудная, требующая юзабилити-тестирований. Вот взять тот же фронтендер. При сужении сайта шапка переносится в подвал. Все, навигация потерялась, совсем другой сайт? Разумеется гики разберутся, но есть еще 99% не гиковых посетителей. У вас есть пример продуманного с вашей точки зрения сайта с адаптивной разметкой? Я вот лично еще ни одного не видел, везде какие то метамарфозы происходят, от которых хочется закрыть этот сайт нафиг.

Автар пользователя
d1ldo

Мда, что-то я не понял, почему цитатой сделалась вся остальная часть текста.

Автар пользователя
SilentImp

Мда, что-то я не понял, почему цитатой сделалась вся остальная часть текста.

Надо было оставить пустую строку после цитаты.

В зависимости от сложности сайта (например, на фронте сайта присутствует много рюшечек — карусели, слайдеры и прочее.) Это далеко не 1 кб лишнего ненужного кода.

Что карусель что слайдер будет работать как на десктопе так и на мобильном в общем случае. Там прежде всего метод ввода меняться будет. И это кстати не сложно и не требует больших объемов кода.

В том то и дело, что задача эта архитрудная, требующая юзабилити-тестирований.

Как связаны архитектурная задача и юзабилити тестирование?

Разумеется гики разберутся, но есть еще 99% не гиковых посетителей.

Все разберуться :) Зачем приходят на этот сайт? Читать статьи. Что мы видим зайдя с мобильного устройства — статьи. Что именно должно вызвать проблемы? И кстати ЦА этого ресураса именно гики. Кроме фронтендеров тут никого нет и быть не может в связи с характером ресурса.

Автар пользователя
d1ldo

Архитрудная)

Что карусель что слайдер будет работать как на десктопе так и на мобильном в общем случае.

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

Зачем приходят на этот сайт?

Я не про фронтендер имел в виду. А про любой другой сайт, где посетители — обычные люди.

Автар пользователя
SilentImp

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

Не хочешь, что бы грузилось — не грузи. Сделай асинхронную загрузку модулей, проверяй в js соответствие медазапросу или наличию фич вроде тача и не грузи первый модуль. Для этого можно например require.js попробовать использовать. Это решило бы проблему? Думаю да. Ну и вынужден заметить что все карусели+салйдшеу+черти что еще которое я пишу в рамках одного проекта после минимизации обычно не занимает и 5 килобайт. А если вспомнить про gzip… C точки зрения «веса» и скорости загрузки намного актуальнее картинки и минимизация количества http запросов.

Я не про фронтендер имел в виду. А про любой другой сайт, где посетители — обычные люди.

Да бог с ним с фронтендером. Он далек от идеала и новый дизайн с учетом ошибок текущего на подходе. Главное что бы подход был юзер-ферст. И пользователь получал то, зачем он пришел. То что при этом меняется представление данных в зависимости от устройства не только не плохо, но напротив — отлично. Какое значение имеет то, что лаяут изменился, если ты и на десктопе и на мобильном сразу получишь доступ к нужной информации. Например в журнале это статьи. В магазине — товары. Если пользователь сразу сможет получить то за чем пришел и будет понимать что ему нужно делать что бы выполнить желаемое действие, то какая разница изменился лаяут или остался прежним? Привычный внешний вид или нет? Собственно вся суть изменений в том, что бы облегчить пользователю выполнение его задачи. Что бы ему было проще найти и купить товар, прочесть статью, оставить сообщение.

Автар пользователя
beshur

Хорошее, мне понравилось!

Автар пользователя
mishelen

Баталище интересное было, сейчас дальше пошли разделяют между собой RWD и responsivness, ага, большое и малое "р". А ведь по существу была огромная терка между Итаном и Густафсоном, за интегрирование друг другом понятий, даже больше: поглощение трейдмарков, и только Зельдман рассудил их)) естественно в сторону Итана.

Обе практики часто редуцировались: противник до механистическего концепта (CSS), второй якобы назначался проводником высших идеологий: PE, MF.

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

Главное поддерживать видимость слитности с дискурсом, пороть чушь на попсовом CMSMAGAZe))) и дезоринтировать менеджеров, что его почитывают, хоть так!)))

Автар пользователя
ArsenArts

Первая толковая статья, которая четко описывает отличия adaptive и responsive. Спасибо!

Автар пользователя
iitatarenko

Присоединяюсь к словам предыдущего оратора