¿Resolución recomendada del sitio web (ancho y alto)? [cerrado]

¿Existe algún estándar en la resolución de sitios web comunes?

Estamos apuntando a monitores más nuevos, quizás de al menos 1280 px de ancho, pero la altura puede variar, y cada navegador también puede tener diferentes alturas de barra de herramientas.

¿Hay algún tipo de estándar para esto?

El consejo en estos días es:

Optimizar para 1024x768 . Para la mayoría de los sitios esto cubrirá a la mayoría de los visitantes. La mayoría de los registros muestran que el 92-99% de sus visitas tendrán más de 1024 de ancho. Si bien 1280 es cada vez más común, todavía hay lotes en 1024 y algunos por debajo de eso. Optimice para esto pero no ignore a los demás.

1024 = ~ 960 . Tener en cuenta las barras de desplazamiento, los bordes de las ventanas, etc. significa que el ancho real de una pantalla de 1024x768 es de aproximadamente 960 píxeles . Algunas herramientas se basan en un tamaño ligeramente más pequeño, aproximadamente 940 . Este es el ancho de contenedor predeterminado en twitter bootstrap .

No diseñe para una talla . Los tamaños de las ventanas varían. No asuma que el tamaño de la pantalla es igual al tamaño de las ventanas. Diseñe por un mínimo razonable, pero suponga que se ajustará.

Utilice un diseño receptivo y diseños líquidos . Use diseños que se ajusten cuando la ventana cambie de tamaño. La gente hace esto mucho, especialmente en monitores grandes. Esta es una buena práctica de CSS. Hay varios marcos de front-end que respaldan esto.

Trata al móvil como un ciudadano de primera clase . Obtendrá más tráfico de dispositivos móviles todo el tiempo. Estos introducen aún más tamaños de pantalla. Todavía puede optimizar para 960, pero el uso de técnicas de diseño web receptivas significa que su página se ajustará en función del tamaño de la pantalla.

Información de visualización del navegador de registro . Puede obtener números reales sobre esto. Encontré algunos números aquí y aquí y aquí . También puede manipular su sitio para recopilar los mismos datos.

El usuario se desplazará, así que no se preocupe demasiado por la altura . El viejo argumento era que los usuarios no se desplazarían y que algo importante debería estar "por encima del pliegue". Esto fue anulado hace años. Los usuarios se desplazan mucho .

Más sobre resoluciones de pantalla:

• Resolución de pantalla y diseño de página
• La mejor resolución de pantalla para diseñar sitios web
• Diseño para el tamaño del navegador, no el tamaño de la pantalla

Más sobre diseño receptivo:

• Diseño web receptivo (25 de mayo de 2010), Ethan Marcotte, A List Apart.
• Diseño web receptivo en Wikipedia
• Patrones de diseño de dispositivos múltiples (2012, 14 de marzo) Luke Wroblewski. Cataloga los patrones más populares para diseños de pantalla adaptables para múltiples dispositivos.

Herramientas y marcos frontales para un diseño receptivo y diseños líquidos:

• Twitter Bootstrap
• Fundación Zurb
• 50 herramientas fantásticas para un diseño web receptivo (24 de abril de 2012) Denise Jacobs y Peter Gasston

Mala idea, creo. El objetivo principal de separar el contenido del diseño era permitir que su página web se mostrara en cualquier tipo de navegador.

Poner limitaciones artificiales, como un tamaño mínimo de pantalla, limitará su mercado.

Dicho esto, creo que cada computadora de escritorio debería poder mostrar 1024x768. Pero, ¿qué pasa con los navegadores que se ejecutan en iPhones u otros dispositivos con pantalla desafiada, o incluso aquellos que no usan todo su escritorio para el navegador?

En respuesta a su pregunta específica, no, no creo que haya ningún estándar para un área de visualización mínima o común en los navegadores.

