Redesign Blog-Seite

Aus einer Liste wurde ein zweispaltiges Layout: links Doku nach Thema gruppiert, rechts Journal als Zeitleiste. Auf Mobile teilt sich das in einen Tab-Switch auf. Der Rest ist iterativer Feinschliff über mehrere Sessions.

Entscheidung zum Redesign

Die alte Tabelle hatte ein konzeptuelles Problem: sie behandelte Setup-Anleitungen und persönliche Reflexionen identisch. Ein VPS-Security-Setup und eine Redesign-Story landen in derselben Sortierreihe, obwohl ich sie ganz unterschiedlich lese.

Setup-Posts schlage ich nach. Sie sind Referenz, ich gehe gezielt rein, wenn ich etwas brauche. Reflexions-Posts lese ich linear. Sie sind eine Art Tagebuch dessen, was sich an der Website gerade verändert.

Wenn das im Kopf zwei Modi sind, kann die Übersicht auch zwei Modi anbieten.

Der Startpunkt war wie schon bei der Landingpage claude.ai/design im Browser. Diesmal mit Fokus auf ein zweispaltiges Konzept, das aus dem Mockup direkt in die lokale Umsetzung wandern konnte.

Zwei Spalten, zwei Lese-Modi

Auf Desktop läuft das jetzt als zweispaltiges Grid: links Doku mit gruppierten Themen, rechts Journal als chronologische Zeitleiste. Beide gleich breit, beide gleichzeitig im Blick.

📖 Doku [7]              🖋 Journal [6]

── SERVER & SECURITY ──  MAI 2026 ●──── 5
[Card]                   [Card]
[Card]                   [Card]
── WEB & DEPLOYMENT ──   [Card]
[Card]                   [Card]
[Card]                   [Card]
── WORKFLOW & TOOLS ──   APRIL 2026 ●──── 1
[Card]                   [Card]
[Card]
[Card]

Jede Spalte hat ein eigenes Symbol, eine eigene Akzentfarbe und ein eigenes Strukturierungsprinzip. Doku ist nach Themen-Gruppen geordnet, Journal nach Monaten. Die Zähler oben (7 und 6) werden zur Laufzeit aus dem DOM gezählt, damit beim Hinzufügen neuer Posts keine Zahl manuell nachgepflegt werden muss.

Doku nach Thema gruppiert

Auf der Doku-Seite war die Frage: wie zeige ich Gruppen ohne dass jeder Eintrag eine Topic-Pille trägt? Eine Pille pro Eintrag wäre redundant gewesen (sie würde dreimal das gleiche Topic wiederholen, wenn drei Posts im selben Bereich liegen).

Die Lösung wurde ein Section-Divider, der das Topic einmal pro Gruppe zeigt und gleichzeitig als Trennelement zwischen den Gruppen wirkt:

──── SERVER & SECURITY ────
[ 17.05.2026 ]
[ Raspberry Pi Security Setup ]
[ Subtitle ]

[ 03.05.2026 ]
[ VPS Security Setup ]
[ Subtitle ]

──── WEB & DEPLOYMENT ────
...

Der Divider ist eine zentrierte Topic-Bezeichnung mit hairlines links und rechts, im blauen Doku-Akzent getönt. Macht zwei Jobs gleichzeitig: Label und Trenner.

Journal als Zeitleiste

Auf der Journal-Seite war die Frage anders. Hier gibt es keine Themen, sondern Zeit. Der Monatswechsel ist das einzige strukturierende Element. Statt einer schlichten Überschrift wurde der Monat zu einem Timeline-Element:

MAI 2026  ●──────────────  4 Beiträge

[ 21.05.2026 ]
[ Redesign meiner Landingpage ]
...

Der goldene Punkt links markiert den Anfang des Monats. Eine durchgehende Linie spannt sich zur rechten Seite, wo die Anzahl der Beiträge in diesem Monat als kleine Pille endet. Der Punkt pulsiert leise (über eine CSS-Animation, mit Respekt vor prefers-reduced-motion).

Damit hat das Journal eine zeitliche Lesart auf einen Blick: welcher Monat war produktiv, welcher ruhig, wo sind die Pausen.

Was auf Mobile passiert

Zwei Spalten nebeneinander funktionieren auf einem Telefon nicht. Statt verkleinerter Kacheln wurde die Mobile-Variante ein Tab-Switch:

[ 📖 Doku  7  ]    [ 🖋 Journal  5  ]
[ nach Thema ]    [ chronologisch  ]

(Inhalt der aktiven Spalte darunter)

Die Zähler in den Tabs sind in der jeweiligen Spalten-Farbe (Blau für Doku, Gold für Journal), damit die mentale Zuordnung über alle Viewports hinweg gleich bleibt. Welcher Tab zuletzt aktiv war, wird im localStorage gemerkt, damit ein Reload nicht zurück auf die Standardansicht wirft.

Karten, die gleich aussehen

Beide Seiten nutzen dieselbe Karten-Form: Datum oben, Titel, kurze Beschreibung. Vorher hatte Journal pro Eintrag noch eine Topic-Pille direkt neben dem Datum, aber sie verdoppelte nur was im Titel sowieso steht (Landingpage als Pille neben dem Titel Redesign meiner Landingpage). Raus damit, Karten wurden ruhiger.

Die Hover-Zustände sind farbcodiert: Doku-Karten bekommen einen blauen Border und blauen Titel beim Mouse-Over, Journal-Karten gold. Dadurch fühlt sich auch beim Berühren klar, in welcher Spalte man gerade ist.

Kleine Details die zählen

Über mehrere Sessions hat sich eine Liste an kleinen Polish-Schritten angesammelt, die einzeln unscheinbar wirken, zusammen aber den Unterschied machen:

• Hintergrund-Gradient ist position: fixed, damit der Übergang von Content zu Footer keinen sichtbaren Bruch erzeugt.
• Sticky-Footer-Pattern: Auf kurzen Seiten füllt das Main den Viewport, der Footer sitzt unten, kein leerer Scroll.
• Karten-Schatten auf der Projects-Seite entfernt, weil sie auf dem dunklen Hintergrund wie ein Halo wirken.
• Footer ergänzt auf Blog, Projects und About (mit hellem Theme), nicht nur auf der Landingpage.
• Date-Format überall ausgeschrieben (17.05.2026 statt 17.05).
• Card-Breiten symmetrisch 1fr 1fr, damit die beiden Spalten optisch gleichwertig sind.

Jeder Punkt für sich klein. Zusammen merkt man den Unterschied zur Vorversion sofort.

Iteration über mehrere Sessions

Die erste Version stand nach einer Session. Die finale Version nach mehreren Sessions voller kleiner Anpassungen: Farben, Abstände, Animations-Tempi, Padding-Werte. Software ist nie fertig, manche Versionen sind nur einfach gut genug zum Veröffentlichen.