Типы верстки сайта

Макет сайта представляет из себя готовую HTML разметку, с последующим добавлением к ней стилей CSS.

Верстка делится по принципу отображения

  • Фиксированная (статичная);
  • Резиновая (тянущаяся);
  • Адаптивная (респонсивная);
  • Смешанный макет.

Фиксированная верстка – размеры макета заданы в пикселях и не меняются при открытии сайта с устройств, у которых расширение экрана меньше. Если экран меньше заданного размера,  то появляется горизонтальный скролиннг (прокрутка влево-вправо).

Фиксированная верстка сейчас уходит в прошлое т.к. количество пользователей заходящих на сайт с телефонов и планшетов существенно выросло и эта тенденция набирает обороты. Такой рост обусловлен доступностью, как самих устройств, так и тарифов на мобильный интернет.

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

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

Адаптивная верстка – контент подстраивается под разные параметры экранов. Отличие от резиновой верстки состоит в том, для контента добавляются стили, в зависимости от размера экрана. То есть медиа запросы описывают фиксированные положения контента для каждого заданного размера экрана. В итоге у нас получается набор макетов для различных типов экрана.

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

Смешанный макет – часто в случае доработки или редизайна сайта применяют смешанный тип. Это что-то среднее между резиновой и адаптивной версткой, что позволяет оптимизировать сайт под любые устройства, при этом сохранив акцент на главных деталях. Данный тип верстки является самым сложным, но в тоже время самым удобным для пользователей.

При выборе типа верстки, нужно учитывать с каких устройств заходит Ваша целевая аудитория на сайт. Данную статистику можно узнать из Яндекс.Метрика и Google Analytics.

 


06 мая 2016
Блог