La importancia del color de fondo (accesibilidad)

Accesible

El color de fondo es muy importante, dado que no todo el mundo tiene velocidades de conexión altas como la banda ancha, sino que aun se conectan por modem.

Si nosotros planteamos un diseño con imágenes de fondo, debemos necesariamente colocarle un fondo de color por ejemplo de tipo #FFFFFF, por que esto nos permite que en el caso que no carguen las imágenes pueda el usuario visualizar la información ó enterarse de una previsualizacion del sitio. Ejemplo:

con_fondo

ese es el administrador de proyectos en el que e estado trabajando estos últimos 12 días, ahí podemos ver la interfaz… que maneja varias imágenes, esto el da un aspecto «bonito :P» creo yo. Ahora vamos a quitarle las imágenes para ver como se visualiza.

sin_fondo

:O si notamos se pierden las imágenes, pero el texto sigue totalmente legible, esto es importante en una web y en una aplicación de internet, por que mientras cargan las imágenes, aparece el color de fondo y esto a vos te da un tiempo extra. SI! un tiempo extra, por que el usuario no necesita que cargue la web completamente para poder comenzar a leer, escribir o navegar sobre la web creada.

 Si aun no sabes como colocar un fondo como imagen, ó si ya sabes y no sabes como colocarle el color a continuacion con un minitutorial te explicare.

Primero crea la clase:
.clase_fondo1{
}

Ahora, dentro de ella declara la propiedad BACKGROUND, de esta forma:
background:url(‘../img/fondo.png’);
Algunas personas dicen que debe ir sin las comillas, por que en el ie para mac crea problemas cuando tiene comillas, pero pues a mi me gusta con comillas, asi que vamos a colocarlo asi 😛 :

entonces el codigo quedaria asi:

.clase_fondo1{
      background:url(‘../img/fondo.png’);
}

Ya tenemos declarada la propiedad con la url de fondo, recorda que la direccion de ubicacion es relativa segun el directorio del archivo css. ahora vamos a colocarle un fondo, por ejemplo un color negro.

.clase_fondo1{
      background:url(‘../img/fondo.png’) #000000;
}

si ves, le agregue el codigo de la imagen despues de la declaracion del fondo, recuerda dejar espacio para que el IE en windows no te cree problemas.

y listo!.

Publicado por @LasTenga

Programador, usuario Linux e hincha de Millonarios de Colombia

Deja un comentario