Верстка макетів веб-сторінок: типи та різниця між ними
Розробка сайту починається з питання: як буде виглядати сайт на моніторах різного розширення і відповідно - який тип верстки обрати ... Статичний, резиновий або адаптивний.
У чому складність цього питання? Ми допоможемо Вам розібратися в цьому.
Розглянемо основні типи верстки
|
Статична верстка, ширина 800px |
Статична верстка, ширина 1024px |
Статична верстка, ширина 1280px |
 |
 |
 |
|
Резинова верстка |
Адаптивна верстка, ширина 1280px |
Адаптивна верстка, по ширині |
 |
 |
 |
Справа в тому, що у одного користувача розширення монітору 800*600px., у іншого - 1024*768px., у третього - 1280*1024px., у когось ще більше. Припустимо, що ми зробили сайт з фіксованою шириною сайту - 780px. Він буде добре виглядати на моніторах з розширенням 800*600px.; на моніторі 1280*1024px. він вже буде займати лише половину ширини екрана. Якщо інформації буде багато, то в такому випадку доведеться постійно користуватись вертикальним скролом. Інший приклад - сайт з фіксованою шириною 1024px. На розширені екрану 800*600px. він вже буде виглядати менш привабливо і зручно, з'явиться і вертикальна, і горизонтальна прокрутка. В кого ж розширення монітору більше ніж 1024, сайт буде займати лише частину екрану.
Чи є вихід з такої ситуації? Яку верстку обрати найкраще? Розглянемо основні типи верстки.
Почнемо зі статичної (фіксованої) верстки
Фіксована верстка найкраще підходить для сайтів, розрахованих переважно на користувачів ПК, які будуть відвідувати ваш сайт зі звичайного комп'ютера. В такому випадку розширення всіх моніторів переважно однакове і статичний сайт з шириною 1024px. буде однаково добре виглядати на всіх стаціонарних комп'ютерах.
Фактично Ви не помітите різниці при перегляді сайту на ПК з розширеннями 1920px. або 1024px., тобто вид сайту залишається фіксованим незалежно від пристрою з якого Ви переглядаєте сайт.
Приклад статичної верстки шириною 1280 px.
Адаптивна верстка
Це сайт, що адаптується під певні розширення екрану. Даний тип верстки вимагає додаткових витрат часу на проектування та програмування.
Адаптивна верстка відрізняється від статичної розташуванням елементів на сторінці. Суть полягає у наступному: весь контент сайту адаптується під відповідне розширення екрану (телефон, планшет, ноутбук), тобто всі блоки повинні розташуватись в межах видимості екрану. Адаптивна верстка найкраще підійде, якщо Ваш сайт будуть переглядати з найпопулярніших гаджетів, розширеннями 320×480, 480×800, 540×960, 640×960, 720×1280, 768×1280 і т.п.
Приклад адаптивної верстки
Резинова верстка
Резинова верстка - це тип верстки під будь-яке розширення екрану, що також потребує додаткових затрат часу на проектування та програмування.
Цей варіант підходить у випадках, коли ви невпевнені, з якого пристою будуть переглядати Ваш сайт (нестандартні розміри моніторів). Обравши даний тип, можна сказати, що Ваш сайт буде відмінно виглядати на будь-яких екранах. Принцип роботи заключається в тому, що ширина сторінки задана у відсотках. Відповідно при зміні ширини сторінки контент буде "тягнутись" як резина відповідно до розміру екрана чи браузера.
Приклад резинової верстки.
Ми сподіваємось, що дана стаття допоможе Вам зрозуміти, яка верстка підійде саме для Вашого сайту.
