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.

Alternative Stylesheets

© 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 .

SEO und Usability

© 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 zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".