Комментарии
Терминология, правила построения, полезные ссылки
Адаптивная верстка. Сетки и как их использовать
Сибирикс

Адаптивная верстка. Сетки и как их использовать

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

Вокабуляр

Прежде чем перейти к мелочам, давайте разберемся с терминологией.

Сетка — это «невидимые» линии, которые задают базовую структуру, скелет дизайна, и где располагаются элементы дизайна.

Контентные блоки — это текст, изображение или и то, и другое. Цвет фона не считается контентным блоком, если он не является контейнером для текста или изображения.
адаптивная верстка
Фиолетовые части — контентные блоки. Источник
Колонки — это блоки, которые составляют ширину контента дизайна. Элементы поля должны располагаться на определенном количестве колонок. Традиционно в дизайн-системе ширина колонок для разных разрешений не меняется, но вот их количество — да: с 12 колонок для десктопа меняется на 8 для планшета и на 4 для телефона. В основном у сеток ширина колонки составляет 60−80 пикселей.

Ширину колонки нужно подбирать под конкретный проект, т.к. от этого будет зависеть ширина контента на сайте.
Межколоночный интервал (или, как его все знают по оригиналу, гуттер) — это пространство между колонками, которое добавляет в дизайн «воздуха». Обычный размер интервала — 20 пикселей. Особенно интервал важен, когда на сайте элементы располагаются по принципу плитки — например, фотогалерея. Бывает, что межколоночный интервал увеличивается по мере увеличения ширины устройства, но можно сделать его и фиксированным.
Боковые поля — это пространство за пределами ширины контента (увеличивается по мере увеличения ширины устройства). На телефонах обычно они составляют 20−30 пикселей и сильно отличаются от боковых полей сайта на планшетах и десктопе. Но на на любом устройстве боковое поле будет сохранятся (хотя бы минимально) при уменьшении размера браузера.

Ширина контента будет зависеть от сетки, высота — от высоты экрана устройства.

Правила построения

Теперь перейдем к основным правилам построения адаптивной сетки.

1. Элементы поля должны располагаться на целом количестве колонок

Вы можете распределить элементы поля по колонкам как хотите: 6 и 6, 3 на 4, 4 на 3 — как угодно. Но в сумме колонок должно получиться 12, а элемент может занимать только целое число колонок (разместить его, например, на полутора колонках нельзя).

В этом примере карточки профиля, расположенные на разном количестве колонок:
адаптивная верстка
Карточки профиля с колонками (слева) и без колонок (справа). Источник
Ок, пока все просто. А если вам нужно разделить контент на определенное число колонок? Вы идеально размещаете элементы на сетке, но элементы оказываются визуально слишком широкими:
Получается, что когда вы поместили эти элементы на сетку, текст растянулся в ширину слишком сильно. Так вот шепнем по секрету: используйте поля. Лучшим расположением текста на самом деле будет не по ширине сетки, а как на примере:
Так тоже можно, но вы должны понимать, что весь элемент — что-то вроде невидимого контейнера большего размера, чем сам контент в нем. Когда вы передадите дизайн верстальщику, он тоже должен это понимать.

2. Не оставляйте элементы поля в межколоночном интервале

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

А как вам такая ситуация: нужно, чтобы карточка профиля делилась пополам: одна половина с текстом, другая с изображением. Ок, разделили.
адаптивная верстка
Карточка профиля с родительским элементом, расположенным на шести колонках (слева), без выделения (в центре) и без сетки (справа). Источник
Получилось так, что изображение выходит за пределы колонки, а текст размещается вообще не понять как. Вдохните, выдохните, дышите нормально, потому что такая ситуация — это тоже нормально. Если «родительский» элемент или просто более крупное изображение объекта находится внутри колонок, то вся мелочь внутри может располагаться так, как будет лучше с точки зрения дизайна :)

4. Не используйте колонку сетки как боковой отступ

Контент должен соответствовать ширине сетки — не больше, ни меньше. Но, если размер браузера уменьшается, а ширина его содержимого нет — это будет выглядеть странно, разве нет?. Нет, это работает не так. Все будет зависеть от того, как заверстали страницу: либо контент внутри сетки начнет пропорционально масштабироваться, а боковые поля останутся фиксированными, либо боковые поля будут масштабироваться одновременно с содержимым.

Поэтому, если вы попросите дизайн с шириной 1200 пикселей, это не значит, что дизайн буквально будет 1200 пикселей в ширину. Это означает, что ширина контента составит где-то 960 пикселей внутри сетки размером 1200 пикселей, ведь мы оставим местечко для боковых полей.
адаптивная верстка
Дизайн должен заполнять всю ширину сетки (слева), а не оставлять столбец в качестве поля (справа). Источник
5. Элемент на всю ширину экрана или фон должны выступать за пределы сетки

