Modernes Webdesign mit HTML und CSS: Aktuelle Praxisbeispiele

Mit modernem HTML und CSS bauen Sie heute robustere Oberflächen mit deutlich weniger Code, denn Browser liefern inzwischen Funktionen mit, für die früher Bibliotheken nötig waren. Seit 2012 arbeite ich an Frontends für Kundenprojekte. In den letzten Jahren hat CSS viele Aufgaben übernommen, die früher JavaScript brauchten. In diesem Beitrag zeige ich semantisches HTML, Grid, Flexbox, Container Queries, Custom Properties und den Selektor :has() anhand praktischer Beispiele.

Das ist kein Programmierkurs. Stattdessen teile ich, was ich in der Praxis sehe: welche Technik zu welchem Teil einer Unternehmenswebsite passt und welche Fehler still und leise Geschwindigkeit und Budget kosten. Wie ich Designprojekte grundsätzlich angehe, beschreibe ich auf der Seite zu meinem Webdesign.

Was bedeutet modernes Webdesign mit HTML und CSS?

Modernes Webdesign mit HTML und CSS ist ein Ansatz, bei dem Sie Inhalte mit aussagekräftigen HTML Elementen auszeichnen und Layout, Farbe sowie Interaktion mit aktuellen CSS Funktionen gestalten. Grid und Flexbox steuern das Layout, Container Queries machen Komponenten flexibel, und Custom Properties halten ein Designsystem konsistent. Das Ergebnis sind leichtere, barrierearme und gut wartbare Seiten.

Früher nutzten wir Floats, Tabellentricks oder schwere CSS Frameworks für das Layout. Heute erledigt der Browser den Großteil davon selbst. Modernes Design ist also weniger ein neuer Stil als vielmehr Vertrauen in die eigenen Werkzeuge der Plattform.

Für Unternehmen hat das einen konkreten Nutzen. Weniger Code bedeutet weniger Fehler und schnellere Ladezeiten. Zudem kann die nächste Entwicklerin, die das Projekt übernimmt, Standardmuster ohne lange Einarbeitung lesen. Deshalb beschreibe ich den technischen Ansatz schon im Angebot.

Sind die Begriffe HTML5 und CSS3 heute noch korrekt?

Kurz gesagt: als Marketingbegriffe ja, technisch betrachtet unvollständig. HTML entwickelt sich nicht mehr in nummerierten Versionen weiter. Die WHATWG pflegt den HTML Living Standard, und nach einer Vereinbarung mit dem W3C ist dieser lebende Standard die einzige maßgebliche Fassung. Anders gesagt: HTML5 meint heute schlicht das aktuelle HTML.

Bei CSS sieht es ähnlich aus. CSS3 ist kein einzelnes Dokument, sondern eine Familie von Modulen wie Grid, Flexbox, Farben und Selektoren. Jedes Modul reift in seinem eigenen Tempo. Warten Sie deshalb auch nicht auf ein CSS4.

Warum ist das für Sie relevant? Wenn eine Agentur sagt, Ihre Seite entstehe mit HTML5 und CSS3, garantiert dieser Satz nichts, denn fast jede Website erfüllt diese Beschreibung. Fragen Sie besser, welche modernen Funktionen zum Einsatz kommen. Fragen Sie zudem, wie ältere Browser berücksichtigt sind.

Warum ist semantisches HTML immer noch die Grundlage?

Semantisches HTML heißt, dass das Element selbst beschreibt, was der Inhalt ist. Wenn Sie die Navigation mit nav, den Hauptinhalt mit main und einen eigenständigen Beitrag mit article auszeichnen, verstehen Browser, Screenreader und Suchmaschinen die Struktur sofort.

In der Praxis ist das häufigste Problem in meinen Audits sind Seiten, die komplett aus div und span bestehen. Optisch wirken sie zwar oft perfekt. Allerdings wird die Bedienung per Tastatur mühsam, und Screenreader finden keine Überschriftenstruktur. Solche Lücken nachträglich mit ARIA Attributen zu flicken, kostet weit mehr, als von Anfang an das richtige Element zu wählen.

