Разумно ли использовать Fluid Layout?

Question

Размер браузера Google Labs

---

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

Но теперь «картина» изменилась, существует большое расхождение между самым низким и самым высоким разрешениями, используемыми большинством пользователей в настоящее время , и они, похоже, здесь, чтобы остаться.

У меня нетбук, который поддерживает только 800 пикселей или 1024 пикселей в ширину; У меня также есть 22-дюймовый монитор, поддерживающий 1650 пикселей , и 24-дюймовые мониторы, поддерживающие 1920 пикселей и более, становятся довольно распространенными.

В течение некоторого времени я в значительной степени "игнорировал" пользователей с 800 пикселями, и я разрабатывал с фиксированной шириной 950/960 пикселей, я также заметил, что популярные сайты ( SO для одного) либо используйте этот или жидкий подход.

Для текстовых (почти) только веб-сайтов (например, Википедия ). Я не вижу проблем с использованием флюидной системы, но как насчет всех других веб-сайтов, для создания которых интересно использовать изображения / видео? содержание ? Социальные сети, объявления и т. Д. Каков (будет) их подход к решению этой проблемы?

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

Стандарт de facto в Интернете по-прежнему имеет ширину 1024 пикселя, а 980 пикселей не используется на 24-дюймовом мониторе выглядит просто странно, если не сказать неправильно. Так какие у нас варианты?

Мне бы очень хотелось услышать, что вы об этом думаете, и ваш опыт работы как с текучими, так и с фиксированными системами.

PS: также приветствуются популярные веб-сайты, использующие любую из этих систем, мне особенно интересно видеть нетекстовые веб-сайты, использующие систему флюидов.

---

РЕДАКТИРОВАТЬ: Я только что видел этот ответ , и я был немного озадачен разницей между расположением жидкости и жидкости, разве они не должны быть абсолютно одинаковыми?

Answer 1

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

Попробуйте посмотреть википедию на экране с высоким разрешением, и вы увидите, что они ограничивают максимальную ширину до 800-900 пикселей - более того (при условии довольно стандартного шрифта 12pt), и люди перестают читать до конца строки, а затем без труда найти начало следующей строки, и все это превращается в беспорядок напряжения глаз и шеи.

На веб-сайтах, которые я создаю, я использую max-width, чтобы ограничить максимальную ширину текстового содержимого (и в том числе изображения и другие материалы) до 720-800 пикселей, что с боковыми панелями и т. Д. Может около 1000 пикселей Если экран шире, тогда, либо центрируйте содержимое по левому краю, выровняйте его (выровняйте по правому краю на веб-сайтах RTL) - оба работают хорошо.

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

Answer 2

оставление 980 пикселей неиспользованными на 24-дюймовом мониторе просто странно, если не сказать неправильно

Я не согласен здесь. Если у вас есть монитор с таким высоким разрешением, вы, вероятно, не работаете с развернутым окном браузера. И даже если это так, вы действительно обеспокоены тем, что контент находится в фиксированной области посередине? Действительно?

Пока ваш сайт имеет приличный и удобный макет, я не вижу проблемы с пространством на обеих сторонах мониторов с высоким разрешением.

Answer 3

Существуют способы создания различных @media правил внутри таблицы стилей & mdash; В W3C есть что-то на этом & mdash; и хотя это большая кошка Шредингера, будут ли браузеры портативных компьютеров подчиняться правилам, это довольно Можно с уверенностью предположить, что даже если они этого не делают, у них достаточно большие и хорошо сбалансированные экраны, чтобы использовать масштабную модель сайта в том виде, в каком она отображается на настольных компьютерах.

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

А если нет, то это их проблема.

Answer 4

Жидкие макеты были ответом до того, как Responsive Design появилась поддержка в браузерах. Больше не нужно использовать жидкие или эластичные макеты.

• http://lessframework.com/
• https://github.com/thatcoolguy/gridless-boilerplate

Answer 5

Я подхожу к проблеме под другим углом. Имейте жидкую структуру, но дайте ей минимальную ширину (вместо максимальной ширины). Вы можете достичь этого с помощью CSS.

Проблема с изображениями не такая большая. Что вы делаете, это следующее:

1. Загрузите ваше изображение в максимальном размере, который вы ожидаете.

2. Сделайте изображение жидким следующим образом:

   <img src="http://example.png" style="width:32.5%">

При изменении размера страницы изображение будет изменяться в процентном соотношении. Просто убедитесь, что у вас нет атрибутов ширины или высоты на изображении. Я называю это суперластичным:)

Answer 6

Наиболее информативное обсуждение раскладок, которое я читал до сих пор, находится в книге Энди Бадда о мастерстве CSS. Если у вас есть шанс, прочитайте его. Я думаю, что это обязательная книга по CSS (средний уровень). Похоже, что глава макетов доступна в виде статьи здесь. http://www.webreference.com/authoring/style/sheets/css_mastery2/

Другая ссылка: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

Жидкость и Жидкость - это два разных названия одной и той же техники.

НТН.

Answer 7

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

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

Answer 8

Я думаю, что лучше иметь максимальную ширину макета, вы можете изменить это с помощью Javascript. Хорошим примером этого является этот макет, посмотрите, что происходит (в Firebug или что-то) с макетом, если вы измените ширину: http://tweakers.net/ Они выбрали ширину 1208 пикселей и уменьшают ее с помощью Javascript при изменении ширины браузера. Когда Javascript отключен, веб-сайт по-прежнему имеет ширину 1208 пикселей, что, в любом случае, не является проблемой.

EDIT: Первая ширина сайта будет примерно 900px. С Javascript вы будете проверять ширину браузера и назначаете класс с самым близким разрешением к ширине вашего браузера. Например: кажется, что ширина браузера равна 1100px, поэтому вы задаете класс res1024, или ширина браузера составляет 1080px, а затем задаете класс res1100. Это будет ваш CSS:

#wrapper {
    width: 900px;
}
.res1024 #wrapper {
    width: 1000px;
}

.res1100 #wrapper {
    width: 1080px;
}

Я надеюсь, что это поможет вам:], вы можете изменить намного больше с этим классом тела, как:

.res900 #menu {
     width: 100px;
}

РЕДАКТИРОВАТЬ 2: Вы можете обрабатывать изображения таким же образом:

.res900 img.fluid {
    width: 200px;
}

.res1100 img.fluid {
    width: 300px;
}