Посмотрите на пример ниже: с правой стороны нет никакого отступа, зато есть изображение с заливкой и фоном. Причем изображение не только выходит за пределы сетки, но и «обрезается» — и по-прежнему все смотрится хорошо.
Еще одна ситуация: хедер и футер не считаются частью основного контента. Кто-то предпочитает делать их на ширину экрана, кто-то — оставлять по ширине сетки. У обоих вариантов есть свои плюсы: если закрепить на ширину экрана, то остается много места для меню и навигации; если оставить футер и хедер в пределах ширины сетки, то пользователю очень многодюймового монитора не придется их искать.
адаптивная верстка
У сайта слева меню в пределах сетки. У сайта справа хедер и меню за пределами сетки. Источник

Как это все работает

Традиционно в сетке ширина колонок и межколоночных интервалов остается неизменной, при изменении разрешения меняется только количество колонок. Почему и как это работает? Так сделали, чтобы упростить верстку.
На самом же деле верстка должна корректно отображаться при любой ширине браузера. Допустим, дома у вас большой монитор разрешением 3440 пикселей, дизайн десктопной версии сайта — 1920 пикселей, планшетной — 768 пикселей, а мобильной — 375 пикселей. Прямо сейчас вы, скорее всего видите дизайн с шириной контента чуть меньше 1440 пикселей с большими боковыми полями (если находитесь с настольного компьютера в офисе). А что если браузер на один пиксель меньше — 1339 пикселей? Тут несколько вариантов.

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

На адаптиве сайта при переходе от десктопа к планшету вы перейдете к следующей точке излома. Пока вы не достигните следующей точки излома, сокращаться будут только боковые поля (не контент). Текст не будет переносится, а изображения не будут динамически меняться. Если никто не позаботится о том, чтобы все размеры были учтены, какая-то точка излома может быть пропущена. Тогда сайт будет выглядеть обрезанным, пока вы не достигнете следующей после десктопа точки излома в 768 пикселей. Только тогда контент встанет на свои места и все будет выглядеть правильно для планшета. Если вы еще уменьшите масштаб, то произойдет все то же и сайт будет выглядеть так же, пока вы не достигнете следующей точки излома.

Отзывчивая верстка

По мере того как вы сжимаете окно, его содержимое будет динамически меняться: текст переносится, а элементы дизайна становятся более узкими. Даже если вы еще не достигли следующей точки излома, сайт будет адаптироваться под ваше текущее разрешение экрана. Здесь точки излома — это просто ориентиры.

Гибридная адаптивная верстка

Часто делают комбинацию из адаптивной и отзывчивой верстки. Такие сайты становятся отзывчивыми, когда отображаютися только на телефонах, т. к. вариантов размеров экранов — тьма.
И адаптивная, и отзывчивая верстка — это збс, с небольшими но. Адаптивная удобна тем, что у нее есть точки излома, которые дают тебе понимание, как будет выглядеть контент в том или ином разрешении. Отзывчивая по сути является некой реинкарнацией «резиновой» верстки, когда верстали таблицами. Да, она позволяет динамично перестраивать контент, но при этом, если не следить за контентом и не использовать, например, типограф, может выдать непредсказуемый результат: там буква висит, здесь картинка застряла, туда кнопка прилипла. Можно использовать любой вариант, главное с умом.
адаптивная верстка
Евгений
арт-директор «Сибирикс»
Мы не делаем разницу между адаптивной и отзывчивой верстками, поскольку реализуем «отзывчивую» априори — она позволяет более эффективно использовать пространство на странице из-за того, что боковые поля условно не занимают половину экрана.
адаптивная верстка
Сергей
разработчик «Сибирикс»

Полезности

1. Не обязательно придерживаться традиционной сетки в 12, 8, 4 колонки. И даже расстояние между колонками не обязательно должно быть 20 пикселей.

2. В любом случае, если сайт подстраивается под другие устройства — SEO на высоте. Любит ли Google ваш сайт, т.к. его удобно смотреть с телефона, можно проверить можно здесь.

3. А тут список инструментов, которые помогут вам создавать сетки:

4. Адаптивную верстку, с перескоками с одной точки излома на другую, уже никто не делает, да и сам термин априори подразумевает плавную отзывчивую верстку.



Статья подготовлена на основе материала Responsive grids and how to actually use them.