Comments
Отличная статья! Но немного рябит в глазах, когда на экране кусок текста в один абзац и сверху + снизу разные анимации. Немного ощущение, что попал на сайт от Ucoz несколько лет назад :)
Интересная инфографика, спасибо. Я всегда советую статью с Frontender Magazine, если возникает путаница с понятиями.
С <picture> проблемы с загрузкой лишних изображений быть по идее не должно, кстати.
Уже где-то писал, и повторю — разница «Отзывчивый 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. Всегда было наоборот

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

Ну прям не знаю. А вдруг подходящий мне подход не подойдёт?!
Теперь я узнал, что responsive и adaptive — разные вещи. Как же я без этого открытия раньше жил.
Если я верстаю универсальный макет — то делаю его отзывчивым к изменению ширины страницы, естественно, а при достижении каких-то контрольных точек еще и адаптирую расположение элементов в потоке. Так какой я версткой занимаюсь?

Резина — полурезина, блин.

По поводу «mobile first» — «desktop first». У каждого джежая свой путь. Апологеты первого подхода мнят себя некой особой кастой. На самом деле, разницы вообще никакой. Мне повезло, и дизайн и верстку я делаю легкую и тонкую, и изображая мобильный макет я ничего никуда не отсекаю — только изменяю вид. Просто незачем что-то отсекать, если лишнего и так нет. Верстать я начинаю все равно с десктопа, просто элементы объединяю в группы так, чтобы их можно было переложить как надо в случае адаптации. Дополнительных услий — 0, я всегда так делал. Cтарые браузеры которые не умеют в Media Queries — там тоже ничего страшного и невообразимого не произойдет

И вообще, к сожалению, вся адаптивность верстки у 97% заказчиков сводится к указанию device-width, потому что у них глазики закатываются, когда они слышат, что за вариант для мобильников надо бы добавить денег. Да и не спрашивают в-общем…
Only those users with full accounts are able to leave comments. Log in, please.