New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive vs. Adaptive design #84

Closed
pepelsbey opened this Issue Apr 2, 2014 · 73 comments

Comments

Projects
None yet
@pepelsbey
Copy link
Member

pepelsbey commented Apr 2, 2014

Есть проблема:

  1. В русской Википедии форменная путаница: в статье «Адаптивный веб-дизайн» дважды путают adaptive и responsive. Но статья озаглавлена «адаптивный», значит responsive переведён именно так. Про adaptive ничего внятного по-русски нет.
  2. Английская Википедия рассказывает про responsive, но в статье про adaptive опять мало полезного.

Плюс adaptive довольно расплывчатый термин, который включает responsive и ещё что-то, но не очень понятно что, зачем и кто это использует.

Предлагаю объединить два термина вместе и называть и responsive, и adaptive одним словом — адаптивный. Попытки называть responsive отзывчивым вызывают у меня только умиление — слишком эмоционально и не очень передаёт суть: кто и на что отзывается? То есть:

adaptive design

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

responsive design

см. adaptive design

Но можно сделать и наоборот: дать определение второму, а первому «см». Ну или, науки ради, дать небольшую сноску для adaptive. Что думаете?

@MaksYu

This comment has been minimized.

Copy link

MaksYu commented Apr 2, 2014

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

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented Apr 3, 2014

@MaksYu, у вас есть источники, подтверждающие эту точку зрения?

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented Apr 3, 2014

@MaksYu, то есть разница только в резине между состояниями? Надо сказать, первый раз слышу эту версию. Продолжаем собирать мнения :)

@MaksYu

This comment has been minimized.

Copy link

MaksYu commented Apr 3, 2014

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

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented Apr 3, 2014

@MaksYu, в статье об этом не сказано, например.

@MaksYu

This comment has been minimized.

Copy link

MaksYu commented Apr 3, 2014

но логично, же)

@askd

This comment has been minimized.

Copy link

askd commented Apr 3, 2014

В моем понимании "респонсив" - это по сути резиновый сайт, подстраивающийся под разную ширину экрана, возможно изменяющий при этом лэйаут (4-3-2 колонки) и размеры шрифтов. А адаптивный сайт вдобавок к этому может изменять принцип взаимодействия. Например, добавляются свайпы и кнопки становятся крупнее и изолированнее, если обнаружено тач-устройство.

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented Apr 3, 2014

@askd, примерно так же и у меня в голове: адаптив включает респонсив, но не ограничивается им и добавляет что-то ещё, более серьёзное.

@MaksYu

This comment has been minimized.

Copy link

MaksYu commented Apr 3, 2014

@askd, @pepelsbey. То что вы называете адаптивностью умеет делать бутстрап, например. Но при этом в описании у него написано, что это респонсив фреймворк.

@artpolikarpov

This comment has been minimized.

Copy link

artpolikarpov commented Apr 3, 2014

Я видел, что люди просто по-разному этими словами описывают качество «резины»:

Изначально был термин responsive web design, который придумал Итан Маркот в 2010 году:

@artpolikarpov

This comment has been minimized.

Copy link

artpolikarpov commented Apr 3, 2014

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

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented Apr 3, 2014

Спасибо всем за мысли и ссылки! А теперь такой вопрос: что вы думаете о том, чтобы назвать всё происходящее зонтичным термином «адаптивный дизайн» (очень уж хорошее слово, в отличие от «респонсива» и «отзывчивости») — а нюансы выяснять уже потом?

То есть сделать основную словарную статью для термина responsive design, где назвать его адаптивным, а в статьях adaptive design, сослаться на responsive и может уточнить нюансы.

@artpolikarpov

This comment has been minimized.

Copy link

artpolikarpov commented Apr 3, 2014

Я за.

@askd

This comment has been minimized.

Copy link

askd commented Apr 3, 2014

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

@askd

This comment has been minimized.

Copy link

askd commented Apr 3, 2014