Auch Suchmaschinen profitieren davon. Eine klare Überschriftenfolge und sinnvolle Abschnitte machen das Thema einer Seite eindeutig. Wenn Sie darauf strukturierte Daten aufsetzen möchten, ist mein Leitfaden zu Schema Markup der nächste Schritt. Trotzdem gilt: Strukturierte Daten gleichen ein schwaches HTML Gerüst nie aus.

Welche semantischen Elemente gehören wohin?

Die folgenden Zuordnungen nutze ich auf fast jeder Unternehmenswebsite. Diese Liste ist in jedem Projekt mein Ausgangspunkt.

• header: Der Kopfbereich mit Logo, Hauptmenü und Kontaktbutton. Eine Seite kann mehrere davon haben, zum Beispiel innerhalb eines Artikels.
• nav: Wichtige Linkgruppen wie Hauptmenü und Breadcrumbs. Nicht jede Linkliste im Footer braucht dieses Element.
• main: Der einzigartige Hauptinhalt der Seite. Pro Seite sollte nur ein sichtbares main existieren.
• article: Inhalte, die für sich allein stehen, etwa ein Blogbeitrag, eine Fallstudie oder eine Produktkarte.
• section: Ein thematischer Abschnitt mit eigener Überschrift. Ohne Überschrift reicht meist ein div.
• aside: Ergänzende, abtrennbare Inhalte wie ein Kasten mit verwandten Beiträgen.
• footer: Copyright, Kontakt und rechtliche Links.
• button und a: button für Aktionen, a für Navigation. Ein klickbares div hat hier nichts verloren.

Der letzte Punkt ist besonders wichtig, denn ein klickbares div erhält keinen Tastaturfokus und gibt sich dem Screenreader nicht als Button zu erkennen. Ein natives button Element bringt all das dagegen kostenlos mit.

Was bringen native HTML Formularfunktionen?

Formulare sind die Stelle, an der eine Unternehmenswebsite Geld verdient; native HTML Funktionen wirken sich hier also direkt auf die Conversion aus. Zum Beispiel öffnen die Typen email und tel auf dem Smartphone die passende Tastatur. Das Attribut autocomplete erlaubt dem Browser zudem, gespeicherte Angaben vorzuschlagen, und spart dem Nutzer Tipparbeit.

Für die Validierung decken required, minlength und pattern einfache Prüfungen ohne JavaScript ab. Dennoch ersetzen sie niemals die serverseitige Prüfung. Die Browservalidierung dient nur dem schnellen Feedback.

Dann ist da noch das Thema Label. Jedes Feld braucht ein sichtbares, verknüpftes label Element. Ein Platzhaltertext ersetzt kein Label, weil er verschwindet, sobald jemand zu tippen beginnt. Wie ich Anfrageformulare gestalte, zeige ich im Beitrag über Conversion Ziele; die technischen Grundlagen hier machen viele dieser Ideen erst möglich.

Außerdem liefert modernes HTML Komponenten, für die früher eine Bibliothek nötig war. Für aufklappbare FAQ Bereiche nutzen Sie details und summary, für Modalfenster das Element dialog. Somit schrumpft der Code, und das Tastaturverhalten stimmt von Anfang an.

Flexbox oder Grid: Was wählen Sie wann?

Vor allem sind die beiden Partner, keine Konkurrenten. Vereinfacht gesagt richtet Flexbox Inhalte entlang einer Achse aus, also in einer Zeile oder einer Spalte. Grid baut dagegen ein zweidimensionales Raster, das Zeilen und Spalten gemeinsam steuert. Die folgende Tabelle ist meine Entscheidungshilfe.

In der Praxis verschachtele ich beide. Seite und Kartenliste laufen über Grid, Überschrift, Tag und Button innerhalb der Karte über Flexbox. Diese Aufteilung hält den Code lesbar, und jedes Werkzeug arbeitet dort, wo es am stärksten ist.