Forzar a su usuario a desplazarse horizontalmente es una grave transgresión de la interfaz de usuario. A menos que esté construyendo específicamente un sitio web para una población con un tamaño de pantalla conocido, se asegura de que su diseño funcione con pantallas tan pequeñas como 800 píxeles de ancho (aproximadamente el 8% de la población de navegación web si la memoria me sirve). Es aconsejable que se adapte bien a pantallas más grandes, pero no a costa de que la gente siga navegando a 800x600.

Aquí hay otra cosa a considerar también: no todos ejecutan su navegador a pantalla completa (yo no). Entonces, la idea de que si está bien diseñar para un "tamaño de pantalla" específico (y grande) realmente no funciona por varias razones.

Actualización el 15/12/2010: cuando respondí por primera vez a esta pregunta, 800 píxeles fue una respuesta adecuada. Sin embargo, en este punto, recomendaría 1024 píxeles de ancho (o 960 como alguien más señala). La tecnología marcha ...

Aquí hay estadísticas de la visualización del navegador en 2008: http://www.w3schools.com/browsers/browsers_display.asp

Alrededor del 50% de los usuarios todavía usan 1024x768. Si desea que su sitio se vea bien en altas resoluciones, use un diseño flexible.

En realidad, existen estándares de la industria para anchos (bueno, según Yahoo al menos). Sus anchos soportados son 750, 950, 974, 100%

Existen ventajas de estos anchos para sus cuadrículas predefinidas (diseños de columnas) que funcionan bien con las dimensiones estándar de los anuncios si tuviera que incluir alguno.

Charla interesante que también vale la pena ver.

ver Base YUI

Aquí hay una herramienta increíble: Tamaño del navegador de Google Labs

Diría que solo debe esperar que los usuarios tengan un monitor con una resolución de 800x600. El gobierno canadiense tiene estándares que enumeran esto como uno de los requisitos. Aunque eso puede parecer bajo para alguien con un monitor panorámico elegante, recuerde que no todos tienen un monitor agradable. Todavía conozco a mucha gente corriendo a 1024x768. Y no es raro encontrarse con alguien que se ejecuta en 800x600, especialmente en cafés web baratos mientras viaja. Además, es bueno tener que hacer que la ventana de su navegador sea de pantalla completa si no lo desea. Puede ampliar el sitio en monitores más amplios, pero no haga que el usuario se desplace horizontalmente. Nunca. Otra ventaja de admitir resoluciones más bajas es que su sitio funcionará en teléfonos móviles y Nintendo Wii es mucho más fácil.

Una nota sobre su ancho de al menos 1280, tendría que decir que es por la borda. La mayoría de los monitores no panorámicos de 17 y hasta 19 pulgadas solo admiten una resolución máxima de 1280x1024. Y la computadora portátil de pantalla ancha de 14 pulgadas en la que estoy escribiendo ahora tiene solo 1280 píxeles de ancho. Diría que la resolución mínima más grande por la que debe esforzarse es 1024x768, pero 800x600 sería ideal.

Todas las respuestas hasta ahora hablan de monitores de escritorio, pero estoy usando el desbordamiento de pila en mi iPhone y no creo que deba excluir ninguna plataforma móvil apuntando a 1024 o 1280 píxeles horizontales. Marque su página para que el navegador sepa lo que significa todo y hacerla utilizable será gratis, incluso en lectores de pantalla y otro kit que no haya pensado.

Es mejor no apuntar a ninguna resolución específica, sino adaptarse fácilmente a muchas resoluciones diferentes.

Las pautas que utilizamos, que parecen ser bastante utilizadas y están respaldadas por las cifras que obtenemos de Google Analytics, son diseñar el sitio para que funcione en una pantalla de 1024 píxeles de ancho y 768 píxeles de alto (1024x768 y 1280x800 son las resoluciones más comunes que vemos, que representan al menos el 70% de todo el tráfico).

Es por eso que ve muchos sitios (incluido este) que usan una columna central de aproximadamente 1000 píxeles de ancho y con el contenido más importante en los 500-600 píxeles superiores, por lo que está por encima del pliegue cuando se ve en pantallas de este tamaño.

