7 tips de CSS para mejorar la usabilidad de tu sitio


1

Señores, para quienes quieran aprender sobre CSS3 aqui les dejo algo de informacion para que le hechen un vistazo y empiezen a interiorizarce en el tema, ya que en la era de la web 2.0 esto la lleva.

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?

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

Fuente | 7 tips de CSS para mejorar la usabilidad de tu sitio

Anuncios

Acerca de dremox

Con 4 años de desarrollo en el area del diseño grafico, web y multimedia. Programador en CSS 2 y CSS 3, Html 5, Php, Ajax. Manejo avanzado de las suite de adobe, conciderado un avanzado website developer.

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

Sobre el Blog

Este blog fue creado para hablar sobre diseño en general, debido a que soy un apacionado por esta profesion y tambien poder mostrar algunos trabajitos, aportar conocimientos y porque no, tambien conocer gente con gustos parecidos. Mi objetivo principal aqui es poder ser un aporte para quienes comienzen con el tema de diseñar cosas nuevas y tambien compartir experiencias con los ya expertos, espero disfruten y participen junto conmigo de esto.

Sigueme

Error: Twitter no responde. Por favor, espera unos minutos y actualiza esta página.

A %d blogueros les gusta esto: