Archivos de Retrorock

Marcando links externos con CSS

En el post anterior hablaba sobre las caracteristicas de un buen link, siguiendo el tema, creció la necesidad de hablar sobre los diferentes tipos de links.

Un detalle muy importante cuando diseñamos interfaces es que cada elemento debe identificar su función a primera vista. Si todos los elementos de nuestros websites son iguales, como sabremos a que darle click para ir a otra página?

Tratando de lograr que el visitante no se confunda buscando los links, surge una nueva característica de un buen link: El link especifica claramente al usuario que va a abandonar el website.

Para lograr esto necesitamos dos cosas; buscar un ícono que identifique a la mayor cantidad de visitantes que el link al clickearlo va a otra página y como adjuntarlo a cada uno de los links externos con CSS.

No hay una convención clara sobre que ícono utilizar, aunque la mayoría usa el de Wikipedia external otros usan un ícono parecido (pero en vez de un cajita, con una página). Lo más probable es que se cree una convención cuando esta técnica adquiera más popularidad.

Para aplicarle el estilo usamos

 a[href^="http:"] {
        background: url(/images/external.png) right center no-repeat;
        padding-right: 12px;
}

Usando selectores de CSS3 no tenemos que asignar una clase a los links o ejecutar ningún código en el servidor para seleccionar los links externos.

Esta regla de CSS nos dá algunas pistas sobre como marcar otros tipos de links como los mailto:

5 tips para diseñar tus links

Los links son la base del proceso de navegación en internet. Dependiendo de los links y el contenido del sitio a donde llevan, el visitante decidirá si quiere regresar o no.

Las últimas tendencias han desarrollado la busqueda de un estilo de escritura para satisfacer las necesidades y los gustos de los diferentes usuarios y los constantes cambios de los motores de búsqueda (Search Engines)

Usualmente los autores usan los links para reforzar un concepto, un grupo de links puede servir como el enfoque de un website. Pero, un grupo de links no tiene el mismo efecto sobre el lector, y no es tan legible como el texto linear.

Teniendo en cuenta el problema de los links, debemos usar texto relevante en nuestros links (anchor text), mantener una consistencia visual que identifique a los links entre el texto y diferenciar los links que han sido visitados y los que no.

Los links deben ser usados como refuerzo del contenido, no como su sustituto.

  1. Colores diferentes para links visitados y no visitados
    Los Links que fueron clickeados deben diferenciarse de una manera u otra de los que no; La mejor manera de hacerlo es utilizando alto contraste de color. Los links deben resaltarse lo mas posible en el texto del website en cualquier caso, los colores brillantes son preferibles.Por otra parte los links que ya fueron visitados deben tener un color un poco mas pálido o gastado, aunque no usando la misma escala cromática que los links no vistados, porque esto podría confundir a los visitantes.
  2. El texto es lo suficientemente grande y los links no están muy cerca unos de otros
    Los usuarios deben llegar a su destino voluntariamente, no porque hayan hecho click a link por error.
  3. El contenido importante es accesible desde más de un link
    Si el contenido es accesible desde diferentes sitios en el website, es mucho más probable que los visitantes encuentren lo que andan buscando. Cada usuario busca información de formas distintas, dependiendo de su interpretación de un problema y del layout del website. Algunos encuentran los links importantes facilmente cuando tienen un texto especifico, otros lo encuentran mas facilmente cuando tienen un texto alternativo.
  4. El texto de los links tiene una buena cantidad de palabras
    El texto de los links deben ser lo suficientemente largo para que el usuario entienda de que se trata y lo suficientemente corto como para que no llene una línea completa. Algunos estudios han demostrado que los usuario entienden mejor la prosa y que los links con 8 a 9 palabras tienen mejores resultados. Una buena explicación de Long Tails.
  5. El texto del link es descriptivo
    La confusión en los usuarios debe ser combatida a toda costa. En cuanto a esto, debemos poder mirar todos los links en nuestro website y poder sacar una conclusión contundente de qué vamos a encontrar si los seguimos. Un ejemplo contraproducente de esto son los links que dicen “click aquí” por que no ofrecen una pista sobre lo que uno va a encontrar del otro lado.