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.
Domingo, 11 de Abril de 2010 a las 13.40
Hola. Disculpa si depronto estoy fuera de tema, pero me gustaria preguntarte como haces para manipular los anuncios de adsense de esa forma. Ya he visto eso en varios blogs, es decir que usan como un codigo java para llamar a los anuncios, aplicarles css y darles un aspecto muy muy personalizado. He tratado de buscar el tema para aprender como pero no lo he encontrado. Te agradeceria alguna sugerencia o algo. Saludos !!
Jueves, 10 de Junio de 2010 a las 02.39
html { padding:0px ; margin:0px;} // seteas todo para q comience sin maring ni padding
a img {border: 0 } // imagenes sin border por default
Miércoles, 14 de Julio de 2010 a las 23.05
bastante interesante y utiles a considerar, les dejo mi aportación si desean profundizar en el tema y sobre todo en algunos aspectos generales no tratados en este artículo:
http://www.cubo-x.com/5-css-tips-para-evitarte-problemas-con-tu-diseno-web/
felicidades por el post!!!
Lunes, 19 de Julio de 2010 a las 11.20
Gracias por el aporte. Seguro que lo aplique mal pero lo de las esquinas redondeadas sólo se ve bien en Safari pero en Firefox no. De todas formas mil gracias
Lunes, 26 de Julio de 2010 a las 20.51
Me hubiera gustado que pusieras algunos links de ejemplos. gracias
Martes, 31 de Agosto de 2010 a las 16.10
A mi paso lo mismo que a @Pedro. Probe el truco de los bordes redondeados en Firefox y no funciono.
Pero lo hice funcionar agregando lo siguiente: border: 1px solid #ccc;
es decir, todo quedaria asi:
input { -moz-border-radius:10px; -webkit-border-radius:10px; border: 1px solid #ccc; }
Miércoles, 9 de Febrero de 2011 a las 22.00
Chekense esta: 10 Consejos rápidos para mejorar tu CSS (esta en español)
http://pharalax.com/blog/2011/02/09/mejores-practicas-css/
Lunes, 14 de Marzo de 2011 a las 15.54
*
{
border: 0;
margin: 0;
padding: 0;
outline: 0;
}
Miércoles, 16 de Marzo de 2011 a las 06.33
¿Existe alguna otra guía de referencia actualizada con ejemplos incluidos para wordpress.com?