¿Cuál es el ancho estándar para un sitio web en píxeles o dónde están las estadísticas?
Respuestas:
No hay un estándar, a pesar de que la mayoría de los desarrolladores asumen 1024x768 como estándar.
Hay un sistema de cuadrícula CSS llamado 960grid que asume el ancho del cuerpo como 960px, luego divide las columnas en 96 columnas con 10px, u 80 con 12px.
El problema es: las pantallas de PC se hacen cada vez más grandes, lentamente, en algunas regiones, pero lo son.
Por otro lado, en tech-tops, tienes pantallas más pequeñas en dispositivos móviles y netbooks.
Tratar con esta realidad puede ser doloroso. Hay CSS Media Queries al rescate. Alternativamente, puede usar el enlace de etiqueta (con rel handheld) para proporcionar una versión alternativa a los dispositivos móviles.
Sigue algunos enlaces de referencia para ti
¿Cuál es el ancho estándar para un sitio web en píxeles?
Cualquier número mayor que 0 y menor que infinito.
Las mejores prácticas actuales para el diseño web receptivo (RWD) son admitir todos los dispositivos independientemente de su ancho en píxeles. Por lo general, esto implica el uso de consultas de medios para proporcionar diferentes estilos para diferentes rangos de tamaños de pantalla. Los rangos reales utilizados importan menos que el diseño sea consistente en todos los tamaños, y el sitio mantiene la funcionalidad en todos los tamaños.
Es muy probable que los usuarios vean diferentes tamaños de pantalla sin pensar mucho en ello, por lo que debe minimizar la cantidad de sorpresa cuando arrastran una ventana para acoplar en la mitad de su pantalla o inclinar su teléfono.
Algunos rangos de ancho comunes utilizados son:
Estos rangos son tan comunes que diría que son prácticamente un estándar. No es necesario usar todos los rangos, por ejemplo, un sitio puede tener un ancho de fluido para cualquier cosa por debajo de 768 y luego un ancho fijo y centrado para 768+.
Dicho todo esto, tenga en cuenta que los números que usa no son particularmente importantes siempre que el sitio sea funcional en cualquier dispositivo que el usuario elija para verlo.
¿Dónde están las estadísticas?
Ahora a la parte difícil, los datos reales. Si está rediseñando un sitio, los únicos datos importantes son los suyos. Lo que dice Wikipedia o Stack Overflow, o Google, o cualquier otro sitio web grande que pueda enumerar datos analíticos es irrelevante para sus datos para su sitio.
Si sus estadísticas muestran que la mayoría de los usuarios utilizan principalmente un rango particular de anchos de dispositivo, probablemente debería centrarse en servir a esos usuarios primero. Dicho todo esto, si su diseño responde adecuadamente, no tendrá que centrarse en ningún tamaño en particular.
Para los nuevos sitios web o sitios que anteriormente no tenían análisis, considera seriamente usar un enfoque móvil primero y asegúrate de usar análisis para que puedas adaptarte adecuadamente a tu base de usuarios.
Me sorprende que nadie más haya pensado en mencionar el tamaño del navegador de Google .
En cuanto a los estándares:
El 80% de los espectadores pueden manejar hasta 1000 píxeles de ancho, pero los que pueden manejar más de 1000 píxeles de ancho a menudo no lo hacen. Con los monitores de pantalla ancha, muchas personas alinearán sus ventanas a la mitad de la pantalla. Ahora que Win7 admite drag-n-dock, es probable que se vuelva aún más popular.
En cuanto a la altura: su primera impresión para el usuario está en la parte superior de la página, hasta alrededor de ~ 600 px. Sin embargo, la mayoría de los usuarios saben y esperan que el contenido caiga "debajo del pliegue" y están dispuestos y pueden desplazarse.
Si desea ampliar más de 1000 px, le recomiendo un diseño fluido para que los usuarios de netbooks y pantallas más pequeñas puedan ver el contenido correctamente.
~ 960px tiende a ser un ancho estandarizado, pero realmente depende del contenido y el estilo.
Hice una pequeña prueba el año pasado usando Google Analytics para averiguar cuáles son los anchos y la altura promedio del navegador interno (lo que los usuarios realmente ven).
Como otros han dicho, no hay un estándar para este tipo de cosas. Aunque, aquí hay algunos consejos que harán o frenarán su sitio web:
Siempre he usado porcentajes o una construcción en el peor de los casos: la resolución de pantalla más pequeña con la que se encontrará comúnmente es de 800x600, e incluso eso es raro. Cualquier cosa debajo de eso probablemente esté en un dispositivo móvil. El ancho de 775 px es un buen medio para usar, o simplemente el 80% si sabe con certeza que su sitio web seguirá siendo atractivo cuando se amplíe a una pantalla más grande. Los problemas más comunes son que el contenido del texto (cuando se amplía a 1600px de ancho) parece vacío y corto. Tener su sitio web con un ancho de 775 px solucionará eso, sin embargo, puede que no se vea bien con un gran espacio abierto a cada lado.
NUNCA haga que sus usuarios se desplace hacia la izquierda o hacia la derecha. Cortar el contenido de los lados es la forma más rápida de perder potenciales clientes o lectores.
Tenga su navegación en algún lugar cerca de la parte superior o en un lugar donde los usuarios no necesiten desplazarse para encontrarla.
Y solo un consejo de contenido; ya sea que tenga gráficos altos / información baja o información alta / gráficos bajos. Intentar combinar ambos siempre se ve terrible.
El estándar sería "tan ancho / alto como sea posible". Depende de la pantalla del usuario:
Es útil saber qué tan populares son las resoluciones de pantalla y luego basar su plantilla en función del uso general de la mayoría ... Personalmente, recomiendo usar Responsive Design, de esa manera su sitio funciona para todos los dispositivos y todas las resoluciones.
A partir de enero de 2013.
1366x768 25.4%
1920x1080 11.0%
1280x1024 9.7%
1440x900 7.3%
1280x800 8.2%
1680x1050 5,7%
1600x900 5.0%
1920x1200 2.9%
1360x768 2.1%
2560x1440 1,1%
Otro 11,6%
Google Analytics registra las resoluciones de pantalla del visitante. Puede crear fácilmente un informe personalizado para verificar cuáles son los tamaños de pantalla comunes de sus visitantes. Aquí están las estadísticas (top 15) de mi sitio web para mayo de 2013:
Rank Resolution % of Visits
---- ---------- -----------
1 1366x768 23.0%
2 1920x1080 17.7%
3 1440x900 8.4%
4 1280x1024 8.4%
5 1680x1050 7.1%
6 1280x800 6.9%
7 1600x900 6.0%
8 1920x1200 4.7%
9 1024x768 4.4%
10 2560x1440 2.3%
11 1360x768 2.1%
12 1280x768 1.0%
13 1600x1200 0.7%
14 1280x720 0.7%
15 1152x864 0.5%
Las estadísticas varían de un sitio a otro dependiendo del tipo de tráfico que recibe, por lo tanto, diseñe en consecuencia. Yo mismo prefiero diseños fluidos con un porcentaje de ancho, 1000 px min-widthy un precio razonable max-width.
Realmente no existe un estándar, y las estadísticas dependen completamente de la demografía objetivo. Apuntar a personas técnicas generalmente dará como resultado un mejor hardware y resoluciones más altas, menos técnicas a la inversa. Pero luego están los teléfonos, netbooks, etc., que tienen resoluciones significativamente más bajas que la norma en la mayoría de los casos.
Como referencia, generalmente asumo un mínimo de 1024x768 ahora.
En cualquier caso, aquí hay algunos: http://www.w3schools.com/browsers/browsers_display.asp http://www.w3counter.com/globalstats.php
960 píxeles es lo más seguro, ya que funciona en una pantalla de 1024x768 y deja espacio para la barra de desplazamiento, y también funciona en un iPhone en modo horizontal (porque el píxel duplica su pantalla de 480x320 a un efectivo de 960x640, y no tiene un barra de desplazamiento).
Dado que la mayoría de los monitores de pantalla panorámica de hoy en día tienen una resolución de "1440x900" o más, creo que un ancho de 1280 píxeles se está convirtiendo en el "estándar", especialmente cuando se trata de mostrar imágenes.
NOTA: 1280 píxeles de ancho era el ancho de muchas pantallas antiguas de 4: 3 de 17 y 19 pulgadas.