Модульная сетка сайта. Что это, зачем она нужна и как её сделать?

Одним из важнейших этапов создания любого веб-портала, является создание модульной сетки сайта.

Если говорить простыми словами, то модульная сетка сайта – это схема расположения всех элементов и блоков веб-ресурса.

Вы должны заранее продумать, как и где будут располагаться различные блоки сайта с контентом сайта. Всё это можно оформить даже в простом графическом редакторе Paint.

Простая модульная сетка сайта

Основных блоков у сайта три:

1. Шапка сайта (header). Верхняя часть веб-ресурса.
2. Тело сайта (body). Контент, который находится под шапкой.
3. Подвал сайта (footer). Блок в самом низу сайта.

Рисунок 1. Модульная сетка сайта

Дополнительных же блоков (модулей) на сайте может быть сколько угодно. И располагаться на веб-странице они могут где-угодно.

Рисунок 2. Пример самой простой модульной сетки сайта

На этом этапе создания своего собственного сайта с нуля, вы должны графически изобразить такие блоки сайта как шапка (header), левая колонка (left), правая колонка (right), блок вывода материалов, подвал (footer).

Не всегда, и не у каждого сайта есть все вышеперечисленные блоки. На просторах интернета можно встретить множество разных дизайнов сайта. Иногда проект делают только с двумя колонками. А иногда его делают даже без блока footer (хотя я считаю, что это совершенно не правильно). Всё зависит от ваших личных предпочтений.

Но если делать сайт правильно, то я рекомендую проектировать его как минимум с блоками: header, body и footer.

В шапке, как правило размещают логотип, или текстовое название сайта, а также верхнее меню сайта. В самом верху шапки может быть полоса с контактами, или любой другой важной информацией.

Рисунок 3. Пример того, как может быть оформлен блок Header на сайте.

Тело сайта (блок body) состоит из одной, двух и более колонок. Но как правило, это одна, две, или три колонки.

Если колонка всего лишь одна, то вполне логично что именно в ней выводится весь основной контент сайта: статьи, товары, информация об услугах и т.д.

Рисунок 4. Пример сайта с одной колонкой в блоке body

Если колонок две, то в одной выводится основной контент, а в другой различные модули и дополнительная информация. Например, дополнительное меню сайта, облако тегов, форма авторизации, информер погоды, календарь и т.д.

Рисунок 5. Пример сайта с двумя колонками в body

Если у сайта три колонки, то в одной (как правило по центру) выводится основной контент, а в левой и правой выводятся дополнительные модули и информеры: меню, теги, форма поиска, форма авторизации, информация о популярных, или последних новостях сайта.

Рисунок 6. Пример сайта с тремя колонками в body

Как видите, колонок у сайта может быть три, а модулей ещё больше. Так, например, в правой колонке (right) у нас размещается 2 модуля – модуль авторизации на сайте и модуль с информацией о продукции и услугах.

Самый идеальный вариант – это разметить абсолютно всё. То есть досконально продумать какие блоки будут выводиться на сайте, что в них будет отображаться и где они будут размещены на веб-странице. Говоря это, я имею ввиду такие блоки как: поиск, информер с популярными новостями, информер с похожими новостями, облако тегов, форму авторизации и другое.

Кстати, вот пример сайта с тремя колонками в блоке body, где в левой колонке выводится лента новостей (основной контент сайта), а центральная и правая колонки являются статичными. В них располагаются следующие модули: информер погоды, курс валют, календарь праздников и выходных дней, блок с рекламой и объявлениями.

Рисунок 7. Пример новостного сайта с тремя колонками в body