Адаптивна верстка. Кросбраузерна оптимізація сторінок сайту

Верстка сайту на сьогоднішній день може бути виконана безліччю різних способів. Розглянемо найпоширеніші з них.

• HTML-верстка сайту. HTML-верстка сайту - це верстка сайту на основі мови гіпертекстової розмітки HTML. Залежно від основних елементів html, що використовуються при верстці сайту, виділяють табличну html-верстку й блокову html-верстку.

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

• CSS-верстка сайту. CSS-верстку іноді виділяють в окремий вид верстки сайту, хоча в сучасному веб-дизайні каскадні таблиці стилів (css) використовуються практично при будь-якій верстці. Каскадні таблиці стилів описують зовнішній вигляд сторінок сайту, написаних мовою розмітки: HTML, XHTML, XML.

• Блокова верстка сайту, або як її ще називають верстка div'ами, - це верстка сайту на основі елементів <div>. Така верстка сайту має ряд переваг: стислість коду, висока швидкість завантаження коду й т.д.

Основні підходи до верстки сайту.

• Фіксована верстка. При зміні розміру вікна браузера блоки не поміняють свою ширину, а на моніторах з низьким дозволом екрану з'явиться смуга прокрутки.

• Гумова верстка. Залежно від розміру вікна браузера, блоки змінять свою ширину.

• Адаптивна верстка. Втілюється в життя завдяки різним скриптам і заточена під певні дозволи (320, 768, 1024 і т.д.). Зміна розміру відбувається ривками після того, як певний рівень досягнутий.

• Чуйна верстка. Являє собою злиття адаптивної і гумовою верстки. Є найскладнішою з технічної точки зору, але в той же час найефективнішою.

• Версія сайту для мобільних пристроїв. Фактично є створенням іншого сайту з іншим дизайном, версткою і URL адресою.

Вивчення нового матеріалу https://brainlab.com.ua/uk/blog-uk/shho-take-adaptivnij-sajt

Плюси та мінуси адаптивного дизайну

Доповніть ментальну карту https://coggle.it/diagram/YHf8uNqHwl8f9xAm/t/%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%B8%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/35f55fae89fc99822d63902de662cd79199c69eee7864fa95b7809648a48d58d

Адаптивна верстка. Детальніше