Артём, Итан, конечно, придумал термин "responsive", но тот же Густафсон в то же время выпустил книгу "Adaptive Web Design". Так что у англоязычной аудитории тоже с тех пор расхождения в терминологии. Каждый выбирает сам, чьей "идеологии" в этом вопросе верить.

@artpolikarpov

This comment has been minimized.

Copy link

artpolikarpov commented Apr 3, 2014

Мне вообще не нравится этот маркетинговый булшит :-) Сайты переменчивы по умолчанию, в отличии от макетов в Фотошопе.

@askd

This comment has been minimized.

Copy link

askd commented Apr 3, 2014

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

@WarEnek

This comment has been minimized.

Copy link

WarEnek commented Apr 3, 2014

RWD ещё же предусматривает добавление или удаление элементов под определённые ситуацию, чего нет в адаптивном.

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented Apr 3, 2014

@WarEnek, выше говорят наоборот, что RWD — это резина + MQ, а AWD — ещё и исчезновение или появление доп. вещей.

@WarEnek

This comment has been minimized.

Copy link

WarEnek commented Apr 3, 2014

@pepelsbey а они правы, это я видимо заработался.

@neonick

This comment has been minimized.

Copy link
Contributor

neonick commented Apr 3, 2014

@WarEnek но в RWD же тоже исчезают и добавляются вещи, так что это не отличительный признак.

@neonick

This comment has been minimized.

Copy link
Contributor

neonick commented Apr 3, 2014

Я — за то, чтобы сделать основную статью для термина «responsive design», а в термине «adaptive design», сослаться на responsive и может уточнить нюансы.

Но я против того, чтобы responsive design переводить как «адаптивный дизайн», потому что получается какая-то путаница. Пусть будет лучше «отзывчивый». Имхо, определение относительно устоявшееся, т.к. та же книга Маркотта выходила под заголовком «Отзывчивый веб-дизайн».

@WarEnek

This comment has been minimized.

Copy link

WarEnek commented Apr 3, 2014

Поддерживаю @neonick

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented Apr 3, 2014

@neonick, книгу Маркотта переводило непрофильное издательство «МИФ», с которым я позднее работал над другими книгами серии (и над вторым изданием RWD), так что я бы не стал полагаться на их версию.

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

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented Apr 3, 2014

Пока так:

adaptive design

адаптивный дизайн, см. определение responsive design.

responsive design

адаптивный дизайн, подход к дизайну сайтов, учитывающий их адаптацию под различные устройства и условия, противопоставляется распространённому «фиксированному» дизайну только для компьютеров. Из-за незначительной и неявной разницы между терминами responsive и adaptive, оба переводятся как «адаптивный».

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented Apr 3, 2014

Или всё же основное определение добавить к AWD, чтобы было меньше путаницы?

@askd

This comment has been minimized.

Copy link

askd commented Apr 3, 2014

Я за то, чтобы основное определение добавить к AWD

@MaksYu

This comment has been minimized.

Copy link

MaksYu commented Apr 3, 2014

мне кажется, оно только добавит путаницы)

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented Apr 3, 2014

Значит так:

adaptive design

адаптивный дизайн, подход к дизайну сайтов, учитывающий их адаптацию под различные устройства и условия, противопоставляется распространённому «фиксированному» дизайну только для компьютеров. Из-за незначительной и неявной разницы между терминами responsive и adaptive, оба переводятся как «адаптивный».

responsive design

адаптивный дизайн, см. определение adaptive design.

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented Apr 3, 2014

Вот теперь я точно запутался :(

@askd

This comment has been minimized.

Copy link

askd commented Apr 3, 2014

Но наверное Вадим прав. В англоязычном сообществе остался только термин responsive. Вот заголовок статьи, ход конём практически ;) http://www.leemunroe.com/adaptive-responsive/

Хотя еще два года назад было с точностью до наоборот.

@MaksYu

This comment has been minimized.

Copy link

MaksYu commented Apr 3, 2014

