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