#html #css #browser #usability
Вопрос:
Я задаю этот вопрос исключительно из соображений удобства standpoint использования !
Должен ли веб-сайт expand/stretch заполнять область просмотра при изменении размера окна браузера?
Я точно знаю, что есть очевидные минусы:
- Большие столбцы текста трудно читать.
- Написание html/css с использованием процентов может быть болезненным.
- Это делает вас уязвимыми к тому, что ваш дизайн превысит свои пределы, если изображение слишком широкое или добавлен слишком длинный текстовый блок. (смотрите, как больно кодировать html/css).
Единственный профи, о котором я могу думать, заключается в том, что пользователям, которые используют изменение размера шрифта, встроенное в их браузер, не придется иметь дело со столбцами длиной всего в несколько слов, с корпусом white-space с обеих сторон.
Тем не менее, я думаю, что это может быть проблемой браузера больше, чем что-либо другое (Firefox 3 позволяет масштабировать все, а не только текст, что всегда пригодится).
редактировать: Я заметил, что переполнение стека имеет фиксированную ширину, но кодирование ужаса изменяется. Похоже, у Джеффа в любом случае нет сильных предпочтений.
Ответ №1:
Необработанный HTML делает именно это. Вы изменяете свои данные, чтобы они не отображались так хорошо в окнах произвольного размера?
В прежние времена у всех были экраны VGA. Теперь это решение является самым необычным. Кто знает, какие решения будут общими в будущем? И зачем ожидать определенной минимальной ширины или высоты?
С точки зрения удобства использования требование определенного разрешения от ваших пользователей просто приведет к ухудшению качества работы для тех, кто не использует это разрешение. Еще одна вещь, которая вытекает из этого, — это то, что такое фиксированная ширина? Я видел множество окон фиксированного размера (всплывающих окон), которые просто не отображаются правильно, потому что мои шрифты отличаются от шрифтов дизайнера.
Комментарии:
1. лол, глупые спамеры, им нужно выучить свой урок и отобразить эти шрифты в изображении!
2. Я думаю, что важно отметить проблемы с удобочитаемостью при использовании гибкой компоновки. когда у вас 22-дюймовый широкоэкранный дисплей, довольно трудно прочитать столбец текста, который составляет даже 50% ширины экрана
Ответ №2:
С точки зрения масштабирования веб-сайтов мне нравятся веб-сайты фиксированного размера, которые хорошо масштабируются с помощью функции «масштабирование» браузеров. Мне не нужна действительно широкая страница с крошечными шрифтами на моем мониторе 1920 res. Я не знаю, должен ли веб-дизайнер что-либо делать, чтобы он хорошо масштабировался при увеличении, но масштаб в FF3 потрясающий, в IE7 он бесполезен…
Ответ №3:
Конструкция должна быть гибкой в разумных пределах.
Используйте min-width функции и max-width свойства CSS (которые работают в каждом браузере, включая IE7 ), чтобы дизайн не растягивался слишком сильно.
Ответ №4:
Важно, чтобы блок текста никогда не растягивался слишком широко. Если окно расширено, ни один блок текста не должен растягиваться до бесконечности, чтобы соответствовать, потому что чтение становится трудным.
Ответ №5:
Как уже говорили люди, это действительно зависит от того, какую информацию отображает сайт. Два хороших примера-StackOverflow и изображения Google..
Если бы stackoverflow растягивался, чтобы соответствовать экрану, более длинные ответы было бы неудобно читать, потому что глазу трудно сканировать длинные строки — именно поэтому газеты используют столбцы для всего, и почему книги имеют одинаковую ширину.
С изображениями Google, где содержимое в основном представляет собой набор изображений шириной 200 пикселей, оно растягивается в соответствии с шириной браузера и по-прежнему отлично читается.
В принципе, имейте в виду, что глаз ненавидит читать длинные строки текста, и основывайте свой дизайн на этом. Вы можете спроектировать свой сайт так, чтобы, когда вы увеличиваете размер шрифта, весь макет хорошо масштабировался вместе с ним (единственный сайт, который я могу придумать, который делает это, — это www.geektechnique.org — нажмите Ctrl -/= или Ctrl scrollwheel, и ширина макета изменится в зависимости от размера шрифта)
Ответ №6:
Я думаю, как и многое другое: это зависит от обстоятельств. Обычно я делаю и то, и другое. Некоторый контент остается фиксированной ширины, чтобы хорошо выглядеть или если он не может занять больше места. другие вещи устанавливаются на 100%, если кажется, что это было бы полезно.
Ответ №7:
Это должно определяться тем, насколько сложен дизайн вашего сайта. Чем сложнее, в графическом или компонентном плане (количество разделителей контента), тем лучше будет масштабироваться ваш веб-сайт. Как правило, вы обнаружите, что большинство веб-сайтов графических дизайнеров не будут масштабироваться, потому что они являются графически интенсивными. Однако информационный веб-сайт будет масштабироваться, чтобы наилучшим образом использовать читаемое пространство на экране, и не будет сложным для простоты использования. На самом деле это вопрос предпочтений.
Ответ №8:
Я думаю, что это зависит от содержания сайта. Такие сайты, как SOFlow, форумы и другие сайты, уделяют особое внимание чтению большого количества деталей, поэтому наличие большего количества недвижимости для этого, на мой взгляд, является большим преимуществом. Чем меньше вертикальной прокрутки, тем лучше.
Однако для сайтов, немного менее требовательных к уровню чтения, даже блогов или сайтов розничной торговли, где вы просто показываете отдельный продукт, фиксированная ширина позволяет вам быть более лаконичным.
Ответ №9:
Я большой поклонник полностью плавных конструкций. Что касается жалоб на удобство использования слишком длинных строк текста… если они слишком длинные из-за размера окна моего браузера, то я могу так же легко сделать окно более узким, как я могу сделать его шире.
Ответ №10:
Это вопрос предпочтения стиля. Оба они могут быть одинаково полезны в зависимости от реализации. Также можно использовать столбцы, если экран становится достаточно широким. Лично меня раздражает, когда по экрану идет один узкий столбец текста.
Правка для 2012 года: Да, ваш веб-сайт должен соответствовать размеру окна, в котором он отображается.
Есть много мест, где можно почитать об этом подробнее, в том числе:
Ответ №11:
Примечание.если вы используете функцию масштабирования в своем браузере, фиксированный макет сжимает текст, в то время как жидкий макет позволяет ему занимать весь экран.
Может быть, это просто проблема браузера, но это определенно аргумент в пользу fluid
Ответ №12:
Ширина абзаца больше, чем ваш дисплей, делает веб-сайт полностью непригодным для использования. Вы должны покачивать горизонтальную полосу прокрутки вперед и назад для каждой прочитанной строки. Я изучаю предмет веб-дизайна в университете, и в учебнике называются проекты, которые адаптируются к вашей ширине экрана.
Я разрабатываю свой проект большого класса с использованием жидкой компоновки, это немного сложнее, чем фиксированная ширина. Я подозреваю, что никто из других студентов не будет использовать его, маркеры не заметят, и ни один из профессиональных сайтов, которые мы имитируем, также не является текучим.
Комментарии:
1. Я думаю, это может быть потому, что если вы использовали исправленное, вы можете просто убедиться, что оно доступно на 1024×768, и вы в порядке на 99,9% всех экранов, на которых есть зум, а другие мобильные устройства в любом случае игнорируют большую часть таблицы стилей, чтобы отображать лучшее, что они могут
Ответ №13:
Я бы сказал, текучий до конца. Пользователь всегда может вернуться к окну меньшего размера, если ему не нравится результат его увеличения, но он ничего не может сделать с фиксированным макетом.
Если вам очень, очень не нравится мысль о том, что ваш сайт выглядит уродливо из-за того, что делает пользователь с большим экраном, то ради всего истинного и прекрасного, по крайней мере, никогда не используйте фиксированные макеты на основе пикселей! В CSS есть такие аккуратные единицы относительного размера текста, как «em», которые позволяют частям вашей страницы масштабироваться в соответствии с размером шрифта, в то время как другие (например, изображения) остаются в своем «естественном» размере.
Почему бы не использовать их и не сделать вашу страницу хорошо масштабируемой, не полагаясь на менее гибкое «масштабирование всего» FF3, которое на самом деле является просто обходным путем для сайтов, использующих тупой фиксированный макет на основе пикселей?
Комментарии:
1. эй, я ценю ваше мнение, но px определяется как относительная единица в спецификации css2 w3c. ( w3.org/TR/1998/WD-css2-19980128/syndata.html )
Ответ №14:
Многие люди говорят такие вещи, как «это дело вкуса» или «Мне не нравятся большие шрифты на моем дисплее с высоким разрешением». Количество пикселей не имеет к этому никакого отношения, и это не дело вкуса. Это вопрос DPI, который напрямую связан с разрешением дисплея и размером шрифта. Если ваш макет масштабируется вместе с DPI шрифтов (например, с помощью ems и с использованием SVG), вы получите очень красивые, очень четкие веб-сайты, которые оптимально работают с любым дисплеем.
Ответ №15:
Вероятно, существует компромиссный вариант между фиксированным и текучим дизайном. Вы можете создать сайт, похожий на текучий, но установите свойство css max-width равным 1024 (или что-то еще). Это означает, что вы получаете плавную компоновку, когда window width она меньше 1024, а fixed width когда больше.
Тогда пользователям с узким экраном (например, моему 800-пиксельному eee 701) не нужно крутить горизонтальную полосу прокрутки, чтобы прочитать каждую строку, а пользователям с широким экраном (которые не знают, как изменить размер окна браузера) не нужно набирать абзацы шириной 500 символов и высотой 1 символ.