sobaka@pavlova.cc
+7 (812) 320-57-87

Спрашивайте — ответим.

Стыдные вопросы про верстку и сетку

Собака Павлова
2018

ИНТЕРФЕЙСЫ

Все больше разговоров о том, что дизайнер должен уметь верстать, кодить, писать рекламные тексты, вышивать на печатной машинке и сушить белье взглядом. Это все мифы и легенды, хорошему специалисту хватает своей работы. Другое дело, что результат хорошо бы передавать дальше по конвейеру максимально безболезненно. А для этого — любить и знать особенности следующего этапа производства.
Анонимно собрали у коллег стыдные вопросы про верстку, для чистоты эксперимента озадачили внешнего эксперта, верстальщика Александра Аверьянова, и теперь делимся с вами.

В современном фронтенде сетки используются всегда или бывает, что и нет?

Всегда. Реализация только может быть разной, grid-ами или flexbox-ами. С точки зрения внешнего вида разницы никакой, верстка на grid позволяет располагать блоки в любом порядке и верстать довольно сложные макеты.

При ресайзе окна ресайзятся и колонки, и межколонники или бывают варианты?

По-разному. Чаще всего межколонники задаются в пикселях, сами колонки — в процентах. В адаптивной верстке при достижении какой-то ширины задаются другие значения для межколонников. В идеале, конечно, межколонники тоже должны быть в процентах.

В рамках одного адаптивного шаблона при ресайзе может измениться количество колонок или это уже изменение шаблона?

Типа того, есть базовое количество колонок, которое при уменьшении экрана может меняться, и шаблон перестраивается.

Если в макете сетка никак не размечена, что ты [верстальщик] делаешь?

Сам накладываю сетку, выбирая базовое количество колонок — 10, 12, 16.

Допустим, мы вообще не используем сетку. Можем ли мы случайно сделать такой макет, под который нормально не ляжет даже самая подходящая сетка? То есть верстальщику придется существенно его менять (размеры блоков, отступы и т. д.).

Да, если в дизайне ты не следуешь какой-то сетке, то верстальщику подобрать сетку может быть проблематично. Либо верстка будет сильно отличаться от дизайна, либо верстать нужно будет кастомно — без использования сетки. Если так задумано и должно быть в дизайне — то ок, просто будет более кастомная сетка, или придется сетку брать с большим количеством колонок, чтобы учесть все варианты.

Если в макете какой-то блок стоит не по сетке, в верстке он все равно привязан к ближайшей колонке, просто со смещением?

Да, можно блок помещать в колонку и смещать его потом, если этого требует дизайн.
* * *
Если у вас вдруг тоже есть вопросы про верстку и сетку — пишите в комментарии, попробуем ответить. Также можно развести холивар, но мы не обещаем, что будем участвовать :)
27 сентября 2018
Собака Павлова
Дизайн сложных интерфейсов
Другие статьи

Седьмое вообще огонь

Нужно ли UX-проектировщику тратить время на то, чем занимаются графические дизайнеры? Если да, то зачем?

Хорош интерфейс или плох? А если плох, то в чем конкретно и насколько это важно? Что делать — и стоит ли?