El uso de un diseño de 1000 píxeles de ancho funciona bastante bien en tamaños de pantalla de hasta aproximadamente 1680 píxeles de ancho (generalmente tan alto como lo verá en las computadoras portátiles, excepto las grandes de 17 "), pero comienza a verse un poco tonto en 1920 píxeles anchas (computadoras de gama alta, generalmente estaciones de trabajo), sin embargo, estas resoluciones muy altas no representan un gran porcentaje del tráfico en Internet general: 2% o menos (por otro lado, si tiene un público especializado como este sitio , la cifra con resoluciones altas puede ser algo mayor).

Aunque el mejor ancho puede ser de 1024, tendrá que ajustar la altura para tener en cuenta varias configuraciones del navegador (barra de herramientas de navegación, barra de herramientas de marcadores, barra de herramientas de estado, etc.) y tener en cuenta la configuración de la barra de tareas. Bajará rápidamente el 768 a alrededor de 550.

Independientemente del tamaño de su navegador de destino, asegúrese de incluir espacio para las barras de herramientas del navegador, las barras de estado y las barras de desplazamiento como se indicó anteriormente. Internet Explorer (IME) a ​​menudo tiene más de 100 px de espacio vertical en barras de herramientas y barras de estado. Por lo general, si estoy filmando para 1024 x 768, trataría de crear un diseño de alrededor de 960 - 980 px de ancho y 600 px de alto para estar seguro. De esa manera, puede desplazarse si es necesario y un buen espacio en blanco (si el diseño lo requiere). Recomiendo encarecidamente las cuadrículas YUI para casos en los que necesite apuntar a tamaños específicos:

Rejilla YUI

Recibo muchas preguntas de los diseñadores sobre no solo el ancho, sino también qué altura usar para "mantener todo por encima del pliegue". Aquí hay una respuesta que di recientemente:

Para el ancho, no soy diseñador, pero he leído que el ancho de 960 px es el camino a seguir en estos días, porque se presta a dividirse en columnas que se ven bien y se adapta muy bien en la mayoría de las pantallas. Si puede, diseñe un diseño líquido, pero esto no siempre es práctico dependiendo de su diseñador, sus habilidades de CSS, las imágenes y la cantidad de texto.

(siempre desea que haya 65-80 caracteres por línea, con una altura de línea de aproximadamente 1.15). Este es el ancho de columna óptimo para el texto, y se ha demostrado que es mucho más rápido y agradable de leer que las columnas muy anchas o estrechas)

En cuanto a "por encima del pliegue", solo tengo que advertir contra el uso de dicho concepto en la web. El desplazamiento horizontal puede y debe evitarse, pero el desplazamiento vertical es algo que no se puede evitar al 100%. Todo lo que puedo decir es que en una pantalla de 1024x768 (al menos el 95% de los usuarios tiene eso o más) debería estar bien con un bloque alto fijo de 600px. Pero hay muchos formatos de visualización diferentes, el navegador Chrome puede ocupar mucho espacio y no todos maximizan la ventana del navegador.

Aquí hay algunos otros sitios que dicen más o menos lo mismo, pero planear tener absolutamente todo 'por encima del pliegue' para todos es difícil porque entonces es posible que solo tenga 400 px o más, según las estadísticas reales.

Y finalmente, un buen artículo largo que entra en gran detalle (publicaría más, pero SO dice que soy demasiado novato) - Cómo diseñar para los tamaños de navegador - baekdal.com

Personalmente, siempre me he quedado con un ancho máximo de 1000 px, centrado en el medio de la página (a través del margen izquierdo / derecho: automático).

Si está ejecutando a menos de 1024x768, es hora de actualizar. Seriamente. Ya casi es 2010. Puede comprar monitores LCD con una resolución nativa de 1280x1024.

Te sugiero que eches un vistazo a las consultas de medios. Esta es una nueva adición útil a CSS que realmente tiene mucho sentido, te preguntarías por qué esto no se implementó muuuucho antes. Básicamente, le permite orientar los atributos del navegador (como ancho máximo y mínimo) directamente a través de CSS y ramificar su código de diseño desde allí. De manera similar a la creación de una hoja de estilo de impresión, puede crear sus diseños de escritorio y dispositivos móviles en paralelo en el mismo archivo, lo que lo convierte en un gran éxito para el desarrollo.

