aspect ratio - moda - Sus pensamientos sobre el diseño web para pantallas de 16: 9
frases de diseño industrial (19)
Además de los otros comentarios ...
La mayoría de los usuarios aún no usan monitores de pantalla panorámica. Lo que es más importante, muchos usuarios que utilizan monitores de pantalla panorámica no tienen maximizados sus navegadores web.
Diseño aplicaciones web principalmente para uso de escritorio (no PDA, teléfonos, etc.) por compañeros de trabajo y clientes. A medida que más usuarios se vuelven equipados con pantallas tipo 16: 9, los diseños de pantalla tradicionales ya no son ergonómicos.
Por ejemplo, una barra de navegación vertical larga podría no ajustarse por completo o una forma compleja podría necesitar desplazarse para pasar al siguiente campo de entrada.
¿Cómo estás lidiando con este desarrollo? ¿Te estás extendiendo más horizontalmente o te estás pegando a los viejos diseños? ¿No es realmente un problema?
ACTUALIZAR
Gracias por todas las respuestas. Los he encontrado útiles. Aquí hay algunos pensamientos que se me ocurrieron:
Considero que el formato 4: 3 aún puede ser el más utilizado, pero espero que eso cambie.
Además, la mayoría de los usuarios que visito aquí en la empresa tienen todas sus ventanas maximizadas (¡en serio!), Por lo que la idea de dimensionar el navegador para que se ajuste al contenido no ayuda allí.
En mi caso, la mayoría de las aplicaciones web implican la búsqueda y visualización de información o entrada de datos (algunas de las cuales pueden involucrar formularios grandes y complejos). Son sobre todo las aplicaciones de entrada de datos las que me preocupan. Tal vez los controles AJAX y Tabbed podrían ser un camino hacia adelante allí.
Aquí hay algunos principios que recomendaría como usuario, pero también como diseñador web y desarrollador:
- Intenta evitar el desplazamiento horizontal. La mayoría de las personas tiene una rueda de desplazamiento del mouse que solo funciona en una dirección. El desplazamiento horizontal a menudo se considera muy irritante. El desplazamiento vertical suele ser aceptable ahora.
- El tamaño de la columna es importante en párrafos largos. Normalmente recomendaría un ancho de alrededor de 15-20 palabras, pero no dude en experimentar. El enlace de alphadogg es una lectura interesante, pero tendría que decir que es difícil usar el término "pulgadas" en el desarrollo web. Las palabras o los personajes son quizás una mejor medida, lo que me lleva al siguiente artículo:
- Usa unidades relativas para ancho. Esto le permite mantener el ancho en una cierta cantidad de palabras en la mayoría de los casos.
- Consejo útil: el problema con una unidad relativa es que la página se puede expandir más allá del ancho de la página. Puede reinar eso con la mayoría de los navegadores especificando una propiedad de ancho máximo en css del 90% más o menos. Entonces, cuando el texto es grande en la pantalla de alguien, todavía no tienen que desplazarse horizontalmente.
De nuevo, no se recomienda simplemente pasar el contenido al 100% del ancho del navegador la mayor parte del tiempo. Y creo que a medida que las pantallas se hagan más grandes, verás que mucha menos gente maximiza las ventanas del navegador de todos modos.
Como usuario y diseñador, odio los sitios de ancho fijo. Muchos sitios podrían ser fluidos, pero no lo son porque es "la salida más fácil". Luego sigue todo tipo de racionalizaciones que están adaptadas (juego de palabras) para apoyar esa vista.
Noticia de última hora: La longitud de las líneas cortas es un mito que data de las primeras investigaciones periodísticas. Vea este resumen para más detalles y haga su propio juicio.
Las líneas muy anchas pueden ser ilegibles para algunos (no me parece tan problemático, personalmente), pero también lo son ~ 900px diseños fijos con tres columnas, de modo que cada línea tiene entre ocho y diez palabras.
Siempre he intentado diseñar para un cambio de tamaño razonable al observar los datos demográficos de un sitio (por ejemplo, a través de Google Analytics) y ver quién tiende a visitar ...
Diseña tu sitio para que sea el contenido lo que importa, no cómo se ve. Luego puede proporcionar hojas de estilo CSS alternativas para que el usuario las elija.
Esto a veces puede ser más difícil para el diseñador. Por ejemplo, el uso de tablas para el diseño no funciona.
Hago todo mi desarrollo en un monitor de 30 "y lo visualizo en un monitor de 20" como una prueba rápida de cordura. En un reciente lanzamiento de la aplicación que hice, hice que un JS me enviara las estadísticas de lo que estaba usando mi público objetivo, y regreso con muchos números aleatorios menores a 1024x768. De las cien estadísticas que recopilé, solo 5 o 6 usuarios corrían a pantalla completa en cualquier pantalla más grande que 1440x900.
Las pantallas de 16: 9 no están realmente restringidas verticalmente si lo piensas bien. En mi experiencia con estos monitores, sus resoluciones nativas son típicamente de 1920x1080. El espacio vertical es aún más grande que la mayoría de las resoluciones (1024x768, 1280x1024, etc.)
Sin embargo, comencé a escribir diseños líquidos para manejar el espacio horizontal. A algunos diseñadores web les gusta mantener un ancho fijo de 960 píxeles. Todo depende de lo que intentas presentarle al usuario.
Me quedo con el desarrollo para la mayoría, que todavía está usando monitores 4: 3. Si quisiera crear contenido específico para 16: 9, probablemente proporcione un enlace a la versión "Mejorada para monitores de pantalla panorámica", algo así como la etiqueta en la parte posterior de los DVD de los días en que no todos eran anamórficos.
No me preocupo mucho por las pantallas antiguas en estos días y cuando 800px no es suficiente, cambio fácilmente a 1000px. Sin embargo, no debe diseñar intencionalmente algo más amplio, como resoluciones de 1920x1080. La cantidad de usuarios con tales pantallas no es mucho. Incluso si no fuera el caso, los diseños demasiado amplios afectan la usabilidad. Leer textos estirados horizontalmente a ~ 1500px no es realmente agradable.
No olvide que el hecho de que un usuario tenga un monitor de pantalla ancha no significa que tenga sus ventanas maximizadas tampoco.
No suponga que la resolución vertical es correcta en la pantalla ancha. 1440x900 parece ser una resolución popular, y si bien es más grande que 1024x768, es notablemente más corto que 1280x1024.
Además, no suponga que todos los nuevos monitores de pantalla ancha se están utilizando correctamente. He visto bastantes configuraciones donde el monitor no se usa con su resolución original. La gente no sabe que algo está mal, o aprecian los personajes extragrandes, incluso si hace las cosas un poco confusas.
Por favor no.
Diseño para 4: 3, tal vez 800 a 900 píxeles de ancho máximo.
Muchas computadoras que uso (como casi todas en mi trabajo) son 4: 3. Solo mi computadora portátil tiene 16: 9 (en realidad, 16:10, creo, pero lo suficientemente cerca).
No me gusta tener mi navegador web tan ancho como mi monitor, es una pérdida de espacio. No puedes leer un texto así de ancho. En mi computadora de escritorio 4: 3 LCD (que estoy usando en este momento) el ancho es de 14 ". No se puede leer texto de 14" de ancho, el ojo pierde la pista de la línea en la que se encuentra. Es un dolor horrible. La mayoría de los sitios restringen el ancho del contenido real. La columna de contenido principal de para mí es de aproximadamente 8 ", un gran tamaño de lectura.
Entonces cuando vas 16: 9, las cosas empeoran. Ahora, en lugar del 14 ", podrías tener 16". Eso es enorme. Entonces, ¿qué HACES con todo ese espacio? No puedes simplemente poner texto, a menos que quieras tener dos artículos uno al lado del otro (como dos columnas de periódico) y dudo que quieras hacerlo. Eso significa que simplemente lo llenas de tonterías sin importancia. Más barras laterales, más columnas de anuncios. Básicamente estás forzando contenido para llenar el espacio.
No todo el mundo ejecuta 1920x1080. No todos mantienen su navegador web maximizado. Llenar casi la mitad de mi pantalla con columnas sin importancia no me atrae.
Una cosa a considerar es la postura de su aplicación. ¿Es una aplicación soberana, donde se espera que el usuario dedique toda su atención a ella por un tiempo? Hace poco rediseñé una página en nuestra aplicación web que permite al usuario realizar traducciones a otros idiomas. En este caso, el usuario iba a "sumergirse" en esta parte de la aplicación por un tiempo, así que eliminé los elementos de navegación habituales, lo que sería una distracción para permitir más bienes raíces para la tarea en cuestión.
En este caso, la base de usuarios se limitaba a las personas dentro de mi empresa, que sabía que todas tenían monitores de pantalla panorámica, por lo que fue fácil tomar la decisión de ampliar. En general, diría que todavía se debe diseñar para monitores que no sean de pantalla panorámica, pero en los casos en que haya una ventaja significativa, haga que el diseño sea capaz de aprovechar el espacio adicional. He visto algunas páginas diseñadas para pantallas regulares, pero usé JavaScript para detectar si la página era más ancha y reordenar algunos elementos de la página si fuera así. De esa forma, la configuración predeterminada siempre se podía utilizar, pero los usuarios con pantallas anchas y JavaScript podían usar mejor su espacio.
Siempre uso 964 px como mi ancho para sitios web. Aproximado, que varía de un sitio a otro, pero lo mantengo por debajo de 1024 px de ancho, teniendo en cuenta las barras de desplazamiento verticales. Esto aprovecha el sitio no es demasiado grande para una pantalla de 800px de ancho, pero es lo suficientemente grande como para verse bien en una pantalla ancha de 1024 y 1280px.
En mi experiencia, he encontrado que incluso los usuarios que usan pantallas panorámicas bastante grandes (yo mismo tengo pantallas dobles de 22 "(1680x1050), prefiero un diseño de ancho fijo, de aproximadamente 1024 píxeles de ancho para facilitar la lectura.
Realmente me disgusta leer grandes extensiones de texto, y me gusta mantenerlo en "ancho de libro". La mayoría de los sitios web que considero atractivos y que tienen una gran base de usuarios tienen estos tamaños.
Espero que esto ayude.
Como usuario habitual de monitores de pantalla ancha, no quiero que los diseñadores amplíen sus sitios. Ejecuto pantallas panorámicas de 24 pulgadas (1920x1200) y cuando navego por la web, generalmente ejecuto dos navegadores uno al lado del otro. En todo caso, sería mejor hacer algunos sitios un poco más estrechos. La mayoría de los sitios funcionan bien en 960 píxeles, pero es molesto cuando tengo que abrir un sitio más ampliamente o desplazarme para ver todo.
La gran mayoría de los usuarios de la web todavía se encuentran en monitores estándar, no de pantalla ancha (ver estadísticas y mi comentario a continuación), así que diseñaría para ellos. Yo personalmente optimizo para una resolución de 1024x768.
En mi curso de diseño tuvimos una regla general de que la longitud de la línea no debería ser mayor que 40 veces la altura de la línea. La razón es obvia: cuando tus ojos se remontan al comienzo de la siguiente línea, debes estar seguro de que es la siguiente línea, no la misma línea ni la siguiente más una.
Por esta razón, siempre uso diseño de ancho fijo. Mi monitor actual tiene un área activa de 43cm de ancho. La altura de la línea en esta página SO es de 5 mm. Si SO utiliza el diseño de fluido, la relación longitud de línea / altura de línea sería inaceptable 84.
Y las cosas son aún peores en los monitores de 30 ".
Tenga en cuenta la audiencia en rápido crecimiento de usuarios de netbooks que usan pantallas 1024x600. Creo que ese debería ser el tamaño mínimo de diseño para los proyectos actuales.
En su mayoría, la resolución se ha incrementado horizontalmente cuando consideramos la adopción de pantalla panorámica. Las laptops de 1024x768 van de 1280x800, las de 1600x1200 van de 1920x1200 y así sucesivamente. El tamaño vertical todavía está disponible como de costumbre.
Es hora de actualizar esta respuesta para adaptarme a los cambios sobre cómo, dónde y con qué personas navegan por la web. Estoy tendiendo a diseños receptivos que son fluidos hasta cierto punto, pero gracias a las consultas de los medios y otras técnicas útiles le da al diseñador mucho más control sobre el re-flujo de la presentación, mientras todavía tiene la capacidad de adaptarse a cualquier tamaño de vista / pantalla.
Adaptar y contraer contenido cuando la vista disponible es inferior a un cierto límite, y mantener el texto con un ancho de línea máximo pero ampliar y reorganizar otros elementos son cosas que he comenzado a hacer.
Esto no solo se limita a reducir un sitio a un dispositivo móvil, sino también a adaptar y ajustar elementos en un navegador de pantalla completa en un HDTV, o simplemente a rellenar y verse bien en una tableta más pequeña con un tamaño similar al de un netbook. .
Todavía no entiendo personalmente el uso de diseños "fluidos" tradicionales donde una columna de texto central podría expandirse a 2000 píxeles sin dudarlo, excepto en aplicaciones web donde tienes matrices de datos como Excel o una imagen grande en lugar de contenido de texto real. Personalmente, he tropezado con demasiados sitios donde el margen también es demasiado pequeño, y si amplío el navegador, el margen no aumenta incluso a un ancho completo de 1920 y aún es demasiado pequeño: un diseñador me impuso un margen incómodo y no puedo solucionarlo con menos que cambiar el CSS del sitio con las herramientas de desarrollo del navegador ^^
Los primeros pasos en un diseño receptivo para mí fue tomar el infame ancho fijo de 960px que tanto amo y adaptarlo en tres pasos cuando la vista era más pequeña. Esto lo hizo agradable en dispositivos más pequeños hasta la pantalla de un teléfono. Sin embargo, mi desafío actual es ampliar el diseño más allá de la marca de 1200px, donde las cosas se amplían demasiado para mi gusto y hay que hacer otro flujo de elementos, pero muchos sitios carecen de cualquier contenido que incluso puedan usar para eso ...
Aquí hay un enlace a otra pregunta SO que podría contener información útil.