Какие бывают типы вёрстки сайта?

Приветствую Вас дорогой читатель!

Сегодня я хочу рассказать Вам о разных типах вёрстки для того чтобы Вы могли лучше ориентироваться в этом вопросе и не попали в неприятную ситуацию при заказе вёрстки либо её разработке.

Дело в том, что я не раз обращалась к верстальщикам с заданием по вёрстке и столкнулась с проблемой что либо они сами не очень разбираются в разных типах вёрстки либо разбираются, но так как заказчик чётко не указал какой тип вёрстки ему нужен, то делают самый простой вариант. В результате вы можете поучить некачественную вёрстку, которая будет некорректно отображаться в разных браузерах (или вообще не поддерживаться некоторыми из них) либо вы заплатите за адаптивную вёрстку а получите обычную (с фиксированной шириной и масштабируемую на мобильных устройствах), либо Ваш сайт будет вообще некорректно отображаться на мобильных устройствах и так далее.

На самом деле выбор типа вёрстки и согласование её с исполнителем – это один из важнейших этапов в разработке Вашего сайта.

Но прежде чем перейти к разбору типов вёрстки я хочу акцентировать Ваше внимание на одном очень важном требовании – кроссбраузерности.

Итак переходим к типам вёрстки:

Фиксированная.

Является одним из наиболее распространённых на сегодняшний день типов.

Вот скриншот отображения такой вёрстки на разных устройствах

Основная особенность: сайт имеет строго фиксированную ширину и высоту всех блоков и страницы в целом, и не зависит от диагонали монитора.

Достоинства:

• простота изготовления (а следовательно и меньшая цена)
• корректное и одинаковое отображение сайта на экранах с разной диагональю.

Недостатки:

• на маленьких экранах такой сайт будет просто масштабироваться. То есть вы получите уменьшенную точную копию вашей страницы для прочтения которой её нужно будет сначала увеличить. В эпоху мобильного интернета это не самый лучший вариант.
• на широкоформатных мониторах остаётся много пустого места по бокам (особенно если ширина страницы достаточно узкая (900 пикселей, к примеру.)
• при масштабировании страницы она просто становится больше и вылезает за пределы экрана как по высоте, так и по ширине.

Обычно данный тип вёрстки используют для создания Landing Page.

Резиновая (тянущаяся).

Пример отображения резиновой вёрстки на разных экранах

Основная особенность: cмысл этой вёрстки заключается в том что размеры всех элементов задаются не в пикселях, а в процентах. И таким образом одни и те же блоки на мониторах с разной диагональю будут иметь разный размер и возможно немного по другому отображаться.

Достоинства:

• Хорошо смотрится на экранах разной величины.
• Изменяется при масштабировании страницы.

Недостатки:

• Более сложный в реализации (а следовательно и более дорогой)
• Так как блоки сайта растягиваются и сжимаются под ширину экрана – некоторые элементы выглядят не очень красиво на планшетах и телефонах.
• На мобильный устройствах некоторые элементы за счёт сжатия становятся очень неудобными в использовании. Особенно это касается меню и форм обратной связи.

Такая вёрстка подходит для макетов сайтов, элементы которых размещены в одну колонку. Или в сочетании с фиксированной вёрсткой.

Адаптивная.

Этот тип вёрстки наиболее популярен на сегодняшний день так как позволяет создавать «живые» сайты, способные перестраивать свои элементы и изменять их размер в зависимости от того на каком устройстве вы его просматриваете.
Пример отображения адаптивной вёрстки.

Основная особенность:
Адаптивная вёрстка базируется на резиновой вёрстке + использует медиазапросы или специальные скрипты, которые позволяют определять размер экрана пользователя и в зависимости от этого приписывать конкретным элементам те или иные стили (ширина элементов и положение блоков, размер шрифтов и картинок и даже цвета).

Достоинства:

• Адаптируется по размеры экрана, за счёт чего ваш сайт хорошо отображается на всех видах устройств.
• Такой сайт удобно просматривать на мобильных устройствах, так как не нужно ничего увеличивать (всё само подстраивается).
• При масштабировании страницы в окне браузера элементы так же перестраиваются и страница не теряет свой вид.

Недостатки:

• Очень трудоёмкий вид вёрстки, что отражается на его цене.
• Контроль качества выполнения такой вёрстки тоже требует не мало времени (особенно в том случае если сайт большой) так как нужно протестировать вёрстку на разных размерах экранов через онлайн сервисы либо через масштабирование и изменение размеров окна в браузере.

Также можно выделить табличную и блочную вёрстку, но это тема отдельной статьи.

Желаю Вам удачной вёрстки, качественных сайтов и высокой посещаемости.

До встречи в моих новых статьях.

С уважением Юлия Гусарь.