Про адаптивы

Это хороший вопрос. Одни говорят одно, другие — другое. В интернете написано третье. Так как быть рядовому проджекту? Что заказывать у дизайнера, чтобы не облажаться кривым сайтом перед заказчиком?

Теперь определим: НАХРЕНА ЭТИ МАКЕТЫ АДАПТИВОВ ВООБЩЕ НУЖНЫ?

Есть же резиновая вёрстка, и вроде как можно сделать один макет, а на верстке он сам будет тянуться и адаптироваться как надо (но это не точно). Или моё любимое: «да сейчас почти весь трафик с телефонов — нахера этот десктоп то рисовать... Только время тратить!» (это вообще стадия «вызывайте санитаров»)

Они нужны для того, чтобы верстальщик понимал, как должен выглядеть дизайн для конкретных разрешений. Т.е. по сути, это своеобразная «шпаргалка для верстальщика», чтобы он все сделал как надо, а не додумывал сам, как должен выглядеть какой-то блок, например на телефоне.

Ты можешь забить на это хер и сэкономить на дизайне адаптивов. Но тогда не удивляйся, что адаптив готового сайта будет выглядеть криво. Например, на мониторе ПК ты будешь видеть красоту и радость, а заказчик, посмотрев сайт с ноутбука, будет возражать тебе и говорить, что сайт кривой. За такое он тебя по головке не погладит, т.к. сайт, выглядящий криво на всех устройствах кроме десктопа, не создаёт впечатление качественного.

Популярные адаптивы:

В идеале отрисовать нужно их все.

НО!

Дизайн может быть разный. И вполне возможно, что десктоп и ноутбук будут отображаться 1 в 1 (ну разве что отступ от краёв макета до контента чуть поменьше будет). Или для планшета и мобилки вполне можно использовать один и тот же макет. Но бывает так, что требуется отрисовать не только все популярные адаптивы, а ещё и то, как будет выглядеть дизайн, например, при горизонтальном положении телефона...

Так, что же нужно отрисовывать, а на что можно хер забить?

Грубо говоря, есть основной макет страницы сайта (обычно это макет для десктопа). При уменьшении ширины экрана он как бы сжимается. Но наступает момент, когда сжиматься корректно он уже не может, иначе верстка поедет и он будет выглядеть шакально. Например текст будет наезжать на картинку, блоки перекрывать друг друга и тому подобное... Если такое произошло, то поздравляю! Мы нашли ТОЧКУ СЛОМА (где сидит сом и усами шевелит: «куку, ёпта!»).

Вот для этого разрешения, где дизайн ломается и мы нашли сома-гопника, НУЖНО отрисовать адаптив.

Нарисовали? Отлично! Теперь сжимаем его до тех пор, пока не найдём СЛЕДУЮЩУЮ ТОЧКУ СЛОМА, отрисовываем макет адаптива для этого разрешения и так далее...

По такому принципу проектируются дизайн-макеты адаптивов. Их может быть хоть один (если есть только одна точка слома) или хоть 10 (но это уже перебор).

Следовательно, для того чтобы верстальщику было понятно, как должен адаптироваться сайт и он все сделал сайт по красоте, нужно отрисоватвть макеты для всех этих точек слома.

Смекаешь?

Ответ на этот вопрос простой: бери то, которое удобно тебе лично, либо для решения задачи проекта.

Например:

Мне удобно брать десктоп по 1600 px потому, что такой макет идеально влезает в экран на макбуке, при просмотре макета в режиме прототипирования.

Или тебе стало известно, что интерфейс, для которого ты делаешь дизайн, будет показываться в основном на широкоформатных экранах (например внутри стенда предприятия на выставке) — тогда логично уточнить у заказчика разрешение этих экранов и делать макет конкретно под него.

В идеале, нужно попросить дизайнера отрисовать все популярные адаптивы. Это убережёт тебя от проблем с версткой и отображением готового сайта на разных устройствах.

НО! Все мы знаем... Хочется сэкономить)) Поэтому ниже написал гайд, когда можно экономить, а когда не рекомендуется:

Достаточно десктоп+мобилка

Для простого по дизайну сайта (например лендинга) можно отрисовать только макеты десктопа (1920 px) и мобилки (360 px).

Это 90% лендингов, которые делаются прожектами или маркетологам.

Отрисовывать всё адаптивы

Для более сложных по дизайну сайтов (считай — всех, кроме лендинга) я рекомендую отрисовывать все популярные на данный момент адаптивы: десктоп (1920 px), ноутбук (1024 px), планшет (640 px), мобилка (360 px).

Если ты этого не сделаешь, то будь готов к тому, что верстальщик завалит тебя вопросами, на которые ты не сможешь ответить. Из-за этого на каких-то устройствах сайт будет кривой. И доводить его до ума без макетов адаптивов — та ещё головная боль для верстальщика, и те ещё нервы для тебя (а иногда и на бабки влететь можно).