«Респонсив? Это как?» Ликбез по верстке в вебе для дизайнеров
Статья написана в первую очередь для дизайнеров, которые хотят быть ближе к команде разработки и понимать ограничения, чтобы учитывать их в своей работе. Погнали!
Что вообще такое верстка?
Это процесс создания веб-страниц с помощью языка разметки (HTML) и стилизация этих страниц с помощью каскадных таблиц стилей (CSS). Попроще — склейка и расположение элементов сайта: текста, изображений, таблиц, видео, карточек и т.д.
От верстки зависит несколько важных вещей:
- скорость загрузки сайта
- корректность отображения сайта в браузере
- соответствие требованиям поисковых систем
- возможность взаимодействия с сайтом с разных устройств/экранов
В этой статье я расскажу про ту самую возможность взаимодействия — адаптивность (или ее отсутствие).
Какой бывает верстка
Прежде, чем пытаться дробить верстку на какие-то виды, стоит сказать, что верстка либо изменяет свое поведение на разных экранах, либо не изменяет. А уже дальше возникают виды, к названию которых привыкли разработчики (но бывают и те, кто делит верстку на адаптивную/не адаптивную, и больше никак)
Статичная/фиксированная верстка (Static)
При такой верстке блоки на странице не меняют свою ширину, потому что вся ширина жестко задана в пикселях.
Сейчас размеры экранов достаточно вариативны, а фиксированная верстка рассчитана под какой-то один или несколько размеров, поэтому такой формат можно встретить довольно редко.
Резиновая верстка (Liquid, Fluid)
Используются относительные единицы измерения вместо фиксированных. Обычно в «резиновых» макетах шаблона используются проценты вместо пикселей.
При резиновой верстке веб-страница изменяет свои размеры в зависимости от ширины окна браузера:
- при увеличении окна увеличивается и ширина элементов страницы
- при уменьшении окна уменьшается и ширина элементов страницы
Блоки тянутся как резина, отсюда и название. Часто такая верстка учитывает только один тип устройств, а опыт пользователей слишком больших и слишком малых экранов игнорируется.
Адаптивная верстка (Adaptive)
Это та верстка, которая автоматически подстраивается под размер окна браузера.
Адаптивность реализуется с помощью выражений — они же breakpoint’ы. При попадании размера экрана (или окна браузера) в один из заданных диапазонов, все элементы перестроятся «как надо» исходя из заданных правил, которые заложил дизайнер, и реализовал разработчик.
Важно! При адаптивной верстке блоки меняют свой вид дискретно, в момент достижения breakpoint’а.
Многие относят адаптивность к свойству вёрстки и не воспринимают это как отдельный вид — в процессе написания статьи я общался с разработчиками, и все они описывали адаптивность по-разному.
Отзывчивая/респонсивная верстка (Responsive)
В ней используются как относительные единицы измерения, так и медиа-запросы CSS. Таким образом, это некий симбиоз резиновой и адаптивной верстки.
В реализации такая верстка самая трудозатратная, но этого того стоит — сайт в результате будет адекватно подстраиваться под любое разрешение.
Какую верстку выбрать для проекта?
Все зависит от задачи, поэтому нельзя сказать однозначно.
Современными и популярными можно назвать последние два типа — адаптивную и отзывчивую. При этом, отзывчивая верстка является более универсальным решением, поскольку она будет корректно и ожидаемо отображаться на всех разрешениях.
Но для некоторых сайтов в качестве оптимального варианта может подойти и адаптивная верстка: если нам нужен сайт, который будет работать только на определенных разрешениях (например, Mobile 375 + Desktop 1400, и больше нигде).
Ниже приведена схема, на которой показаны плюсы и минусы разных подходов
У меня есть канал, где я пишу и о других полезных вещах. Welcome!