должны ли веб-сайты расширяться при изменении размера окна?
https://stackoverflow.com/questions/27381
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я задаю этот вопрос исключительно с точки зрения удобства использования:Должен ли веб-сайт расширяться, чтобы заполнить область просмотра, когда вы изменяете размер окна браузера?
Я точно знаю, что есть очевидные минусы:
- Большие столбцы текста трудно читаемы
- Написание html / css с использованием процентов может быть непростой задачей
- Это делает вас уязвимым к тому, что ваш дизайн будет растянут сверх установленных пределов, если изображение будет слишком широким или будет добавлен слишком длинный блок текста.(видите, как сложно кодировать html / css)
Единственное преимущество, о котором я могу подумать, - это то, что пользователям, использующим встроенную в их браузер функцию изменения размера шрифта, не придется иметь дело со столбцами длиной всего в несколько слов с пробелами по обе стороны.Тем не менее, я думаю, что это может быть проблемой браузера больше, чем что-либо еще (Firefox 3 позволяет увеличивать масштаб все вместо просто текста, который постоянно пригодится)
Редактировать:Я заметил, что переполнение стека имеет фиксированную ширину, но ужас кодирования изменяется.Похоже, у Джеффа в любом случае нет особых предпочтений.
Решение
Необработанный HTML делает именно это.Вы меняете свои данные так, чтобы они не так хорошо отображались в окнах произвольного размера?
В прежние времена у всех были VGA-экраны.Так вот, такое разрешение является наиболее необычным.Кто знает, какие резолюции станут общими в будущем?И зачем ожидать определенной минимальной ширины или высоты?
С точки зрения удобства использования, требование определенного разрешения от ваших пользователей просто ухудшит качество работы для тех, кто не использует это разрешение.Еще одна вещь, которая вытекает из этого, - это то, что является фиксированная ширина?Я видел множество окон фиксированного размера (всплывающих окон), которые просто неправильно отображаются, потому что мои шрифты отличаются от шрифтов дизайнера.
Другие советы
С точки зрения масштабирования веб-сайта мне нравятся веб-сайты фиксированного размера, которые хорошо масштабируются с помощью функции "масштабирования" браузера.Мне не нужна действительно широкая страница с крошечными шрифтами на моем мониторе с разрешением 1920.Я не знаю, должен ли веб-дизайнер что-либо делать, чтобы он красиво масштабировался при увеличении, но масштабирование в FF3 потрясающее, а в IE7 бесполезное...
Дизайн должен быть гибким в разумных пределах.
Использование CSS имеет min-width и max-width свойства (которые работают в каждом браузере, включая IE7 +), предотвращающие чрезмерное растягивание дизайна.
Важно, чтобы блок текста никогда не растягивался слишком широко.Если окно расширено, ни один блок текста не должен бесконечно растягиваться для соответствия, поскольку чтение становится затруднительным.
Как уже говорили люди, это действительно зависит от того, какую информацию отображает сайт.Два хороших примера - StackOverflow и Google Images..
Если бы stackoverflow растягивался по размеру экрана, чтение более длинных ответов вызывало бы раздражение, потому что глазу трудно сканировать длинные строки - это именно так почему газеты используют столбцы для всего, и почему книги имеют одинаковую ширину.
В Google Images, где контент в основном представляет собой набор изображений шириной 200 пикселей, он растягивается по ширине браузера и по-прежнему отлично читается.
В общем, имейте в виду, что глаз ненавидит читать длинные строки текста, и основывайте свой дизайн на этом.Вы можете спроектировать свой сайт таким образом, чтобы при увеличении размера шрифта весь макет хорошо масштабировался (единственный сайт, о котором я могу вспомнить, который делает это, это www.geektechnique.org - нажмите ctrl and -/= или ctrl+scrollwheel, и ширина макета меняется в зависимости от размера шрифта)
Мне, наверное, нравится многое другое:это зависит от обстоятельств.Обычно я делаю и то, и другое.Некоторый контент остается фиксированной ширины, чтобы хорошо выглядеть, или если он не может занять больше места.другие материалы устанавливаются на 100%, если кажется, что это было бы полезно.
Это следует решать в зависимости от того, насколько сложным является дизайн вашего сайта.От того, насколько хорошо будет масштабироваться ваш сайт, зависит, насколько он будет сложнее графически или компонентно (количество разделов контента).Как правило, вы обнаружите, что веб-сайты большинства графических дизайнеров не будут масштабироваться, потому что они слишком насыщены графикой.Однако информационный веб-сайт будет масштабироваться для наилучшего использования читаемого пространства на экране и не будет сложным для удобства использования.На самом деле это вопрос предпочтений.
Я думаю, это зависит от содержания сайта.Такие сайты, как SOFlow, Форумы и другие, делают упор на чтение большого количества деталей, поэтому, на мой взгляд, наличие большего количества объектов недвижимости для этого является большим преимуществом.Чем меньше вертикальная прокрутка, тем лучше.
Однако для сайтов, немного менее требовательных к уровню чтения, даже для блогов или сайтов розничной торговли, где вы просто показываете отдельный продукт, фиксированная ширина позволяет сделать информацию более краткой.
Я большой поклонник полностью плавных дизайнов.Что касается жалоб на удобство использования, то они касаются слишком длинных строк текста...если они слишком длинные из-за размера окна моего браузера, то я могу так же легко сделать окно более узким, как и более широким.
Примечание:если вы используете функцию масштабирования в своем браузере, фиксированный макет уменьшает размер текста, в то время как плавный макет позволяет ему занимать весь экран.
Возможно, это просто проблема браузера, но это определенно аргумент в пользу fluid
Ширина абзаца, превышающая ширину вашего дисплея, делает веб-сайт полностью непригодным для использования.Вам нужно покачивать горизонтальную полосу прокрутки взад-вперед для каждой прочитанной строки.Я изучаю предмет веб-дизайна в университете, и в учебнике называются дизайны, которые адаптируются к ширине вашего экрана плавная компоновка.
Я разрабатываю свой проект большого класса, используя fluid layout, это немного сложнее, чем фиксированная ширина.Я подозреваю, что никто из других студентов не будет им пользоваться, маркеры этого не заметят, и ни один из профессиональных сайтов, которым мы подражаем, также не является изменчивым.
Я бы сказал, текучий до конца. Пользователь всегда может вернуться к окну меньшего размера, если ему не нравится результат его увеличения, но он ничего не может поделать с фиксированным макетом.
Если вам действительно, очень не нравится мысль о том, что ваш сайт выглядит уродливо из-за того, что делает пользователь с большим экраном, то хотя бы ради всего того, что является правдой и красотой никогда не используйте фиксированные макеты на основе пикселей! В CSS есть такие аккуратные единицы измерения размера текста, как "em", которые позволяют частям вашей страницы масштабироваться в соответствии с размером шрифта, в то время как другие (например, изображения) остаются в их "естественном" размере.
Почему бы не использовать их и не сделать вашу страницу хорошо масштабируемой, не полагаясь на менее гибкое "масштабировать все" в FF3, которое на самом деле просто обходной путь для сайтов, использующих глупый фиксированный макет на основе пикселей?
Многие люди говорят что-то вроде "это дело вкуса" или "Мне не нравятся крупные шрифты на моем высокопиксельном дисплее". Количество пикселей не имеет к этому никакого отношения, и это не вопрос вкуса.Все дело в DPI, который напрямую связан с разрешением дисплея и размером шрифта.Если ваш макет масштабируется вместе с DPI шрифтов (например, указываясь в ems и используя SVG), то в итоге вы получаете очень красивые, очень четкие веб-сайты, которые оптимально работают с любым дисплеем.
Это вопрос предпочтений в стиле.И то, и другое может быть одинаково полезно в зависимости от реализации.Столбцы также можно использовать, если экран становится достаточно широким.Лично меня раздражает, когда по экрану идет один узкий столбец текста.
Редактировать за 2012 год:Да, ваш веб-сайт должен соответствовать размеру окна, в котором он отображается.
Есть много мест, где можно прочитать больше об этом, в том числе:
Вероятно, существует компромиссный дизайн между стационарными и плавными конструкциями.Вы можете создать сайт, подобный fluid, но установите свойство css max-width до 1024 (или чего угодно еще).Это означает, что вы получаете плавный макет, когда window width меньше 1024 и fixed width когда оно будет больше.
Тогда пользователям с узким экраном (например, моему 800-пиксельному eee 701) не придется крутить горизонтальную полосу прокрутки, чтобы прочитать каждую строку, а пользователям с широким экраном (которые не знают, как изменить размер окна своего браузера) не будут доступны абзацы шириной 500 символов и высотой 1 символ.
