Макет веб-страницы следует одному из двух разных подходов:
- Макеты с фиксированной шириной : это макеты, в которых ширина всей страницы устанавливается с определенным числовым значением.
- Жидкие макеты . Это макеты, в которых ширина всей страницы может изменяться в зависимости от ширины браузера.
Существуют веские причины для использования обоих методов верстки, но без понимания относительных преимуществ и недостатков каждого метода вы не сможете принять правильное решение о том, какую из них использовать для вашей веб-страницы.
Макеты с фиксированной шириной
Фиксированные макеты — это макеты, которые начинаются с определенного размера, как предусмотрено веб-дизайнером. Они остаются той ширины, независимо от размера окна браузера, просматривающего страницу. Макеты с фиксированной шириной позволяют дизайнеру более непосредственно контролировать внешний вид страницы в большинстве ситуаций. Их часто предпочитают дизайнеры с фоном печати, поскольку они позволяют дизайнеру вносить незначительные изменения в макет и сохранять их согласованность в браузерах и компьютерах.
Жидкие макеты
Жидкие макеты — это макеты, основанные на процентах от размера текущего окна браузера. Они изменяются в зависимости от размера окна, даже если текущий зритель меняет размер своего браузера во время просмотра сайта. Макеты ширины жидкости позволяют эффективно использовать пространство, предоставленное любым окном браузера или разрешением экрана . Их часто предпочитают дизайнеры, у которых есть много информации, чтобы получить как можно меньше места, поскольку они остаются неизменными по размеру и относительному весу страницы независимо от того, кто просматривает страницу.
Что в коле?
Ваш дизайн сайта влияет на вашу отзывчивость сайта и адаптивность . В зависимости от того, что вы выберете, вам может помочь или помешать способность ваших читателей сканировать ваш текст, находить то, что они ищут или иногда даже использовать ваш сайт. Общая идентификация бренда вашего сайта также может быть в опасности, особенно если стандарты вашего бренда следуют логической модели печати в первую очередь.
Преимущества макетов с фиксированной шириной
Компоновка с фиксированной шириной полезна в некоторых случаях.
- Макет с фиксированной шириной позволяет дизайнеру создавать страницы, которые будут выглядеть одинаково, независимо от того, кто на них смотрит.
- Элементы фиксированной ширины, такие как изображения, не будут перегружать текст на меньших мониторах, потому что ширина всей страницы будет включать эти элементы.
- На длину сканирования не влияют большие сегменты текста, независимо от ширины браузера.
Преимущества жидких макетов
Жидкий макет работает лучше всего в других обстоятельствах.
- Разметка шириной жидкости расширяется и сжимается, чтобы заполнить доступное пространство.
- Используется вся доступная недвижимость, что позволяет дизайнеру отображать больше контента на более крупных мониторах, но при этом оставаться жизнеспособным на небольших дисплеях.
- Жидкие макеты обеспечивают согласованность относительной ширины, позволяя странице более динамично реагировать на ограничения, налагаемые клиентом, такие как большие размеры шрифта.
Недостатки макетов с фиксированной шириной
Однако фиксированный формат не обходится без затрат.
- Макеты фиксированной ширины заставляют горизонтальную прокрутку в меньших окнах браузера. Большинство людей не любят прокручивать по горизонтали.
- Они оставляют большие пространства пустого пространства в больших мониторах, что приводит к большому количеству неиспользуемого пространства и большему количеству прокрутки по вертикали, чем могло бы быть необходимо.
- Макеты фиксированной ширины не очень хорошо справляются с изменениями размеров шрифта. При небольшом увеличении размера шрифта они могут быть нормальными, но при большем увеличении макет может быть скомпрометирован.
Недостатки жидких макетов
Жидкие макеты тоже не лишены своих минусов.
- Жидкие макеты позволяют очень мало точно контролировать ширину различных элементов страницы.
- Они могут привести к тому, что столбцы текста будут слишком широкими, чтобы их было удобно сканировать, или в меньших браузерах, которые слишком малы для четкого отображения слов.
- Ошибка размещения жидкостей, когда элемент с фиксированной шириной, например изображение, помещается в столб жидкости. Если столбец отображается без достаточного пространства для изображения, некоторые браузеры увеличивают ширину столбца, игнорируя инструкции дизайнера, в то время как другие браузеры принудительно перекрывают текст и изображения для достижения правильных процентов.
Предпочтения макета и смешанные подходы
Некоторые дизайнеры предпочитают смешивать эти концепции. Им не нравится использовать жидкие макеты для больших блоков текста, так как эта структура делает текст либо нечитаемым на маленьком мониторе, либо не читаемым на большом. Таким образом, они стремятся сделать основные столбцы страниц фиксированной ширины, но делают верхние и нижние колонтитулы и боковые столбцы более гибкими, чтобы занимать оставшееся пространство и не терять возможности более крупных браузеров.
Некоторые сайты используют скрипты для определения размера окна вашего браузера, а затем соответственно изменяют элементы отображения. Например, если вы откроете такой сайт в очень широком окне, вы можете получить дополнительный столбец ссылок с левой стороны, который посетители с меньшими мониторами могут не увидеть. Кроме того, обтекание текстом вокруг рекламы зависит от ширины окна вашего браузера. Если он достаточно широк, сайт будет обтекать его текстом, в противном случае он будет отображать текст статьи под рекламой. Хотя большинству сайтов такой уровень сложности не нужен, он демонстрирует способ использовать преимущества больших экранов, не влияя на отображение на небольших экранах.