Подтвердить что ты не робот

Почему вы выбрали дизайн с фиксированной шириной?

Update: Я удалил свою мотивацию, потому что это, кажется, отвлекает читателей. Речь идет не о том, "почему бы вам не сделать свое окно меньше". Смотрите скриншоты, и из-за фиксированной ширины вы увидите заблокированный текст. См. Мою ссылку на "em/ex" в CSS. Я бы хотел провести здесь настоящую дискуссию. Спасибо.


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

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

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

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

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

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

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

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

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

Как вы думаете?

Обновление: Связанные вопросы: этот и тот.

4b9b3361

Ответ 1

И здесь, как и ожидалось, появляется обычная утка: "длинные строки слишком трудно читать".

[Citation needed], люди.

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

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

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

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

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

Ответ 2

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

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

Ответ 3

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

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

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

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

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

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

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

-Adam

Ответ 4

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

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

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

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

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

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

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

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

Примеры пары:

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

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

Считываемость и предсказуемость

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

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

мин-ширина

макс-ширина

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

Ответ 9

По моему опыту, это происходит по двум причинам:

1) Скорость - как правило, быстрее писать веб-страницу с фиксированным, а не пытаться написать тот, который правильно меняет размеры с большим количеством разрешений.

2) Дизайнер веб-сайта не является окончательным утверждением того, что происходит в производстве. Если вы попытаетесь работать с потоком вместо фиксированного макета, вы получите вопросы о том, почему он выглядит по-разному на ПК Sallys против Big боссы, и почему вы не можете переместить это сюда и т.д., которые легче исправить, перейдя на фиксированный макет.

Ответ 10

Вложенные браузеры

Так как я использую браузер с вкладками для повседневного использования, изменение размера моего окна каждый раз, когда я переключаю вкладки, на самом деле немного хлопот. У меня есть окно, максимально используемое для моих целей, и для размещения открытой вкладки "самая большая". Для остальных вкладок наличие рассыпных жидкостей на самом деле выглядит раздражающим и отвлекающим. Элементы и текст перемещаются и меняют положение в зависимости от того, как я, возможно, изменил свое окно на другую вкладку. Кроме того, макеты жидкостей приводят к неудобно широким блокам короткого (вертикального) текста.

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

Ответ 11

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

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

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

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

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

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

Ответ 12

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

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

Ответ 13

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

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

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

Многие браузеры лучше выполняют масштабирование веб-сайтов, чтобы они были больше, чем раньше; Firefox 3, по крайней мере, увеличивает всю страницу при увеличении, не нарушая макет.

Ответ 14

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

Что касается небольшого (из очень небольшого числа) того, что я знаю о веб-дизайне и сайтах с фиксированной шириной:

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

Ответ 15

"Он имеет разрешение 1920x1200, поэтому все места с фиксированной шириной пространства Форм-фактор составляет всего 15 дюймов. Поэтому мне приходится использовать более крупные шрифты, и текст больше не будет вписываться в эти переполненные макеты, иногда даже задерживаясь другими элементами ".

Для этого есть веская причина. Если параграф растянут слишком широко, его становится труднее читать. Людям нужен "перерыв" после примерно 15-20 слов, и это ТОЧНО, почему у нас нет книг, которые очень широки.

Более высокое разрешение позволяет вам иметь БОЛЬШЕ подробностей, но это также зависит от того, КАК вы используете пространство. Я никогда не максимизирую браузер, и ПК созданы для многозадачности окна, а не для ОДНОГО окна за раз.

Ответ 16

Фиксированные макеты ширины вполне приемлемы.

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

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

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

Пара важных ограничений:

  • убедитесь, что горизонтальная прокрутка никогда не требуется пользователем
  • Если конверсии являются проблемой, убедитесь, что эти интерактивные вещи - особенно "призывы к действию" или что-либо, кроме делает ваш кассовый аппарат "ка-цзин" не должен падать на справа от 770-го пикселя или около того - на всякий случай.

Но еще одно соображение - карманные носители. Вы должны предоставить альтернативный CSS для типа карманных носителей. Многие из этих экранов имеют ширину до 400 пикселей.

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

Что касается сайта filmstarts.de, это определенно беспорядок, но проблема заключается не в том, что это фиксированный макет ширины, а в том, как дизайн и реализация макета. Существуют хорошие и плохие реализации схем с фиксированной шириной, как и хорошие и плохие варианты компоновки жидкостей или полужидкие макеты с элементами фиксированной ширины и т.д.

Ответ 17

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

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

Ответ 18

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

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

Ответ 19

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

Ответ 20

Мне лично нравятся сайты с фиксированной шириной. Я не вынужден возиться со своим окном браузера, чтобы получить размер строки, с которой я могу справиться. Лично мне очень трудно читать очень длинные строки. Я также считаю, что он выглядит лучше, хотя на 100% полностью субъективен.

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

Мой последний ответ - оба хороши, и каждый из них имеет свое место.

Ответ 21

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

http://developer.spikesource.com/wiki/index.php/Home

Ответ 22

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

Ответ 23

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

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

Ответ 24

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

Но я согласен, что уменьшение ширины содержимого до < 800px - это боль, когда у вас большой монитор.

Ответ 25

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

Ответ 26

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

Ответ 27

Жидкостная компоновка с использованием% в качестве единицы может адаптироваться к любому экрану.

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

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