Bei vielen Websites ist es nicht erkenntlich, ob ein Link auf eine Seite innerhalb der Website, oder aber auf eine externe Website führt. Externe Links werden oft in einem neuen Browserfenster geöffnet, das ist aber nur bedingt eine Lösung, denn schnell ist der Monitor oder die Tableiste zugepflastert. Sinnvoll ist es hingegen externe Links mit einem kleinen Symbol entsprechend zu kennzeichnen, so weiß der User schon beim lesen des Links was ihn erwartet. Eine der ersten Websites die so vorging war wikipedia.com und legte damit den Startschuss für eine entsprechende Symbolkonvention (kleines Kästchen mit Pfeil), die sich mehr und mehr durchsetzt.

Für WordPress gibt es z.B. das Plugin Link Indication, welches es ermöglicht verschiedenen Zielen (externer Link, pdf, word, zip, etc) ein entsprechendes Symbol zu verpassen. Was aber tun, wenn man nicht mit WordPress arbeitet? Nun, dann heisst es Hand anlegen mit CSS. Als erstes müssen allerdings die relevanten Symbole gebastelt werden, dies ist schnell gemacht, ein Beispiel seht Ihr ja beim externen Link zum WP Plugin etwas weiter oben. Die einfache CSS-Variante wäre folgende:

Das Symbol ist in dieser Variante rechts oben neben dem Link platziert. Der Haken an der Sache ist jedoch, dass die Klasse jedem Link manuell zugewiesen werden muss. CSS 3 kann jedoch mehr, dass Zauberwort heisst in diesem Fall: Attributselektoren.

CSS 3 erweitert die bisher bekannte Funktionalität durch Substring-Matching-Attributselektoren, mit deren Hilfe Zeichenketten miteinander verglichen werden können. Standardkonforme Browser wie z.B. der Firefox und Safari unterstützen diese CSS 3 Selektoren bereits und auch der IE ab Version 7. Von daher ist es sehr wahrscheinlich, dass sie auch in die endgültige Spezifikation übernommen werden. D.h. allerdings, wer für ältere Browser optimiert, sollte sich noch an das erste Beispiel halten, mithilfe von JavaScript und DOM eine Klasse zuzuweisen um diesen Effekt nachzuahmen. Simon Willison erklärt hierzu die Funktion getElementBySelector in seinem Blog. Für alle anderen hier ein Beispiel mit dem entsprechenden Selektor [attribut^=wert], der alle Links herausfiltert die mit der Zeichenfolge http: beginnen.

Um jedoch hier nur die externen Links zu berücksichtigen, müssen alle internen vorab herausgefiltert werden. Auch dies geschieht mit der Hilfe eines Substring-Matching-Attributselektors, der nur die Links erfasst die auf die eigene Domain verweisen. Diese Anweisungen filtern zuerst das Symbol für externe Links wieder raus und setzten dann den rechten Innenabstand wieder auf null.

Selbstverständlich funktioniert das bei E-Mail-Links:

Und natürlich auch für PDF- und Word-Dateien mit Hilfe des Selektors [attribut$=wert]:

Für RSS-Feeds gilt:

Die Benutzerfreundlichkeit einer Website kann hiermit deutlich verbessert werden, User wissen vorab was sie erwartet wenn sie auf einen Link klicken.

---

Verwandte Artikel:
» Google Analytics für Einsteiger – Teil 3 – ECommerce Tracking
» Google Analytics für Einsteiger - Teil 2 - Die API
» Google Analytics für Einsteiger
» iPhone Apps für mobile Webworker
» Domainhandel - Lohnt sich das noch?

---