¿Para que resolución de pantalla debo diseñar?

La siguiente gráfica muestra las resoluciones usadas por los visitantes del portal Web del Ayuntamiento de Brihuega durante el último mes:

Capturas del portal Web de Brihuega en diferentes resoluciones

A continuación se muestra una serie de captura de pantallas de la página de inicio del portal Web de Brihuega a las resoluciones mencionadas en la gráfica anterior.

Página de inicio de Brihuega a 1024x768

Página de inicio de Brihuega a 1280 x 1024

Página de inicio de Brihuega a 1400x900 píxeles

Página de inicio de Brihuega a 1366x768 píxeles

Página de inicio de Brihuega a 800x600 píxeles

Página de inicio de Brihuega a 1680x1050 píxeles

Página de inicio de Brihuega a 1280 x 768 píxeles

Página de inicio de Brihuega a 1360x768 píxeles

Página de inicio de Brihuega a 1920x1200 píxeles

Página de inicio de Brihuega 1152 x 864 píxeles

Página de inicio de Brihuega a 1280x800 píxeles

¿Qué es el fold de una página Web?

Hace unos años cuando comencé en el diseño Web la mayoría de la gente navegaba en 800x600 píxeles. Esto se debía a que la mayoría de esos gigantescos monitores CRT no ofrecían una resolución mayor. Se denomina fold a la parte de una página Web escondida en una primera carga y a la que accedemos haciendo scroll hacia abajo. Fold es el término anglosajón que se refiere a la parte de los periódicos doblada que no estaba a la vista al público cuando éstos se exponían en los kioskos. Es decir, el creador del periódico se devanaba los sesos para lograr posicionar su contenido en la parte que si se veía con el periódico doblado para así captar la atención de los transeúntes y lograr más ventas. La siguiente imagen muestra este concepto y muestra la página de inicio de este portal con una línea roja que marca el comienzo del fold para una resolución de 1024x768 píxeles.

La importancia del fold en el diseño Web fue, en mi opinión, durante un gran tiempo sobrevalorada. Se consideraba que todo aquello que por debajo del fold era practicamente invisible al usuario. Con el paso del tiempo, todos nosostros nos hemos familiarizados con las metáforas del interfaz Web (buscador en la esquina superior derecha, logotipo con enlace a la página de inicio ...) y con las barras de desplazamiento verticales. Creo que los usuarios hacen más scroll de lo que creemos. Y que no lo ven como un gran problema.

No obstante, es importante colocar el contenido más importante por encima del fold. En mi caso las diferentes posiblidades de seguir mi trabajo y mi actividad. Es decir, el banner de mi agencia de diseño Web, la suscripción a la lista de correo, al RSS, a mi cuenta de Twitter o mi página de Facebook están justo encima del fold. Además el título, de la entrada actual y gran parte de su contenido (de modo que el visitante se anime a continuar leyendo) están también visibles.

¿Para que resolución de pantalla debo diseñar?

Las premisas de Jacob Nielsen sobre resolución de pantalla y diseño de página en 2006 son en su mayoría todavía válidas.

• Optimizar para 1024x768, que es actualmente la resolución de pantalla más usada. Por supuesto, la regla general es optimizar para la resolución más común de tu audiencia; esta resolución puede cambiar en el futuro. Puede ser incluso una resolución diferente ahora, si por ejemplo, estas diseñando el intranet de tu empresa, la cual da monitores con resoluciones grandes a todos sus empleados.
• No diseñes específicamente para una sola resolución por que las resoluciones varían entre usuarios. La variación en el tamaño de las ventanas es incluso más grande, porque los usuarios no tienen siempre sus navegadores maximizados (especialmente aquellos que tienen monitores grandes).
• Usa un diseño líquido, que se estire para adaptarse a la resolución del usuario (esto es, evita que diseños fijos que son siempre el mismo tamaño).

¿Cómo optimizar para 1024x768?

Los tres criterios principales para diseñar para una resolución concreta son:

• Visiblidad inicial: ¿Está visible toda la información relevante por encima del fold, de modo que los usuarios puedan verla sin hacer scroll? Es decir, una solución de compromiso entre cuantos objetos se muestran respecto cuanto detalle se muestra por cada objeto.
• Legibilidad: ¿Cómo de fácil se lee el texto en las diferentes columnas, dado el ancho asignado?
• Estética: ¿Cómo de atractiva es la página cuando los elementos están al tamaño y localización adecuados para esta resolución de pantalla?. ¿Se alinean todos los elementos correctamente; es decir, los pies de fotos justo debajo de las fotos, ...

El diseño del portal de Brihuega es un diseño fijo. Debido al modo actual de hacer zoom en los navegadores, considero que algunas de las ventajas que tenía el diseño fluido frente al fijo han desaparecido. Esto es tema para otra entrada y no quiero profundizar más aquí. Volviendo al diseño del portal de Brihuega este siempre tiene un ancho de algo menos de 1.000 píxeles. Este ancho se escogió para adaptarse a las principales resoluciones. Sólo un 3% de usuarios navegan a 800x600 por lo que el portal opta por adaptarse más a la gran mayoría que hacer un diseño todavía más conservador para 800 píxeles. Lo ideal sería ofrecer un diseño alternativo para dichas resoluciones.

Hay que tener en consideración que las capturas de pantalla incluyen un banner amarillo justo debajo de la navegación. Este banner no aparece normalmente en la página con lo que hay que imaginarse que los elementos mostrados para la resolución 1024x768, la más común, se parecerán más a la imagen en 1280x1024 píxeles que a la mostrada en esta entrada. No obstante la serie de capturas mostradas más arriba ponen a la vista algunos problemas:

• El banner superior, ocupa gran parte de la página antes del fold. A mi gusto demasiado espacio. Si el banner fuera 2/3 de su tamaño actual, la visibilidad inicial sería mejor.
• Contenido importante como los tres próximos eventos en la agenda de la villa o la información meteorológica de los próximos dos días aparece oculto inicialmente para la mayoría de las resoluciones.

No obstante, los principales elementos de navegación como buscador o menú están visibles incialmente, la legibilidad de los mismos es buena y el banner superior, si bien quita visibilidad, aparta también un componente estético.

Resumiendo, optimiza tus diseños para 1024x768 pero asegurate que tu página se ve bien para todo el abanico de resoluciones.

Etiquetas: resolution