значит недостаточно чётко донёс мысль =(

@MaksYu

This comment has been minimized.

Copy link

MaksYu commented Apr 3, 2014

на западе во фронтенде термин "адаптивный" вообще почти не используется, респонсив и респонсив.

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented Apr 3, 2014

Ладно, зайдём с другой стороны. Можете описать какие принципиально разные подходы вот к этому самому используются в реальной жизни? Желательно, не используя термины RWD и AWD, которые пока расплывчаты. Типа:

  1. Только резина и MQ, от которых больно мобилкам и нормально смартфонам.
  2. Полный фарш, который учитывает всё сразу и кучу разных решений.

И главное: есть ли чёткая граница между ними?

@WarEnek

This comment has been minimized.

Copy link

WarEnek commented Apr 3, 2014

Чаще использую подход с процентным(%, em, rem) соотношением величин.
Реже при работе с framework'ами фиксированные величины под разные разрешения.

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented Apr 3, 2014

@WarEnek, но есть ли между ними настолько чёткая граница, что вы называете подходы по-разному?

@WarEnek

This comment has been minimized.

Copy link

WarEnek commented Apr 3, 2014

@pepelsbey скорее нет, для меня это всё же одно понятие "отзывчивый".

@jucke

This comment has been minimized.

Copy link
Contributor

jucke commented Apr 3, 2014

Responsive — отзывчивый (один из подходов адаптивного).
Adaptive — адаптивный.

why the fuss.

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented Apr 3, 2014

@jucke, потому, что большинство не понимает разницы между RWD и AWD или напридумывали себе таких «разниц», что потом не могут договориться. И слово «отзывчивый» какое-то, гм, странное.

С другой стороны, если мы очень хорошо пропишем, чем же эти *WD друг от друга отличаются, может настать счастье.

@WarEnek

This comment has been minimized.

Copy link

WarEnek commented Apr 3, 2014

Пока мы нашли только одно отличие в "опорных точках"

@askd

This comment has been minimized.

Copy link

askd commented Apr 3, 2014

Если обобщать, то у нас так:

Первый подход (когда желательно, чтобы на ipad/iphone сайт нормально смотрелся и управлялся) используются:

  • MQ на несколько контрольных точек (не обязательно классические 320,768,1024) И/ИЛИ резина в промежуточных состояниях (зависит от лэйаута)
  • Поддержка минимального набора событий для touch-устройств

При первом подходе на одну страницу может быть 2-3 дизайн макета. Остальное на усмотрение технолога. viewport обычно 1000.

Второй подход (когда задача сделать сайт под разные устройства).

  • Разные стили на определенный набор макетов (с учетом необходимых девайсов). Резина также может присутствовать (для десктопной версии, например).
  • Разные контролы для десктопов и touch-устройств (визуально и в управлении). Т.е. в одном месте - ховеры, стрелки, в другом - двойной тач, свайпы и т.п. Соответственно, разный набор скриптов.

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

@antonfrolovsky

This comment has been minimized.

Copy link

antonfrolovsky commented Apr 3, 2014

Всегда понимал эти значения так как переводятся слова

Adaptive (перевод с multitran: приспосабливающийся, применяющийся, адаптивный) – это тот который адапатируется под устройства.

Responsive (перевод с multitran: чуткий, отзывчивый, быстро реагирующий, откликающийся (на призывы), поддающийся (влияниям, усилиям), ответный, легко реагирующий, открытый, гибкий) – устройства тут же не при чем.

@jucke

This comment has been minimized.

Copy link
Contributor

jucke commented Apr 3, 2014

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

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.
~ Source: http://alistapart.com/article/responsive-web-design/ (мы уже вспоминали это выше)

На сегодня "adaptive" и "responsive" являются условными синонимами. То есть если необходимо создать адаптивный сайт, то подразумевается применение технологий отзывчивого веб дизайна. Но еще несколько лет назад, когда были другие стандарты, под адаптивным дизайном подразумевался "flexible WD" ("резиновые сайты").
Пример: http://d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html

То есть, разделение "adaptive" и "responsive" по технологическим признакам — не самый лучший вариант определения. При других стандартах и технологиях концепция "адаптивности" останется, а ее технологическая реализация может стать совсем иной, нежели "отзывчивый ВД".

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented Apr 3, 2014

@jucke, всё верно и очень хорошо сказано. Есть мысли, какие конкретные формулировки стоит дать RWD и AWD?

@WarEnek

This comment has been minimized.

Copy link

WarEnek commented Apr 3, 2014

Может RWD взять за основу, а AWD за ответвление?

@satantx

This comment has been minimized.

Copy link

satantx commented Apr 3, 2014

У кого то очень мало работы)
Вот вам делать то нечего. Я думал у дизайнеров только свои холивары, ан нет)
responsive — на разные устройства, т.е даже дизайны могут меняться на разных устройствах
adaptive — подстраивается под экран

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented Apr 3, 2014

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

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented Apr 3, 2014

