У веброзробці макет сторінки (layout), або компонування, є фундаментальною візуальною структурою, що визначає розташування та організацію всіх елементів на веб-сторінці. Ця структура охоплює розміщення текстового контенту, зображень, навігаційних меню, заголовків, футерів та інших інтерактивних компонентів. Основна мета макета полягає у забезпеченні логічного потоку інформації, підвищенні зручності використання (юзабіліті) та створенні естетично привабливого інтерфейсу для кінцевого користувача. Ефективний макет є наріжним каменем веб-дизайну та розробки, оскільки він безпосередньо впливає на те, як користувачі взаємодіють з контентом та сприймають веб-сайт, покращуючи загальний користувацький досвід та доступність.
Історично веб-макети еволюціонували від статичних до динамічних та контекстно-оптимізованих систем, що відображає зростаючу складність та різноманітність пристроїв, що використовуються для доступу до Інтернету. На початкових етапах веб-розробки домінували фіксовані макети, які характеризувалися незмінною шириною контенту, незалежно від розмірів вікна браузера чи екрану пристрою. Це зазвичай реалізовувалося шляхом задання фіксованої ширини в пікселях. Однак, такий підхід призводив до значних порожніх просторів на великих моніторах та вимагав незручної горизонтальної прокрутки на менших екранах, таких як мобільні пристрої.
Наступним кроком у розвитку стали резинові макети (Fluid Layout), які підлаштовували контент під ширину екрану шляхом стиснення або розтягування елементів. Ширина елементів у таких макетах, як правило, задавалася у відсотках, що дозволяло їм займати певну частку від доступного простору. Хоча це вирішило проблему горизонтальної прокрутки, резинові макети могли призвести до проблем з читабельністю: текстові блоки ставали надмірно широкими на великих екранах або надто стиснутими на малих, не дозволяючи змінювати саму структуру макета, лише його пропорційні розміри.
Значним проривом стала поява адаптивних макетів (Adaptive Layout), які передбачають підлаштовування під роздільну здатність і розмір екрану шляхом застосування різних стилів на основі певних "точок перелому" (breakpoints). Цей підхід часто реалізується за допомогою медіа-запитів, що дозволяють завантажувати різні CSS-правила для різних розмірів екрану. Чуйний макет (Responsive Layout) часто використовується як розширення або синонім адаптивного, позначаючи дизайн, який гнучко реагує на зміни розміру екрану. Чуйний дизайн поєднує принципи резинового макета (гнучкі сітки та зображення) з адаптивними елементами (медіа-запити) для забезпечення безшовного та оптимального перегляду на будь-якому пристрої, від мобільних телефонів до широкоформатних моніторів. Ця еволюція від статичних до динамічних та інтелектуальних систем підкреслює перехід від парадигми "дизайн для десктопу" до "дизайн для контенту та користувацького досвіду на всіх пристроях", що є відповіддю на поширення різноманітних пристроїв та необхідність забезпечення універсальної доступності та зручності використання веб-контенту.
Модульна система верстки є архітектурним підходом у веб-дизайні, де основою композиції полос і розворотів стає модульна сітка з певним кроком (модулем), однаковим або різним по горизонталі і вертикалі. Ця система забезпечує структурований, впорядкований та передбачуваний підхід до розміщення елементів на сторінці.
Використання модульної сітки в дизайні сайту надає кілька ключових переваг:
Модульна система виходить за межі простого набору CSS-властивостей; вона є фундаментальною філософією дизайну. Вона полягає у розбитті складного макета на менші, багаторазові та послідовно розмірені одиниці. Цей підхід безпосередньо призводить до масштабованості та консистентності веб-проектів. Визначаючи сітку, дизайнери та розробники встановлюють спільну мову та фреймворк, що робить макети легшими для побудови, підтримки та масштабування. Консистентність між сторінками та пристроями природно вбудована в систему, оскільки всі елементи підкоряються єдиним правилам сітки. Таким чином, модульна система є архітектурною парадигмою, яка лежить в основі сучасної, масштабованої та підтримуваної веб-розробки, дозволяючи ефективну командну роботу та послідовний користувацький досвід на різноманітних платформах.
У лекції розглядаються різні підходи до створення колонок, що є конкретними технічними реалізаціями принципів модульної системи верстки. До них відносяться традиційні методи, такі як таблична розмітка, властивість float та display: inline-block, а також сучасні підходи, як-от Flexbox та CSS Grid. Це підкреслює, що модульна система є концепцією або філософією, яку можна втілити за допомогою різноманітних CSS-технік.