Perfekt vernetzte Website

[Workshop] Bessere Web-Site mit CSS - Usability verbessern

CSS bietet eine Reihe von Möglichkeiten zur internen Verlinkung. Im Workshop zeigen wir Ihnen verschiedene Beispiele der Umsetzung und geben einen Einblick in die SEO-Aspekte interner Verlinkung.

© Archiv

Alternative Stylesheets

Strukturierte interne Verlinkungen dienen nicht nur der Suchmaschinenoptimierung. Sie erhöhen auch den Komfort für den User erheblich. Beispielsweise werden Artikelempfehlungen zu ähnlichen Themen gerne angenommen. Damit animieren Sie Ihre Besucher, länger auf Ihrer Website zu verweilen.Bei der internen Verlinkung kommt eine wesentliche Bedeutung der CSS-Pseudo-Klasse :target zu. Bei CSS spielen Pseudo-Klassen eine wichtige Rolle - am bekanntesten sind :link, :visited, :active und :hover. Auch die Pseudo-Klasse :target Usabilitywird in diesem Umfeld verwendet, allerdings behandelt diese nicht das Aussehen, sondern das Ziel der Verlinkung.

Innerhalb umfangreicher Seiten ist es nicht unüblich, bestimmte Sprungmarken zu setzen, sodass der User nicht endlos scrollen muss. In den meisten Fällen behelfen sich die Besitzer der Seiten mit einem HTML-Anchor-Tag und einer ID und springen diese über eine HTML-Verlinkung an.

Innerhalb umfangreicher Seiten ist es nicht unüblich, bestimmte Sprungmarken zu setzen, sodass der User nicht endlos scrollen muss. In den meisten Fällen behelfen sich die Besitzer der Seiten mit einem HTML-Anchor-Tag und einer ID und springen diese über eine HTML-Verlinkung an.

Farbliche Hervorhebung

Das Scrollverhalten Ihres Textes können Sie aufgrund des Seitenaufbaus nicht verändern, Sie können Ihrem Leser jedoch eine Unterstützung beim Lesen zuteilwerden lassen und ihn farblich auf die Passage hinweisen, in der er die Antwort findet.

Dafür stellt Ihnen CSS3 die Pseudo-Klasse :target zur Verfügung. Fügen Sie in unserem Beispiel in den Header-Bereich die Stylesheet-Definition von :target ein und versehen Sie diesen mit einer beliebigen Hintergrundfarbe:

Kompatibilität

Wenn Sie nun die Seite aufrufen und keine Veränderungen sehen, liegt das an der noch immer nicht vollständigen Umsetzung von CSS3. :target wird aktuell durch die neueren Versionen von Firefox, Safari und Opera ab Version 9.5 unterstützt.

Ältere Browserversionen und der Internet Explorer haben das Nachsehen. In diesem Fall sollten Sie Ihre Benutzer jedoch nicht außen vor lassen, sondern über einen Workaround und ein wenig Javascript eine Alternative bieten.

Javascript-Umsetzung

Für die Umsetzung setzen wir ein kostenloses Skript von Peter Ryan ein, mit dem Sie auch auf Browsern, die noch kein CSS3 nutzen, die Funktionalität nachbilden können. Das Skript inklusive einer Reihe von hilfreichen Erklärungen finden Sie online unter .

© Archiv

Bei der klassischen Verlinkung über IDs verliert der Besucher gerne den Blick auf den Inhalt.

Bei der Simulation von :target wird eine identische CSS-Klasse mit dem Namen .target angelegt. Bei bestimmten Voraussetzungen werden sie einfach gegeneinander ausgetauscht.

Die Grundkonstruktion bildet die Funktion addLoadEvent(), welche als Argument eine weitere Funktion im Bauch trägt, die ausgeführt werden soll. Damit können Sie weiterhin das Ereignis window.onload nutzen und zusätzlich noch eine weitere Funktion definieren, die anschließend ausgeführt wird.

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload !=
'function') {window.onload = func;}else {window.onload = function() {
if (oldonload) { oldonload(); }
func(); } } }

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.