Почему вы выбрали бы дизайн с фиксированной шириной? - PullRequest
22 голосов
/ 13 февраля 2009

Обновление: Я удалил свою мотивацию, потому что она, кажется, отвлекает читателей. Это не о том, «почему вы не делаете свое окно меньше». Посмотрите скриншоты, и вы увидите заблокированный текст из-за фиксированной ширины. Смотрите мою ссылку на нотацию "em / ex" в CSS. Я хотел бы провести реальное обсуждение здесь. Спасибо.


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

  • Слишком сложно относительно разработать свой макет (с самого начала)? Кажется, некоторые люди даже забыли, как это сделать .

  • У вас есть реальные причины , такие как читабельность, и вы просто не знаете, как правильно с этим справляться? Здесь я имею в виду кусочки мудрости, например, труднее читать длинные строки (поэтому газеты используют столбцы) - но тогда ширину следует указывать с помощью em и ex.

  • Вас принуждают некоторыми старыми рекомендациями ? В мрачную старость HTML люди совершили много неправильных вещей; теперь все наконец используют CSS, но, возможно, этот просто приклеился.

  • Или вы, как и я, удивляетесь, почему все делают это "неправильно"?

Чтобы проиллюстрировать проблему, сначала я хочу сделать скриншоты с отрицательными примерами:

  • StackOverflow (здесь я даже не вижу, что может сделать это любой трудно исправить)
  • Filmstarts (немецкий сайт, который становится нечитаемым, если я не беру с собой стакан для чтения)

А вот и положительный пример. Он выглядит как типичный фиксированный с сайтом (даже с прозрачными границами), но это не так:

Веб-сайт о программном обеспечении Wiki - связанные форумы

Что вы думаете?

Обновление: Смежные вопросы: этот и тот .

Ответы [ 27 ]

15 голосов
/ 13 февраля 2009

И тут, как и ожидалось, приходит обычный слух: «длинные строки слишком трудно читать».

[Требуется цитата] , народ.

См. http://webusability.com/article_line_length_12_2002.htm для краткого изложения фактических исследований в этой области. Ряд из них, плюс http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp,, показывают, что, хотя пользователи отдают предпочтение умеренной длине строки, скорость чтения не резко падает с «длинными» линиями; на самом деле многие показывают увеличение скорости при более длинных настройках.

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

Так как это всего лишь вариант предпочтения пользователя, который предпочитает средние короткие строки, давайте пользователи решат, сколько экранного пространства мы хотим предоставить веб-сайту для выполнения нашей работы. Мы лучше всех знаем. Если вы решите, что знаете наверняка лучше, вы, скорее всего, потеряете место, или, если догадались, заставите нас прокручивать взад-вперед, чтобы прочитать текст - и это действительно - кошмар читаемости.

Если вы хотите защитить нас от самих себя, вы можете пойти на компромисс, указав минимальную ширину и максимальную ширину в единицах 'em', чтобы страница реагировала на жидкий макет, но не растягивалась до крайностей.

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

13 голосов
/ 13 февраля 2009

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

Что касается сайтов фиксированной ширины, сказать сложно. Лично я подозреваю, что многим веб-дизайнерам просто нравится чувствовать, что они имеют большой контроль над своим внешним видом, и считают, что сайт выглядит «некрасиво», когда вы слишком сильно его растягиваете, поэтому они не позволяют вам делать это. Это. Вероятно, не мудрый, но вы идете.

10 голосов
/ 13 февраля 2009

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

Ах, как субъективно, так и аргументировано. Я уверен, что мой аргумент не убедит вас, но вот одна действительно веская причина, ИМХО:

Презентация.

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

Теперь любой старый сок может создать сайт, и по большей части его не интересует ничего, кроме контента.

Но настоящие дизайнеры полностью понимают, что дизайн должен быть понят в целом. Широкий макет влияет на людей совсем по-другому, чем многоколонный или тонкий макет. Глаза читателя движутся по определенному шаблону, и текст предназначен для того, чтобы тянуть читателя по пути.

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

