Mal ehrlich: Wie baust du eine neue Website? Hast du einen klaren Ablauf – oder fängst du jedes Mal wieder bei null an, klickst dich durch den Page Builder und hoffst, dass am Ende alles zusammenpasst?

Die meisten Webentwickler arbeiten “freestyle”. Jedes Projekt sieht anders aus, nicht nur im Design, sondern im gesamten Aufbau. Das Ergebnis: Seiten, die schwer zu warten sind, Code, der nur der Ersteller versteht, und Kunden, die bei jeder kleinen Änderung wieder beim Entwickler anklopfen müssen.

Es gibt einen besseren Weg. Das 5S-Framework ist ein systematischer Ansatz, der dir eine klare, wiederholbare Reihenfolge für jedes Webprojekt gibt – egal ob Onepager oder komplexe E-Commerce-Plattform. Fünf Schritte, immer in der gleichen Reihenfolge. Kein Raten, kein Freestyle.

Und ja: Auch nach 30 Jahren Webentwicklung lerne ich dazu. Dieses Framework hat meinen Workflow nochmal geschärft.

Die Idee: Warum die Reihenfolge entscheidend ist

Der häufigste Fehler in der Webentwicklung? Zu früh stylen. Farben wählen, Abstände festlegen, Animationen einbauen – bevor die Struktur steht. Das ist, als würdest du ein Haus streichen, bevor die Wände stehen.

Das 5S-Framework zwingt dich in eine logische Reihenfolge:

Structure → Semantics → Selectors → Styling → Systems

Jeder Schritt baut auf dem vorherigen auf. Überspringst du einen, rächt sich das später. Hältst du die Reihenfolge ein, entsteht Code, der wartbar, skalierbar und verständlich ist.

S1: Structure – Die Grundstruktur

Alles beginnt mit Boxen auf der Seite. Kein Styling, keine Farben, keine Schriften. Nur die Frage: Welche Inhalte gibt es, und wie sind sie gruppiert?

In der Praxis heisst das:

Klingt simpel, wird aber ständig übersprungen. Wer direkt im Page Builder anfängt, Farben und Abstände zu setzen, baut auf einem wackligen Fundament.

Praxistipp: Öffne deinen Builder, setze nur Div-Container und Gruppen – ohne eine einzige Style-Eigenschaft. Wenn die Struktur logisch ist, bist du bereit für den nächsten Schritt.

S2: Semantics – Die richtigen HTML-Tags

HTML ist mehr als nur ein Container für Inhalte. Die Tags, die du wählst, kommunizieren Bedeutung – an Browser, Screenreader, Suchmaschinen und andere Entwickler.

Der Unterschied:

<!-- Schlecht: Alles ist ein div -->
<div class="navigation">
  <div class="nav-item">Startseite</div>
</div>

<!-- Gut: Semantische Tags -->
<nav>
  <a href="/">Startseite</a>
</nav>

Beide sehen im Browser gleich aus. Aber die zweite Version sagt dem Browser: “Das ist eine Navigation.” Ein Screenreader kann Nutzern direkt zur Navigation springen lassen. Google versteht die Seitenstruktur besser. Und ein anderer Entwickler sieht sofort, was dieser Code-Block tut.

Die wichtigsten semantischen Tags, die du kennen solltest:

Semantik kostet dich keine Extra-Zeit, macht aber den Unterschied zwischen einer mittelmässigen und einer professionellen Website.

S3: Selectors – Gezielt ansprechen

Bevor du irgendetwas stylen kannst, musst du es auswählen können. Das klingt trivial, ist aber der Punkt, an dem viele Projekte chaotisch werden.

CSS-Selektoren bestimmen, welche Elemente dein Styling trifft. Und wenn du hier unsauber arbeitest – zu spezifische Selektoren, !important überall, IDs statt Klassen – hast du später ein Wartungsproblem.

Was du verstehen musst:

Ein sauberes Naming-System hilft enorm. Ich arbeite seit Jahren mit BEM (Block-Element-Modifier):

.card { }
.card__title { }
.card__title--highlighted { }

Das ist vorhersagbar, lesbar und kollidiert nicht mit anderen Styles. Ob du BEM oder ein anderes System nutzt, ist zweitrangig – Hauptsache, du hast ein System.

S4: Styling – Jetzt wird’s visuell

Erst im vierten Schritt kommt das, womit die meisten anfangen: Farben, Schriften, Abstände, Animationen.

Aber weil du die vorherigen drei Schritte gemacht hast, ist Styling jetzt deutlich einfacher. Die Struktur steht, die Tags sind semantisch korrekt, und du hast ein klares Selektoren-System.

Wichtige Prinzipien beim Styling:

Tokenisierung: Statt überall #2563EB oder 16px zu schreiben, definierst du Werte einmal zentral – als CSS Custom Properties (Variablen) oder über ein Framework.

:root {
  --color-primary: #2563EB;
  --space-m: 1.5rem;
  --font-size-base: 1rem;
}

Änderst du später die Primärfarbe, änderst du sie an einer Stelle – nicht an 47 verschiedenen.

Relationale Werte: Abstände und Schriftgrössen sollten in Beziehung zueinander stehen. Wenn dein Basis-Abstand 1rem ist, dann sind grössere Abstände 1.5rem, 2rem, 3rem – nicht zufällige Pixel-Werte.

Framework nutzen: CSS-Frameworks wie AutomaticCSS nehmen dir viel Tokenisierungs-Arbeit ab. Kein Muss, aber eine enorme Zeitersparnis bei grösseren Projekten.

S5: Systems – Vom Einzelstück zur Architektur

Der letzte Schritt trennt statische Einmal-Websites von professionellen, skalierbaren Projekten.

“Systems” bedeutet: Du baust nicht einzelne Seiten, sondern ein System, das Seiten generiert. In WordPress heisst das konkret:

Ein Beispiel aus der Praxis: Bei einem Immobilien-Projekt habe ich ein System gebaut, das Objekte automatisch von einer API synchronisiert und über ein Template mit dynamischer Filtersuche ausgibt. Keine einzelne Seite pro Objekt – ein System, das hunderte Objekte verwaltet.

Das ist der Unterschied zwischen einer Website, die bei 20 Einträgen noch funktioniert, und einer, die bei 500 genauso gut läuft.

Warum dieses Framework funktioniert

Die Stärke des 5S-Frameworks liegt in seiner Einfachheit:

Wiederholbar: Jedes Projekt, gleicher Ablauf. Du musst nicht jedes Mal neu überlegen, wo du anfängst. Das spart Zeit und reduziert Fehler.

Skalierbar: Der gleiche Ansatz funktioniert für einen Onepager und für einen Shop mit 500 Produkten. Die Tiefe ändert sich, der Prozess bleibt.

Wartbar: Wenn du in sechs Monaten an den Code zurückkehrst – oder ein anderer Entwickler – ist die Logik nachvollziehbar. Struktur, Semantik, Selektoren, Styling, Systems. Alles an seinem Platz.

Teamfähig: Sobald mehrere Leute an einem Projekt arbeiten, ist ein gemeinsamer Workflow Gold wert.

Mein Fazit

Ich baue seit 1995 Websites. In der Zeit habe ich vieles gesehen – von HTML-Tabellen-Layouts über Flash bis zu modernen Page Buildern. Was sich nie geändert hat: Struktur und sauberer Code gewinnen langfristig immer.

Das 5S-Framework gibt dem, was gute Entwickler intuitiv machen, einen Namen und eine klare Reihenfolge. Ob du mit Bricks, Etch oder purem Code arbeitest – die Prinzipien sind universell.

Meine Empfehlung: Probier es beim nächsten Projekt aus. Nimm dir die fünf Minuten, um zuerst nur die Struktur aufzubauen, bevor du an Farben denkst. Du wirst den Unterschied merken.

Ressourcen