Perfekt vernetzte Website

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

7.11.2009 von Redaktion pcmagazin und Andreas Hitzig

ca. 2:20 Min
Ratgeber
  1. [Workshop] Bessere Web-Site mit CSS - Usability verbessern
  2. Teil 2: [Workshop] Bessere Web-Site mit CSS - Usability verbessern
  3. Teil 3: [Workshop] Bessere Web-Site mit CSS - Usability verbessern
  4. Teil 4: [Workshop] Bessere Web-Site mit CSS - Usability verbessern
  5. Teil 5: [Workshop] Bessere Web-Site mit CSS - Usability verbessern
  6. Teil 6: [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
Auch bei magnus.de werden interne Verlinkungen an verschiedenen Stellen eingesetzt, wie beispielsweise bei der Empfehlung verwandter Themen.
© Archiv

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
Mithilfe von CSS können Sie auch einfach Hitlisten aufbauen, die Sie als Ausgangspunkt für die interne Verlinkung hernehmen können.
© Archiv

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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

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

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

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

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

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

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

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