Advitum.de auf Google+

Externe Links markieren – CSS Quick-Tip

Externe Links markieren – CSS Quick-Tip
VN:F [1.9.22_1171]
Bewertung: 3.8/5 (5 Stimmen abgegeben)
Von am
Kategorien: Allgemein

Auf vielen Seiten hängt externen Links das Attribut target="_blank" an, was bewirkt, dass sich diese Links in einem neuen Fenster oder Tab öffnen. Bis heute ist diese Vorgehenweise von den einen bejubelt und von den anderen verpöhnt, denn es gibt sowohl Vor- als auch Nachteile.

In diesem Artikel will ich Dir deshalb eine schöne Alternative dazu präsentieren. Wir werden einfach alle externen Links visuell von den internen unterscheiden.

Zunächst ist vielleicht interessant, warum die Verwendung von target="_blank" so umstritten ist. Auf der einen Seite steht der klare Vorteil, dass der Nutzer so unsere Seite nicht so schnell verlässt. Wenn ein Besucher auf einen externen Link klickt und ihm der externe Inhalt gefällt, ist die Wahrscheinlichkeit, dass er zurück auf unsere Seite kommt, sehr gering. Wurde die externe Seite jedoch in einem neuen Fenster geöffnet, kehrt der Nutzer automatisch wieder auf unsere Seite zurück, wenn er die externe Seite schließt.

Externe Links markieren – CSS Quick-Tip, 3.8 out of 5 based on 5 ratings

Allerdings dürfen wir hier die Nachteile nicht vergessen! In den Augen vieler ist die Nutzung von target="_blank" eine direkte Manipulation des Nutzers, denn er kann hier nicht selbstständig entscheiden, ob er den Link in einem neuen Fenster öffnen möchte oder nicht. Außerdem kommt noch erschwerend hinzu, dass weniger erfahrene Internetnutzer eventuell gar nicht mit dem Browsen in mehreren Tabs oder Fenstern vertraut sind. Wenn sie dann auf einen Link mit target="_blank" klicken, funktioniert aus ihrer Sicht der Zurück-Button des Browsers nicht und sie wissen eventuell nicht, wie sie auf Deine Seite zurück kommen.

Ich will mich hier gar nicht direkt positionieren, denn mir passiert es oft genug, dass ich trotzdem wieder ein target="_blank" platziere. Ich möchte Dir lediglich eine gute Alternative hierzu bieten. Warum markieren wir nicht einfach alle externen Links und lassen den Besucher selbst entscheiden, ob er unsere Seite verlassen will oder nicht.

Das beste daran ist, dass wir diese Kennzeichnung nur einmal im CSS-Code vornehmen müssen, unsere Links bleiben dabei unberührt. Wir müssen uns in Zukunft also keine Gedanken mehr um die Auszeichnung externer Links machen.

Nun aber endlich zum CSS-Code:

a[href^="http:"]:after, a[href^="https:"]:after
{
	content: url(../images/external.png);
	vertical-align: bottom;
	padding-left: 3px;
}

a[href^="https://advitum.de"]:after, a[href^="https://advitum.de"]:after
{
	content: "";
	padding: 0px;
}

In der ersten Anweisung hängen wir allen Links, deren URL mit http: oder mit https: anfängt, eine kleine Grafik an, das kann im Grunde irgendein kleines Icon sein, das dem Nutzer begreiflich macht, dass dieser Link zu einer externen Seite führt. Die meisten Links, die mit http: oder https: beginnen, sind externe Links, allerdings könnte es ja auch passieren, dass wir einen internen Link auch als absoluten Link mit http: und Domain eintragen. Das passiert zum Beispiel häufig, wenn wir ein Content-Management-System gebrauchen. Deshalb wird im zweiten Schritt bei allen Links, die mit unserer eigenen Domain (in meinem Fall natürlich advitum.de) anfangen, das Icon wieder entfernt.

Schon sind wir fertig. Alle externen Links tragen nun das kleine Icon. Natürlich muss die Unterscheidung nicht unbedingt über ein Icon erfolgen, eine andere Schriftfarbe o.Ä. könnte auch schon funktionieren, was sich genau so leicht umsetzten ließe, wie das kleine Icon im obrigen Beispiel.

Ich hoffe, dieses kleine Tutorial hat Dir etwas geholfen, denn nun kannst Du selbst entscheiden, wie Du auf deiner Seite vorgehen willst. Ich wünsche Dir viel Spaß beim Pflegen Deiner eigenen Internetseite!

Externe Links markieren – CSS Quick-Tip, 3.8 out of 5 based on 5 ratings

Jetzt seid ihr dran!

Teilt eure Meinung mit uns in den Kommentaren, gebt eine Bewertung für diesen Artikel ab und teilt ihn in Social Networks!

Über

Ich bin ein junger Webdesigner und Programmierer aus Siegen und blogge auf Advitum.de über meine Erfahrungen im Web. Meine Themenschwerpunkte liegen im Bereich der Web-Entwicklung mit PHP, JavaScript, HTML und anderen Script-, Programmier- und Markup-Sprachen, der Nutzung von Content Management System wie Typo3, Wordpress etc. und der Effekt-Hascherei mit Photoshop. Seit 2008 blogge ich auf Advitum.de – mal mehr, mal weniger regelmäßig – über alles, was mich so interessiert. Wenn dir mein Blog gefällt, freue ich mich immer sehr über Feedback in Form von Kommentaren und E-Mails.

Kommentare zu diese Artikel

Schreibe jetzt einen Kommentar!

Diese Artikel könnten dir auch gefallen