Прежде чем говорить о сетке, сразу хочется познакомить вас с термином EM — это величина, относительная единица измерения, которая используется в веб-верстке.
Почему именно EM? Этот термин пришел из высокого набора, когда приходилось считать количество знаков. Тогда была придумала эта историческая единица, которая равняется самой большой букве (когда буквы были материальные, когда был высокий набор, литер вырезался из дерева или выливался из метала) и самой большой буквой в наборе была М. То есть это некоторая усредненная единица, равняющаяся среднему размеру буквы в шрифте.
Другими словами это буква, некая стандартная, усредненная.
Как получаем числовой показатель? К примеру, представим строку, набранную 16 кеглем и высотой строки 24px. Если 24 разделить на 16 получится 1.5.
По классике книжной верстки оптимальная длина строки 45–75 знаков, а высота 1.4 em.
Примеры того, как это накладывается на современную строку на сайте:
Оптимально для мобильных устройств:
32–38 знаков
1.3–1.5 em — размер высоты строки
Вывод: чем короче строка, тем меньше высота строки.
Из-за того, что в вебе человек не читает, а сканирует, высота строки на сайтах больше классической.
Итак, мы поговорили про строку и об основных ее положениях. Теперь поговорим про сетку и зачем она нужна.
Часто, когда говорят про сетку, показывают газету
Разберем ее более детально.
Модуль
Как любая система, сетка строится на основе модуля. Что такое модуль в применении к сетке — это некая минимальная единица измерения, которая ложится в основу всей структуры.
При построении сетки мы обычно используем модуль 6px, то есть в нем все размеры сетки кратны 6px (в каких-то крайних случаях эти 6px можно разделить на двое и получается 3px)
Высота колонки — кратна
Отступы между колонками — кратны
Отступы от краев — кратны
То есть получается, высота строки любого текстового блока кратна либо 6 либо 3 px. За счет этого вся система замыкается на себе и становится очень цельной. Кроме того, это экономит время и позволяет не думать о том, где должен стоять тот или иной блок — вы просто выравниваете его сначала по большой сетке (колоночной), потом по маленькой (модульной).
Колонки:
Это основные составляющие сетки. Ниже вы видите 12-колоночную сетку, где фиолетовая полоса представляют одну колонку.
Межколонные интервалы:
Узкие желтые полоски являются формой микро-пробелов, которые дают сетке немного воздуха.
Столбцы:
Они образуют прочную структуру, которая дает последовательность и порядок из-за выравнивания.
Почему 12-ти колоночная сетка считается самой удобной?
Потому, что она хорошо делится на три, четыре и шесть столбцов, что достаточно гибко, и подходит для разных типов контента.
1024–1400px — это стандартная 12-ти колоночная сетка на desktop.
На планшете количество колонок уменьшается в два раза. Этого более чем достаточно при работе с планшетом. Как и в случае с мобильными устройствами, все становится менее динамичным, более спокойным и функциональным.
Также юзабельным вариантом считается 4-х колоночная сетка.
Она простая и надежная, но из-за симметричности может выглядеть скучновато.
3-х колоночная сетка — более смелый вариант.
В случае использования асимметричной сетки, вам нужно разумно находить баланс для своего проекта.
Стандартные выкладки при разработке сайтов:
Стоит помнить, что высота строки наборного текста никогда не должна быть равна или больше чем отступы между колонками. Если так происходит, то скорее всего, во время верстки будет тяжело работать с этой сеткой и блок будет сыпаться рядом с другим.
На мобильных устройствах есть один интересный момент — если в Вашей типографике используются жирные заголовки и вам хочется сделать ее богаче с большим количеством начертаний и контрастов, то можно заголовок второго уровня сделать такого же размера как наборный шрифт (т.е. опустить его на ступень по модульной шкале размеров) и за счет своей насыщенности он так же хорошо будет работать в макете.
Эксперимент:
Здесь дизайнер избавился от межколонных отступов и просто последовательно разделил весь экран на 12 колонок на desktop и на меньшее количество колонок на последующих устройствах. Это дает интересный эффект.
В качестве отступов от контента мы делаем по одной колонке и отступы между блоками уже прописываем сами фиксировано, то есть, они не резиновые. Можете попробовать сами, создает очень интересное впечатление от верстки. Кроме того, боковые отступы становятся более осмысленные и всегда подчиняются Вашей логике, которую вы заложили при помощи сетки и поделили пространство.
Зачастую проблемы выявляются на больших разрешениях.
Это обусловлено тем, что все уже научились адаптировать свой макет к маленьким устройствам. Тем более, что там логика упрощается.
Минусы:
- Мелко
То есть, дизайнер разрабатывает макет под 1024px, не сильно стараясь прогнозировать то, что с ним произойдет на разрешениях 1600px и больше. Выделяя просто какую-то зону под дизайн, всю логику, красоту и вёрстку, а по бокам остаются — неосмысленные куски пространства.
Не надо так!
Пустое пространство — это мощный инструмент выразительности, управления вниманием и оно всегда должно быть осознанным. Не оставляйте “висящие уши” по краям.
- Плывет строка
Такое случается, когда прекращают соблюдаться правила оптимального количества знаков в строке. За счет этого макет становится растянутым и резиновым. Задача дизайнера в данном случае — не густо покрыть все контентом, а все-таки сделать текст читабельным.
Нет ничего страшного, если при помощи сетки у вас осознанно все пространство и просто в какой-то момент текстовой блок упирается в невидимую стену, перестает деформироваться и остается в том диапазоне символов в строке, когда это удобно читается.
Другая распространенная ошибка, когда дизайнер имеет свободное пространство и тут же решает его всё заполонить дизайном и контентом.
Когда пользователь видит такое обилие контента, ему не только сложно разобраться где и что тут главное, где точка входа и за что зацепиться взгляду, но у него и не возникает желания этого делать. Пользователь видит слишком много информации и закрывает страницу.
Полезные ссылки на инструменты, которые помогут Вам создавать сетки:
