¿Por qué la mayoría de los sitios web están optimizados para ver en modo vertical? [cerrado]

Simplemente no puedo resolver esto. ¿Casi todos los monitores tienen una relación de aspecto donde el ancho es mucho mayor que la altura y, sin embargo, casi todos los sitios web están diseñados exactamente al revés? Realmente no soy un desarrollador web y solo estoy experimentando cosas en este momento, ¡pero esta locura me desconcierta!

Editar: El punto no es que me gustaría limitar la altura de un sitio web. El punto es que me gustaría que de alguna manera llene todo el espacio disponible cuando tengo mi 1920x1080 en modo horizontal.

Edición 2: mira esto para entender lo que estoy diciendo

Hay un límite de hasta qué punto puede escanear el ojo sin perder la noción de qué línea es la siguiente cuando llegue al final de la línea actual. Se han realizado varios estudios ( incluido este ) sobre el ancho de línea óptimo y la legibilidad.

Es posible que pueda reducirlo a grados, pero para saber qué es lo óptimo en ese punto requiere saber qué tan lejos está el usuario del monitor. Es por eso que la mayoría de las recomendaciones son para mediciones en ems, caracteres o palabras. El tamaño en píxeles depende del tamaño de la fuente, pero el consenso general aún funciona.

Personalmente, me resultaría muy difícil leer un artículo si estuviera formateado para usar el ancho completo de una pantalla de 1080p. Estoy seguro de que tú también lo harías. Nuestras convenciones actuales se derivan de las pautas de diseño de diseño de impresión, y las pautas de diseño no han cambiado materialmente. La única diferencia es que podemos interactuar con la página en un navegador.

Comentario adicional : (de la pregunta planteada en los comentarios)

Existen limitaciones sobre lo que HTML puede hacer por usted en una pantalla. Por un lado, no hay páginas. Solo barras de desplazamiento. Diseñar un comportamiento razonable sobre cómo un navegador debe mostrar marcado es una propuesta muy difícil. Las propiedades CSS3 para el diseño de varias columnas aún no han salido de la etapa de recomendación de candidatos. Hay hacks para jugar descritos en este artículo en una lista aparte . Sin embargo, todavía no está listo para el horario estelar en la mayoría de los sitios.

Mientras su contenido no requiera desplazamiento, debería estar bien. Tan pronto como lo hace, el enfoque de varias columnas puede presentar algunos desafíos sobre cómo interactúa el usuario con el sitio.

Comentario sobre el estándar de facto actual :

Para abordar la forma en que reformuló su pregunta y el ejemplo que proporcionó, comprenda que el diseño web tiene que equilibrar una serie de requisitos potencialmente conflictivos, y aún así mantener el sitio web como profesional. Para equilibrar las necesidades de los diseñadores y los clientes, la mayoría de las casas de desarrollo diseñan para una resolución. Esa resolución se basa en datos que pueden estar fácilmente disponibles . También pueden basarse en registros históricos de tráfico web o en el conocimiento del entorno de destino.

Los anchos de pantalla más comunes (1024, 1280, 1366) son lo suficientemente cercanos como para que si diseña para el más pequeño (1024p) y centra el diseño en la página, aún se verá bien en las otras dimensiones horizontales ligeramente más grandes. Es muy difícil alinear todo correctamente en cualquier formato, y mucho menos tener que admitir múltiples formatos dependiendo del ancho de la pantalla. Los usuarios de 1080p están creciendo en número, pero aún representan un porcentaje muy pequeño de todos los que tienen que soportar.

En caso de que esté interesado, le recomiendo leer algunos de los artículos de diseño en "A List Apart" . Comenzarás a tener la idea de que hacer lo que quieres es más difícil de lo que parece. Cuando publiqué una pregunta sobre el diseño para 1080p , las primeras respuestas iniciales ascendieron a "Hacer todo más grande". Es algo que todavía no ha estado en el radar para la mayoría de los diseñadores web.

La mayoría de los sitios web son más altos que anchos porque puede desplazarse hacia abajo de forma natural para leer más contenido. Yo personalmente ODIO las barras de desplazamiento horizontal. ¡Deberían ser abolidos!

