ПОД КАКИЕ УСТРОЙСТВА НУЖНО РИСОВАТЬ АДАПТИВЫ ДИЗАЙНА САЙТА В 2022?
(и нужно ли вообще...)
Хороший вопрос. Одни говорят одно, другие — другое. В интернете написано третье. Так как быть рядовому проджекту? Что заказывать у дизайнера, чтобы не облажаться кривым сайтом перед заказчиком?
ДОГОВОРИМСЯ О ТЕРМИНАХ:
Под адаптивом будем понимать отдельный дизайн-макет сайта, который сделан под какое-то отличающееся от основного макета (обычно это десктоп) разрешение. Договорились? Отлично!
Теперь определим НАХРЕНА ЭТИ МАКЕТЫ АДАПТИВОВ ВООБЩЕ НУЖНЫ?
Ведь есть же резиновая вёрстка и вроде как можно сделать один макет, а на верстке он сам будет тянуться и адаптироваться как надо (но это не точно). Или моё любимое: «да сейчас почти весь трафик с телефонов — нахера этот десктоп то рисовать... Только время тратить!» (это вообще стадия «вызывайте санитаров» уже 😅)
ЗАЧЕМ НУЖНЫ ДИЗАЙН-МАКЕТЫ АДАПТИВОВ:
Они нужны для того, чтобы верстальщик понимал, как должен выглядеть дизайн для конкретных разрешений. Т.е. по сути, это своеобразная «шпаргалка для верстальщика», чтобы он все сделал как надо, а не додумывал, как должен выглядеть какой-то блок, например на телефоне.
Ты можешь забить на это хер и сэкономить на дизайне адаптивов. Но тогда не удивляйся, что адаптив готового сайта будет выглядеть криво. Например, на мониторе ПК ты будешь видеть красоту и радость, а заказчик, посмотрев сайт с ноутбука, будет возражать тебе и говорить, что сайт кривой. За такое он тебя по головке не погладит, т.к. сайт выглядящий криво на всех устройствах, кроме десктопа, не создаёт впечатление качественного.
Для каких разрешений (каких устройств) эти адаптивы нужно делать?
Популярные адаптивы:
— десктоп (1920 px)
— ноутбук (1024 px)
— планшет (640 px)
— мобилка (360 px)
В идеале отрисовать нужно их все. НО!
Дизайн может быть разный. И вполне возможно, что десктоп и ноутбук будут отображаться 1 в 1 (ну разве что отступ от краёв макета до контента чуть поменьше будет). Или для планшета и мобилки вполне можно использовать один и тот же макет. Но бывает так, что требуется отрисовать не только все популярные адаптивы, а ещё и то, как будет выглядеть дизайн, например, при горизонтальном положении телефона...
Сложна... (на самом деле нет).
Так, что же нужно отрисовывать, а на что можно хер забить?
Помнишь, что я писал о том, что все эти адаптивы — это «шпаргалка» для верстальщика? Так вот: МАКЕТЫ АДАПТИВОВ — показывают ТОЧКИ СЛОМА ДИЗАЙНА.
Грубо говоря, есть основной макет страницы сайта (обычно это макет для десктопа). При уменьшении ширины экрана он как бы сжимается. Но наступает момент, когда сжиматься корректно он уже не может, иначе верстка поедет и он будет выглядеть шакально. Например текст будет наезжать на картинку, блоки перекрывать друг друга и тому подобное... Если такое произошло, то поздравляю! Мы нашли ТОЧКУ СЛОМА, где сидит сом и усами шевелит: «куку, ёпта!». Вот для этого разрешения, где дизайн ломается и мы нашли сома-гопника, НУЖНО отрисовать адаптив.
Нарисовали? Отлично! Теперь сжимаем его до тех пор, пока не найдём СЛЕДУЮЩУЮ ТОЧКУ СЛОМА, отрисовываем макет адаптива для этого разрешения и так далее...
По такому принципу проектируются дизайн-макеты адаптивов.
Их может быть хоть один (если есть только одна точка слома) или хоть 10 (но это уже перебор).
При этом дизайн-макеты адаптивов ПРИВЯЗАНЫ НЕ К КОНКРЕТЫМ УСТРОЙСТВАМ (например к айфону 10), а к РАЗРЕШЕНИЮ (или ширине макета), при котором дизайн перестаёт тянуться и начинает ломаться.
Следовательно, для того чтобы верстальщику было понятно, как должен адаптироваться сайт и он все сделал сайт по красоте, нужно отрисоватвть макеты для всех этих точек слома.
Смекаешь?
ВОПРОС ОТ ПРОДЖЕКТОВ:
«А как определить сколько адаптивов нужно будет сделать?
Ведь я же не дизайнер и не знаю сколько там точек слома может быть, а в смету нужно заложить расходы на отрисовку этих дополнительных макетов. Вдруг я закажу у дизайнера все популярные адаптивы, а мне, оказывается, достаточно будет одного. Я не хочу переплачивать или платить за отрисовку дополнительных макетов из своего кармана...»
ОТВЕЧАЮ:
В идеале, нужно заставить дизайнера отрисовать ВСЕ популярные адаптивы. Это убережёт тебя от проблем с версткой и отображением готового сайта на разных устройствах. НО!
Все мы знаем... Хочется сэкономить)))
Буду честен — для 90% лендингов, которые делаются прожектами или маркетологами, достаточно только мобильного адаптива (на крайняк ещё планшет можно отрисовать). Потому, что их структура достаточно простая и без проблем тянется-сжимается.
НО! Ели ты делаешь сложный сайт (не лендинг), а дизайн у тебя чуть посложнее русского беханса, то заложи в проект отрисовку ВСЕХ популярных адаптивов.
Если ты этого не сделаешь, то будь готов к тому, что верстальщик завалит тебя вопросами, на которые ты не сможешь ответить. Из-за этого на каких-то устройствах сайт будет кривой. И доводить его до ума без макетов адаптивов — та ещё головная боль для верстальщика, и те ещё нервы для тебя (а иногда и на бабки влететь можно).
ИТОГ:
МАКЕТЫ АДАПТИВОВ:
— Показывают, как перестраивается дизайн в точках слома. И рисуют их именно для этого.
— Привязаны не к устройствам (ПК, ноутбук, планшет, телефон), а к разрешениям (ширине макета) при котором дизайн уже не может без проблем сжиматься/растягиваться дальше.
— Для простого по дизайну сайта (например лендинга) можно отрисовать только макеты десктопа (1920 px) и мобилки (360 px), а для более сложных по дизайну сайтов (считай — всех, кроме лендинга) я РЕКОМЕНДУЮ отрисовывать ВСЕ популярные на данный момент адаптивы:
1) десктоп (1920 px)
2) ноутбук (1024 px)
3) планшет (640 px)
4) мобилка (360 px)
P.S. если у тебя возникли вопросы, то не стесняйся и задавай 👍🏻
