(Фиксированная ширина) и (переменная ширина) дизайн веб-сайта - PullRequest
3 голосов
/ 05 ноября 2010

Я учусь проектировать веб-сайт.Похоже, что одним из решений является то, как представить данные пользователю, т.е. при наличии мониторов разных размеров, структурировать ли данные, чтобы они занимали весь экран (или GMail), или сделать их фиксированной ширины, т.е. выбрать стандартный размер монитора (1024x768) и сделать так, чтобы он выглядел одинаково на всех мониторах (также известный как StackOverflow).

Я склонен к проектированию с переменной шириной, и я пытаюсь понять, что это решение влияет на программирование?то есть что я должен иметь в виду при программировании веб-сайта с дизайном с переменной шириной (точнее, с использованием CSS)?

Ответы [ 2 ]

2 голосов
/ 05 ноября 2010

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

Я думаю, какой стиль ширины вы используете, во многом зависит от того, какой контент у вас есть, и насколько хорошо он растягивается.

Gmail на самом делечиты (<div> элементы имеют свою ширину, переопределенную в Javascript при изменении ширины окна), но в принципе этот вид дизайна работает, потому что боковые панели представляют собой известные величины и динамическое содержимое хорошо переносится.Это означает, что они могут просто добавить свои боковые панели с фиксированной шириной, а затем использовать поля, чтобы убедиться, что содержимое в середине никогда не пересекается с этими боковыми панелями.Если содержимое становится слишком большим, оно просто переносится на следующую строку, и это никого не волнует, потому что обычно это текст произвольной формы.Если у вашего сайта много чего происходит в основном блоке контента, где существует реальная опасность переполнения контента в его контейнере, переменная ширина, вероятно, не является правильным вызовом.Есть эксперты, которые могут заставить эти типы проектов работать, но если вы только начинаете, вы, возможно, не захотите попробовать это.Я попробовал это, и это только разочаровало меня.

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

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

Что касается выбора вашего«Стандартный размер монитора», обычной практикой является определение ширины ваших сайтов равной 960 пикселей, отдача или взятие.Это примерно правильный размер для окна просмотра шириной 1024 пикселя, если учитывать браузер Chrome (например, вертикальную полосу прокрутки).Если у вас есть много пользователей, которые все еще могут использовать разрешение 800x600, используйте вместо этого дизайн 760px.Тем не менее, рекомендуется на всякий случай убедиться, что ваш ключевой контент умещается в 760 пикселей, и использовать оставшиеся 200 пикселей для менее критичного контента.

Надеюсь, что это немного поможет.

0 голосов
/ 05 ноября 2010

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

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

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

Надеюсь, это поможет.

...