El sitio web sigue siendo vertical, el sitio se extiende más allá de la parte inferior de la pantalla. No hay límite para la altura de un sitio.

Ahora hay páginas web infinitamente largas (Gracias, AJAX). ¿Qué harías si vieras una página infinitamente ancha? (Cazaría y mataría al diseñador, hacer clic fuera de la página no es lo suficientemente bueno, el diseñador debe morir).

Desplazarse hacia adelante y luego hacia atrás para cada línea conducirá a uno al suicidio. Esta es la razón por la cual las personas crean aplicaciones de libro de fantasía, como páginas que pasan, para que no tenga que desplazarse.

Después de leer las respuestas anteriores, noto que faltan varios puntos, así que intentaré describirlos.

Implementación de columnas difíciles

Cuando habla de páginas de gran ancho, imagino que está hablando de columnas de texto, como lo que ve en un periódico "físico". Hay dos problemas con eso.

Primero, HTML 4 y XHTML 1.0 / 1.1 reales no están destinados a mostrar texto en columnas. Hay hacks para Firefox (y tal vez otros navegadores normales), pero no funcionará en Internet Explhorror.

En segundo lugar, en la implementación real de Firefox o en el futuro HTML 5, si el texto debe mostrarse en columnas, debe especificar el ancho de la columna y el número de columnas. No es posible especificar la altura (a, por ejemplo, la altura de la página, menos la altura del encabezado y la altura del pie de página), y dejar que el navegador ajuste el número de columnas.

Hace prácticamente imposible tener una disposición utilizable en columnas con solo una barra de desplazamiento horizontal, sin la vertical.

No 100% de altura

HTML / XHTML real está destinado a ajustar el tamaño de los elementos de acuerdo con el ancho de la página. Es muy difícil usar el alto de página para las métricas.

Esto significa que tendrá que usar hacks de JavaScript para mostrar el contenido correctamente. En otras palabras, para las personas que no tienen habilitado JavaScript, su sitio web será completamente inutilizable.

Navegación con página de media pantalla

Con pantallas grandes de 16: 9/16: 10, no es inusual trabajar con dos ventanas una al lado de la otra ( Win+ ←/ Win+ →en Windows Seven). Esto significa que la ventana del navegador tendrá un ancho pequeño y una altura grande.

Ancho fijo vs. dinámico

Su suposición de que la mayoría de los sitios web están optimizados para su visualización en modo vertical puede estar equivocada.

Primero, la mayoría de los sitios web no están optimizados y están escritos por personas que no saben nada o poco sobre el desarrollo web en general.

En segundo lugar, hay una diferencia entre los sitios web con ancho fijo y los sitios web con el ancho que es igual a un porcentaje del ancho de la ventana del navegador.

En el primer caso, puede notar que la mayoría de los sitios web no están optimizados ni para modo vertical ni horizontal. Por lo general, el ancho se fija a 1024, 800 o menos, lo que no tiene ningún sentido cuando se ven en una pantalla de 24 pulgadas con una resolución de 1920 × 1080.

En el segundo caso, si está viendo la página en modo de pantalla completa en una pantalla de 24 pulgadas, hay posibilidades de que este sitio web se muestre correctamente en modo vertical y horizontal.

Ejemplo: imagine un sitio web con una galería de fotos. En una página hay miniaturas, y cuando haces clic en una miniatura, ves una foto a gran escala. Si las miniaturas son flotantes, con un ancho dinámico de una página, se mostrará muy bien en modo horizontal. Será especialmente agradable ver las fotos a gran escala.

¿Por qué los monitores modernos están orientados en modo horizontal?

1. Formato de video. El video HD se escalará mejor para pantallas orientadas al paisaje.
2. Leyendo. Ya sea de izquierda a derecha o de derecha a izquierda, es más fácil leer grandes bloques de líneas completas sin ningún desplazamiento cuando se orienta en modo horizontal.

EDITAR: después de revisar su comentario y reformular la intención de su pregunta original, parece que está apuntando por alguna razón al diseño de dos y tres columnas que es más común hoy en día. Para esto, un breve resumen de la historia del sitio web:

¿Por qué los sitios web están optimizados para ver en modo vertical?

