Estoy desarrollando una aplicación web con mucha información. Esto significa que cada píxel disponible en la pantalla para mostrar ayuda mucho, para evitar la interfaz de usuario. parece demasiado desordenado y para mostrar datos relevantes.
Me preguntaba: ¿cuál es la resolución de pantalla «común»? Hace años era algo así como 1024 × 768, pero hoy en día debe ser algo mucho más alto. No puedo confiar en lo que uso como desarrollador y probablemente tenga pantallas y resolución más grandes que el usuario promedio de Joe.
Entonces, ¿dónde puedo encontrar ¿Cuál es la resolución recomendada actualmente para las aplicaciones web?
Comentarios
- Vea esta pregunta en el sitio de Webmasters – webmasters.stackexchange.com/questions/2494/…
- No debe ‘ utilizar resolución de pantalla para guiar sus decisiones; necesita conocer el tamaño de las ventanas del navegador. Especialmente cuando los monitores se Por supuesto, no puede asumir que la gente utilizará un navegador en pantalla completa; sería demasiado grande para leer la mayoría de los sitios.
- Además, consulte esta pregunta sobre el diseño de ancho fijo y el diseño fluido .
- Pensar en términos de resolución de pantalla, como si fuera un parámetro estático, suena anacrónico. @MonicaCellio acertó en el punto. La asignación de bienes raíces para una aplicación es dinámica y está en manos del usuario.
- Nota: Con el diseño receptivo en aumento, muchas personas se han dado cuenta de que también es importante considerar qué es un un buen ancho máximo de columna , y que la legibilidad del texto a menudo se puede garantizar acercándose al ancho del contenido específico del tamaño de fuente, es decir, 35-40em para un ancho de texto sólido.
Respuesta
Eso realmente depende de dónde se encuentre en el mundo. 1366×768 sigue siendo el más común en todo el mundo; sin embargo, 1920 x 1080 es la única resolución que en realidad está aumentando en aceptación (presumiblemente porque esta parece ser la pantalla panorámica estándar para las computadoras portátiles modernas).
El sitio web StatCounter.com debería ayudarlo a obtener más conocimientos sobre esto.
SIN EMBARGO , tenga en cuenta que el hecho de que ciertas resoluciones sean más comunes que otras, no tiene en cuenta el ancho del navegador del usuario ventana. Desafortunadamente, hay pocas mediciones conocidas para esta estadística (Google Analytics solía proporcionar esto, pero ya no lo admite).
Comentarios
- Además, los promedios mundiales para este tipo de datos pueden (no serán) los mismos que los de su base de usuarios. Hasta que no muestre a sus usuarios ACTUALES, no ‘ No sé lo que ‘ están usando. Por lo tanto, su mejor opción es diseñar su diseño para que funcione en varias (y diferentes) resoluciones.
- Para obtener datos sobre la distribución de la resolución de pantalla entre los teléfonos inteligentes y tabletas Android e iOS, consulte la Resolución ‘ sección hacia el final de opensignalmaps.com/reports/fragmentation.php . Convenientemente aquí, es más probable que la resolución de la pantalla se aproxime a las dimensiones de la ventana de visualización / navegador en teléfonos inteligentes y tabletas que en computadoras portátiles y de escritorio. Inconvenientemente para Android, la fragmentación de la plataforma ‘ se refleja de manera bastante clara en la amplia distribución de las resoluciones de pantalla. Esto probablemente haría que el diseño fluido para dispositivos móviles sea una buena idea.
- Solo como actualización, 1366×768 ha superado a 1024×768 por bastante desde que se publicó esta respuesta.
- @DangerZone Buen punto . Lamentablemente, StatCounter no ‘ t ofrece enlaces a ‘ current ‘ ya que siempre requieren un sufijo rango de fechas (¡de ahí varias ediciones en esta respuesta a lo largo de los años!). He modificado la respuesta con estadísticas actualizadas. ¡Supongo que ‘ tendré que hacer lo mismo en un año más o menos!
Responder
Tenga en cuenta que las computadoras portátiles y de escritorio ya no son los únicos dispositivos habilitados para la web. El iPad tiene una resolución de 1024×768, el iPhone 4 tiene una resolución de 960×640, suponiendo que los use en modo horizontal.
Comentarios
- Afaik the El iPhone 4 muestra las páginas como si tuviese la antigua resolución de 480 * 320. Las páginas en mis 4 son ‘ t la mitad de grandes que en un 3GS. La resolución adicional solo se usa para la representación de fuentes / imágenes, es lo que ‘ estoy llegando.
- Punto absolutamente válido. El ancho de la pantalla de 960 píxeles sigue siendo relevante incluso con el aumento del tamaño de la pantalla del escritorio, porque muchos dispositivos portátiles también pueden mostrar este tamaño.Por no hablar del hecho de que los sitios web son ilegibles cuando son muy amplios (1600+).
Respuesta
La elección de la resolución mínima de pantalla se reduce a cuántos usuarios está dispuesto a excluir.
Si no tiene un historial de datos de resolución para sus usuarios específicos, una opción es usar estadísticas de uso globales públicas como guía. Utilizando una de esas fuentes de datos globales, creé el siguiente gráfico para ayudar a transmitir el estado del ancho de la pantalla del escritorio de un vistazo.
Respuesta
«pero hoy en día debe ser algo mucho más alto»
Cada respuesta aquí parece ignorar en todo el mundo móvil.
Seguro, las pantallas de escritorio son cada vez más grandes. Pero todos también usan dispositivos móviles. Ahora se accede a gran parte de la web desde teléfonos y tabletas.
El diseño adaptativo es realmente el camino a seguir.
Comentarios
- SÍ. Éste es el punto clave. El diseño web fluido es vital porque muchas personas acceden a sitios web desde teléfonos y tabletas en estos días. La tendencia de resolución es la fragmentación, no la expansión.
Respuesta
¿Por qué no diseñas adaptativamente para «lo que sea tienes disponible «?
Con javascript puedes averiguar el tamaño de la ventana del navegador y hacer algunos cambios en la hoja de estilo. Por ejemplo, si tienes un fondo de imagen grande y rico en gráficos con una columna de 960 px, la imagen de fondo no es necesario para aquellos que ejecutan 1024-768, por lo que no tiene que cargarlo. También puede modificar el tamaño de la fuente para aprovechar al máximo el espacio disponible en pantalla.
Respuesta
Resolución más popular en 2011 es 1280×800. El 18.09% de los usuarios de Internet lo usa.
Aquí están las 10 resoluciones principales para 2011: http://www.superiorwebsys.com/blog/93/Most_Common_Screen_Resolutions_in_2011/
Comentarios
- +1 para la referencia, pero con 1024×768 muy cerca y siendo la menor de las dos resoluciones superiores, esto quizás debería tener mayor consideración a pesar de un porcentaje ligeramente menor.
- 1024 estará disponible por un tiempo + nuevos dispositivos móviles. Por lo tanto, recomendaría diseñar sitios para esta resolución, si no planea hacer un diseño extensible.
Respuesta
Estoy de acuerdo con Jon en que se debe tener cuidado de utilizar la resolución de pantalla completa como base al diseñar aplicaciones web. También tiene razón cuando afirma que la variante de pantalla ancha de 768 es muy común en estos días.
Sin embargo, recientemente experimenté algunas muy buenas razones para disminuir mi propia política de resolución de pantalla. Los televisores y portátiles multimedia ahora utilizan el estándar HD como resolución. Eso significa que es muy probable que varios usuarios tengan 1280 × 720 como resolución. Segmentar 768 como altura podría ser demasiado para muchos usuarios.
Consulte también: http://en.wikipedia.org/wiki/Screen_resolution
Respuesta
Si quieres estar seguro con pantallas de escritorio / laptop que usan un diseño estático, sigue usando un mínimo de 1024×768. Pero la mejor opción es diseñar un diseño fluido (flexible).
Respuesta
Microsoft publicó recientemente sus datos de telemetría en esta área para usuarios de Windows 7 :
Puede ver que (al menos para los usuarios que todavía están en el ciclo de actualización), hay una gran cantidad de usuarios que ejecutan pantallas 16: 9 y 16:10 en lugar de 4: 3 (y la mayoría de ellos se ejecutan a 1366 × 768).
Comentarios
- Parece que incluso internamente Microsoft está ignorando el panorama móvil.;)
Respuesta
Sí, intenta considerar un diseño flexible. Si planeas usar todos los píxeles disponibles, entonces cubrir la pantalla completa es la mejor solución, con el necesita utilizar javascript. Debe consultar el Diseño web adaptable de ALA y echar un vistazo al ejemplo . Cuando Al ver este ejemplo, intente cambiar el tamaño de su navegador y vea cómo reacciona el contenido. De esta manera, su sitio web puede verse genial en cualquier pantalla, ya sea de escritorio, portátil, tableta o teléfono.
Comentarios
- tenga en cuenta si va siguiendo el camino de usar cada píxel disponible, puede hacer que su texto sea más difícil de leer para sus lectores.
Respuesta
He estado apuntando a 1280 X 1024, con un diseño que será adaptable si las restricciones de dispositivos móviles son un factor.
De lo contrario, generalmente me dedico a los análisis y trato de tener en cuenta las resoluciones máximas para el sitio dado.
Respuesta
Algunas cosas a considerar:
- ¿Para quién es esta aplicación? Si es interno (es decir, entorno corporativo), hable con TI y vea en qué resolución están configuradas las pantallas de los empleados. En especial, observe a los empleados que trabajarían más en la aplicación.
- Si » En una aplicación pública, piense en los datos que tiene sobre las resoluciones de sus usuarios. Si está rediseñando, verifique los análisis en el sitio actual y tenga una idea de las resoluciones que están ejecutando sus usuarios. Es posible que observe un patrón aquí (es decir, las personas tienden a tener resoluciones muy altas ya que son usuarios avanzados, etc.), pero es probable que esté por todas partes.
- Piense en los datos que está presentación. Si se trata de muchas cuadrículas, tal vez sea mejor un diseño fluido. Entonces el usuario puede estirar la pantalla para mostrar más datos que necesitan.
Diseñar para 1024 es una ruta segura para la Web, pero es un poco perezoso si no está tratando de aprender más sobre sus usuarios antes de tomar una decisión.
Respuesta
El 1024 * 768 debería seguir siendo de sentido común. De lo contrario, realmente depende de tu audiencia. Si haces un sitio web o aplicación para diseñadores, por ejemplo, debe optimizar para una resolución mucho más alta, como 1680 * 1050.
Debe probarlo o preguntar a la audiencia deseada, ¡pero 1024 * 768 sigue siendo imprescindible!
En un mundo ideal, habría diferentes estilos (CSS) para diferentes resoluciones y dispositivos. 🙂
Comentarios
- » Si crea un sitio web o una aplicación para diseñadores, por ejemplo, debe op tiempo para una resolución mucho más alta como 1680 * 1050. » La mayoría de ‘ diseñadores ‘ tienen iPhones .
- @ DA01 – Por lo tanto, el CSS diferente para diferentes dispositivos.
- Eso ayuda, pero estaba abordando principalmente el ‘ optimizado para ‘. Idealmente, ‘ optimiza para ‘ todos los dispositivos.
Respuesta
Resoluciones comunes del proyector:
- XGA = 1024 x 768 píxeles
- WXGA = 1280 x 800 píxeles
- HD = 1920 x 1080 píxeles
- 4K = resolución de 4096 x 2160
Comentarios
- ¿Podrías ampliar esto? ¿Y qué quiere decir con resoluciones de proyector?
- ejemplo: si tiene un proyector LCD PT-EX600U, cuando lo conectó a su computadora, la resolución de la pantalla cambiará a: 1028 x 768 píxeles.