Franchu’s lair

Este artículo es una traducción libre del texto publicado en el blog de Jakob Skjerning en inglés con el título: “Browser size does matter - Actual numbers“.

En uno de sus artículos, Jakob Nielsen recomendaba:

Optimizar los diseños para una resolución 1024×768, ya que en la actualidad es la anchura de pantalla más utilizada

Por desgracia, el Sr. Nielsen parece olvidar o ignorar un detalle muy importante que se comenta en el blog de Jesper: hay que diseñar para un ancho de ventana en vez de para un ancho de pantalla. Esto es así debido a que el navegador puede no estar maximizado en todas las ocasiones y por lo tanto la resolución de la pantalla no siempre coincide con el área visible en el navegador. Este artículo pretende abordar este estudio y completar los puntos que Nielsen pasó por alto.

Consiguiendo las estadísticas

Por desgracia, muy pocas herramientas para la generación de estadísticas de sitios web incorporan el estudio del tamaño real de la ventana del navegador, pese a ser, tal como veremos una de las métricas más interesantes.

Parece ser que Mint tiene un modo que permite monitorizar el tamaño de la ventana. A día de hoy, me parece que Mint es la primera y única herramienta estadística que proporciona esta métrica en vez del poco útil parámetro de tamaño de pantalla.

Los valores presentados en este artículo han sido obtenidos mediante un fragmento de código en Javascript incluido en la página de mentalize.net con el fin de almacenar los detalles del tamaño de pantalla y del tamaño del navegador una vez para cada visitante. Durante el tiempo que se realizó la toma de datos para el experimento, se registraron un total de 21000 muestras.

En este artículo se presta atención únicamente a la anchura del navegador, puesto que es desde mi punto de vista, la métrica más interesante. Obviamente se podrían decir muchas cosas con respecto al diseño en la dimensión vertical de las páginas, pero en la práctica la mayoría de las webs no tienen límites en altura.

Anchos de pantalla más comunes

Combinaciones más populares de anchura de pantalla y anchura del navegador

La tabla anterior demuestra un par de cosas. En primer lugar, que todos los datos recogidos apoyan las afirmaciones de Jakob Nielsen al identificar que 1024 pixeles es la resolución horizontal más común. Esto también se corresponde con los resultados proporcionados por Google Analytics en varios sitios webs a los que tengo acceso.

En segundo lugar, parece ser que la mayoría de los visitantes utilizan el navegador maximizado. Cada una de las combinaciones de anchura de pantalla / anchura de navegador mostrada en la table difieren en un valor menor o igual a 30 pixeles.

Esto quiere decir que los visitantes utilizan el navegador en una ventana maximizada o que al menos se ha cambiado el tamaño del navegador para que ocupe el mayor espacio horizontal posible en la pantalla. Dependiendo del sistema operativo, del navegador y de la configuración de la barra vertical, se pueden estar desaprovechando algunos píxeles del área visible del navegador.

¿Quién maximiza su navegador?

Me gustaría analizar este punto en detalle. Asumiendo que el área visible del navegador es a lo sumo 30 pixeles menor que la ventana maximizada, se puede estimar cuántos visitantes tienen sus navegadores maximizados. Aplicando la definición anterior, se obtiene que una media del 66% de los visitantes tienen la ventana con el tamaño máximo permitido por la resolución de sus pantallas. Los porcentajes para las anchuras de pantalla más comunes se pueden ver a continuación:

Porcentaje de navegadores maximizados frente al ancho de la pantalla

Mientras que se puede apreciar una clara tendencia que indica que cuanto mayor es la anchura de la pantalla, es menos probable que el navegador esté maximizado; también se puede observar que la mayoría de los visitantes siguen maximizando su navegador. El punto de inflexión en este comportamiento parece ocurrir cuando la gente pasa de una anchura de pantalla de 1400 a 1600 pixeles.

Para el tamaño de pantalla predominante (1024 pixeles) cerca de un 80% de los visitantes maximiza el navegador.

¿De cuánto espacio disponemos para diseñar?

Determinar la anchura para la cual se debe optimizar un diseño es, como cualquier cosa en el mundo del diseño, una solución de compromiso. Con toda seguridad, siempre habrá alguien con un navegador más pequeño del que se tuvo en cuenta en el diseño, por lo cual es necesario encontrar una anchura que permita a la mayoría de los visitantes verlo adecuadamente. Es por ello que es necesario encontrar un ancho que permita que la gran mayoría de los visitantes vean la página sin tener una barra de desplazamiento horizontal.

La siguiente figura muestra aproximadamente el porcentaje de visitantes que no tendrán una barra de desplazamiento horizontal en función de la anchura del diseño:

Las anchuras de los diseños anteriores están basadas en las anchuras de pantalla más comunes menos 30 pixeles para tener en cuenta una barra de desplazamiento vertical. También he tenido en cuenta los consejos de Cameron Molls de limitar el diseño a 750 pixeles para la resolución de 800×600 y 960 pixeles para la resolución de 1024×768.

Y la conclusión es…

Cuando Jakob Nielsen afirma que hay que diseñar para pantallas de 1024 pixeles de ancho por ser la anchura de pantalla más común, tiene razón en parte. 1024 pixeles es la anchura de pantalla más común, pero teniendo en cuenta el análisis realizado anteriormente, sería necesario optimizar para una anchura de navegador de 994 pixeles (navegador maximizado menos 30 pixeles para la barra de desplazamiento) lo que implica que se estaría optimizando únicamente para el 80% de los visitantes.

Al optimizar el diseño para una anchura de 770 pixeles, se estaría logrando optimizar para el 97% de los visitantes, que es un valor mucho más interesante de cara a mejorar la usabilidad de las páginas. Sin embargo, esto no quiere decir que haya que hacer diseños estáticos de 770 pixeles de ancho.

La recomendación sería por lo tanto, optimizar los diseños para un ancho de 770 pixeles y asegurarse de que escalan de forma fluida desde los 770 pixeles hasta los 960.

Referencias

• Tamaños reales de los navegadores

Trackback This Post | Subscribe to the comments through RSS Feed