-Adam

7 голосов
/ 13 февраля 2009

Вот мои $ 0,02, и они стоят точно столько, сколько вы за них заплатили (и если это не идеальный пример текущей экономической ситуации ...: -))

Макет сайта должен быть продиктован общим пользовательским опытом. Это частично определяется доступностью, частично дизайном, частично функциональностью:

  1. Доступность - как отметили несколько человек, разрешение веб-сайту использовать всю ширину браузера без какого-либо контроля может привести к довольно длинным строкам, затрудняющим чтение [1]. Автоматическое размещение текста в нескольких столбцах является потенциальным ответом на эту проблему, но с CSS это действительно сложно сделать (это должен быть худший инструмент для создания разметки, который когда-либо разрабатывалось человечеством, но это отдельная тема) и чревато другими проблемами. а также.

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

[1] Нет, я не цитирую. Я, однако, попробовал читать в полноэкранном режиме на своем 24 "1920x1200 96dpi [2] и должен сказать вам - через 15 минут у меня шея болит от постоянного поворота головы.

[2] Обычный пользователь по-прежнему работает с разрешением 1024x768 или 1280x1024 (на основе инструментария продукта, над которым я работаю, при установке последней версии чуть меньше 10 млн). Так что да, я не типичный пользователь.

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

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

Пара примеров:

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

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

4 голосов
/ 13 февраля 2009

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

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

3 голосов
/ 13 февраля 2009

Вы можете попробовать увеличить масштаб. Большинство современных браузеров по умолчанию увеличивают всю страницу, а не только текст. Это сохраняет макет страницы и использует больше вашего экрана. Обычно это сочетание клавиш Ctrl + + и Ctrl + -. Он хорошо работает на моем ноутбуке, по крайней мере,

3 голосов
/ 13 февраля 2009

[Забудьте мое упоминание об управлении окнами, это было не по теме]

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

3 голосов
/ 13 февраля 2009

Читаемость и предсказуемость

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

Однако проекты фиксированной ширины ушли бы в прошлое, если бы браузеры могли правильно поддерживать 2 CSS-свойства:

мин-ширина

макс-ширина

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

2 голосов
/ 23 февраля 2009

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

Для сайтов с быстро меняющимся контентом (новостями или покупками, или почти всем, что связано с CMS), я очень предпочитаю плавные полноэкранные дизайны.

2 голосов
/ 14 февраля 2009

Я думаю, что вопрос не должен звучать так: «Почему бы вы выбрали дизайн с фиксированной шириной?» это должно быть "почему бы и нет?"

Во-первых, вам нужно учитывать наименьший общий знаменатель. Многие разработчики будут работать на экранах с разрешением 1680x1050, 1920x1200 и 1280x1024. Некоторые пользователи будут использовать разрешение 1024x768, которое я лично считаю самым низким разрешением, которое вам нужно (слава богу, это уже не 800x600). Если вы установите ширину в 960-1000 пикселей, то у разработчиков не возникнет проблема непреднамеренного создания страниц, которые невозможно просмотреть без прокрутки на мониторе с шириной менее 1600 пикселей. Поверьте мне, это происходит.

Макет на любой нетривиальной веб-странице сложен. Добавьте кросс-браузерную поддержку, чтобы ваша страница не только работала, но и выглядела достаточно согласованно, и это огромная проблема. Теперь попробуйте добавить переменную ширину, и это становится намного хуже, если не невозможно. Посмотрите и на выигрыш: кому это выгодно? Небольшое меньшинство пользователей, которые имеют высокое разрешение и действительно хотят растянуть этот контент по всему экрану. У меня широкоформатный монитор, и я не буду, например, развернуть свой браузер. В этом отношении многие люди похожи на меня.

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

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

В конце концов, ни один сайт не заботится о том, растягивается ли он на 1600 пикселей или нет. Вот к чему это сводится.

...