Верстка макетів веб-сторінок: типи та різниця між ними

Розробка сайту починається з питання: як буде виглядати сайт на моніторах різного розширення і відповідно - який тип верстки обрати ... Статичний, резиновий або адаптивний.

У чому складність цього питання? Ми допоможемо Вам розібратися в цьому.

Розглянемо основні типи верстки

Статична верстка, ширина 800px

Статична верстка, ширина 1024px

Статична верстка, ширина 1280px

Статическая верстка, ширина 800px Статическая верстка, ширина 1024px Статическая верстка, ширина 1280px

Резинова верстка

Адаптивна верстка, ширина 1280px

Адаптивна верстка, по ширині

резиновая верстка Адаптивная верстка, ширина 1280px Адаптивная верстка, по ширине

 

Справа в тому, що у одного користувача розширення монітору 800*600px., у іншого - 1024*768px., у третього - 1280*1024px., у когось ще більше. Припустимо, що ми зробили сайт з фіксованою шириною сайту - 780px. Він буде добре виглядати на моніторах з розширенням 800*600px.; на моніторі 1280*1024px. він вже буде займати лише половину ширини екрана. Якщо інформації буде багато, то в такому випадку доведеться постійно користуватись вертикальним скролом. Інший приклад - сайт  з фіксованою шириною 1024px. На розширені екрану 800*600px. він вже буде виглядати меньш привабливо і зручно, з'явиться і вертикальна, і горизонтальна прокрутка. В кого ж розширення монітору більше ніж 1024, сайт буде займати лише частину екрану.

Чи є вихід з такої ситуації? Яку верстку обрати найкраще? Розглянемо основні типи верстки.

Почнемо зі статичної (фіксованої) верстки

Фіксована верстка найкраще підходить для сайтів, розрахованих переважно на користувачів ПК, які будуть відвідувати ваш сайт зі звичайного ком'ютера. В такому випадку  розширення всіх моніторів переважно однакове і статичний сайт з шириною 1024px. буде однаково добре виглядати на всіх стаціонарних комп'ютерах.

Фактично Ви не помітите різниці при перегляді сайту на ПК з розширеннями 1920px. або 1024px., тобто вид сайту залишається фіксованим незалежно від пристрою з якого Ви переглядаєте сайт.

Приклад статичної верстки шириною 1280 px.

примеры статической верстки шириной 1280 px

 

Адаптивна верстка

Це сайт, що адаптується під певні розширення екрану. Даний тип верстки вимагає додаткових витрат часу на проектування та програмування.  

Адаптивна верстка відрізняється від статичної розташуванням елементів на сторінці. Суть полягає у наступному: весь контент сайту адаптується під відповідне розширення екрану (телефон, планшет, ноутбук), тобто всі блоки повинні розташуватись в межах видимості екрану. Адаптивна верстка найкраще підійде, якщо Ваш сайт будуть переглядати з самих популярних гаджетів, розширеннями 320×480, 480×800, 540×960, 640×960, 720×1280, 768×1280 і т.п.

Приклад адаптивної верстки

Адаптивная верстка сайта, примеры

 

Резинова верстка

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

Цей варіант підходить у випадках, коли ви невпевнені, з якого пристою будуть переглядати Ваш сайт (нестандартні розміри моніторів). Обравши даний тип, можна сказати, що Ваш сайт буде відмінно виглядати на будь-яких екранах. Принцип роботи заключається в тому, що ширина сторінки задана у відцотках. Відповідно при зміні ширини сторінки контент буде "тягнутись" як резина відповідно до розміру екрана чи браузера.

Приклад резинової верстки.

Резиновая верстка сайта, примеры
Ми сподіваємось, що дана стаття допоможе Вам зрозуміти, яка верстка підійде саме для Вашого сайту.

Смотрите также:

 Основні помилки при створенні сайтів

 Огляд безкоштовних CMS для сайту

 Інші статті