Як намалювати макет для сайту

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

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

Гумовий - ширина такого макета залежить від ширини вікна браузера. Є кілька способів зробити його: всі структурні елементи задати у відсотках або задати бічним колонкам фіксовані ширини, а центральна частина буде роз'їжджатися. Такий макет дозволяє використовувати більше простору. Використовувати його можна для створення сайтів з великою кількістю специфічної інформації, що вимагає багато місця, для розміщення великих таблиць з даними, для сторінок з двома бічними колонками і так далі. Для моніторів з великою роздільною здатністю можна встановити максимально можливу ширину, щоб «сильно не роз'їжджатися», якщо ви використовуєте гумовий макет для невеликого контенту.
Адаптивний - такі макети більш універсальні через свою адаптації під будь-який дозвіл монітора, в тому числі і мобільних пристроїв. Адаптивним може бути будь-який з розглянутих макетів.
Фіксований - задається певна ширина зазвичай 960-1000 пікселів (приклад). Ширина макета ні від чого не залежить, нічого не роз'їжджається. На всіх дозволах виглядає однаково, простий у верстці, дотримується правильна типографіка. До недоліків можна віднести те, що на моніторах з широким дозволом сайт буде візуально виглядати вузьким, в поширеному варіанті верстки не підганяє під мобільні пристрої, картинки і таблиці обмежених розмірів. Для адаптації такого макета під всі дозволи варто спиратися на максимальну ширину всіх елементів, певні скрипти і плагіни. Через це дуже складно верстати такий макет під IE6 та IE7.
Еластичний - при такому макеті дизайн зменшується або збільшується пропорційно. Через те, що всі величини задаються не px (пікселях), а в em (відносна одиниця), дизайн збільшується або зменшується в залежності від дозволу так, як якщо б ви затиснули Ctrl і покрутили коліщатко мишки.

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

За даними GoStats ми маємо таке положення справ: