1. Макети по ширині
2. фіксований макет
3. переваги
4. переваги
5. переваги
6. переваги
7. комбінований макет
8. сайт

Коли продумується дизайн сайту, враховується обсяг майбутньої інформації на ньому, звички потенційних відвідувачів, зручність доступу до матеріалу і безліч інших речей. Типові елементи на зразок заголовка, навігації, контента, контактної інформації потрібно розмістити на одній сторінці, в сукупності це і називається її макетом. Таким чином, макет це спосіб організації матеріалів на веб-сторінці. Самих макетів існує величезна кількість, але їх, тим не менше, можна систематизувати за низкою ознак, наприклад, по ширині, по кількості колонок, по розташуванню елементів, за приладами на які вони орієнтовані і ін. Найбільш популярним є поділ макетів по ширині і кількості колонок, які і розглянемо далі.

Макети по ширині

Розрізняють п'ять типів макетів, пов'язаних з шириною:

• фіксовані;
• гумові;
• еластичні;
• адаптивні;
• комбіновані.

фіксований макет

Альтернативні назви: фікс (жарг.), Fixed (англ.), Фіксований дизайн.

Макет зазвичай розташовується по центру вікна браузера, а його ширина обмежується заданими розмірами в пікселях (рис. 5.1).

Мал. 5.1. Фіксований макет в браузері

переваги

• Через те, що ширина всіх колонок відома, простіше вказувати розміри зображень, відео та інших елементів сторінки.
• Браузери, як правило, лояльніше ставляться до таких макетів, тому на верстку і налагодження йде менше часу.

недоліки

• Сайт виглядає погано на моніторах з високою роздільною здатністю, неефективно використовуючи вільне місце. Деякі власники таких моніторів навіть зменшують вікно браузера по ширині, щоб приховати пусте місце зліва і праворуч від макета.

сайти

гумовий макет

Альтернативні назви: гума (жарг.), Liquid (англ.), Гумовий дизайн.

Ширина колонок задається у відсотках або поєднуються відсотки і пікселі таким чином, що макет займає всю вільну ширину вікна браузера. При зміні розмірів вікна або іншому дозволі монітора макет підлаштовується під них (рис. 5.2).

Мал. 5.2. Гумовий макет в браузері

переваги

• Використовується вся ефективна область сторінки.
• Веб-сторінки зручно друкуються на папері будь-якого формату.
• Веб-сторінки добре виглядають на різних пристроях від iPhone до ноутбука.

недоліки

• На моніторах з високою роздільною здатністю сайт погано читається через надмірне подовження рядків тексту. Тут допомагає обмеження ширини контенту за допомогою властивості max-width. Знову ж деякі власники великих моніторів зменшують вікно браузера до комфортних для них розмірів.
• Гумові макети складніше верстати і налагоджувати в різних браузерах.

сайти

еластичний макет

Цей макет за своїм виглядом може не відрізнятися від фіксованого або гумового макета. До тих пір, поки ви не зміните розмір шрифту в браузері, тоді ви помітите, що розмір поміняли і елементи веб-сторінки. Розмір елементів задається не в пікселах та відсотках, а в em, прив'язаному до розміру шрифту. Значення em можна використовувати не для всіх елементів, залишаючи ширину деяких фіксованою.

переваги

• Макет цілком або окремі його частини легко масштабувати, підганяючи під комфортний для сприйняття розмір.
• Макет буде однаково виглядати на різних операційних системах, що мають відмінності у виборі розміру і типу шрифту.

недоліки

• В сучасних браузерах функція масштабу сторінки вже вбудована, і користуватися нею досить зручно.
• Верстати еластичний макет вкрай складно, оскільки одиниця em має відносні розміри і залежить від використовуваного шрифту.
• Насправді сфера застосування цього макета дуже обмежена.

сайт

адаптивний макет

Цей макет підлаштовується під дозвіл монітора і вікна браузера, змінюючи при необхідності ширину макета, число колонок, розміри зображень і тексту. Для цього заготовлюється кілька стильових правил або файлів під різний діапазон дозволів, вибір правил відбувається через скрипти або CSS3, які і визначають потрібну для цього інформацію про користувача.

переваги

• Цей тип макета найбільш зручний для користувача, оскільки не залежить від дозволу і ширини вікна браузера, пристосовуючись під них.
• Макет комфортно можна дивитися на будь-якому пристрої.

недоліки

• Це найскладніший тип з усіх макетів, адже, по суті, замість одного потрібно зробити кілька макетів зі своєю графікою і CSS, а також прописати механізм визначення дозволу монітора або ширини вікна браузера.
• За рахунок універсальності макет складно перевіряти на різні умови, які можливі у користувачів.

сайт

• вид сайту http://www.w3.org показаний на рис. 5.3. При зменшенні ширини вікна до 500 пікселів і менше, дизайн сайту зміниться (рис. 5.4).

Мал. 5.3. Сайт W3C при звичайній ширині

Мал. 5.4. Сайт W3C при вузькій ширині

комбінований макет

Альтернативні назви: гібрид, hybrid (англ.).

Цей макет передбачає використання різної ширини для окремих частин сторінки, наприклад, шапку і підвал роблять гумовими, а контент фіксованим (рис. 5.3).

Мал. 5.5. комбінований макет

Цей макет насправді не є самостійним типом, тому успадковує всі плюси і мінуси фіксованого і гумового макета.

Треба відзначити, що деякі макети, хоча і виглядають комбінованими, в дійсності ними не є. Гумова шапка сторінки може виявитися всього-на-всього широким фоновим малюнком.

сайт

Макети по колонках

Колонки в веб-дизайн прийшли з поліграфії, де вони використовуються в якості способу розбивки широкого тексту на більш вузькі фрагменти, а також для поділу різної інформації. На сайтах текст завжди йде однією колонкою, тому що універсальних способів для створення многоколоночной тексту поки не існує. Крім того, сайт за своєю структурою і виглядом відрізняється від сторінки в журналі, яку можна охопити одним поглядом, це теж накладає свої обмеження на поширення многоколоночной тексту. Можливо в недалекому майбутньому сайти, спеціально «заточені» під iPad і інші планшети, стануть активно застосовувати колонки за своїм прямим призначенням. Поки ж колонки переважно застосовуються для смислового поділу матеріалу. Наприклад, одна колонка містить контент, інша навігацію, а третя рекламний банер і т.д.

Найбільш поширеним варіантом є наявність на веб-сторінці двох колонок - одна з них, як правило, містить навігацію, а в другій, більш широкої колонці, розміщується контент. Для гумових макетів має сенс встановити три колонки, щоб ефективно використовувати корисну площу веб-сторінки. У будь-якому випадку вибір числа колонок залежить виключно від обсягу інформації на сайті і способі її організації.