9 основных принципов отзывчивого веб-дизайна

[@mxgoncharov]

Отличная статья! Но немного рябит в глазах, когда на экране кусок текста в один абзац и сверху + снизу разные анимации. Немного ощущение, что попал на сайт от Ucoz несколько лет назад :)

[@Myuzik]

Вот отличие адаптива от респонсива в моём понимании.

[@andrew-r]

Интересная инфографика, спасибо. Я всегда советую статью с Frontender Magazine, если возникает путаница с понятиями.

[@Myuzik]

Автора статьи знаю лично и, к сожалению, не доверяю ему в этом вопросе =)

[@Triang3l]

С <picture> проблемы с загрузкой лишних изображений быть по идее не должно, кстати.

[@dom1n1k]

Уже где-то писал, и повторю — разница «Отзывчивый vs Адаптивный» высосана из пальца лишь в терминологической казуистике. Косвенным подтверждением этого служит то, что различные статьи по этой теме противоречат друг другу в каких-то деталях.

На практике провести четкую границу затруднительно и, самое главное, не нужно. Есть 3 основных класса: статика, резина (которую, к слову, в свое время тоже пытались делить на fluid, liquid, elastic… — и кто это помнит?) и отзывчивый (он же адаптивный). Всё остальное — небольшие вариации внутри классов. Если кто-то будет в повседневной практике всерьез считать эти слова разнозначными — он вынесет всем коллегам мозг.

[@Badevlad]

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

[@StreetStrider]

Desktop или mobile first

С технической стороны нет никаких отличий

Справедливости ради стоит отметить, что отличия всё же есть. Здесь я бы хотел высказаться, что лучше начинать с mobile. Как правило, мобильный вариант проще десктопного. Если двигаться от мобильного к десктопному, то получается наращивание фич. Т.е., интерфейс, по достижении некоторых необходимых размеров/наличия требуемых API, начинает приобретать дополнительные черты. Мне этот подход видится очень естественным.
Если же мы двигаемся от десктопа, то для создания мобильной версии мы чаще, напротив, мыслим в терминах выпиливания. При этом все условия для брейкпоинтов больше похоже на хаки, которые подпиливают существующие элементы так, чтобы они себя адекватно в ограниченных условиях.
Единственная причина почему стоит начинать с десктопной версии заключается в том, что десктопная версия уже существует. Это часто случается, когда компания-разработчик решает дополнить своё приложение возможностью работы на мобильных девайсах.
mobile first же делает код более ясным на всех уровнях, от html-кода layout-а, до прикладной логики на JS.

[@dom1n1k]

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

[@StreetStrider]

Да, верно, и это тоже. Наращивать сложность проще, чем отсекать от уже построенного.

[@fetis26]

Не понимаю какую разницу пытается проиллюстрировать 1 картинка. Более того, считается что это одинаковые понятия github.com/web-standards-ru/dictionary/blob/master/Dictionary.md#adaptive-design

Статья ни о чем.

Каким боком max-width относится к респонзив? Если у меня сайт тока для десктопа, я точно также поставлю max-width чтобы он не полз на больших экранах

1 раз слышу, что Desktop first равнозначен Mobile first. Всегда было наоборот

Причем здесь вообще веб-шрифты?

[@Anisotropic]

Капитанская какая-то статья. Как-будто автор потренировался в рисовании гифок. Причём не всегда удачно. Первая иллюстрация совершенно не говорит о том, как автор видит различия между двумя подходами.

[@Dimaod]

тут как бы только посвященные поймут что на первой картинке контент «резинится», а на второй «прыгает» после изменения разрешения, сам смотрел минуту на нее

[@vbif]

Ещё и перевод так себе.

[@vosi]

Очень нормальная статья.
Я вот хоть все это и знаю, т.к. уже лет 15 разработчик с упором на веб, но вот девушке своей, которая пытается дизайнить сайты, внятно объяснить не могу (без заумных терминов… простым языком).
Эта статья для нее очень многие вещи поставила на свои места в плане понимания, а главное — статья проиллюстрированна отличной графикой.

[@bubuq]

Часто люди не знают, какой подход выбрать. Подумайте как следует и выберите подходящий вам подход.

Ну прям не знаю. А вдруг подходящий мне подход не подойдёт?!