(Фиксированная ширина) против (переменной ширины) веб-дизайна
Я учусь проектировать сайт. Кажется, что одним из решений является то, как представить данные пользователю, то есть при наличии мониторов разных размеров, структурировать ли данные, чтобы они занимали весь экран (или GMail), или сделать их фиксированной ширины, т.е. выбрать стандартный размер монитора (1024x768) и сделать его одинаковым на всех мониторах (он же Stackru).
Я склонен к проектированию с переменной шириной, и я пытаюсь понять, какое влияние это программирующее решение имеет на программирование? то есть, что я должен иметь в виду, когда программирую веб-сайт с дизайном с переменной шириной (точнее, с использованием CSS)?
2 ответа
Я не дизайнер в любом случае, но я делаю дизайн для своего сайта, который я сейчас создаю. Возьмите все, что я скажу ниже, с парой крупных зерен соли.
Я думаю, какой стиль ширины вы используете, во многом зависит от того, какой у вас контент, и насколько хорошо он растягивается.
Gmail на самом деле читы (<div> ширина элементов переопределяется в Javascript при изменении ширины окна), но в принципе этот вид дизайна работает, потому что боковые панели представляют собой известные величины, а динамический контент хорошо переносится. Это означает, что они могут просто добавить свои боковые панели с фиксированной шириной, а затем использовать поля, чтобы убедиться, что содержимое в середине никогда не пересекается с этими боковыми панелями. Если содержимое становится слишком большим, оно просто переносится на следующую строку, и это никого не волнует, потому что обычно это текст произвольной формы. Если у вашего сайта много чего происходит в его основном блоке контента, где существует реальная опасность переполнения контента его контейнером, переменная ширина, вероятно, не является правильным вызовом. Есть эксперты, которые могут заставить работать эти типы проектов, но если вы только начинаете, вы, возможно, не захотите попробовать это. Я попробовал это, и это только расстроило меня.
Фиксированные конструкции, как правило, проще. Я сравнил это с просто рисованием рисунка на листе бумаги. По сути, вы знаете размер бумаги (потому что вы указали ее явно), поэтому, когда вы рисуете коробку, вы знаете, что она не будет перекрывать коробку рядом с ней, потому что вы также знаете, где вы нарисовали эту другую коробку и куда она идет быть. Вы просто стремитесь иметь абсолютный контроль над тем, где в конечном итоге все будет отображаться на странице.
Предостережение заключается в том, что вам нужно знать, что выбранные вами размеры шрифта не всегда будут теми, которые используются. Пользователь может изменить размер шрифта по умолчанию, который использует браузер, сделав его больше, чем вы ожидаете, в результате чего ваш контент снова вырвется из своих ящиков. Чтобы обойти это, я часто проверяю дизайн, используя в браузере только функцию масштабирования текста и проверяя, все ли выглядит разумно, когда шрифт увеличивается в 3-4 раза.
Что касается выбора "стандартного размера монитора", то в настоящее время обычной практикой является определение ширины ваших сайтов равной 960px, положительной или отрицательной. Это примерно правильный размер для окна просмотра шириной 1024 пикселя, если учитывать браузер Chrome (например, вертикальную полосу прокрутки). Если у вас есть много пользователей, которые все еще могут использовать разрешение 800x600, используйте вместо этого дизайн 760px. Тем не менее, на всякий случай рекомендуется убедиться, что ваш ключевой контент умещается в 760 пикселей, и использовать оставшиеся 200 пикселей для менее критичного контента.
Надеюсь, это немного поможет.
С точки зрения кода, на самом деле нет большой разницы, если вы думаете об этом. Подход, который я лично считаю лучшим выбором, является комбинацией обоих: создайте внешнюю обертку, а затем установите все элементы внутри нее в процентные значения. Таким образом, независимо от того, решите ли вы использовать процент или фиксированную ширину на самой внешней оболочке, внутренняя часть всегда будет хорошо масштабироваться.
Хотя я обычно использую фиксированную ширину для самой внешней оболочки, я все же кодирую внутренние элементы с процентной шириной (большинство из них в любом случае, за исключением элементов, которые должны иметь фиксированную ширину). В случае, если клиенту нужен веб-сайт полной ширины, нужно просто изменить одно значение.
Я думаю, что в конце концов, это просто вопрос личных предпочтений, будь то ваш или вашего клиента.
Надеюсь это поможет.