Responsive vs. Adaptive design

[pepelsbey]

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

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

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

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

adaptive design

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

responsive design

см. adaptive design

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

[MaksYu]

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

[pepelsbey]

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

[MaksYu]

https://www.responsys.com/blogs/nsm/cross-channel-marketing/difference-responsive-adaptive-web-design/

[pepelsbey]

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

[MaksYu]

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

[pepelsbey]

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

[MaksYu]

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

[askd]

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

[pepelsbey]

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

[MaksYu]

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

[artpolikarpov]

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

• http://liquidapsive.com/
• http://blog.pukhalski.com/adaptive-vs-responsive-defining-the-terminology/

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

• http://alistapart.com/article/responsive-web-design

[artpolikarpov]

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

[pepelsbey]

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

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

[artpolikarpov]

Я за.

[askd]

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

[askd]

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

[artpolikarpov]

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

[askd]

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

[WarEnek]

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

[pepelsbey]

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

[WarEnek]

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

[neonick]

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

[neonick]

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

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

[WarEnek]

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

[pepelsbey]

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

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

[pepelsbey]

Пока так:

adaptive design

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

responsive design

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

[pepelsbey]

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

[askd]

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

[MaksYu]

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

[pepelsbey]

Значит так:

adaptive design

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

responsive design

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

[pepelsbey]

Либо можно перевести RWD как «отзывчивый», но рекомендовать использовать термин «адаптивный».

[neonick]

К слову, во время общения, если мне скажут «сверстай адаптивный сайт», то я скорее всего переспрошу «какой: адаптивный или респонсив?», чтобы понять однозначно о чем идет речь. Поэтому, я бы не сваливал эти терминый в кучу. Есть AD, а есть RWD, который включает в себя AD и резину, в этом важное отличие.

[pepelsbey]

@neonick, проблема в том, что это AWD включает в себя RWD :) Видите, как всё сложно?

[pepelsbey]

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

[neonick]

@pepelsbey я не соглашусь, смотрю сюда и вижу что RWD включает AD, но не наоборот http://liquidapsive.com/

[WarEnek]

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

[neonick]

Назревает второй холиварный топик :)

[askd]

Я бы не стала доверять сайту http://liquidapsive.com/ в вопросе терминологии. Это всего лишь их внутреннее именование лэйаутов. В процессе подготовки доклада перечитала много источников и, если говорить о терминах, то RWD это все же часть AWD. Даже Итан об этом писал.

[pepelsbey]

@neonick, если просто «смотреть» и делать выводы что куда включается, то можно легко ошибиться. Нужно смотреть на программные статьи и книги и пытаться понять из них, о чём мы говорим на самом деле.

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

[pepelsbey]

Цитирую Итана, первая глава книги «RWD»

So what does it take to create a responsive design? Speaking purely in terms of front-end layout, it takes three core ingredients:

1. A flexible, grid-based layout,
2. Flexible images and media, and
3. Media queries, a module from the CSS3 specification.

As we do so, we’ll have created a design that can adapt to the constraints of the browser window or device that renders it, creating a design that almost responds to the user’s needs.

[pepelsbey]

Раздобыл книгу «AWD» Густафсона, там всё больше речь про progressive enhancement.

[neonick]

@pepelsbey окей, вероятно, я сам путался в терминологии

[pepelsbey]

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

Потом появился Маркотт с термином RWD и приложил к нему конкретный подход, то есть стал историческим преемником AWD, одним из вариантов реализации AWD.

[pepelsbey]

По сути, в среде разработчиков говорят только о RWD, а AWD стал каким-то мифом, который мало кто понимает. Отсюда и было предложение назвать всё одним понятным словом, которое всё объединит.

[askd]

Еще, кстати, многие смешивают adaptive layout и адаптивный дизайн. Это разные вещи.

[askd]

Вот еще одна точка зрения. Тоже в чем-то верная:

Responsive -- client-side -- the same page is returned to all devices, but the display of the page responds to the devices, typically using JavaScript and CSS (especially media queries).

Adaptive -- server-side -- information is passed to the server regarding the device's specs, and a page adapted to that device is returned. This would use some of the same JavaScript/CSS techniques as RWD, but some of the content may be different / smaller.

[askd]

Макс, при всем уважении, ты был более категоричен ;) Из твоего высказывания не следовало, что "AWD use some of the same JavaScript/CSS techniques as RWD". Почему-то считается, что если есть контрольные точки, то резина исключается. И многие по такому принципу оперируют терминами: "есть контрольные точки, но нет резины - AWD, есть контрольные точки и резина - RWD". Поэтому путаница.

[pepelsbey]

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

[askd]

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

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

[MaksYu]

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