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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…