Wie bauen Sie ein Seitengerüst mit CSS Grid?

Am meisten schätze ich an Grid, dass responsive Kartenlisten ohne eine einzige Media Query entstehen. Konkret kombinieren Sie im Container display: grid mit einem Abstand über gap und einer Spaltendefinition aus repeat() und minmax(16rem, 1fr) samt automatischem Auffüllen. Der Browser öffnet dann so viele Spalten, wie hineinpassen, und jede Karte bleibt mindestens 16rem breit.

Für das Seitengerüst bieten benannte Rasterbereiche einen sehr lesbaren Weg. Sie vergeben Namen wie Kopf, Seitenleiste, Inhalt und Fuß und platzieren diese wie auf einer Karte. Möchten Sie mobil eine Spalte und am Desktop zwei, ändern Sie nur diese Karte. Die Reihenfolge im HTML bleibt gleich.

Dazu also eine Warnung. Trennen Sie die visuelle Reihenfolge mit Grid nicht vollständig von der HTML Reihenfolge. Screenreader und Tastaturnutzer folgen dem Quelltext. Widersprechen sich visuelle Reihenfolge und Fokusreihenfolge, entsteht Verwirrung. Schreiben Sie daher zuerst den Inhalt in logischer Reihenfolge und gestalten Sie dann das Layout mit Grid.

Schließlich noch ein Wort zu Subgrid. Stehen Karten mit unterschiedlich langen Überschriften nebeneinander, geraten die Buttons aus der Flucht. Subgrid koppelt die inneren Zeilen jeder Karte an das übergeordnete Raster und löst das ohne JavaScript. Alle aktuellen großen Browser unterstützen es.

Wo spielt Flexbox seine Stärken aus?

Flexbox gewinnt bei kleinen Komponenten, in denen die Größe des Inhalts das Layout bestimmen soll. Das Hauptmenü ist daher das klassische Beispiel. Sie reihen Links auf, verteilen gleichmäßige Abstände, halten das Logo links und schieben den Kontaktbutton nach rechts. Meist genügen dafür display: flex, eine zentrierte Ausrichtung, gap und ein automatischer Außenabstand am Button.

Auch innerhalb von Karten setze ich Flexbox ein. Machen Sie die Karte zu einem vertikalen Flex Container und geben Sie der Beschreibung flex: 1. Dann klebt der Button immer am unteren Rand, und unterschiedlich lange Texte zerstören das Layout nicht mehr.

Bei Tagwolken und Filterchips, die umbrechen sollen, ist das Umbrechen per Flexbox ein echter Retter. Elemente rutschen in die nächste Zeile, sobald der Platz fehlt, und Sie sparen sich die Media Query.

Andererseits sollten Sie Flexbox nicht in zweidimensionale Kartenlisten zwingen. Gestreckte Karten in der letzten Zeile oder verrutschte Ausrichtung sind meist Folge der falschen Werkzeugwahl. In solchen Fällen schont der Wechsel zu Grid sowohl den Code als auch Ihre Nerven.

Worin unterscheiden sich Container Queries von Media Queries?

Eine Media Query betrachtet den Bildschirm. Eine Container Query betrachtet dagegen die Breite des Containers, in dem die Komponente steckt. Dieser kleine Unterschied öffnet für komponentenbasiertes Design eine große Tür. Dieselbe Produktkarte kann in einem breiten Hauptbereich horizontal und in einer schmalen Seitenleiste vertikal erscheinen, ohne die Bildschirmgröße zu kennen.

Konkret ist die Anwendung einfach. Zunächst deklarieren Sie den Elternbereich als Container für die Inline Größe. Danach schreiben Sie die breite Variante der Karte in einen Block mit @container und einer Mindestbreite von beispielsweise 30rem. Wo auch immer die Karte landet, sie passt sich ihrem eigenen Platz an. Die MDN Dokumentation zu Container Queries zeigt die vollständige Syntax mit Beispielen.

Auch die Einheiten für Container Queries sind nützlich. Die Einheit cqi steht zum Beispiel für einen Prozentsatz der Inline Größe des Containers. Setzen Sie damit die Schriftgröße einer Kartenüberschrift, skaliert die Überschrift mit der Karte.

Verschwinden Media Queries also? Nein. Entscheidungen auf Seitenebene, etwa wann das Menü in die mobile Variante wechselt, gehören weiterhin in Media Queries. Meine Regel lautet: Seitenlayout per Media Query, wiederverwendbare Komponenten per Container Query. Die mobile Denkweise dahinter erkläre ich im Beitrag Was ist Mobile First Design.

Wie bauen Sie ein Designsystem mit Custom Properties?

Custom Properties, auch CSS Variablen genannt, erlauben Ihnen, Entscheidungen zu Farbe, Abstand und Schrift an einer Stelle zu definieren und auf der ganzen Website wiederzuverwenden. Zum Beispiel legen Sie im Wurzelelement die Variable --primaer mit Ihrem Markenblau an und nutzen bei Buttons background: var(--primaer). Ändert sich die Markenfarbe, passen Sie nur eine Zeile an.

Der Unterschied zu Sass Variablen ist also: CSS Variablen leben im Browser. Sie können sich zur Laufzeit ändern, lassen sich innerhalb eines Abschnitts neu setzen, und JavaScript kann sie auslesen. Weisen Sie etwa die Variable für die Textfarbe innerhalb eines dunklen Aktionsbanners neu zu, passen sich alle Komponenten darin automatisch an.

Ich strukturiere das System meist in drei Ebenen:

1. Rohwerte: Alle Farben der Palette, die Abstandsskala und die Schriftskala.
2. Semantische Werte: Rollennamen wie Primärfarbe, Fläche, Text und Fehler. Komponenten nutzen nur diese Ebene.
3. Komponentenwerte: Lokale Einstellungen wie der Innenabstand eines Buttons oder der Eckenradius einer Karte.

Diese Schichtung erleichtert es, Entscheidungen aus dem Designtool eins zu eins in Code zu übertragen. Wie ich Variablen und Komponenten auf der Designseite anlege, zeige ich im Beitrag über Webdesign mit Figma. Für schnelle Farbumrechnungen hilft Ihnen das Tool für HTML Farbcodes.

Was hat der Selektor :has() in CSS verändert?

Jahrelang wünschten sich Entwickler einen Elternselektor, und :has() liefert ihn endlich. Damit gestalten Sie ein Element abhängig davon, was es enthält. So wählt etwa .karte:has(img) nur Karten mit Bild aus. Getrennte Klassen für Karten mit und ohne Bild brauchen Sie dann nicht mehr.

Vor allem bei Formularen ist das praktisch. Mit .feld:has(input:invalid) umrahmen Sie den gesamten Bereich eines Feldes mit fehlerhafter Eingabe. Ebenso kann eine Regel wie form:has(input[type=checkbox]:checked) den Absendebutton einblenden, sobald jemand die Einwilligung anhakt. Früher schrieben wir dafür JavaScript.

Auch auf Seitenebene ist :has() hilfreich. Sie können zum Beispiel das Scrollen im Hintergrund stoppen, solange das mobile Menü offen ist, indem Sie body gestalten, sobald es ein geöffnetes Menü enthält. Die MDN Referenz zu :has() listet aktuelle Browserunterstützung und Einschränkungen auf.

Dennoch ein Hinweis: Weil :has() so mächtig wirkt, ist die Versuchung groß, es überall einzusetzen. Allerdings können sehr breite und verschachtelte Regeln die Stilberechnung auf großen Seiten verlangsamen. Binden Sie solche Selektoren daher möglichst an eine konkrete Komponente.

Wie lösen Sie Dark Mode und Farbverwaltung mit modernem CSS?

Die Systemeinstellung Ihrer Besucher lesen Sie über die Medienabfrage für das bevorzugte Farbschema aus. Definieren Sie darin die semantischen Farbvariablen neu, wechselt die gesamte Website mit einem einzigen Block in den Dark Mode. Genau hier zahlt sich die Schichtung der Variablen aus.

