Externe Links als solche kennzeichnen - Mit JavaScript und CSS

"Verwirre den User...NICHT!" So oder so ähnlich lautet einer der obersten Grundsätze des User Interface Designs. Wir sind Gewohnheitstiere. Wir wollen das etwas so funktioniert wie es das schon immer getan hat. Bei den meisten UI Elementen ist das relativ klar. Gerade jedoch ein einfacher externer Link kann da Überraschungen bergen. Klickt man drauf kann man entweder auf einer gänzlich anderen Internetseite landen, oder innerhalb der gerade besuchten Domäne hin und her springen. Was genau passiert weiß man erst hinterher.

Um eben diese Verwirrung des Users zu vermeiden gehen viele Seitenbetreiber den Weg, einen externen Link eben auch als solchen zu kennzeichnen. Zum Beispiel mit einem kleinen Icon dahinter.

Auf meiner Seite sehen externe Links z.B. so aus: Link auf eine externe Seite

Interne Links sehen dahingegen ganz normal aus: Link auf eine interne Seite

Externe Links mit eigener CSS Klasse auszeichnen

Mit einem einfachen JavaScript, eingebunden in den Footer oder Header Bereich eurer Seite, könnt ihr sehr einfach einem externen Link eine eigenen Klasse zuweisen und dann per CSS individuell gestalten. Mit diesem Script:

wir festgestellt ob ein Link Element auf eine URL innerhalb des eigenen Hostnamens verweist oder nicht. Im zweiten Fall wird die Klasse class="external-link" an das Link Element angehängt. Diese Klasse läßt sich dann individuell per CSS stylen.

Den Link per CSS individualisieren

Jetzt kann man externen Links einfach per CSS ein anderes Aussehen als internen Links verpassen:

.external-link{ /* adding styles here*/ }

In meinem Fall habe ich beispielsweise ein Icon aus dem Font Awesome Font Icon Set (<- Ja genau, ein externer Link...) hinter den entsprechenden Links mit dieser CSS Klasse platziert:

/* Externer Link mit Font Awesome Icon dahinter */ .external-link:after { font-size:.75em; color:#666;padding-left:4px; font-family: 'FontAwesome'; content: "\f08e"; }

Aber vorsicht: JEDER externe Link wird mit dem oben genannten Code ausgezeichnen und "ge-stylt". Ggf. kann es sinnvoll sein nur externe Links in einem entsprechenden Bereich zu gestalten. In meinem Fall wurden zunächst auch die kleinen Social Media Icons oben rechts neben dem Logo dieser Seite mit einem entsprechenden Icon versehen. Und ein Iocn neben einem Icon war natürlich nicht Sinn der Sache