Комментарии 17
Отличная статья! Но немного рябит в глазах, когда на экране кусок текста в один абзац и сверху + снизу разные анимации. Немного ощущение, что попал на сайт от Ucoz несколько лет назад :)
Уже где-то писал, и повторю — разница «Отзывчивый vs Адаптивный» высосана из пальца лишь в терминологической казуистике. Косвенным подтверждением этого служит то, что различные статьи по этой теме противоречат друг другу в каких-то деталях.
На практике провести четкую границу затруднительно и, самое главное, не нужно. Есть 3 основных класса: статика, резина (которую, к слову, в свое время тоже пытались делить на fluid, liquid, elastic… — и кто это помнит?) и отзывчивый (он же адаптивный). Всё остальное — небольшие вариации внутри классов. Если кто-то будет в повседневной практике всерьез считать эти слова разнозначными — он вынесет всем коллегам мозг.
На практике провести четкую границу затруднительно и, самое главное, не нужно. Есть 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. Всегда было наоборот
Причем здесь вообще веб-шрифты?
Статья ни о чем.
Каким боком max-width относится к респонзив? Если у меня сайт тока для десктопа, я точно также поставлю max-width чтобы он не полз на больших экранах
1 раз слышу, что Desktop first равнозначен Mobile first. Всегда было наоборот
Причем здесь вообще веб-шрифты?
Капитанская какая-то статья. Как-будто автор потренировался в рисовании гифок. Причём не всегда удачно. Первая иллюстрация совершенно не говорит о том, как автор видит различия между двумя подходами.
тут как бы только посвященные поймут что на первой картинке контент «резинится», а на второй «прыгает» после изменения разрешения, сам смотрел минуту на нее
Ещё и перевод так себе.
Очень нормальная статья.
Я вот хоть все это и знаю, т.к. уже лет 15 разработчик с упором на веб, но вот девушке своей, которая пытается дизайнить сайты, внятно объяснить не могу (без заумных терминов… простым языком).
Эта статья для нее очень многие вещи поставила на свои места в плане понимания, а главное — статья проиллюстрированна отличной графикой.
Я вот хоть все это и знаю, т.к. уже лет 15 разработчик с упором на веб, но вот девушке своей, которая пытается дизайнить сайты, внятно объяснить не могу (без заумных терминов… простым языком).
Эта статья для нее очень многие вещи поставила на свои места в плане понимания, а главное — статья проиллюстрированна отличной графикой.
Часто люди не знают, какой подход выбрать. Подумайте как следует и выберите подходящий вам подход.
Ну прям не знаю. А вдруг подходящий мне подход не подойдёт?!
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
9 основных принципов отзывчивого веб-дизайна