Sinnvoller Aufbau einer Website

Beim Aufbau einer Website gibt es viel Spielraum für Gestaltung, aber wenig für Experimente an der Grundstruktur. Der Grund ist einfach und stammt von Jakob Nielsen: Eure Besucher verbringen die allermeiste Zeit auf anderen Websites. Was sie dort gelernt haben, bringen sie mit — und erwarten es auch bei euch.

Dieses Tutorial beschreibt, welche Konventionen sich durchgesetzt haben, warum sie funktionieren und an welchen Stellen sich die Empfehlungen seit den frühen 2010er-Jahren geändert haben.

Womit Besucher rechnen

Ein paar Elemente sind so verbreitet, dass ihr Fehlen als Fehler wahrgenommen wird. Das Logo oben links, das zur Startseite führt. Eine Hauptnavigation, die auf jeder Unterseite an derselben Stelle steht. Ein Footer mit Impressum, Datenschutzerklärung und Kontakt. Bei größeren Seiten eine Suche.

Die Wirkung dieser Erwartungen ist gut beschreibbar. Werden sie erfüllt, fällt das niemandem auf — das ist der Normalzustand. Werden sie enttäuscht, entsteht ein Moment des Nachdenkens, und Nachdenken über Bedienung ist verlorene Aufmerksamkeit. Deshalb lohnt sich Originalität bei Inhalten, Bildsprache und Ansprache, an der Grundmechanik dagegen selten.

Struktur kommt vor Layout

Bevor irgendetwas positioniert wird, sollte feststehen, welche Seiten es gibt und wie sie zusammenhängen. Das ist die eigentliche Arbeit; das Layout ist danach vergleichsweise schnell erledigt.

Sinnvoll ist eine flache Hierarchie: Jede wichtige Seite sollte von der Startseite aus in wenigen Schritten erreichbar sein. Was tief in Unterebenen verschwindet, wird selten aufgerufen und von Suchmaschinen entsprechend eingeschätzt. Ebenso gehört die Adressstruktur früh geklärt — Adressen, die man später ändert, verlieren die aufgebaute Sichtbarkeit oder brauchen dauerhaft Weiterleitungen.

Beim Benennen der Navigationspunkte gilt: verständlich schlägt kreativ. „Leistungen“ findet jeder, „Was wir bewegen“ muss erst gedeutet werden.

Die kleine Ansicht ist die eigentliche Ansicht

Der wichtigste Unterschied zur ursprünglichen Fassung dieses Beitrags: Der Entwurf beginnt heute beim Telefon, nicht beim Desktop. Der überwiegende Teil der Zugriffe kommt von mobilen Geräten, und Google indexiert seit Jahren mit dem mobilen Crawler — die mobile Fassung ist die Grundlage der Bewertung, nicht eine Nebenausgabe.

Praktisch heißt das: Wenn die Inhalte in der schmalen Ansicht in einer sinnvollen Reihenfolge stehen und alles Wichtige mit dem Daumen erreichbar ist, lässt sich daraus eine Desktop-Ansicht ableiten. Umgekehrt entsteht meist ein Kompromiss.

Die vertikale Navigation in der linken Spalte, die früher als gleichwertige Variante galt, hat sich damit weitgehend erledigt. Üblich sind heute eine waagerechte Leiste oben, die auf kleinen Bildschirmen zu einem Menü zusammenklappt, und bei umfangreichen Seiten eine mitlaufende Kopfzeile.

Ein Wort zum Slider

Frühere Fassungen dieses Beitrags haben den Bilderslider unter den bewährten Elementen aufgeführt. Diese Empfehlung ziehen wir zurück.

Automatisch weiterlaufende Slider werden von Besuchern überwiegend ignoriert, weil sie wie Werbung aussehen. Wer doch etwas lesen möchte, wird von der Weiterschaltung unterbrochen. Technisch kommt hinzu, dass mehrere große Bilder in der ersten Bildschirmansicht den Largest Contentful Paint verschlechtern und nachgeladene Elemente das Layout verschieben — beides geht direkt in die Core Web Vitals ein, siehe dazu den Wiki-Eintrag zu Page Speed.

