Wie eine Website technisch entsteht: HTML, CSS und Vorlagen
Eigene Styles, Bootstrap oder Tailwind? Was Design-Tokens sind, warum dieselbe Kachel nur einmal existieren darf und weshalb moderne Seiten ihre Spalte fragen statt das Fenster. Ein Blick in den Maschinenraum – ohne Fachchinesisch.
Wenn ein Entwurf fertig ist, fängt die eigentliche Arbeit an. Aus einem Bild wird eine Seite, die auf einem Telefon von 2019 genauso funktioniert wie auf einem 32-Zoll-Bildschirm, die jemand mit der Tastatur bedienen kann und die sich in zwei Jahren noch ändern lässt. Wie das passiert, ist kein Geheimnis. Es sind drei Schichten, und sie werden in dieser Reihenfolge gebaut.
Zuerst die Struktur, nicht das Aussehen
Am Anfang steht HTML, und HTML beschreibt Bedeutung, nicht Aussehen. Hier ist eine Überschrift, dort eine Liste, das ist die Navigation, das der Hauptinhalt, das die Fußzeile. Ob die Überschrift am Ende groß und blau ist, spielt in dieser Schicht keine Rolle.
Der Test dafür ist einfach: Schalten Sie in Gedanken das Aussehen ab. Bleibt ein Dokument übrig, das man von oben nach unten lesen kann und das sinnvoll gegliedert ist? Dann stimmt die Struktur. Genau so liest ein Screenreader die Seite, und ungefähr so liest eine Suchmaschine sie.
Die Gliederung aus Überschriften ist dabei das Rückgrat. Eine Seite hat genau eine erste Ebene – das, worum es geht. Darunter zweite Ebenen für die Abschnitte, darunter dritte. Keine Sprünge, keine Überschrift, die nur deshalb eine ist, weil sie größer aussehen soll.
Dann die Gestaltung: eigenes CSS, Bootstrap oder Tailwind?
Diese Frage wird im Netz mit Inbrunst diskutiert und hat in der Praxis eine nüchterne Antwort: Es kommt darauf an, wie viel von der Seite eigen sein soll.
Ein Framework als Gerüst
Bootstrap bringt ein Raster, Abstände und ein paar fertige Bauteile mit. Sein Ruf, langweilig auszusehen, stimmt – aber er gilt der Voreinstellung, nicht dem Werkzeug. Wer das mitgelieferte Blau, die mitgelieferten Rundungen und die mitgelieferte Schrift übernimmt, bekommt eine Seite, die aussieht wie zehntausend andere. Wer sie austauscht, bekommt ein Raster, das zuverlässig funktioniert, und darauf ein eigenes Gesicht.
Tailwind geht den anderen Weg: keine fertigen Bauteile, sondern viele kleine Klassen, aus denen man sie zusammensetzt. Das ist schnell und sehr flexibel, verlagert die Gestaltung aber ins HTML. Für ein Team mit Entwurfssystem ist das ausgezeichnet. Für einen Kunden, der später selbst eine Kachel anpassen möchte, ist es eine Zumutung.
Eigenes CSS
Alles, was eine Seite unverwechselbar macht, ist am Ende eigenes CSS – ganz gleich, welches Gerüst darunter liegt. Die Frage ist nicht «Framework oder nicht», sondern wie viel Prozent der Gestaltung aus der Voreinstellung stammt. Bei einer Website, die nach ihrem Betrieb aussehen soll, sind es wenige.
Design-Tokens: die Stellschrauben an einer Stelle
Der wichtigste Handgriff kostet fast nichts. Farben, Rundungen, Schriftgrößen und Abstände werden nicht an hundert Stellen eingetragen, sondern einmal als Variablen definiert – und alles andere verweist darauf.
:root {
--brand: #4f39c4;
--radius: 10px;
--ink: #1b1f27;
}
.projekt-karte {
border-radius: var(--radius);
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}Der Unterschied zeigt sich beim ersten Änderungswunsch. «Das Blau ist zu dunkel» ist dann ein Wert, nicht eine Suche durch vierzig Dateien. Und eine zweite Website für einen anderen Betrieb bekommt dieselbe Technik mit anderen Werten – ohne dass etwas doppelt gebaut wird.
Dann die Vorlagen
Eine Seite besteht aus Teilen, die immer wieder vorkommen: eine Kachel, eine Kopfzeile, ein Formular, eine Kachel für Referenzen. Jedes dieser Teile darf im Projekt genau einmal existieren.
Das klingt selbstverständlich und wird trotzdem ständig verletzt. Die Projektkachel auf der Startseite und die auf der Übersichtsseite sehen gleich aus, also baut man sie zweimal – einmal hier, einmal dort. Ein halbes Jahr später verbessert jemand die eine. Die andere bleibt, wie sie war. Niemandem fällt es auf, bis ein Kunde fragt, warum die Bilder auf der einen Seite abgeschnitten sind.
Deshalb ist die Vorlage nicht eine Frage der Ordnungsliebe, sondern der Verlässlichkeit: Eine Verbesserung soll überall ankommen, wo das Teil steht.
Responsiv heißt heute etwas anderes als vor zehn Jahren
Lange hat man Seiten an Bildschirmbreiten angepasst: «unter 768 Pixeln untereinander». Das war naheliegend – und es ist die falsche Frage. Wie viel Platz ein Bauteil hat, entscheidet nämlich nicht der Bildschirm, sondern die Spalte, in der es steht.
Eine Kachel in einem Dreierraster ist auf einem 1600 Pixel breiten Monitor rund 360 Pixel breit. Fragt sie das Fenster, hält sie sich für riesig und stellt Bild und Text nebeneinander – jedes 160 Pixel breit. Das Bild ist dann eine Briefmarke und die Kachel doppelt so hoch wie nötig.
Moderne Browser können das richtig herum: Ein Bauteil misst den Platz, den es tatsächlich hat, und entscheidet danach. Dasselbe Bauteil steht dann in einer breiten Spalte nebeneinander und in einer schmalen untereinander – ohne dass irgendwo eine Bildschirmbreite eingetragen ist, die in zwei Jahren nicht mehr stimmt.
Was davon für Sie sichtbar wird
Nichts davon steht auf der fertigen Seite. Sie merken es an drei Stellen: Die Seite lädt schnell, weil nichts mitgeschleppt wird, was niemand braucht. Sie funktioniert auf Geräten, an die beim Bauen niemand gedacht hat. Und eine Änderung ist eine Frage von Stunden, nicht von Wochen.
Das ist der ganze Zweck der Sorgfalt: nicht Schönheit im Quelltext, sondern ein niedriger Preis für die nächste Änderung.