No creo que estén optimizados para eso en absoluto. A menudo es un compromiso entre tener ciertos aspectos siempre disponibles, ciertos aspectos a menudo disponibles y ciertos aspectos disponibles solo dentro de un determinado contexto. En el mejor de los casos, podría ser un compromiso óptimo.

Poder ubicar el contenido principal, la navegación esperada y el contenido secundario en cada página junto con el contenido específico del contexto es la razón por la cual los diseños de dos y tres columnas son tan penetrantes como lo son. En los primeros días de la web, muchos sitios experimentaron con diseños que ofrecían lo que intentaba aparecer como diseños de una sola columna, usando listas de navegación dinámicas (o menús, sin importar cómo los quisiera ver), que se ocultarían y expandirían el área de lectura para contenido principal. Pero fue un desafío de dos partes: a) desafíos técnicos en la falta de compatibilidad entre navegadores; b) usabilidad: los usuarios la veían a menudo, incluso si (un gran si) se superaba el desafío técnico, como un juego intuitivo o innecesario de caza (para navegación) y destrucción (satisfacción de la experiencia porque algunas soluciones modificaron el comportamiento contextual predeterminado de clics del mouse).

Para superar esto, la mayoría de los sitios han adoptado un estándar de facto y aceptado las consecuencias. Se agregan dos columnas que muestran navegación en una y contenido en la otra, o se agrega una tercera columna para que siempre se pueda mostrar contenido de navegación secundario y no central (ya sea ayuda, notas o publicidad relacionada con el contexto, o más recientemente transmisiones de comunicación que muestran a una persona en vivo actividad relacionada con el sitio o contexto). El contenido real del contexto está atascado en el medio.

Esto se llama diseño de ancho fijo. Hay diseños de ancho completo o también llamados fluidos. Hay una razón por la cual se usa el ancho fijo. Una es que la resolución de su monitor afecta la usabilidad. Si tiene un monitor enorme como el que tengo yo a 27 ", el sitio se vería horrible. Todo el texto, las imágenes y todo estarían tan dispersos que me sería difícil comprender el diseño o el sitio. Un diseño fijo permite un diseño hermoso. El diseño fluido se usa principalmente en listados o tipos de datos de sitios. Por ejemplo, eBay usa un diseño fluido en sus listados porque proporciona una mejor experiencia. Los foros también podrían beneficiarse del diseño fluido. Pero blogs, creativos, fotos, o los sitios de negocios se benefician mucho mejor de los sitios de ancho fijo.

No estoy seguro, pero supongo que la mayoría de los "documentos" que están impresos están diseñados para imprimirse en orientación vertical, y muchas personas todavía designan sitios web como "documentos", ¿esto podría ser algo cultural? Otra posible explicación es que el ancho del monitor varía más que la altura del monitor ...

Supongo que, en general, se desaconseja publicar una respuesta en un hilo que no haya visto actividad durante mucho tiempo. Sin embargo, siento que hay algunas cosas relevantes que aún no se han mencionado.

Primero, permítanme mencionar la siguiente extensión de Firefox que descubrí hace varios meses: Column Reader

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

¿Por qué nos desplazamos verticalmente?

A modo de comparación: considere un lenguaje que está escrito en columnas verticales. Para un lenguaje como ese, los monitores de pantalla panorámica actuales son ideales. Así es como funciona: te desplazas perpendicularmente a la dirección de tus líneas. Las páginas del libro están en formato vertical porque nuestras líneas son horizontales.

Como se ha señalado en respuestas anteriores: las capacidades de reflujo de los motores de diseño de nuestro navegador están ajustadas para reflujo vertical.

capacidad de múltiples columnas

El equipo de desarrollo de un navegador puede optar por agregar la capacidad de varias columnas de la siguiente manera: Primero renderice toda la página como una sola columna, luego córtela en tiras con la altura de píxeles del espacio de ventana disponible y muestre esas tiras de lado al lado. ¿Pero qué tan ancho haces las columnas? Incluso cuando se usa muy poco ancho para el texto real, a menudo los códigos de página para un color de fondo particular para todo el ancho del espacio de ventana disponible.
Luego, el motor de renderizado debe ser seguro y asignar todo el espacio horizontal a una sola columna.

