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:
-
::selection { background:#c3effd; color:#000; /* Safari y Opera */ }
-
::-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:
-
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.
-
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:
-
.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.
-
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:
-
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.
-
#navigation li a { display:block; }
¿Qué otros tips rápidos nos recomiendas?
Fuente: David Walsh Blog
Martes, 9 de Febrero de 2010 a las 01.27
para quitar el borde punteado alrededor de los link.
a{
outline:0;
}
Martes, 23 de Febrero de 2010 a las 05.45
Agradezco esta recopilación de usabilidad. Me viene muy bien pues siempre me se pasa algo. Gran artÃculo.