@WarEnek, я склоняюсь к тому, чтобы не вкладывать RWD в AWD и наоборот, а описать их как два отдельных подхода со своими нюансами. Как те же PE и GD.

@SelenIT

This comment has been minimized.

Copy link
Contributor

SelenIT commented Apr 3, 2014

Когда-то была неплохая схема http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php, из которой я для себя вывел примерно такое понимание:

«Adaptive layout» — набор фиксированных «дизайнов», переключаемых по медиавыражениям;
«Responsive layout» — резина + медиавыражения;
«Responsive design» — подход к разработке, при котором адаптивность сосредоточена в HTML/CSS (включает A. и R. «layouts»);
«Adaptive design» — подход к разработке, при котором для адаптивности и постепенного улучшения все средства хороши (в т.ч. серверные).

Не знаю, насколько это актуально в наши дни, но авось к "истории вопроса" пригодится:)

@jucke

This comment has been minimized.

Copy link
Contributor

jucke commented Apr 4, 2014

@pepelsbey Могу предложить такие формулировки.

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

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

Естественно, открыто для редактирования, критики и обсуждения. Вопрос неоднозначный, даже у авторов терминов нет однозначного мнения.
http://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/

Можно смириться с тем, что однозначного мнения здесь не будет.
http://bradfrostweb.com/blog/post/the-many-faces-of-adaptive-design/

Хотелось бы договориться о том, что этим двум терминам нужно дать отдельные переводы. Иначе на русском даже не получится обсудить разницу между понятиями.

@SelenIT Лайк.

@talgautb

This comment has been minimized.

Copy link
Contributor

talgautb commented Apr 14, 2014

@SelenIT примерно также в голове :)
з.ы. кстати, заметил, что все-таки каждый понимает по своему немного, поэтому сложно будет вывести какой-то 1 результат, все-равно каждый будет по своему называть, не?

з.ы.ы. http://frontender.info/adaptive-vs-responsive-terminology/ что насчет этого?

@pepelsbey

This comment has been minimized.

@pepelsbey pepelsbey added the term label Jan 12, 2015

@tachisis

This comment has been minimized.

Copy link
Contributor

tachisis commented May 24, 2015

Я почитала все и склоняюсь к мнению, что:

  1. из статьи adaptive design надо убрать строчку «Из-за незначительной и неявной разницы между терминами responsive и adaptive, оба переводятся как «адаптивный». Добавить, что может включать «отзывчивый дизайн».
  2. responsive design перевести как «отзывчивый дизайн» и описать как «один из технологических методов создания адаптивного дизайна», не вдаваясь в подробности.

Так мы не погрешим ни против сути понятий, ни против мнения масс, по-моему.

@pepelsbey

This comment has been minimized.

Copy link
Member

pepelsbey commented May 24, 2015

Согласен, люди настойчиво продолжают видеть важную разницу между adaptive и responsive.

tachisis added a commit that referenced this issue May 24, 2015

@tachisis tachisis closed this May 24, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment