Nahaufnahme eines Notizbuchs mit handgeschriebener Zeitleiste und farbigen Markierungen auf Holztisch

Vertikale Zeitleisten: Design und Best Practices

Wie Sie vertikale Zeitleisten bauen, die auf Mobilgeräten funktionieren und trotzdem visuell beeindruckend sind.

7 min Lesezeit Anfänger März 2026

Warum vertikale Zeitleisten?

Vertikale Zeitleisten sind eine großartige Möglichkeit, um Geschichten zu erzählen. Sie funktionieren hervorragend auf mobilen Geräten, wo horizontale Layouts oft zu Problemen führen. Das Wichtigste ist: Sie müssen nicht kompliziert sein.

In diesem Guide zeigen wir dir alles, was du wissen musst. Von der grundlegenden Struktur bis zu fortgeschrittenen Animationen. Du wirst sehen, dass es gar nicht so schwer ist, eine beeindruckende Zeitleiste zu bauen.

Desktop-Monitor zeigt eine vertikale Zeitleiste mit Meilensteinen und Verbindungslinien auf weißem Hintergrund

Die Grundstruktur aufbauen

Eine vertikale Zeitleiste braucht drei Hauptkomponenten: eine zentrale Linie, die Einträge und die Markierungen. Die zentrale Linie ist oft einfach ein vertikaler Strich — 2 bis 4 Pixel breit funktioniert normalerweise gut.

Die Einträge selbst sollten abwechselnd auf der linken und rechten Seite der Linie angeordnet sein. Das schafft Bewegung und verhindert, dass die Zeitleiste langweilig aussieht. Jeder Eintrag braucht einen Titel, ein Datum und eine kurze Beschreibung.

Tipp: Nutze CSS Grid oder Flexbox für die Anordnung. Es’s einfacher als du denkst, die Einträge richtig zu positionieren.

Code-Editor mit CSS-Code für vertikale Zeitleiste, Flexbox-Properties und Positioning-Techniken sichtbar

Smartphone-Bildschirm zeigt responsive vertikale Zeitleiste mit optimiertem Mobile-Layout und guter Lesbarkeit

Mobile-Optimierung ist entscheidend

Das Größte Problem mit Zeitleisten? Sie sehen auf Handys oft furchtbar aus. Die abwechselnde Anordnung funktioniert nicht, wenn der Bildschirm nur 375 Pixel breit ist.

Die Lösung ist einfach: Auf mobilen Geräten sollten alle Einträge auf einer Seite der Linie angeordnet sein. Normalerweise auf der rechten Seite. So sparst du Platz und die Zeitleiste wird lesbar. Der Übergang von Desktop zu Mobile passiert bei einer Media Query — meist bei 768 Pixeln Bildschirmbreite.

Alle Einträge rechts auf mobilen Geräten
Ausreichend Abstand zwischen den Einträgen
Schriftgröße auf 16px oder größer
Antippen auf Touch-Geräten muss einfach sein

Wichtiger Hinweis

Die Techniken und Best Practices in diesem Artikel basieren auf modernem Webdesign-Wissen und sind für Bildungszwecke gedacht. Jedes Projekt hat eigene Anforderungen und Einschränkungen. Teste deine Implementierung immer gründlich auf verschiedenen Geräten und Browsern, bevor du sie live schaltest. Browser-Kompatibilität und Performance sollten immer deine Priorität sein.

Styling und visuelle Details

Die Meilenstein-Markierungen sind das Herzstück jeder guten Zeitleiste. Sie sollten groß genug sein, um sie zu sehen — mindestens 16 bis 24 Pixel Durchmesser. Eine Farbe, die sich vom Hintergrund unterscheidet, ist wichtig.

Viele Designer verwenden einen Kreis mit Rand. Der innere Kreis ist oft weiß oder in der Hintergrundfarbe, während der äußere Rand die Brand-Farbe hat. Das erzeugt eine Art 3D-Effekt, der gut aussieht. Du kannst auch Icons in die Marker einbauen — das macht die Zeitleiste noch interessanter.

Close-up von verschiedenen Meilenstein-Markierungen mit unterschiedlichen Farben, Icons und Styling-Variationen

Laptop-Bildschirm mit Browser-Entwicklungstools zeigt Animation-Code und Timeline-Effekte für Scroll-Enthüllung

Animationen und Interaktionen

Animationen machen Zeitleisten lebendig. Der beste Ansatz ist die Scroll-Enthüllung — Einträge erscheinen, wenn der Nutzer zu ihnen scrollt. Das ist nicht nur hübsch anzusehen, es funktioniert auch besser auf der Performance.

Du brauchst dafür die Intersection Observer API. Das’s eine JavaScript-API, die erkennt, wenn ein Element im sichtbaren Bereich ist. Wenn ein Eintrag sichtbar wird, fügst du eine CSS-Klasse hinzu, die eine Animation auslöst. Sanfte Fade-ins oder Slide-ins funktionieren sehr gut. Halte die Animationsdauer unter 600 Millisekunden — alles darüber wirkt langsam.

Das Wichtigste zusammengefasst

Vertikale Zeitleisten sind eine wunderbare Möglichkeit, um Geschichten im Web zu erzählen. Sie funktionieren gut auf allen Geräten, wenn du sie richtig designst. Vergiss nicht: Die Struktur kommt zuerst, dann das Styling, und zuletzt die Animation.

Starte einfach mit den Grundlagen — eine vertikale Linie, einige Einträge und klare Daten. Baue darauf auf. Du wirst schnell merken, was funktioniert und was nicht. Die besten Zeitleisten entstehen durch Experimentieren und Testen. Viel Spaß beim Bauen!

Weitere Zeitleisten-Artikel erkunden