Модульна сітка сайту. Що це, навіщо вона потрібна та як її зробити?

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

Якщо говорити простими словами, то модульна сітка сайту – це схема розташування всіх елементів та блоків веб-ресурсу.

Ви повинні заздалегідь продумати, як і де розташовуватимуться різні блоки сайту з контентом сайту. Все це можна оформити навіть у простому графічному редакторі 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