Должны ли веб-сайты расширяться при изменении размера окна?
Я задаю этот вопрос чисто из юзабилити standpoint!
Должен ли веб-сайт expand/stretch заполнять область просмотра при изменении размера окна браузера?
Я точно знаю, что есть очевидные минусы:
- Текст с широкими столбцами плохо читается.
- Написание html / css с использованием процентов может быть проблемой.
- Это делает вас уязвимыми для растягивания вашего дизайна за его пределы, если изображение слишком широкое или добавлен слишком длинный блок текста. (видите, это больно кодировать html / css).
Единственное, что я могу придумать, это то, что пользователям, которые используют изменение размера шрифта, встроенное в их браузер, не придется иметь дело со столбцами, состоящими всего из нескольких слов, с телом white-space с обеих сторон.
Однако я думаю, что это может быть проблема браузера больше, чем что-либо еще (Firefox 3 позволяет масштабировать все, а не только текст, который всегда пригодится)
редактировать: Я заметил, что переполнение стека имеет фиксированную ширину, но размер ужаса кодирования изменяется. Похоже, у Джеффа нет особых предпочтений.
Ответы 15
Это вопрос предпочтения стиля. Оба могут быть одинаково полезны в зависимости от реализации. Столбцы также можно использовать, если экран становится достаточно широким. Лично меня раздражает, когда по экрану идет один узкий столбец текста.
Изменить для 2012 года: Да, ваш веб-сайт должен реагировать на размер окна, в котором он отображается.
Есть много мест, где можно узнать больше об этом, в том числе:
Raw HTML делает именно это. Вы меняете свои данные так, чтобы они не отображались так хорошо в окнах случайного размера?
Раньше у всех были экраны VGA. Такое разрешение встречается крайне редко. Кто знает, какие резолюции будут распространены в будущем? И зачем ожидать определенной минимальной ширины или высоты?
С точки зрения удобства использования требование определенного разрешения от ваших пользователей приведет к ухудшению работы тех, кто не использует это разрешение. Еще одна вещь, которая вытекает из этого, - какая фиксированная ширина является? Я видел множество окон (всплывающих окон) фиксированного размера, которые просто не отображаются правильно, потому что мои шрифты отличаются от дизайнерских.
Я думаю, что важно отметить проблемы с удобочитаемостью при использовании гибкой разметки. когда у вас 22-дюймовый широкоформатный дисплей, довольно сложно прочитать столбец текста, который составляет даже 50% ширины экрана.
Я думаю, что многое нравится: это зависит от обстоятельств. Обычно я делаю и то, и другое. Некоторый контент остается фиксированной ширины, чтобы он выглядел хорошо или, если он не может получить больше места. остальное установлено на 100%, если кажется, что это будет полезно.
Что касается масштабирования веб-сайтов, мне нравятся веб-сайты фиксированного размера, которые хорошо масштабируются с помощью функции «масштабирования» браузеров. Мне не нужна действительно широкая страница с крошечными шрифтами на моем мониторе с разрешением 1920. Я не знаю, должен ли веб-дизайнер что-то делать, чтобы он хорошо масштабировался при увеличении, но масштабирование в FF3 потрясающее, а в IE7 бесполезно ...
Это следует решать в зависимости от того, насколько сложен дизайн вашего сайта. Более сложный, с точки зрения графики или компонентов (количество блоков контента), определит, насколько хорошо ваш сайт будет масштабироваться. Как правило, вы обнаружите, что веб-сайты большинства графических дизайнеров не масштабируются, потому что они графически насыщены. Однако информационный веб-сайт будет масштабироваться, чтобы максимально использовать читаемое пространство на экране, и не будет сложным для простоты использования. На самом деле это вопрос предпочтения.
Я думаю, это зависит от содержания сайта. Такие сайты, как SOFlow, форумы и другие сайты, делают упор на чтение большого количества деталей, поэтому наличие большего количества недвижимости для этого, на мой взгляд, является большим преимуществом. Чем меньше вертикальная прокрутка, тем лучше.
Однако для сайтов, которые немного менее требовательны к чтению, даже для блогов или сайтов розничной торговли, где вы просто показываете отдельный продукт, фиксированная ширина позволяет сделать вещи более лаконичными.
Важно, чтобы блок текста не растягивался слишком широко. Если окно расширено, ни один блок текста не должен растягиваться бесконечно, чтобы соответствовать, потому что чтение становится затруднительным.
Ширина абзаца больше, чем у вас на экране, делает веб-сайт полностью непригодным для использования. Вы должны покачивать горизонтальную полосу прокрутки вперед и назад для каждой прочитанной строки. Я изучаю веб-дизайн в университете, и в учебнике дизайн, который адаптируется к ширине экрана, называется гибкий макет.
Я разрабатываю свой проект большого класса, используя гибкий макет, это немного сложнее, чем фиксированная ширина. Я подозреваю, что никто из других студентов не будет использовать его, маркеры не заметят, и ни один из профессиональных сайтов, которые мы имитируем, также не является плавным.
Я думаю, это может быть потому, что если вы использовали фиксированный, вы можете просто убедиться, что его можно использовать на 1024x768, и вы в порядке на 99,9% всех экранов, iPhone имеет масштабирование, а другие мобильные устройства в любом случае игнорируют большую часть таблицы стилей, чтобы отображать лучшее, что они могут
Как уже говорилось, это действительно зависит от того, какую информацию отображает сайт. Двумя хорошими примерами являются StackOverflow и Google Images.
Если stackoverflow растянулся до размеров экрана, более длинные ответы было бы неудобно читать, потому что глазу сложно сканировать длинные строки - это точно, почему газеты используют столбцы для всего и почему книги имеют одинаковую ширину.
В Google Images, где контент в основном представляет собой набор изображений шириной 200 пикселей, он растягивается, чтобы соответствовать ширине браузера, и по-прежнему отлично читается.
По сути, имейте в виду, что глаз ненавидит читать длинные строки текста, и основывайте свой дизайн на этом. Вы можете создать свой сайт таким образом, чтобы при увеличении размера шрифта весь макет хорошо масштабировался вместе с ним (единственный сайт, который, как я могу представить, это делает это, это www.geektechnique.org - нажмите ctrl and -/= или ctrl+scrollwheel, и макет изменится по ширине с размер шрифта)
Примечание: если вы используете функцию масштабирования в своем браузере, фиксированный макет сжимает текст, тогда как гибкий макет позволяет ему занимать весь экран.
Возможно, это просто проблема браузера, но это определенно аргумент в пользу жидкости.
Вероятно, существует компромисс между фиксированной и плавной конструкциями. Вы можете создать сайт, похожий на текучий, но установите для свойства css max-width значение 1024 (или что-то еще). Это означает, что вы получаете плавный макет, когда window width меньше 1024 и fixed width, когда он больше.
Тогда пользователям с узким экраном (например, моему 800-пиксельному eee 701) не нужно вертеть горизонтальную полосу прокрутки, чтобы читать каждую строку, а пользователи с широким экраном (которые не знают, как изменить размер окна своего браузера) не получают ширину 500 символов , Абзацы длиной 1 символ.
Я большой поклонник полностью плавного дизайна. Что касается жалоб на удобство использования в отношении слишком длинных строк текста ... если они слишком длинные из-за размера окна моего браузера, то я могу так же легко сделать окно уже, как я могу сделать его шире.
Дизайн должен быть плавным в разумных пределах.
Использование CSS имеет свойства min-width и max-width (которые работают во всех браузерах, включая IE7 +), чтобы дизайн не растягивался слишком сильно.
Я бы сказал, жидкость полностью. Пользователь всегда может вернуться к окну меньшего размера, если ему не нравится результат его увеличения, но он ничего не может сделать с фиксированным макетом.
Если вы действительно очень ненавидите идею о том, что ваш сайт выглядит некрасиво из-за чего-то, что делает пользователь с большим экраном, тогда, ради всего этого правдивого и красивого, по крайней мере, в никогда не используйте фиксированные макеты на основе пикселей! CSS есть такие аккуратные единицы измерения размера текста, такие как " em ", которые позволяют частям вашей страницы масштабироваться в соответствии с размером шрифта, в то время как другие (например, изображения) остаются в своем" естественном "размере.
Почему бы не использовать их и не улучшить масштабирование страницы, не полагаясь на менее гибкое «масштабирование всего» в FF3, которое на самом деле является обходным решением для сайтов, использующих тупой фиксированный макет на основе пикселей?
эй, я ценю настроение, но px определяется как относительная единица в спецификации css2 w3c. (w3.org/TR/1998/WD-css2-19980128/syndata.html)
Многие люди говорят что-то вроде «это дело вкуса» или «Мне не нравятся большие шрифты на моем дисплее с высоким разрешением». Количество пикселей тут ни при чем, и дело не вкуса. Это вопрос DPI, который напрямую связан с разрешением экрана и размером шрифта. Если ваш макет масштабируется вместе с DPI шрифтов (например, путем указания в ems и использования SVG), то вы получите очень красивые, очень четкие веб-сайты, которые оптимально работают с любым дисплеем.
лол глупые спамеры, им нужно усвоить урок и отобразить эти шрифты в изображении!