Sin embargo, los diseños flexibles o líquidos hacen que el diseño sea más tranquilo, por ejemplo, si utiliza imágenes de fondo que tienen que coincidir con la imagen de fondo del cuerpo.

Prefiero hacer diferentes diseños de CSS para el sitio y hacer que se apliquen dependiendo de la resolución del usuario, o si eso no es posible (aún no lo he investigado), conviértalo en una opción elegible.

Muy bien, veo mucha información errónea aquí. Para empezar, crear una página web con una determinada resolución, por ejemplo, 800x600, ¡hace que esa página se procese correctamente solo con esa resolución! Cuando esa misma página se muestra en la computadora portátil de otra persona o en el monitor de la PC, la página se mostrará usando la resolución actual de esa pantalla, NO la resolución que usó al diseñar la página. ¡No cree páginas web para una resolución específica! Hay demasiadas relaciones de aspecto y resoluciones de pantalla diferentes para esperar un escenario de "talla única", que con el diseño web no existe. Aquí está la solución: use CSS3 Media Queries para crear un código adaptable de resolución. Aquí hay un ejemplo:

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

Mira, lo que acabamos de hacer fue especificar 3 conjuntos de estilos que se representan en diferentes resoluciones. En el caso de nuestro ejemplo, si la resolución de una pantalla es mayor a 800px, se ejecutará el CSS para 1024. Del mismo modo, si la pantalla que muestra el contenido fuera 1224px, el 1280 se ejecutaría ya que 1224 es mayor que 1024. El sitio en el que estoy trabajando ahora funciona en todas las resoluciones de 800x600 a 1920x1080. Otra cosa a tener en cuenta es que no todos los monitores con la misma resolución tienen el mismo tamaño de pantalla. Podría colocar 15.4 computadoras portátiles una al lado de la otra, mientras ambas se ven iguales, ambas podrían tener resoluciones drásticamente diferentes, ya que no todos los píxeles son del mismo tamaño en diferentes pantallas LCD. Por lo tanto, use consultas de medios y comience a crear su sitio web con una pantalla de computadora portátil con alta resolución, particularmente 1280+. También, cree cada consulta de medios con una resolución diferente en su computadora portátil. Puede usar su configuración de resolución en Windows para ajustar 800x600 y crear una consulta de medios en esa resolución, y luego cambiar a 1024x768 y crear otra consulta de medios en esa resolución. Podría seguir y seguir, pero creo que ustedes deberían entenderlo.

ACTUALIZACIÓN: Aquí hay un enlace para usar consultas de medios que ayudarán a explicar más Diseño web innovador para dispositivos móviles con consultas de medios

Ese tutorial le mostrará cómo diseñar para todos los dispositivos. También hay tutoriales para consultas de medios específicamente. ¡Desarrollé todo el sitio para renderizar en todos los dispositivos, todas las pantallas y todas las resoluciones sin subdominios y solo CSS! Todavía estoy trabajando en soporte para tabletas y teléfonos inteligentes. El sitio se representa perfectamente en cualquier computadora portátil o en su televisor LCD de 50 pulgadas, y muchas páginas funcionan perfectamente en todos los dispositivos móviles. Si coloca todo su código en la página, ¡sus páginas se cargarán rápidamente! Además, asegúrese de prestar atención a la discusión en ese artículo sobre el CSS "background-size: cover;" o "contener" propiedades, harán que sus gráficos de fondo sean fluidos y capaces de renderizarse perfectamente en todas las resoluciones.

¡Sigue los tutoriales de los sitios y puedes hacer una sola página web que muestre todo!

Intente apuntar a 1024 como el ancho mínimo. Pruebe cómo se ve en 800, pero no se moleste demasiado en hacer que eso funcione. Con 800x600, casi ninguno de los principales sitios web funcionará, por lo que las personas que trabajan con esa resolución tendrán problemas todo el tiempo de todos modos.

