«Респонсив? Это как?» Ликбез по верстке в вебе для дизайнеров

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

Это процесс создания веб-страниц с помощью языка разметки (HTML) и стилизация этих страниц с помощью каскадных таблиц стилей (CSS). Попроще — склейка и расположение элементов сайта: текста, изображений, таблиц, видео, карточек и т.д.

От верстки зависит несколько важных вещей:

В этой статье я расскажу про ту самую возможность взаимодействия — адаптивность (или ее отсутствие).

Прежде, чем пытаться дробить верстку на какие-то виды, стоит сказать, что верстка либо изменяет свое поведение на разных экранах, либо не изменяет. А уже дальше возникают виды, к названию которых привыкли разработчики (но бывают и те, кто делит верстку на адаптивную/не адаптивную, и больше никак)

Статичная/фиксированная верстка (Static)

При такой верстке блоки на странице не меняют свою ширину, потому что вся ширина жестко задана в пикселях.

Сейчас размеры экранов достаточно вариативны, а фиксированная верстка рассчитана под какой-то один или несколько размеров, поэтому такой формат можно встретить довольно редко.

Резиновая верстка (Liquid, Fluid)

Используются относительные единицы измерения вместо фиксированных. Обычно в «резиновых» макетах шаблона используются проценты вместо пикселей.

При резиновой верстке веб-страница изменяет свои размеры в зависимости от ширины окна браузера:

Блоки тянутся как резина, отсюда и название. Часто такая верстка учитывает только один тип устройств, а опыт пользователей слишком больших и слишком малых экранов игнорируется.

Адаптивная верстка (Adaptive)

Это та верстка, которая автоматически подстраивается под размер окна браузера.

Адаптивность реализуется с помощью выражений — они же breakpoint’ы. При попадании размера экрана (или окна браузера) в один из заданных диапазонов, все элементы перестроятся «как надо» исходя из заданных правил, которые заложил дизайнер, и реализовал разработчик.

Важно! При адаптивной верстке блоки меняют свой вид дискретно, в момент достижения breakpoint’а.

Отзывчивая/респонсивная верстка (Responsive)

В ней используются как относительные единицы измерения, так и медиа-запросы CSS. Таким образом, это некий симбиоз резиновой и адаптивной верстки.

В реализации такая верстка самая трудозатратная, но этого того стоит — сайт в результате будет адекватно подстраиваться под любое разрешение.

Все зависит от задачи, поэтому нельзя сказать однозначно.

Современными и популярными можно назвать последние два типа — адаптивную и отзывчивую. При этом, отзывчивая верстка является более универсальным решением, поскольку она будет корректно и ожидаемо отображаться на всех разрешениях.

Но для некоторых сайтов в качестве оптимального варианта может подойти и адаптивная верстка: если нам нужен сайт, который будет работать только на определенных разрешениях (например, Mobile 375 + Desktop 1400, и больше нигде).

Ниже приведена схема, на которой показаны плюсы и минусы разных подходов

У меня есть канал, где я пишу и о других полезных вещах. Welcome!