При создание сайта его дизайн/шаблон можно отнести к одному из типов верстки. Он может быть фиксированный, резиновый или адаптивный. Выбор шаблона безусловно зависит от целей и контента самого сайта, а так же от разрешения дисплеев пользователей — будет отдано предпочтение смартфонам или стационарным ПК с широким дисплеем, а так же содержимое, могут сразу дать первые ориентиры в пользу выбора одного из видов верстки. Каждый из них имеет свои преимущества и недостатки и как в любом важном деле, лучше сразу навести справки и выбрать наиболее подходящий вариант. Я отдаю предпочтение адаптивному-отзывчивому дизайну, но чтобы наши клиенты понимали какой сайт им заказать лучше, создана данная статья.
Фиксированный шаблон.
Первый в нашем списке идет фиксированный шаблон. Название говорит само за себя, данный вид шаблона имеет фиксированную ширину, то есть при ширина шаблона остается неизменной в процентном соотношение. А так же составляющие шаблона соразмерны к ему. Пример фиксированного шаблона:
Нарисовано простовато с неточностями, но смысл передает, шаблон занимает свои 100%, которые равны определенному количеству пикселей. С обоих сторон фон, чем больше монитор в ширь, тем более большое количество фона будет на мониторе по бокам шаблона. То есть 100% фиксированного шаблона к примеру в 1000 px будут 1000 px на любом мониторе.
Плюсы фиксированных шаблонов.
Основной плюс состоит в простоте (по сравнению с резиновым) верстки. Как сайт отображается у разработчика, так же он виден и пользователю. Можно не использовать max_width & max_height (задают минимальную и максимальную ширину блока контейнера). Более проще вносить изменения в будущем.
Минусы: Чем больше разрешение экрана, тем больше свободного места по бокам. Контент теряет в размерах. Если монитор наоборот маленький, то снизу может появиться горизонтальная полоса прокрутки.
Резиновый шаблон.
В отличии от своего фиксированного собрата растягивается в ширину под разрешение монитора, все составляющие шаблона так же подстраиваются под общую ширину. Говоря простым языком отступ от краев шаблона будет составлять одинаковое расстояние при разном разрешении монитора. Пример резинового шаблона:
Разница резинового шаблона с его фиксированным собратом заключается в том что у резинового ширина измеряется не в пикселях, а в процентах, то есть по рисунку видно, что 100% резинового шаблона будут занимать 100% картинки монитора.
Плюсы резиновых шаблонов. Возможность подстроиться под разрешение монитора. При хорошо сверстанном шаблоне, можно избавиться от горизонтальной полосы прокрутки. Модули и элементы шаблона, расположенные на одном расстоянии от краев браузера, отображаются одинаково.
Минусы: Если контента мало, в растянутом виде на дисплее с большим разрешением, будет пустое место. Возникает вопрос размещения на страницах — видео, таблиц, изображения и других предметов для их гармоничного отображения.
Адаптивный дизайн.
Появление адаптивного веб-дизайна или как его некоторые называют, отзывчивого, связано в первую очередь с ростом рынка смартфоном/планшетов, в ходе которого, появилась необходимость в отображение сайта на экранах с разным разрешением. Считается более универсальным, так как включает как фиксированные по ширине элементы, так и резиновые. Это работает при установлении размеров в единицах. Главная задача адаптивного шаблона является универсальность при отображение на разных устройствах.
Плюсы адаптивного дизайна. Адаптивный дизайн лучше подходит для смартфонов, тем самым можно не делать отдельную мобильную версию сайта, а настроить существующий дизайн под нужные платформы. Максимальная гибкость дизайна под разные устройства и мониторы.
Минусы: К основным минусам адаптивной верстки сайта можно отнести ряд слабых сторон, по сравнению с отдельной мобильной версией сайта, таких как вес, отсутствие альтернативы основному дизайну, в случае с мобильной версией, которой можно или пользоваться или нет.
Выводы:
При выборе типа шаблона/дизайна сайта лучше заранее учесть какой будет контент, на каких дисплеях/мониторах будет отображаться ресурс и отдавать свое предпочтение наиболее подходящей верстке.