¿Es posible que los diseñadores web implementen un diseño de columnas múltiples?
Eso se encontraría con graves dificultades. Debe obtener la altura y el ancho del espacio de ventanas disponible, y cortar y organizar las tiras en columnas en Javascript. Luego debe decidir qué hacer con las imágenes que se cortan en dos partes.

Tratar con ese tipo de cosas es lo que hace un motor de diseño. Intentar crear una biblioteca de Javascript que facilite el reflujo del diseño de varias columnas es crear un motor de representación en Javascript. Eso es crear una plataforma en una plataforma.

Tamaño del monitor

Me resulta frustrante que, en efecto, los monitores de computadora se hayan reducido en los últimos años. Los monitores grandes tenían 1200 píxeles de altura, hoy en día solo 1050. Sí, son más anchos, pero para el texto ese espacio no se puede utilizar.

Además, en orientación vertical, esos monitores son demasiado estrechos.
Tengo una configuración de monitor dual, con ambos monitores en orientación vertical, ambos monitores son 1200x1600px. Para mí esos 1200 píxeles son un mínimo.

Una declaración condicional en CSS

Una observación sobre diseños de ancho fijo.

Me encanta el comando CSS que permite al diseñador web acomodar una amplia gama de anchos al tiempo que evita las barras de desplazamiento y mantiene la legibilidad: "ancho máximo". (Hay cuatro comandos como ese: ancho mínimo, ancho máximo, altura mínima, altura máxima). Para un div que contiene texto, especifique un ancho máximo de, digamos, 65em.

Obtienes un if / else.
Si el espacio disponible es inferior a 65 em, el texto se redistribuye en consecuencia: sin barra de desplazamiento horizontal. Si el espacio disponible es superior a 65 em, el div que contiene se establece en 65 em.

Los monitores panorámicos realmente solo han despegado en los últimos 2 años, solían ser las opciones más caras.

Desde el punto de vista del diseño, siempre se ha visto que tener una página web (documento) es larga, por lo que un usuario tiene que desplazarse hacia abajo es muy superior a hacer que alguien se desplace por varias razones. Primero, esta es la forma en que la mayoría de los documentos de computadora tienden a funcionar, por lo que es un patrón más "normal"; tiene una tecla de página abajo pero no una página en la tecla. En segundo lugar, tenemos ruedas de mouse casi omnipresentes en estos días, por lo que desplazarse hacia arriba / abajo es una actividad muy fácil, mucho más fácil que desplazarse.

Finalmente, ¿cómo elige la resolución de pantalla panorámica que le gustaría alcanzar? Mi escritorio es 1920x1080; Mi laptop es de 1440x900. ¿Para cuál diseñas?

Si bien es cierto que la mayoría de los monitores tienen una orientación horizontal que se venden hoy en día, también debe tener en cuenta que cuando diseña un sitio web no tiene forma de saber exactamente qué resolución de pantalla utilizará el espectador. Todavía hay un 15% de usuarios de Internet que operan con una resolución de pantalla de 1024 o menos de ancho. Esto no deja mucho espacio para la expansión horizontal antes de que tenga que desplazarse para ver la información. Además, algunos usuarios no navegan por Internet en una ventana totalmente maximizada. La única solución a este problema es desarrollar un diseño dinámico basado en el tamaño de la ventana del navegador. Si alguna vez ha intentado hacer esto, dudaría en intentarlo nuevamente a menos que sea absolutamente necesario, ya que es un dolor real. Hay muchas otras razones para tener un ancho más pequeño como ya se ha mencionado.

Hay un número de razones:

• Los documentos de texto en su mayoría tienen una relación vertical tradicional, por lo que la web lo conserva.

• Es más fácil leer líneas de texto más cortas. No tengo una cita, pero es un consejo de diseño muy común, hasta el punto de ser un estándar más que una guía.

• Un diseño que favorece el estrecho es más flexible. Me gusta colocar mi navegador en la ventana de solo la mitad de la pantalla completa de mi monitor de pantalla ancha y poner algo más (generalmente un editor de texto u otra ventana del navegador) al lado. El hecho de que pueda tener una página web de 1920 píxeles no significa que siempre quiera que sea. En realidad, es un poco presuntuoso que un diseñador web haga suposiciones sobre cómo veré (o debería) ver su página. Me da malos recuerdos de "Esta página se ve mejor en 800x600 en IE6".

