| Suscribir mediante RSS

Apariencia Web

16 March 2009 Diseño web

Cuando se visita una página web lo que queremos es que se nos muestre la información de forma clara y ordenada. Si la navegación es incómoda porque los elementos no se ven bien, elección incorrecta del tamaño de la letra o color, hay demasiados, no guardan una simetría, tarda en cargar por abundante contenido de imagenes o Fash, etc, nadie perderá el tiempo torturándose y la abandonará, acabará no entrando. Por tanto, la navegación debe ser cómoda, de apariencia fresca, atractiva y fácil de usar. Debemos recordar que estamos leyendo en pantalla y que tardamos hasta un 30% más que si leyeramos en papel.

La elección correcta de los colores de nuestra Web es fundamental y es más importante de lo que puede parecer. No hay que salirse de la paleta de colores seguros asignados para WEB. Consta de 216 colores que son comunes en cualquier sistema operativo y navegador utilizado. Si usas un color en este rango es prácticamente seguro que todos los visitantes de tu página la vean tal y como la diseñaste.

Por supuesto que el monitor también tiene su influencia. Con los TFTs las diferencias pueden ser aún mayores. Alguno habrá comprobado más de una vez que una página se ve diferente según el monitor que se tenga ( CRT o TFT ). Posiblemente sea debido a que no utiliza la paleta de colores seguros. Hay que tener en cuenta que el número de colores que puede mostrar un monitor CRT es mayor al que pueden mostrar los TFT. Prueben estos colores, 350505, 053505, 050535 o colores similares. En un monitor CRT se verán todos casi negros, en uno TFT rojo oscuro, verde oscuro y azul oscuro respectivamente.

Esta es la razón por la que no se debe usar un monitor TFT para diseño gráfico, video, fotografía, etc. De hecho no son usados profesionalmente cuando se requiere precisión en el color.

Deben usarse páginas centradas, con ancho de pixeles fijo o en porcentaje. Evita que aparezcan las barras horizontales de desplazamiento cuando el ancho de la página supera al del monitor. Puesto que la navegación es vertical sólo deben aparecer las barras de desplazamiento vertical. No es nada agradable estar moviendo la página horizontalmente para poder ver o leer lo que está en los laterales. Una página creada para una resolución de 800 x 600 siempre se verá bien en cualquier otra resolución, al contrario no ocurre igual. Recordar que las barras de desplazamiento vertical ya ocupan espacio (20 pixels aproximadamente), por tanto el tamaño correcto será 780 x 600.

El tamaño de las fuentes se adapta a los cambios de pantalla cuando el ancho es en porcentajes. Quizás esta sea la mejor opción si no se quiere preocupar del tamaño del monitor que tendrá el visitante.

Por supuesto que existen páginas con desplazamiento horizontal: www.thehorizontalway.com Suelen gustar por su novedad y la aparente comodidad del movimiento horizontal pero también producen rechazo si no se está acostumbrado a este tipo de navegación. Al igual que en las de desplazamiento vertical en este tipo de páginas todavía es más acusado el inconveniente de que se muestran en pantalla de forma diferente a distintas resoluciones para las que fueron creadas.

En las páginas realizadas con desplazamiento vertical es más controlable la apariencia horizontal al ser de ancho fijo y se crea una sensación de continuidad que no existe en las páginas de desplazamiento horizontal. Si bien en estas últimas el alto es fijo, es más fácil leer una página de arriba a abajo, que de izquierda a derecha.

En definitiva, debido a la variedad de monitores y sus resoluciones ( algunas fuera de toda relación de aspecto estandar ) también tenemos que preocuparnos por el monitor que tendrá quien visita la página.

Esto lo escribí hace algún tiempo, sin embargo, practicamente la mayoría de lo que comento no ha quedado desfasado y es aplicable a los sitios web actuales.

Otros artículos de Diseño web

Acelerando WordPress Parte HTML
Cómo restaurar archivos en Go Daddy
Seminarios interesantes
WordPress como la vida misma
A tener en cuenta al cambiar de Theme