Si va a elegir un diseño líquido, asegúrese de que el texto no sea demasiado ancho , porque cuando las líneas son demasiado largas, se vuelven difíciles de leer. Esa es la razón principal por la cual la mayoría de los sitios web tienen un ancho fijo.

Apunto a los monitores de 1024 píxeles (pero no uso el 100% de ese espacio). He renunciado a aquellos con 800x600. Prefiero castigar a los pocos con hardware obsoleto haciéndolos desplazarse si es necesario, en lugar de castigar a todos con nuevo equipo desperdiciando espacio.

Supongo que depende de tu audiencia y de la naturaleza de tu aplicación.

En última instancia, no se trata de estándares o mejores prácticas para el marcado, sino de conocer a su audiencia y asegurarse de que su sitio web haga lo que usted quiere que haga.

Es más importante tener en cuenta el ancho de la ventana gráfica del navegador en lugar de la resolución de la pantalla: no puede suponer que cada píxel en una pantalla se asignará al navegador (e incluso si es así, debe restar el cromo del navegador). Si tiene acceso a análisis que informan el ancho del navegador ( nb ancho del navegador, no la resolución de la pantalla), preste mucha atención.

Es bueno tratar de acomodar la gama más amplia posible de ventanas gráficas, pero existen algunas limitaciones. Algunos desafíos pueden manejarse con tipos de medios CSS , otros no. Algunos pueden manejarse con diseños fluidos. Pero los diseños fluidos no pueden funcionar en todas las situaciones, dependiendo del tipo de información que se mostrará, la longitud de la línea, la comodidad de lectura, etc. Algunos diseños fluidos no funcionan en pantallas anchas. La mayoría se rompe cuando se dimensiona por debajo de un cierto ancho, etc.

Por mucho que personalmente me gustaría diseñar para viewports ~ 960 píxeles en adelante, no siempre puedes hacerlo. Entonces, en algunos casos, aún es más seguro diseñar para ventanas gráficas <= 760 píxeles más o menos (pantalla de 800 píxeles de ancho, maximizada), aunque el tiempo que finalmente podemos arrojar esta limitación de una vez por todas, para el escritorio al menos, Se acerca muy rápido.

Donde las conversiones son un problema, y ​​usted tiene un diseño de ancho fijo, es mejor que tenga una buena razón para poner cualquier cosa en la que el usuario deba hacer clic para que la caja registradora vaya a "ka-ching" en cualquier lugar al este de la 760 píxel

Lo mismo para la navegación primaria.

Finalmente, pruebe su diseño en todo lo que pueda tener en sus manos. Grande. Pequeña. Escritorio. Mano. Los trabajos. No hay sustituto.

Acabo de tomar una muestra de resoluciones de pantalla de todos los sitios de clientes a los que tengo acceso, esto incluye más de 20 sitios en más de 8 industrias. Aquí están los resultados:
texto alternativo http://unkwndesign.com/so/percentScreenResolutions.png
Basado en esto, diría que se asegura de que se vea bien en 1024x768, ya que esa es la mayoría aquí por mucho. Tampoco se preocupe tanto por la altura, sin embargo, trate de evitar que la mayoría de las páginas tengan más de 1-2 páginas impresas con el tamaño de fuente predeterminado, la mayoría de las personas no leerán una página tanto tiempo, y si un usuario instala una barra de herramientas que ocupa espacio vertical, mi preferencia personal es que es su problema, pero no creo que sea un gran problema.

* tenga en cuenta que el porcentaje se suma al 100.05% debido al redondeo.

Tenga en cuenta que cuanto mayor sea la resolución, es menos probable que se maximice el navegador de Internet.

Y algunos navegadores también tienen barras laterales.

Depende de lo que quieras renderizar, pero elegiría un diseño de ancho variable que no se rompa en aproximadamente 800-900 de ancho.

La altura no es realmente un problema.

sbeam dijo que 'siempre quieres que haya 65-80 caracteres por línea'. Eso no es verdad. Wikipedia, por ejemplo, puede tener 180 caracteres por línea. ¿O estaba destinado a ser un sitio web en particular?