Historial de un navegante

by Angel

7 tips de CSS para mejorar la usabilidad de tu sitio

leave a comment »

Leído en elwebmaster,

A veces, con poco, hacemos mucho. Optimizaciones que no llevan más 5 minutos son muchas veces las que llevan a nuestro sitio al siguiente nivel, mejorando increíblemente la usabilidad y accesibilidad para nuestros usuarios.

Podemos hacer ajustes en el backend (optimizando consultas a la base de datos, por ejemplo), en el HTML, el Javascript o usando sprites. Esta vez concentrémonos en los estilos CSS con 7 tips súper importantes.

Cambiar el color del texto seleccionado

En Firefox, Safari y Opera puedes cambiar el aburrido color por default por otro más acorde con los colores de tu sitio, que destaque más y ayude a la visualización:

PLAIN TEXT

  1. ::selection { background:#c3effd; color:#000; /* Safari y Opera */ }
  2. ::-moz-selection { background:#c3effd; color:#000; /* Firefox */ }

Prevenir que Firefox "salte" al mostrar y ocultar la barra de scroll

Firefox tiene el hábito de mostrar y ocultar la barra de scroll vertical según si el contenido de una página sobrepasa o no el alto de la ventana (el "fold"). En sitios interactivos con contenido dinámico que pueda cambiar una y otra vez, este efecto provoca un salto desagradable. De la siguiente manera podemos prevenirlo:

PLAIN TEXT

  1. html { overflow-y:scroll; }

Aplicar esquinas redondeadas a los contenedores

Además de ser un cambio agradable en Firefox y Safari, también ayuda a identificar mejor los elementos.

PLAIN TEXT

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

Setear los saltos de página para imprimir

Mucha gente querrá imprimir el texto de tu sitio web. No olvides ordenar los temas en las hojas ubicando saltos de página para no cortar una oración a la mitad:

PLAIN TEXT

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

Íconos específicos en atributos

Para diferenciar links de descarga (ejemplo: archivos formato PDF) o links externos. Tú decides.

PLAIN TEXT

  1. a[href$=‘.pdf’] { padding:0 20px 0 0; background:transparent url(/graphics/icons/pdf.gif) no-repeat center right; }

Cambiar el cursor por un puntero en los links y botones

Importante "detalle" que a muchos se les escapa. Hacer que el cursor del mouse se convierta en un puntero (la manito señalando) al pasarlo por encima de botones, links y demás elementos clickeables mejorará muchísimo la experiencia del usuario:

PLAIN TEXT

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

Hacer cliqueable toda el área alrededor de los links

Seteando la propiedad "display" en block en los links (a, anchor) de una lista, conseguiremos que el usuario no tenga que posar el cursor del mouse sobre el texto específicamente para poder hacer clic, sino que quede linqueado todo el recuadro contenedor.

PLAIN TEXT

  1. #navigation li a { display:block; }

¿Qué otros tips rápidos nos recomiendas?

Enlaces | David Walsh Blog | elwebmaster

Anuncios

Written by Angel Flores

7 febrero 2010 a 12:27

Publicado en General

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: