CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

La usabilidad es muy importante de cara a cualquier proyecto, y más si este es importante, ya que habrá mayor diversidad de usuarios. Es necesario optimizar todos los elementos del sitio para conseguir una buena usabilidad. En esta entrada muestro 7 sencillos trucos para mejorar la usabilidad de nuestro sitio con CSS.

Seleccionar con distinto color mediante CSS

Ya lo expliqué anteriormente, así que os muestro el enlace para visitar dicho tip.

Evitar que Firefox “salte” al mostrar/ocultar la barra de desplazamiento

Firefox oculta o no la barra de desplazamiento dependiendo si nuestro contenido sobrepasa el alto/ancho de la ventana. Para evitar que Firefox cambie esto en contenidos dinámicos una y otra vez, lo mejor es indicarlo:

html { overflow-y:scroll; }

Bordes redondeados en los contenedores

Aplicar esquinas redondeadas en las cajas de contenido ayuda a mejorar el diseño de tu sitio y a identificar mejor los elementos:

input      { -moz-border-radius:10px; -webkit-border-radius:10px; }

Insertar saltos de página para imprimir

Es necesario aplicar la propiedad page-break-before para no cortar una oración a la mitad cuando alguien quiera imprimir una página de nuestro sitio.

.page-break  { page-break-before:always; }

Iconos para cada atributo

Ya explicado anteriormente en este enlace.

Cambiar el cursor en enlaces y botones

Convertir el puntero en una “mano” cuando estemos encima de un enlace o un botón, mejorará la usabilidad de nuestro sitio y la experiencia del usuario.

input[type=submit],label,select,.pointer    { cursor:pointer; }

Permitir click en todo el contenedor

Al aplicar la propiedad display: block; conseguiremos que el usuario no tenga que hacer obligatoriamente click en el enlace, si no que igualmente puede hacer click en el contenedor donde se encuentra dicho enlace.

#navigation li a    { display:block; }

Con estos sencillos trucos habremos mejorado la usabilidad de nuestro sitio de forma rápida y cómoda.