Sascha Postner macht Jagd auf Kommunikation, Webstandards und Public Relations

Es ist ein netter Service auf seiner Webseite den Usern zu zeigen was ein bestimmter Link nach einem Klick auf Ihn tun wird. Außerdem ist diese “Vorabinformation” ein wichtiger Teil der WAI Guidelines:

Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user.

WAI Guidelines

Man kann darüber streiten ob es sinnvoll ist überhaupt keine Links mehr in neuen Seiten zu öffnen. Ich persönlich jedoch finde es durchaus angebracht dies für externe Verweise zu tun.
Mal ganz abgesehen davon, dass man ständig mit Kunden zu tun hat, die sich nicht wirklich um irgendwelche Standards oder Leitsätze kümmern und die einfach wollen, dass sich Links auf externe Seiten in neuen Fenstern öffnen. Mir ist es dabei sehr wichtig, dies zwar für den Kunden umzusetzten, aber dennoch eine einfache Implementierung der Guidelines zu erreichen (schließlich ist das nicht nur zum Wohle des Kunden sondern auch ein persönliches Anliegen).

Mir erscheint die Art und Weise mit der die Kennzeichnung im WAI-Beispiel umgesetzt ist allerdings etwas unsexy und nervig. Kein Mensch möchte hinter jedem Link, der sich in einem neuen Fenster öffnen wird einen ellenlangen Text schreiben. Hübscher geht es mit einem Bild, das den Verweis als extern markiert.

Für diese Methode haben sich mittlerweile sogar ansatzweise “spürbare” Standard-Icons entwickelt. Damit meine ich, dass diese Icons einen großen Wiedererkennungseffekt haben und kompetente Internetuser ahnen dürften was diese hinter einem Link bedeuten.
Beispiele für solche Grafiken können die folgenden sein:

Ähnliche Icons nutze ich auch auf dieser Seite um externe und spezielle (Email, FTP, Wikipedia etc.) Links zu kennzeichnen.

So ein Icon kann man ganz einfach per CSS an jeden externen Link “pappen” und diesen so markieren. Selbstverständlich ist das nicht die optimale Lösung und es läßt sich darüber reden (s.u.) ob damit wirklich diese Guideline erfüllt ist, aber das Webdesignleben besteht aus vielen Kompromissen.

Das Einfügen des Icons übernimmt für uns eine kleine CSS-Klasse:

 a.liexternal {
padding-right: 12px;
background: url("/images/icons/link-icon_external.gif") no-repeat right;
} 

Das padding schafft uns dafür 12px rechts neben dem Link Platz und als Hintergrundbild wird ganz rechts angebracht.
Somit haben wir jetzt an jedem Link, dessen a-tag eine Klasse “liexternal” in sich hat, unser kleines Icon angebracht.

Leider bedeutet dies, dass man jetzt beim editieren der Seiten jedem externen Link die Klasse liexternal von Hand hinzufügen müsste. Das ist nicht nur furchtbar anstrengend, sonden auch keinem normalen Kunden zuzumuten.
Man stelle sich vor man erklärt dem Redakteur eines CMS, dass er doch bitte nach Erstellen einer Seite noch einmal in den HTML-Modus wechseln soll und dann dort allen externen Links händisch eine Klasse zuordnet. A big “no-no”!

Diese Arbeit kann uns ein Javascript abnehmen. Das Schöne dabei ist, dass so kleinere Änderungen an der Klasse später einfach in einer Datei vorgenommen werden können und nicht alle externen Links überarbeitet werden müssen.

Zusätzlich ist ein weiteres nettes Feature enthalten, das man natürlich deaktivieren kann. Den externen Links wird erst hier das target=”_blank” hinzugefügt. Sollte sich der Kunde also später entscheiden, dass es nicht mehr gewünscht ist ein neues Fenster zu öffnen, kommentiert man dies einfach aus und hat sich eine Menge Arbeit gespart.

function changeLinks()
{
var as,i,islink;
// alle links extrahieren
as=document.getElementsByTagName('a');
for(i=0;i) { // das href aus dem link betrachten
islink=as[i].href;
// und dann schauen ob es zum selben Server geht
if (islink.indexOf(window.location.hostname)==-1)
{ // wenn es ein anderer Server ist Klasse und target ergänzen
as[i].className='newWinStyle';
as[i].target = "_blank";
}}}
// wenn der Browser DOMfähig ist, Funktion laden
if(document.getElementById && document.createTextNode)
{ window.onload=changeLinks; }

Diesen Code baue ich, seitdem ich ihn entdeckt habe in viele Webseiten ein. Meistens nutze ich dafür externe Javascriptdateien. Das macht den Quelltext schlank und sauber.

Sensationellerweise kann man mit diesem Kniff sogar umgehen, dass beim DOCTYPE XHTML- und HTML-strict kein target=”_blank” erlaubt ist. Da diese Information erst durch das Javascript hinzugefügt wird bleibt die Seite vailde, selbst wenn man den a-tags ein target zuweist.

Kehrseite der Medaille

Keine gloreiche Entdeckung ohne böse Fallen! Auch hierbei gibt es natürlich Stoff für Diskussionen (würde mich freuen Eure Meinung zu hören).
Zum einen kann man sehr geteilter Meinung darüber sein ob damit die Guidelines der WAI/W3C erfüllt sind. Dies würde nämlich voraussetzen, dass man dem User zumuten kann, dass er anhand des Icons erkennt, dass sich beim Besuchern der Links neue Fenster öffnen. Gleichzeitig sei erwähnt, dass diese Bilder ja nur als Hintergrund eingeblendet werden. Was tun also User ohne CSS-Unterstützung (OK, die werden meistens auch kein Javascript ausführen können, aber es sollte erwähnt werden).
Vermutlich gibt es noch gar reichlich böse Dinge, die Erwähnung finden dürften… aber ich meine, ein gelungener Kompromiss.

Für Wordpress gibt ein exzellentes Plugin, dass genau dies erreicht. Ich nutze es ebenfalls hier auf dieser Seite.

Popularity: 8% [?]

Verwandte Artikel

• Keine verwandten Artikel

Dieser Beitrag wurde vor am Samstag, 15. April 2006 um 16:00 Uhr veröffentlicht und unter Webdesign gespeichert. Sie können Kommentare zu diesem Eintrag über den RSS-2.0-Feed verfolgen. Sie können einen Kommentar hinterlassen oder einen Trackback von Ihrer Website hierher setzen.