[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.
- [Workshop] Bessere Web-Site mit CSS - Usability verbessern
- Teil 2: [Workshop] Bessere Web-Site mit CSS - Usability verbessern
- Teil 3: [Workshop] Bessere Web-Site mit CSS - Usability verbessern
- Teil 4: [Workshop] Bessere Web-Site mit CSS - Usability verbessern
- Teil 5: [Workshop] Bessere Web-Site mit CSS - Usability verbessern
- Teil 6: [Workshop] Bessere Web-Site mit CSS - Usability verbessern
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 d...
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 .
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(); } } }
