El arte de hiper-enlazar

Don’t Click Here: The Art of Hyperlinking es un excelente artículo de Coding Horror con muy buenos y sabios consejos sobre cómo hiperenlazar en la web. Se puede leer al completo traducido al castellano como Evitando el «click aquí»: el arte de enlazar, del que este sería el resumen:

1. Asegurate que los enlaces son lo suficiente grandes para que sea fácil hacer clic en ellos
2. El primer enlace es el más importante
3. No enlaces todo
4. No alternes radicalmente el comportamiento de los enlaces
5. No titules tu enlace «clic aquí»
6. No enlaces cosas que el usuario puede seleccionar y copiar
7. No incluyas iconos en cada enlace
8. No hagas contenido dependiente de los enlaces para funcionar
9. No ocultes tus enlaces
10. No mezcles anuncios y enlaces
11. No ofusques tus URLs

En esta casa intentamos seguir todos estos consejos y además otras «normas de estilo no escritas» sobre los enlaces, que siempre nos han parecido interesantes para el formato weblog. (Según las épocas esto ha ido «evolucionando», de modo que en las anotaciones más antiguas no hacíamos esto, pero normalmente ya sí):

1. El enlace más «importante» de una anotación lo escribimos en negrita, así es fácil saber cuál es el asunto principal de una anotación de un simple vistazo
2. Enlaces a ficheros y vídeos llevan una «explicación» entre corchetes, que indica cuánto tiempo dura el vídeo [YouTube, 3:14], si necesita algo especial [Flash] o qué tipo de fichero es y cuánto ocupa [PDF; 300 KB]
3. Etiquetamos contenidos «delicados» con [+18, NSFW] que indica que «no es buena idea verlo en la oficina»
4. Enlazamos las fotos e imágenes a la fuente original, de modo que lleven al sitio más adecuado si se hace clic en ellas
5. Añadimos «enlaces relacionados» al final de algunas anotaciones, que llevan a otras, siempre sobre los temas tratados. Muchos CMS para weblogs tienen módulos para hacer esto automáticamente, por categorías o etiquetas. Nosotros lo hacemos artesanalmente, así la selección es mejor
6. Añadimos el icono del feed RSS enlazado al feed de un blog cuando ese blog es importante en la anotación. Así el lector interesado puede suscribirse con un solo clic
7. Incluimos meta-información en el tag de enlace <a… > como por ejemplo el valor title, normalmente con el título original de la página/anotación enlazada
8. Rompemos todas estas «reglas» cuando es necesario como con cualquier de lista reglas / normas / consejos / ideas

(#5 y #7 son tediosos y aburridos de cumplir, de modo que depende del tiempo/inspiración al escribir la anotación.)

El objetivo de todas estas ideas sobre los enlaces es proporcionar información valiosa en el mismo enlace o junto a él. De ese modo el lector puede conocer más cosas sobre lo que está leyendo sin tener que seguirlo necesariamente, o sabiendo qué se va a encontrar.

La Web es una red de hiperenlaces, y cuando mejor construidos estén los enlaces de las páginas, mejor será la Web.

Unos cuantos artículos clásicos entre los clásicos, de Minid.net, para quien esté interesado en profundizar:

• Semántica: Parte 2 (con especial énfasis en los enlaces)
• Semántica: Parte 1
• 25 errores comunes en los desarrollos Web
• Un paso hacia la accesibilidad en la web

Actualización: Y algunos consejos más para «amantes del código» en Aprende como usar los enlaces en tu web.