• Una mejor opción sería un diseño líquido que se ajuste a cualquier ancho, y CSS hace que funcione bien para el texto (la mayoría de las veces, en la mayoría de los navegadores modernos, tal vez). Pero las imágenes, el video incrustado, el flash y otros objetos incrustados modernos siempre arruinan ese tipo de diseño sin mucho trabajo. Dada la elección entre un diseño de escalado flexible que lleva mucho tiempo acertar frente a un diseño de ancho fijo estrecho probado y verdadero, bastantes personas optarían por el camino más fácil (más barato).

• La opción más flexible es algo como iGoogle, un lienzo de elementos web ajustable por el usuario. Luego, su texto puede ser tan ancho o estrecho como desee, con bloques de texto e imágenes organizados como desee. Ahora me gustaría que imaginaras la pesadilla de cada sitio que visitas que requiere personalización antes de que sea legible.

Por ahora, el estándar de diseño web para sitios es desarrollar en un ancho de 960 px para acomodar una resolución de pantalla de 1024 px y más (sin barra de desplazamiento horizontal). Este es el requisito mínimo, ya que no todos usan un nuevo y brillante monitor de 24 pulgadas. (piense en tabletas y netbooks que son hardware nuevo con pequeñas resoluciones)

Debe tener en cuenta que la resolución del diseño de un sitio web se ve afectada por el público objetivo y debe adaptarse en consecuencia.

También en términos de usabilidad, las líneas de texto deben tener entre 11 y 14 palabras de ancho (puede ser más si adapta la altura de la línea) para que no todos los sitios web puedan manejar un diseño fluido.

En el mejor de los casos, si no desea dar a sus visitantes la sensación de que la página fuera de la zona de contenido no está vacía, puede agregar tiras de textura / color que se extiendan más allá y que se adapten al tamaño de la pantalla del usuario. (como en http://www.cnn.com/ que solo se aplica al encabezado, pero puede hacerlo para toda la página)

¿Por qué la mayoría de los sitios web están optimizados para ver en modo vertical?

¿Por qué imprimimos papel en modo vertical cuando el paisaje también es una opción perfectamente viable?

Como muchas personas han dicho, es más fácil leer una mayor cantidad de líneas cortas que leer dos o tres líneas largas.

Aparte de eso, si tuviera que llenar 1280 * x píxeles con contenido, la página web estaría abarrotada y nadie sabría qué debe abordarse. Una página web debe realizar una tarea específica, no CADA tarea.

Las tendencias de la Web 2.0 nos enseñan a poner menos información en una página y a hacer que la llamada a la acción sea clara y concisa. Esta filosofía de diseño comúnmente aceptada es exactamente lo contrario de lo que estás sugiriendo.

Hay MUCHAS razones para desarrollar una resolución de 1024, pero creo que el factor de desorden es uno de los más importantes.

Me di cuenta de que estás usando lo que parece ser Windows 7, por lo que la respuesta es: Win+←

Sin embargo, en una nota seria: la razón principal por la que los sitios web están optimizados verticalmente es que es más fácil codificar un diseño de ancho estático en CSS y hacer que se vea correctamente en varios navegadores en múltiples plataformas. Los anchos de fluido se usan ocasionalmente, pero no se prestan a la legibilidad.

Al mirar una película o jugar un juego, es genial usar todo tu espacio horizontal con cosas, pero con la lectura, realmente solo quieres una pequeña columna de texto para que los ojos puedan escanear de forma natural sin necesidad de girar la cabeza. Agregar más basura a la izquierda y a la derecha de una página web tenderá a distraer del contenido principal de la página, por lo que muchos diseñadores simplemente lo dejan en blanco para tener un espacio en blanco atractivo.

Además, el hecho de que tenga un buen monitor no significa que la mayoría de las personas tenga un buen monitor de pantalla ancha. Un gran recurso para verificar los tamaños de diseño es el tamaño de navegador de Google .

Su monitor está orientado incorrectamente. El monitor de un programador debe ser más alto que ancho, en vertical en lugar de horizontal.