Почему большинство сайтов оптимизировано для просмотра в портретном режиме? [закрыто]

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

Изменить: Дело не в том, что я хотел бы ограничить высоту сайта. Дело в том, что я бы хотел, чтобы он как-то заполнил все доступное пространство, когда у меня есть 1920x1080 в альбомном режиме.

Изменить 2: увидеть это, чтобы понять, что я говорю

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

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

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

Дополнительный комментарий : (из вопроса, заданного в комментариях)

Существуют ограничения на то, что HTML может сделать для вас на экране. Во-первых, нет страниц. Только полосы прокрутки. Разработка разумного поведения для отображения браузером разметки - очень сложное предложение. В свойстве CSS3 для нескольких столбцов макета не сделали его из кандидатов стадии рекомендации еще. Есть хаки, чтобы играть с ним, описанным в этой статье в отдельном списке . Тем не менее, он просто не совсем готов к прайм-тайм на большинстве сайтов.

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

Комментарий к текущему стандарту де-факто :

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

Наиболее распространенные значения ширины экрана (1024, 1280, 1366) достаточно близки, так что если вы создаете самый маленький (1024p) и центрируете дизайн на странице, он все равно будет хорошо смотреться на других немного больших горизонтальных размерах. Это очень трудно получить все выровненное право в любом формате, гораздо меньше приходится поддерживать несколько форматов в зависимости от ширины экрана. Число пользователей 1080p растет, но все еще составляет очень небольшой процент от всех, кого они должны поддерживать.

Если вам интересно, я настоятельно рекомендую просмотреть некоторые статьи о дизайне в «A List Apart» . Вы начнете понимать, что делать то, что вы хотите, сложнее, чем кажется. Когда я отправил вопрос о дизайне для 1080p , первые первые ответы были «Сделай все больше». Это то, что просто еще не было на радаре для большинства веб-дизайнеров.

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

Сайт по-прежнему портретный, сайт выходит за пределы нижней части экрана. Нет ограничений по высоте сайта.

Теперь есть бесконечно длинные веб-страницы (спасибо, AJAX). Что бы вы сделали, если бы увидели бесконечно широкую страницу? (Я бы выследил и убил дизайнера, щелкнув в сторону от страницы недостаточно, дизайнер должен умереть.)

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

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

Реализация сложных столбцов

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

Во-первых, настоящие HTML 4 и XHTML 1.0 / 1.1 не предназначены для отображения текста в столбцах. Существуют хаки для Firefox (и, возможно, других обычных браузеров), но он не будет работать в Internet Explhorror.

Во-вторых, в реальной реализации Firefox или в будущем HTML 5, если текст должен отображаться в столбцах, необходимо указать ширину столбца и количество столбцов. Невозможно указать высоту (например, высоту страницы за вычетом высоты верхнего колонтитула и высоты нижнего колонтитула) и позволить браузеру настроить количество столбцов.

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

Нет 100% высоты

Фактический HTML / XHTML предназначен для настройки размера элементов в соответствии с шириной страницы. Очень сложно использовать высоту страницы для метрик.

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

Просмотр с полуэкранной страницей

С большими экранами 16: 9/16: 10 нет ничего необычного в работе с двумя окнами бок о бок ( Win+ ←/ Win+ →в Windows Seven). Это означает, что окно браузера будет иметь небольшую ширину и большую высоту.

Фиксированная и динамическая ширина

Ваше предположение, что большинство сайтов оптимизировано для просмотра в портретном режиме, может быть ошибочным.

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

Во-вторых, существует разница между сайтами с фиксированной шириной и сайтами с шириной, равной проценту от ширины окна браузера.

В первом случае вы можете заметить, что большинство сайтов не оптимизированы ни для портретного, ни для ландшафтного режима. Обычно ширина устанавливается на 1024, 800 или меньше, что не имеет никакого смысла при просмотре их на 24-дюймовом экране с разрешением 1920 × 1080.

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

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

Почему современные мониторы ориентированы в ландшафтном режиме?

1. Видео формат. HD-видео будет лучше масштабироваться для ландшафтно-ориентированных дисплеев.
2. Чтение. Слева направо или справа налево, легче читать большие блоки полных линий без прокрутки, когда они ориентированы в ландшафтном режиме.

РЕДАКТИРОВАТЬ: После просмотра вашего комментария и переосмысления цели вашего первоначального вопроса, кажется, вы по какой-то причине стремитесь к макету с двумя и тремя столбцами, который наиболее распространен сегодня. Для этого краткое, небольшое резюме истории сайта:

Почему сайты оптимизированы для просмотра в портретном режиме?

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

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

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

Это называется макетом с фиксированной шириной. Есть макеты полной ширины или также называемые текучими. Существует причина, по которой используется фиксированная ширина. Одним из них является то, что разрешение вашего монитора влияет на удобство использования. Если бы у вас был огромный монитор, как у меня на 27 ", сайт выглядел бы ужасно. Весь текст, картинки и все было бы так разложено, мне было бы сложно понять макет или сайт. Фиксированный макет допускает красивый дизайн. Жидкая верстка используется в основном в списках или типах данных сайтов. Например, eBay использует текучую разметку в своих списках, потому что это обеспечивает лучший опыт. Форумы могут также извлечь выгоду из плавной разметки. Но блоги, креатив, фото, или бизнес-сайты получают гораздо большую выгоду от сайтов фиксированной ширины.

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

