Juan Manuel 1 de febrero de 2010 a las 08.00
   Imprimir artículo
elWebmaster.com

7 tips de CSS para mejorar la usabilidad de tu sitio


cssA 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:

  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:

  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.

  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:

  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.

  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:

  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.

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

¿Qué otros tips rápidos nos recomiendas?

Fuente: David Walsh Blog


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (11)

  1. Ramon Liberona dice:

    para quitar el borde punteado alrededor de los link.

    a{
    outline:0;
    }

  2. Carlos dice:

    Agradezco esta recopilación de usabilidad. Me viene muy bien pues siempre me se pasa algo. Gran artículo.

  3. Eduardo Gomez dice:

    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 !!

  4. ilen dice:

    html { padding:0px ; margin:0px;} // seteas todo para q comience sin maring ni padding
    a img {border: 0 } // imagenes sin border por default

  5. Ivan dice:

    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!!!

  6. Pedro dice:

    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

  7. ivan dice:

    Me hubiera gustado que pusieras algunos links de ejemplos. gracias

  8. SergioMC dice:

    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; }

  9. raul dice:

    Chekense esta: 10 Consejos rápidos para mejorar tu CSS (esta en español)
    http://pharalax.com/blog/2011/02/09/mejores-practicas-css/

  10. Patricio dice:

    *
    {
    border: 0;
    margin: 0;
    padding: 0;
    outline: 0;
    }

  11. Cristián dice:

    ¿Existe alguna otra guía de referencia actualizada con ejemplos incluidos para wordpress.com?

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder