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

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

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

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

Контентные блоки — это текст, изображение или и то, и другое. Цвет фона не считается контентным блоком, если он не является контейнером для текста или изображения.

Колонки — это блоки, которые составляют ширину контента дизайна. Элементы поля должны располагаться на определенном количестве колонок. Традиционно в дизайн-системе ширина колонок для разных разрешений не меняется, но вот их количество — да: с 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. А тут список инструментов, которые помогут вам создавать сетки:

• grid.guide;
  
• gridcalculator.dk;
  
• pearsonified.com;
  
• gridlover.net;
  
• archetypeapp.com;
  
• hihayk.github.io/modulator.
  
  

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



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