Perfekt vernetzte Website

Teil 5: [Workshop] Bessere Web-Site mit CSS - Usability verbessern

Keine Experimente

Beim Thema interne Verlinkung sollten Sie auch nicht zu kreativ sein, sonst riskieren Sie unter Umständen einen Ausschluss aus den Trefferlisten der Suchmaschinen. Die Crawler erkennen häufig zuverlässig, wenn ein spezieller Pfad für sie eingerichtet wurde, der die Inhalte speziell aufbereitet. Dabei spielt es keine Rolle, ob Sie dies über Javascript oder Meta-Tags machen.Wirkungsvoll und von den Suchrobotern auch akzeptiert sind allerdings Navigationen, die auf CSS und Javascript aufbauen. Die Verlinkungen funktionieren auch bei ausgeschaltetem oder nicht vorhandenem Javascript, lediglich die Optik leidet stark darunter.Für einen Besucher aus Fleisch und Blut sicher nur schwer zu verkraften, ein Crawler schaut an dieser Ecke jedoch großzügig darüber hinweg. Das folgende Beispiel zeigt Ihnen, wie Sie mit einer normalen HTML-Liste und ein wenig CSS eine Navigation aufbauen und diese auch ohne großen Aufwand auf Ihre eigenen Bedürfnisse anpassen können.

SEO und Usability

© Archiv

Auch bei magnus.de werden interne Verlinkungen an verschiedenen Stellen eingesetzt, wie beispielsweise bei der Empfehlung verwandter Themen.

Einfache Navigation mit Tabelle

Stellen Sie sich als Erstes eine HTML-Liste mit den wichtigsten Navigationselementen zusammen und bilden Sie diese in HTML ab.

<ul><li><a href=
"#">Home</a></li><li><a href=
"#">Über</a><ul><li><a href=
"#">Team</a></li><li><a href="#">Niederlassung</a></li></ul></li><li><a href="#">Kontakt</a><ul><li><a href="#">München</a></li><li><a href="#">Berlin</a></li><li><a href="#">Stuttgart</a></li></ul></li></ul>

Da es eine zweistufige Navigation werden soll, haben wir die Liste als verschachteltes Element aufgebaut. Innerhalb der Rubrik Kontakt gibt es drei weitere Unterpunkte München, Stuttgart und Berlin, welche die Niederlassungen darstellen sollen.

ul { margin: 0; padding: 0;
list-style: none; width: 150px; }

Entfernen Sie nun als Erstes die einzelnen Aufzählungszeichen von der Liste und weisen Sie den Aufzählungspunkten eine feste Breite von 150 Pixeln zu. Alle Punkte erscheinen nun untereinander in einer Liste - nichts erinnert mehr an die zweistufige Aufzählung.

SEO und Usability

© Archiv

Mithilfe von CSS können Sie auch einfach Hitlisten aufbauen, die Sie als Ausgangspunkt für die interne Verlinkung hernehmen können.

Da wir ein mehrstufiges Menü darstellen wollen, müssen wir die zweite Navigationsebene versetzt darstellen und diese für entsprechend absolut positionieren. Für die Ausrichtung ist es notwendig, einen Bezugspunkt zu haben.

ul li { position:
relative; }

Auf Basis dieser Formatierung können Sie nun eine Anordnung der Unterelemente durchführen. Diese werden genau anschließend an das jeweilige Hauptmenü platziert. Der Abstand wurde bewusst um einen Pixel verringert. Somit überlappen die beiden Hierarchiestufen um einen Pixel und es scheint, als teilen Sie sich eine Außenwand.

li ul { position: absolute;
left: 149px; top: 0; display: none; }

Wenn Sie Ihre HTML-Seite in diesem Zustand aufrufen, werden Sie bemerken, dass die Elemente der zweiten Hierarchiestufe verschwunden sind und nur noch die Hauptpunkte Home, Über und Kontakt übrig geblieben sind.

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​".