Я предполагаю, что вообще не рекомендуется публиковать ответ в ветке, которая давно не видела активности. Однако я чувствую, что есть некоторые важные вещи, которые еще не были упомянуты.

Во-первых, позвольте мне упомянуть следующее расширение Firefox, которое я обнаружил несколько месяцев назад: Column Reader

https://addons.mozilla.org/en-US/firefox/addon/column-reader/

Почему мы прокручиваем вертикально?

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

Как указывалось в предыдущих ответах: возможности перекомпоновки в механизмах верстки нашего браузера настроены на перекомпоновку по вертикали.

возможность нескольких столбцов

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

Возможно ли для веб-дизайнеров реализовать многоколоночную разметку?
Это столкнется с серьезными трудностями. Вы должны получить высоту и ширину доступного пространства окна, а также выполнить вырезание и размещение полос в столбцы в Javascript. Затем вы должны решить, что делать с изображениями, которые разрезаны на две части.

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

Размер монитора

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

Кроме того, в портретной ориентации эти мониторы слишком узки.
У меня двойная настройка монитора, оба монитора в портретной ориентации, оба монитора 1200x1600px. Для меня эти 1200 пикселей являются минимумом.

Условный оператор в CSS

Замечание о планах фиксированной ширины.

Мне нравится команда CSS, которая позволяет веб-дизайнеру приспосабливаться к большому диапазону ширины, избегая полос прокрутки и поддерживая читабельность: «max-width». (Существует четыре такие команды: min-width, max-width, min-height, max-height). Для div, содержащего текст, укажите максимальную ширину, скажем, 65em.

Вы получаете if / else.
Если доступное пространство меньше 65em, то текст будет переформатирован соответственно: горизонтальная полоса прокрутки отсутствует. Если доступное пространство больше 65em, то содержащий div установлен на 65em.

Широкоэкранные мониторы действительно снимались только в последние 2 года - раньше они были более дорогими.

С точки зрения дизайна всегда считалось, что наличие веб-страницы (документа) занимает много времени, поэтому пользователю приходилось прокручивать страницу вниз, что значительно превосходит прокрутку по нескольким причинам. Во-первых, так работают большинство компьютерных документов, так что это более «нормальный» шаблон; у вас есть страница вниз ключ, но не страница через ключ. Во-вторых, в наши дни у нас есть почти повсеместные мышиные колесики, поэтому прокрутка вверх / вниз - это очень легкое занятие, гораздо более простое, чем прокрутка.

И наконец, как вы выбираете, какое широкоэкранное разрешение вы хотели бы выбрать - мой рабочий стол - 1920x1080; мой ноутбук 1440х900 Для кого вы разрабатываете?

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

Есть множество причин:

• Документы, в основном текстовые, традиционно имеют портретное соотношение, поэтому в Интернете это сохраняется.

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

• Дизайн, который предпочитает узкий, более гибкий. Я предпочитаю размещать в браузере только половину экрана моего широкоэкранного монитора и помещать что-то еще (обычно текстовый редактор или другое окно браузера) рядом с ним. То, что веб-страница может иметь ширину 1920 пикселей, не означает, что я всегда этого хочу. На самом деле веб-дизайнер немного самонадеянно делать какие-либо предположения о том, как я буду (или должен) просматривать их страницу. Дает мне плохие воспоминания на «Эта страница лучше всего просматривается в 800x600 на IE6».

• Лучшим выбором будет жидкий дизайн, который масштабируется до любой ширины, и CSS делает это хорошо для текста (в большинстве случаев, возможно, в большинстве современных браузеров). Но изображения, встроенное видео, флеш-память и другие современные встроенные объекты всегда портят такой дизайн без особой работы. Учитывая выбор между гибкой схемой масштабирования, которая занимает много времени, чтобы получить правильную, по сравнению с проверенной и по-настоящему узкой конструкцией с фиксированной шириной, довольно много людей выбрали бы более легкий (более дешевый) путь.

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

На данный момент стандарт веб-дизайна для сайтов должен развиваться в ширину 960 пикселей, чтобы обеспечить разрешение экрана от 1024 пикселей и выше (без горизонтальной полосы прокрутки). Это минимальное требование, поскольку не все используют новый 24-дюймовый монитор. (подумайте о планшетах и ​​нетбуках, которые являются новым оборудованием с небольшими разрешениями)

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

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

В лучшем случае, если вы не хотите, чтобы ваши посетители чувствовали, что страница за пределами зоны контента не пуста, вы можете добавить полосы текстуры / цвета, которые выходят за пределы и адаптируются к размеру экрана пользователя. (как на http://www.cnn.com/, который относится только к заголовку, но вы можете сделать это для всей страницы)

Почему большинство сайтов оптимизировано для просмотра в портретном режиме?

Почему мы печатаем бумагу в портретном режиме, когда пейзаж также является идеальным вариантом?

Как говорили многие люди, легче читать большее количество коротких строк, чем читать две или три длинные строки.

Кроме того, если бы вы заполнили содержимое размером 1280 * x пикселей, веб-страница была бы загромождена, и никто не знал бы, что нужно решать. Веб-страница должна выполнять определенную задачу, а не КАЖДУЮ задачу.

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

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

Я заметил, что вы используете то, что выглядит как Windows 7, поэтому ответ: Win+←

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

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

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

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