¿Cuál es el ancho y la altura 'más comunes' para los que se diseñan los sitios web en estos días?


9

Estoy trabajando en un proyecto grupal e intento que mis colegas envíen un dibujo sobre su visión para una solicitud en línea; Esta aplicación se verá a través de una PC. Aunque sospecho que no existe un estándar de la industria, estoy certificando que debe haber enfoques comunes para los sitios con diseños de ancho fijo. Necesito saber el sentido más común de las proporciones en la industria.

Vamos a mantener este prototipo simple y, por lo tanto, no detectaremos navegadores, anchos de pantalla, etc. Así que pensé en preguntar esto de una manera simple con la esperanza de obtener una respuesta simple:

¿Cuál es el ancho y la altura "más comunes" para los que se diseñaron las páginas web más recientemente? Sería muy útil si pudiera encontrar una fuente cuando les digo a mis colegas por qué elegí un sentido específico de las proporciones para que basen sus dibujos.

Tenga en cuenta cómo hice esta pregunta:

  • No estoy pidiendo las resoluciones de pantalla más comunes.
  • No estoy pidiendo los navegadores más comunes.

Quiero saber qué dimensiones están optando la mayoría de los sitios web con respecto a los diseños de tamaño fijo. Sé que las personas normalmente se desplazan y, por lo tanto, la altura podría no ser parte de un ~ 'estándar'; en ese caso, me conformaré con el ancho más común.

Respuestas:


9

Como dijiste, no hay una altura estándar, ya que es extremadamente fluido, así que usa lo que sea que te ayude a visualizar mejor tu diseño.

Para ancho de 960 píxeles de ancho parece ser el "estándar" actual para diseños de ancho fijo. Es bastante común que un sitio web se haya dedicado a explorar diseños en ese ancho .

(¿Asumo que no quieres que nadie diga sobre usar un diseño fluido?)


3

Realmente no hay un ancho estándar que deba establecer. La cantidad de personas que usan un monitor de 1024x768 ha disminuido drásticamente en los últimos años, por lo que un ancho de 960 tiene menos importancia. Con la aparición de tantos dispositivos nuevos (teléfonos inteligentes, tabletas, junto con computadoras portátiles y de escritorio), debe crear una serie de hojas de estilo para cada caso.

Las consultas de medios CSS le permiten cambiar estilos en función de la resolución de pantalla del usuario. Tiendo a crear sitios con una hoja de estilo general que maneja todo el estilo visual, luego los separo para dispositivos móviles, tabletas, computadoras de escritorio / portátiles estándar y pantallas extra anchas que estructuran la página.

Consulte esta página en W3.org para ver algunos ejemplos: http://www.w3.org/TR/css3-mediaqueries/

Es más trabajo, pero permitirá al usuario obtener la mejor experiencia posible sin importar lo que use para navegar por su sitio.


1

Lo que dijo John Conde. Además de eso, debe tener en cuenta quién es su público objetivo. Por ejemplo, si mi sitio web es un blog de tecnología o blog de gadgets, es probable que mi público objetivo sea un poco más experto en tecnología que el público normal, por lo que puedo disparar para un diseño de más de 1200 px de ancho. O si estuviera enfocando un sitio / blog / foro para webmasters, iría un poco más.

Al final del día, calcule su demografía masiva y siga lo que finalmente funcionaría para ellos.

Dos cosas MUY importantes a tener en cuenta ...

1) Si su diseño puede funcionar con más de 900 px, entonces no hay razón para extenderlo a más de 1200 px, incluso si su demografía puede permitírselo.

2) Asegúrese de tener una estructura adecuada en su lugar que pueda acomodar a aquellos que no tengan la resolución de su objetivo.


No estoy de acuerdo con el punto 2. Con una pantalla de 1366 píxeles de ancho, posiblemente el ancho más común en la mayoría de las computadoras portátiles vendidas en los últimos dos años, no puede colocar dos ventanas de 900 píxeles una al lado de la otra y ver ambas al mismo tiempo. Sin embargo, si solo tiene un diseño de 900 px, está desperdiciando el 34% de su espacio horizontal con espacios en blanco. En ese caso, 1200px sería un ancho ideal . Así que sí, no es una razón para estirarlo.
nhinkle

@nhinkle: No creo que hayas leído realmente el punto # 2 ... ¿qué tiene que ver tu respuesta con el ajuste de dos ventanas de 900 px una al lado de la otra? Además, lea la pregunta correctamente para comprender lo que John R está pidiendo. Esta no es una discusión sobre casos de uso extremas, como usted quiera tener 2 900px ventanas junto a la otra o en mi caso un querer 1600px monitores (2 de ellos) para hacer un diseño. Más bien se trata de la gran mayoría de los usuarios que no son usted o yo ..
Adil

Mis disculpas, quise responder a su primer punto, no a su segundo. Lo siento si eso causó alguna confusión. Sin embargo, mi punto sigue en pie: la gran mayoría de los usuarios tienen pantallas que son lo suficientemente anchas como para que un diseño de 900 px desperdicie mucho de su espacio. Estoy de acuerdo con la mayoría de lo que dijiste en tu respuesta, pero tu primera "cosa a tener en cuenta" no es verdad. Si sus datos demográficos pueden permitirse 1200px, debe usar esos 1200 px, de lo contrario está desperdiciando 300 de sus píxeles.
nhinkle

@nhinkle: Estás leyendo mal mi punto # 1. Si mi diseño puede mostrar el sitio fácilmente dentro de un 900px, ¿por qué lo estiraría para que sea 1200px? Además, el 13% de los usuarios todavía tienen una resolución de pantalla de 1024x768. Es un número pequeño, pero es lo suficientemente grande como para incomodarlos y perder ventas, clics en anuncios, clientes potenciales o lo que sea su modelo de negocio ... (datos citados de: w3schools .com / browsers / browsers_display.asp )
Adil

Entiendo tu punto. Mi punto es que si sus usuarios en general tienen pantallas lo suficientemente anchas como para usar un diseño de 1200px de ancho, debería hacerlo. Por ejemplo, los sitios de intercambio de pila están optimizados para aproximadamente 1000 px de ancho, pero muchos usuarios han solicitado una opción para ver el origen de la publicación y la vista previa de marcado de lado a lado, lo que usaría más espacio horizontal. w3schools no es una muestra representativa de usuarios web, pero aparte de eso, esta discusión fue para sitios donde 1200 sería lógico si se ajustara al diseño.
nhinkle
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.