Типы верстки макетов веб-страниц и разница между ними

Разработка сайта начинается с вопроса: как будет выглядеть сайт на мониторах разного расширения, и соответственно – какие существуют типы верстки и какую выбрать. Ответ на первый вопрос можно предоставить сразу. Типы верстки сайта можно разделить таким образом:

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

Рассмотрим основные типы верстки

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

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

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

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

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

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

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

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

 

Дело в том, что у кого-то монитор с расширением 800*600, у других - 1024*768, у третьих - 1280*1024, у четвертых - еще больше. К примеру, мы сделали статический сайт с шириной 780px. Он будет отлично смотреться на мониторе с расширением 800*600; на мониторе 1280*1024 он будет занимать только половину ширины экрана и если информации много, то придется постоянно пользоваться вертикальной прокруткой. Второй пример - сайт с шириной 1024px. С расширением экрана 800*600 появиться и вертикальная, и горизонтальная прокрутка; у кого большое расширение монитора - сайт опять же займет только часть экрана.

Какой выход из положения? Какой вариант лучше подойдет для Вас?

И так, рассмотрим основные типы верстки.

Начнем со статической верстки!

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

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

Посмотрим примеры статической верстки шириной 1280 px. Примеры верстки сайта мы также будем приводить в этой статье.

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

 

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

Это дизайн под определенные разрешения экрана. Требует дополнительных затрат времени на проектирование и программирование.

Это дизайн под определенные разрешения экрана. Требует дополнительных затрат времени на проектирование и программирование. Какие бывают виды адаптивной верстки? По сути, их существует ровно столько, сколько и видов расширений, ведь необходимо сделать один вариант верстки под каждый тип расширения, в том числе и мобильные устройства.

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

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

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

 

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

Резиновая верстка - это верстка под любое разрешение экрана, которая также требует дополнительных затрат времени на проектирование и программирование.

Хороша в тех случаях, когда Вы не уверены с каких устройств будут заходить к Вам на сайт - нестандартные размеры мониторов, дисплеев. Проще даже сказать, что Ваш сайт будет отлично выглядеть абсолютно при любых размерах (от и до) экрана. Принцип заключается в указании ширины страницы в процентах. Соответственно при изменении ширины страницы, контент будет как резина “тянуться” на видимую ширину экрана.

Резиновая верстка сайта, примеры:

 

Резиновая верстка сайта, примеры
Мы надеемся, эта статья поможет Вам обзавестись качественным и эффективным сайтом, который будет служить многие, многие годы! Примеры верстки страниц в большем количестве можно найти на нашем сайте.

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

 Основные ошибки при создании сайтов

 Обзор бесплатных CMS для сайта. Анализ и сравнение

 Другие статьи