Eine feste Aussage mit einem Bild und einer klaren Handlungsaufforderung leistet in fast allen Fällen mehr als fünf rotierende.

Was in den sichtbaren Bereich gehört

Der Begriff „above the fold“ stammt aus dem Zeitungsdruck und meinte einmal eine feste Linie. Bei Bildschirmgrößen von Telefon bis Breitbildmonitor gibt es die nicht mehr. Was bleibt, ist die Beobachtung, dass der zuerst sichtbare Bereich überdurchschnittlich viel Aufmerksamkeit bekommt — die Einordnung dazu steht im Wiki-Eintrag Above the fold.

Dorthin gehört, worum es auf der Seite geht, in verständlichen Worten, und der nächste Schritt. Nicht dorthin gehört ein bildschirmfüllendes Stimmungsbild ohne Aussage — und schon gar kein Einwilligungsbanner, das die Inhalte verdeckt und dessen Ablehnen-Schaltfläche man suchen muss.

Semantisches HTML statt bloßer Optik

Ein Aufbau ist erst dann sauber, wenn er nicht nur aussieht wie eine Struktur, sondern eine ist. Kopfbereich, Navigation, Hauptinhalt und Fußbereich gehören in die dafür vorgesehenen HTML-Elemente. Screenreader nutzen diese Bereiche zur Orientierung, und Suchmaschinen erkennen daran, welcher Teil der Seite der eigentliche Inhalt ist.

Dasselbe gilt für Überschriften: eine H1 je Seite, darunter H2 und H3 in logischer Abfolge, nicht nach Schriftgröße ausgewählt. Warum das auch für die Sichtbarkeit zählt, erklärt der Beitrag zur Verwendung von Überschriften.

Breadcrumbs sind weiterhin sinnvoll, besonders bei Shops mit vielen Kategorien. Sie zeigen die Position innerhalb der Struktur und lassen sich zusätzlich als strukturierte Daten auszeichnen, sodass Google den Pfad im Suchergebnis anzeigen kann.

Barrierefreiheit gehört in den Entwurf

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz unter anderem für Onlineshops und Dienstleistungen im elektronischen Geschäftsverkehr. Unabhängig davon, ob euer Angebot darunterfällt, sind die Anforderungen die, die eine Seite ohnehin besser bedienbar machen.

Der alte Rat „schwarz auf weiß liest sich am besten“ lässt sich heute genauer fassen: Fließtext braucht ein Kontrastverhältnis von mindestens 4,5 zu 1 gegenüber dem Hintergrund. Dazu kommen Bedienbarkeit mit der Tastatur, sichtbare Fokusmarkierungen, beschriftete Formularfelder, Alternativtexte für Bilder mit Informationsgehalt und ausreichend große Klickflächen. Nachträglich eingebaut wird daraus ein eigenes Projekt, im Entwurf berücksichtigt kostet es kaum Zeit. Wie wir das gestalterisch angehen, steht unter User Interface Design.

Vorlagen sind ein guter Ausgangspunkt

Es spricht nichts dagegen, sich an etablierten Seiten der eigenen Branche zu orientieren oder mit einer fertigen Vorlage zu starten. Prüft dabei zwei Dinge, die man auf Vorschaubildern nicht sieht: wie viel die Vorlage an Skripten und Schriften mitbringt — überladene Themes sind eine häufige Ursache langsamer Seiten — und ob sie noch gepflegt wird. Welche Systeme sich dafür eignen, steht unter Content-Management-Systeme.

Und danach: Schaut euch an, was Besucher tatsächlich tun. Ein Aufbau, der auf dem Papier schlüssig ist, kann in der Nutzung trotzdem an einer Stelle klemmen, die im Entwurf niemandem aufgefallen ist.