Estadísticas de resolución de pantalla

1. Estadísticas resolución de pantallas más utilizadas
en la web
elad . Lunes 1 de abril de 2013. a las 11:46
Imagen original propiedad del artículo de Punchcut (modificada para añadir 1366×768)
Hace un tiempo que queríamos escribir un artículo sobre las estadísticas de resolución de pantallas más
usadas en la web. Estas estadísticas son datos muy importantes para conocer cuales son las dimensiones de
pantalla de los usuarios, a qué público vamos dirigidos, etc… y así poder tenerlo en cuenta en la usabilidad
de nuestro website.
Con la aparición de los tablets y los smartphones el abanico de tamaños de pantalla se ha expandido
considerablemente, apareciendo muchísimas dimensiones diferentes y rebajando incluso los porcentajes de
los formatos más estándares.
Desde hace ya unos años en el desarrollo web se ha sustituido en cierta medida el problema de la
compatibilidad de navegadores (gracias a que poco a poco todas las compañías se están ciñendo a los
estándares con HTML5/CSS3 y otras se basan directamente en web-kit) por el problema de las resoluciones
de los dispositivos.
Fuentes de datos. Enero 2013
Las fuentes de datos estadísticos analizadas en este artículo recopilan datos actualizados en Enero de 2013:
Statcounter.com. Basadas en 15 mil millones de páginas vistas al mes (3 millones de sites)
W3schools. Se realizan a partir de las visitas obtenidas durante los últimos 10 años a
www.w3schools.com. Hay que tener en cuenta que la web de W3schools es para usuarios interesados
en tecnologías web por lo que estos números podrían no ser 100% fiables en un usuario de internet
medio, aún así nos permite servirnos de referencia. Estadísticas de resolución de pantalla en la web y
Estadísticas de Altas resoluciones de pantalla de los navegadores web
W3Counter Realtime Web Analytics for Websites and Blogs

2. Screenresolution.org
Netmarketshare.com
Resolución de pantalla de los navegadores web
Durante muchos años el desarrollo web se ha basado en la resolución estándar de 1024×768 (hace apenas 3
años aproximadamente el 40% de los usuarios tenía esta resolución). En la actualidad ya no es la resolución
más utilizada, actualmente es 1366×768 es la resolución más usada en internet que es la resolución
estándar de Windows 8.
Estadísticas de las resoluciones de pantalla más usadas en Internet (las fuentes de datos coinciden en su
tendencia):
resolución % utilización Enero 2013
1366×768 20-25%
1024×768 10-15%
1280×1024 8-10%
1280×800 8-10%
1920×1080 6-10%
1920×1080 6-10%
800×600 2%
La solución técnica que se le ha dado en el desarrollo web al problema de esta diversidad de resoluciones
web se llama Responsive Web Design que nos permite hacer interfaces adaptadas al entorno del usuario
mediante estructuras e imágenes fluidas gracias a media-queries de CSS.
Podemos ver algunos increíbles ejemplos en The Next Web: 29 new inspiring responsive designs on the web
con ejemplos como la BBC, Disney, Time…

3. En muchas ocasiones se toma un tamaño mínimo como base para el diseño inicial y a pesar de que ya no es el
estándar se sigue desarrollando como base el formato mínimo 1024×768, ya que no se puede despreciar a
un 10-15% (no sucede lo mismo con 800×600).
Es fundamental tener en cuenta este tamaño mínimo de 1024×768 para la usabilidad y el primer impacto del
usuario. Cómo las barras de navegación y scrolls tienen un tamaño, el área visible y útil de esta resolución
sería 990×580 aproximadamente (muy utilizado en la antigüedad con Flash ). Es en esta área donde se
mostrará el primer mensaje, lo imprescindible de tu producto, el botón de compra, etc.

4. De todas formas en nuestra opinión, quizás un tanto polémica, es que el Responsive Web Design es la mejor
solución desde pantallas de iMac de 27ʺ″ hasta los ipads mini de 7ʺ″ o incluso un poco menos; pero cuando se
trata de desarrollar para smartphones los procesos deben ser distintos ya que su caso de uso es distinto y por
tanto deberíamos crear una versión o vista específica para este tipo de dispositivos, sobretodo si hablamos de
e-commerce o software (no tanto en páginas meramente informativas). Así lo hicimos en actiu.com

5. La mejor fuente de datos: nuestra propia web
De todas formas, aunque todas estas estadísticas son muy interesantes es muy importante estudiar nuestra
propia web y nuestros propios usuarios; al final pese a que mundialmente existan unos datos lo mejor es ver
quién es nuestro público concreto. Mediante Googe Analytics vamos a poder hacer este estudio viendo las
tendencias de nuestros visitantes.
Deberíamos fijarnos también de los usuarios que abandonan la web rápidamente, sus resoluciones y
navegadores; quizás su salida del site sea por una mala o no correcta visualización de la web y no tanto
porque el contenido no le interesaba. Debemos ser muy sensibles con esto
En nuestro caso en concreto de lostiemposcambian.com los datos de los últimos 30 días son similares a los
explicados en el artículo:

6. Browserstack.com la mejor solución para test en navegadores, dispositivos y
resoluciones de pantalla
La solución en la nube de www.browserstack.com a nitsnets | studios nos ha cambiado la vida. Pese a no ser
una solución muy rápida es una herramienta que nos está ayudando mucho desde el primer día y 100%
recomendable; gracias a mi amigo Josele que nos la descubrió.

7. Consiste en una solución cloud donde probar nuestro desarrollo web en cualquier navegador web así como en
cualquier dispositivo en real (hay muchos). Se acabó tener máquinas virtuales para probar los Internet
Explorer antiguos, simuladores de tablets y smartphones, comprar varios dispositivos para pruebas, máquinas
virtuales en la oficina, etc…