Zudem empfehle ich, im Wurzelelement die Eigenschaft für das Farbschema auf hell und dunkel zu setzen. Diese eine Zeile sorgt dafür, dass auch vom Browser gezeichnete Elemente wie Formularfelder und Scrollleisten dem Thema folgen. Sonst bleibt womöglich ein grellweißes Eingabefeld mitten auf einer dunklen Seite stehen.

Außerdem helfen neuere Farbwerkzeuge. Mit der Funktion zum Mischen von Farben kombinieren Sie zwei Töne in einem festen Verhältnis und erzeugen so Varianten für Hover und deaktivierte Zustände. Somit müssen Sie nicht jeden Zustand der Palette von Hand festlegen.

Messen Sie allerdings immer den Kontrast. Im Dark Mode wird grauer Text auf dunkler Fläche schnell unlesbar. Prüfen Sie deshalb den Kontrast für jedes Thema getrennt, dann vermeiden Sie spätere Beschwerden zur Barrierefreiheit.

Wie nutzen Sie clamp() für fließende Schrift und Abstände?

Die Funktion clamp() nimmt einen Mindestwert, einen bevorzugten Wert und einen Höchstwert entgegen. Für eine Überschrift könnten Sie etwa clamp(1.75rem, 1.2rem + 2.5vw, 3rem) als Schriftgröße setzen. Die Überschrift fällt dann auf kleinen Bildschirmen nie unter 1.75rem, überschreitet auf großen nie 3rem und wächst dazwischen fließend mit.

Damit entfällt die mühsame Arbeit, für jeden Breakpoint eine eigene Schriftgröße festzulegen. Ebenso wende ich dieselbe Logik auf Abschnittsabstände an. Seiten, die mobil kompakt und am Desktop luftig wirken, entstehen so mit einer einzigen Regel.

Ein Detail ist dabei wichtig: Nehmen Sie im bevorzugten Wert immer eine relative Einheit wie rem auf. Arbeiten Sie nur mit vw, ignoriert die Überschrift die Textvergrößerung im Browser, und das schadet der Barrierefreiheit.

Begrenzen Sie außerdem die Zeilenlänge. Eine maximale Breite von etwa 65ch für den Absatzcontainer verhindert, dass lange Zeilen das Auge ermüden. Wenn Sie den Text selbst prüfen möchten, hilft Ihnen das Tool zum Lesbarkeit prüfen.

Wie setzen Sie neue CSS Funktionen in älteren Browsern sicher ein?

Mein erster Blick gilt immer Baseline. Die Initiative web.dev Baseline zeigt auf einen Blick, ob eine Funktion in den aktuellen Versionen aller großen Browser funktioniert. Grid, Flexbox, Container Queries und :has() gehören inzwischen zu den breit unterstützten Funktionen.

Nutzt ein Teil Ihrer Zielgruppe dennoch ältere Geräte, brauchen Sie eine Strategie in Schichten. Zunächst schreiben Sie ein schlichtes Layout, das überall funktioniert. Dann verpacken Sie das erweiterte Verhalten in einen Block mit @supports. Browser ohne Unterstützung überspringen diesen Block und zeigen das schlichte Layout, moderne Browser erhalten die reichere Variante.

Bauen Sie also ein Kartenlayout mit Container Queries, ist die Standardvariante eine einspaltige, vertikale Karte. Das breite Layout wandert in eine @supports Abfrage, die auf Unterstützung für Container prüft. Niemand sieht so eine kaputte Seite; einige Nutzer erhalten lediglich eine schlichtere Fassung.

Werfen Sie für die Entscheidung einen Blick auf die Browserverteilung in Ihrer Webanalyse. Nutzen fast alle Besucher aktuelle Browser, lohnen sich stundenlange Fallbacks womöglich nicht. Kurz gesagt: Ihre Strategie sollte auf eigenen Daten beruhen, nicht auf Annahmen.

