Wie kommt man zu einem Seitenaufbau, der zum Inhalt passt? Diese Frage stand am Anfang der ursprünglichen Fassung dieses Beitrags aus dem Jahr 2006 – und sie ist geblieben. Was sich geändert hat, sind die Rahmenbedingungen: Damals entwarf man ein festes Bild für einen Bildschirm, heute ein flexibles System für unbekannte Geräte.
Der Ansatz von damals
Die ursprüngliche Fassung empfahl eine ungewöhnliche Übung: aus dem Fenster schauen. Der Gedanke dahinter war, Konturen aus einer Landschaft oder aus Gegenständen im Raum gedanklich in zweidimensionale Flächen zu übersetzen und daraus eine Aufteilung für den Seitenkopf abzuleiten. Nicht exakt nachgezeichnet, sondern schemenhaft – gerade das Ungefähre sollte zu brauchbaren Formen führen.
Daneben standen drei Grundsätze, die damals wie heute tragen:
- Der Inhalt bestimmt den Aufbau. Das Beispiel im Original: Bei einem Schlosserladen liegt es nahe, einen Schlüssel als Element an auffälliger Stelle einzubauen.
- Das Logo gehört an eine feste, auffällige Position – das steigert den Wiedererkennungswert.
- Die Navigation ist das wichtigste Element. Ohne sie ist eine Seite nicht benutzbar.
Der entscheidende, damals unausgesprochene Rahmen: Man entwarf für eine Bildschirmgröße. Übliche Layouts waren 760 oder 960 Pixel breit, zentriert, mit fester Höhe im Kopfbereich. Der Entwurf konnte deshalb wie ein Plakat gedacht werden.
Was sich grundlegend geändert hat
Seit etwa 2012 gibt es diese eine Bildschirmgröße nicht mehr. Ein Layout muss vom Telefon im Hochformat bis zum breiten Monitor funktionieren. Damit hat sich die Aufgabe verschoben: Statt eines Bildes entwirft man ein Regelwerk.
Von der Fläche zum Raster
Wo früher Bereiche in Pixeln festgelegt wurden, beschreibt man heute Verhältnisse und Grenzen. CSS Grid macht das direkt lesbar:
.seite {
display: grid;
grid-template-columns: 1fr min(70ch, 100%) 1fr;
gap: 2rem;
}
/* Inhalt landet automatisch in der mittleren Spalte */
.seite > * {
grid-column: 2;
}
Der Wert min(70ch, 100%) ersetzt die frühere feste Breite: höchstens 70 Zeichen breit, aber nie breiter als der verfügbare Platz.
Umbrüche ohne Bruchpunkte
Lange Zeit definierte man feste Umbruchpunkte für Telefon, Tablet und Monitor. Heute lassen sich viele Layouts so beschreiben, dass sie ohne solche Punkte auskommen:
.karten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
Diese eine Regel ergibt auf dem Telefon eine Spalte, auf dem Tablet zwei und auf dem Monitor drei oder vier – ohne dass eine Größe genannt wird.
Zuerst die kleine Ansicht
Der wohl größte methodische Unterschied: Man beginnt heute beim schmalen Bildschirm. Das zwingt zu einer Rangfolge – auf 375 Pixel Breite passt nur, was wirklich wichtig ist. Was dort funktioniert, lässt sich nach oben erweitern; der umgekehrte Weg führt fast immer zu überladenen mobilen Ansichten.
Die Navigation: aus einem Element wurden mehrere Zustände
Der Satz „die Navigation ist das wichtigste Element“ gilt unverändert – nur ist sie heute kein einzelnes Element mehr, sondern hat mehrere Erscheinungsformen. Was dabei zählt:
- Erreichbarkeit vor Eleganz. Ein eingeklapptes Menü spart Platz, kostet aber einen Klick. Die zwei bis drei wichtigsten Ziele sollten auch im schmalen Layout direkt sichtbar bleiben.
- Position zeigen. Der aktuelle Menüpunkt muss erkennbar sein – mit
aria-current="page"auch für Screenreader. - Tastaturbedienbarkeit. Jeder Punkt muss per Tabulator erreichbar sein, mit sichtbarem Fokus.
- Ausreichend große Ziele. Auf Touchscreens gelten etwa 44 mal 44 Pixel als Untergrenze.
Was von der Landschaftsübung bleibt
Der Vorschlag, Formen aus der Umgebung abzuleiten, klingt heute nach einer Kuriosität – der Kern dahinter ist aber weiterhin gültig: Ein Entwurf sollte nicht am Bildschirm entstehen. Wer direkt im Editor beginnt, landet fast automatisch bei dem, was das gewählte Framework nahelegt.
Die heutige Entsprechung ist das Wireframe: eine grobe Skizze ohne Farben und Schriften, die nur Bereiche, Rangfolge und Umbruchverhalten festhält. Ob auf Papier oder in einem Programm, ist zweitrangig. Entscheidend ist, dass Struktur und Gestaltung getrennt entschieden werden – genau das war schon 2006 der Punkt.
Eine Reihenfolge, die sich bewährt hat
- Inhalt sammeln. Was muss auf die Seite? Ohne diese Liste entwirft man ins Blaue.
- Rangfolge festlegen. Was sieht ein Besucher zuerst, was danach?
- Grob skizzieren, schmal zuerst. Nur Blöcke, keine Details.
- Verhalten festlegen. Was passiert, wenn mehr Platz da ist?
- Erst dann gestalten. Farben, Schriften, Bilder.
Fazit
Der Entwurf eines Seitenaufbaus ist von einer gestalterischen zu einer konzeptionellen Aufgabe geworden. Man legt nicht mehr fest, wie die Seite aussieht, sondern wie sie sich verhält. Die Grundfragen – was ist wichtig, was gehört zusammen, wo findet sich der Besucher zurecht – sind dieselben geblieben.
Wenn Sie einen Relaunch planen oder eine bestehende Seite überarbeiten möchten, begleiten wir Sie als Webdesign-Agentur von der Konzeption bis zur Umsetzung.
Kommentare