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

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

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

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

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

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

Desktop или mobile first

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

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

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

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

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

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

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

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

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

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