Wie beeinflussen modernes HTML und CSS die Barrierefreiheit?

Richtig eingesetzt positiv, falsch eingesetzt negativ. Native Elemente und modernes CSS bringen viel Barrierefreiheit von Haus aus mit. Einige Punkte müssen Sie allerdings bewusst steuern. Diese Prüfungen führe ich in Projekten durch:

• Sichtbarer Fokus: Zeigen Sie Tastaturnutzern mit dem Pseudoklassen Selektor für sichtbaren Fokus einen klaren Fokusring, ohne Mausnutzer zu stören.
• Bewegungspräferenz: Reduzieren Sie Animationen über die Medienabfrage für reduzierte Bewegung, damit empfindliche Menschen nicht leiden.
• Visuelle Reihenfolge: Wenn Grid oder Flexbox die Reihenfolge ändern, testen Sie per Tastatur, ob der Fokus logisch bleibt.
• Versteckte Inhalte: Was Sie mit display: none ausblenden, verschwindet auch für Screenreader. Für rein optisches Ausblenden brauchen Sie eine andere Technik.
• Kontrast: Messen Sie den Textkontrast für jedes Thema und jeden Zustand, also Hover, deaktiviert und Fehler.

Dafür brauchen Sie also kein langes Audit. Legen Sie einfach die Maus beiseite und gehen Sie die Seite mit der Tabulatortaste durch; das deckt die meisten Probleme auf. Diesen fünfminütigen Test mache ich vor jedem Launch.

Wie helfen HTML und CSS bei Ladezeit und SEO?

Der am wenigsten beachtete Vorteil von modernem CSS ist, dass es den Bedarf an JavaScript senkt. Früher luden wir eigene Bibliotheken für Akkordeons, Tabs, Modalfenster, Formularhervorhebung und responsive Kartenraster. Heute lösen HTML und CSS das meiste davon. Weniger JavaScript bedeutet weniger Arbeit im Hauptthread des Browsers, und das hilft vor allem der Reaktionszeit bei Interaktionen.

Zudem lässt sich durch den Verzicht auf schwere CSS Frameworks viel ungenutzter Stilcode einsparen. Wenn jede Seite nur die nötigen Regeln lädt, erscheint die erste Ansicht schneller. Wie Ladezeit und Suchmaschinen zusammenhängen, erkläre ich im Beitrag wie die Ladezeit SEO beeinflusst; die Messschritte finden Sie im Lighthouse Leitfaden.

Danach kommen noch Layoutverschiebungen ins Spiel. Geben Sie Bildern Breite und Höhe mit oder legen Sie ein festes Seitenverhältnis fest, dann springt die Seite beim Laden der Bilder nicht. Dieses kleine Detail verbessert Nutzererlebnis und Messwerte gleichermaßen.

Für SEO helfen semantische Struktur, saubere Überschriftenhierarchie und aufgeräumter Code, damit Suchmaschinen Ihre Seite richtig deuten. Weitere technische Themen habe ich in den Tipps zum technischen SEO gesammelt.

Wie ordnen CSS Nesting und @layer Ihren Code?

Natives Verschachteln in CSS war lange nur mit Präprozessoren wie Sass möglich. Aktuelle Browser unterstützen es inzwischen direkt. So halten Sie zum Beispiel Überschrift, Bild und Hover Regeln einer Karte in einem einzigen Block zusammen, und zusammengehörige Regeln verteilen sich nicht mehr über die ganze Datei.

@layer wiederum beendet Kämpfe um Spezifität. Sie legen Resets, Basisstile, Komponenten und Hilfsklassen in getrennte Ebenen. Eine spätere Ebene gewinnt gegen eine frühere, egal wie schwach ihr Selektor ist. Folglich kann eine fremde Bibliothek Ihre Komponenten nicht versehentlich überschreiben.

Übertreiben Sie das Verschachteln trotzdem nicht. Mehr als drei Ebenen erzeugen schwer lesbare Selektoren mit zu hoher Spezifität. Ich bleibe meist auf einer Ebene und gehe nur für Zustände und Kindelemente eine zweite Ebene tiefer.

