Телефоны:

+375 17 360-10-35

+375 29 114-11-10

Консультант

+375 17 360-10-35

+375 29 114-11-10

info@proweb.by

Виды макетов сайтов



Когда проектируется новый веб-ресурс, разработчики стараются по возможности учесть любые, даже самые мелкие детали. Анализируется и объем информации, и предполагаемые привычки и пожелания потенциальных клиентов, и удобство доступа к имеющемуся материалу, и множество других вещей. Исходя из данных факторов и разрабатывается дизайн макет сайта. Разумеется, каждый новый дизайн — уникален, сильно отличается от любого уже существующего. И тем не менее все макеты можно разделить на несколько больших групп:

  • макеты с фиксированной (жестко заданной) шириной;
  • эластичные;
  • резиновые;
  • адаптивные;
  • комбинированные.

Поговорим о каждом из них подробнее и выясним, какими особенностями они обладают.

Фиксированный макет сайта

Считается, что фиксированный дизайн — это самый простой макет сайта. Обычно он располагается по центру окна и имеет, как можно понять из названия, фиксированные параметры ширины. Его размеры не зависят от разрешения, он в любом случае сохраняет заданные значения. Преимущества такого варианта очевидны.

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

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

Тем не менее в современном сайтостроении такие html макеты сайтов сохраняют популярность. Особенно часто в таком ключе разрабатывается макет сайта визитки.

Резиновый макет сайта

Резиновый макет сайта имеет ширину, установленную в процентном соотношении. Это значит, что при изменении размера окна ширина и высота сайта также будет изменяться. В отличие от фиксированного макета, который на больших экранах отображается непривлекательно, «резиновый сайт» занимает всю площадь окна. При этом подобные веб-страницы удачно смотрятся не только на мониторах ПК или ноутбуков, но корректно отображаются и на экранах телефонов, а с их печатью никогда не возникает сложностей. Зато есть другая проблема: на больших мониторах текст сильно растягивается, читать его становится некомфортно. Конечно, в этом случае очень помогает контроль ширины при помощи свойства max-width, а некоторые владельцы больших мониторов просто уменьшают размер окна, и все же проблема остается. Кроме того, разработчикам гораздо труднее контролировать то, что видят пользователи различных устройств на своих экранах, а, значит, отладка происходит гораздо сложнее.

Эластичный макет сайта

По своему внешнему виду такие psd макеты сайтов ничем не будут отличаться от резиновых либо фиксированных — ровно до того момента, пока вы не попробуете поменять в браузере размер шрифта. В этом случае вы заметите, что вместе с параметрами шрифта изменились и другие модули веб-страницы: шапка, футер, графические элементы... Почему это происходит? Дело в том, что размер всего макета в целом, равно как и его отдельных модулей, здесь задается не в пикселях или процентах, а в em — относительной единице длины.

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

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

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

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

Комбинированный макет сайта

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

Доверьтесь "ProWeb" и создайте свой идеальный ресурс!

Контактные телефоны:
8 (017) 360-10-35
моб: +375 29 750 04 15 (MTC)
моб: +375 29 114 11 10 (Velcom)

Тема: запросить дополнительную информацию Тема: Заказать услугу «Виды макетов сайтов»

Мы свяжемся с вами в течении следующего рабочего дня

Опишите ваши пожелания
Прикрепить файл