Zum Inhalt springen

Content-First-Ansatz

Männliche Person, frontal, schaut in die Kamera; trägt kariertes Hemd über dunkelfarbigem T‑Shirt; heller Innenraum mit unscharfem Monitor oder Poster links und Fenster rechts.

von Richard Albrecht am 23.09.2026

Der Content-First-Ansatz ist ein Vorgehen, bei dem der fertige Inhalt die Grundlage des Entwurfs bildet und das Layout aus ihm heraus entsteht. Gearbeitet wird mit echten Texten, echten Bildern und der tatsächlichen Zahl an Unterseiten, bevor die erste Gestaltung entsteht. Mobile-First und Desktop-First legen fest, bei welcher Bildschirmbreite ein Entwurf beginnt. Der Content-First-Ansatz setzt eine Ebene davor an und klärt, was überhaupt dargestellt werden soll.

Content-First-Ansatz

Vorgehen, bei dem der fertige Inhalt die Grundlage des Entwurfs bildet und das Layout aus ihm heraus entsteht.
Beispiel: „Wir arbeiten content-first: Die Texte der Leistungsseiten stehen, bevor das erste Wireframe gezeichnet wird.“

Auch: Content First, Content-First-Design. Im Deutschen findet sich „Inhalt zuerst“ als Umschreibung, im Projektalltag ist der englische Begriff üblicher.

Abgrenzung: Mobile-First und Desktop-First beschreiben die Bildschirmbreite, mit der ein Entwurf beginnt. Der Content-First-Ansatz beschreibt sein Ausgangsmaterial und lässt sich mit beiden Richtungen verbinden.

Warum der Ansatz auf einer anderen Ebene liegt

Ein Entwurf mit Blindtext trifft stillschweigend Annahmen über den Inhalt: dass eine Überschrift in eine Zeile passt, dass jedes Teammitglied ein Porträtfoto im Hochformat hat, dass es genau sechs Leistungen gibt. Kommt später der echte Text, hält das Raster diesen Annahmen nicht stand. Die Überschrift läuft über drei Zeilen, ein Produktname hat 40 Zeichen, und statt sechs Leistungen sind es elf.

Content-First dreht die Reihenfolge um. Aus dem vorhandenen Material entstehen die Bausteine, und deshalb bleibt die Frage nach der Bildschirmbreite davon unberührt. Ein content-first entwickeltes Seitenkonzept lässt sich mobile-first genauso umsetzen wie desktop-first.

Was sich im Projektablauf ändert

Am Anfang steht ein Inventar der bestehenden Inhalte: Welche Seiten gibt es, welche davon werden übernommen, überarbeitet oder gestrichen? Daraus entsteht das Inhaltsmodell, also die Festlegung, aus welchen Feldern ein Seitentyp besteht. Erst danach wird gestaltet, und der Entwurf zeigt von der ersten Runde an echten Text.

Die Abstimmung verschiebt sich damit nach vorn. Diskutiert wird über Aussagen und Reihenfolgen, solange Änderungen nur Textarbeit bedeuten. Beim umgekehrten Weg fallen dieselben Diskussionen an, wenn das Design bereits steht und jede Korrektur zusätzlich Layoutarbeit auslöst.

Warum der Ansatz im Alltag oft scheitert

Inhalte sind in Relaunch-Projekten fast immer der Engpass. Texte hängen an Personen mit vollem Kalender, Freigaben brauchen eine Runde mehr als geplant, und gleichzeitig wollen alle Beteiligten früh etwas sehen. Ein Projekt, das auf den kompletten Content wartet, steht still.

Wir empfehlen einen Mittelweg: fertige Inhalte für eine Musterseite je Seitentyp, für die übrigen Seiten die Bestandstexte der alten Website. Das reicht, um Zeilenlängen, Bildformate und Textmengen realistisch zu prüfen, und hält das Projekt in Bewegung.

Siehe auch:

Mobile-First Design

Vorgehen, bei dem Layout und Inhalt zuerst für die kleine Ansicht entworfen und danach für größere Bildschirme erweitert werden.

#Responsive Design

Responsive Design

Gestaltungsansatz, bei dem sich ein einziges Layout fließend an die Breite des Anzeigefensters anpasst.

#Responsive Design #Webdesign-Grundlagen

Content-Konzeption

Die Planung der Inhalte einer Website nach Themen, Formaten, Zuständigkeiten und Pflegeaufwand.

#Webdesign-Grundlagen

Website-Konzeption

Die Planung einer Website vor der Umsetzung: Ziele, Zielgruppen, Inhalte, Struktur und Anforderungen an Technik und Redaktion.

#Webdesign-Grundlagen