Welche Fehler passieren bei modernem CSS am häufigsten?

Weil neue Funktionen begeistern, tauchen manche Fehler immer wieder auf. Die häufigsten sind diese:

• Alles mit Grid lösen wollen, sogar eine einfache Buttongruppe.
• Custom Properties mit zufälligen Namen und ohne semantische Ebene anlegen. Bald weiß niemand mehr, welche Variable was tut.
• Eine Container Query schreiben, aber vergessen, den Elternbereich als Container zu deklarieren. Dann greifen die Regeln nie.
• Breite, Höhe oder Position animieren und damit Layoutberechnungen auslösen. Nutzen Sie stattdessen transform und opacity.
• Probleme mit der Spezifität per !important unterdrücken. Eine Ordnung mit @layer skaliert deutlich besser.

Gemeinsam ist diesen Fehlern, dass sie das heutige Problem lösen und die Wartungskosten von morgen erhöhen. Vor allem in großen Projekten mit mehreren Teams wachsen diese Kosten schnell. Wie große Organisationen ihr Frontend aufteilen, lesen Sie in meinem Beitrag über Micro Frontends.

Welche Checkliste gilt zum Projektstart?

Starte ich eine neue Unternehmenswebsite, arbeite ich das Frontend in dieser Reihenfolge ab. Die Liste reduziert spätere Korrekturen deutlich.

1. Schreiben Sie den Inhalt vor dem Design als semantisches HTML und prüfen Sie die Überschriftenfolge.
2. Definieren Sie Farb, Abstands und Schriftskalen als Custom Properties in drei Ebenen.
3. Bauen Sie das Seitengerüst mit Grid und das Innere der Komponenten mit Flexbox.
4. Machen Sie wiederverwendbare Komponenten per Container Query von ihrem eigenen Platz abhängig.
5. Gestalten Sie Schrift und Abschnittsabstände fließend mit clamp().
6. Prüfen Sie vor jeder Zeile JavaScript, ob details, dialog oder :has() die Aufgabe lösen.
7. Entscheiden Sie anhand Ihrer Zielgruppendaten, ob Sie Fallbacks per @supports brauchen.
8. Führen Sie Tastaturtest, Kontrastmessung und Prüfung der Bewegungspräferenz durch.
9. Messen Sie Ladezeit und Layoutverschiebung vor dem Launch erneut.

Die Logik dahinter ist einfach: zuerst Inhalt und Bedeutung, dann Layout, zuletzt Dekoration. Beginnen Sie am anderen Ende, entsteht etwas, das hübsch aussieht, sich aber schwer umziehen, übersetzen und pflegen lässt.

Fazit: Wo fangen Sie mit HTML und CSS auf modernem Niveau an?

Zusammengefasst geht es bei modernem Webdesign weniger um auffällige Effekte als darum, die Werkzeuge der Plattform an der richtigen Stelle zu nutzen. Semantisches HTML legt ein solides Fundament. Grid und Flexbox vereinfachen das Layout, Container Queries machen Komponenten unabhängig, und Custom Properties sowie :has() verlagern frühere JavaScript Aufgaben in CSS.

Haben Sie bereits eine Website, müssen Sie nicht alles neu schreiben. Wählen Sie zunächst die Vorlage mit dem meisten Traffic, ersetzen Sie div Wüsten durch semantische Elemente und verlagern Sie Farben in Variablen. Danach bauen Sie eine einzelne Komponente, etwa die Leistungskarte, mit einer Container Query neu. Schon diese kleinen Schritte erleichtern die Wartung spürbar.

Planen Sie ein neues Projekt oder möchten Sie die Frontend Qualität Ihrer aktuellen Seite prüfen lassen, dann werfen Sie einen Blick auf meinen Webdesign Prozess und melden Sie sich. Gemeinsam klären wir, welche Techniken Ihrem Projekt wirklich einen Mehrwert bringen.