Responsive Design in der Praxis: Flexibel ohne Flickwerk.
Über dieses Angebot
Die meisten responsiven Layouts entstehen durch Nachbessern: ein Breakpoint hier, ein overflow:hidden da. Das Ergebnis funktioniert irgendwie, aber niemand versteht mehr, warum.
Dieses Coaching dreht den Prozess um. Wir starten mit Layouts, die von Natur aus flexibel sind – durch Flexbox, Grid und Container Queries – bevor wir überhaupt an Breakpoints denken.
Warum der Ansatz einen Unterschied macht
Wenn ein Layout auf Inhalt reagiert statt auf Bildschirmbreite, braucht man deutlich weniger Sonderfälle. Das spart Zeit beim Entwickeln und macht den Code lesbarer. Wir arbeiten das anhand echter Layouts durch: Navigation, Cards, Formulare, komplexe Grids.
Ich habe Layouts gebaut, die ich selbst nicht mehr verstanden habe. Jetzt weiß ich, wie ich von Anfang an klarer denke. – Nadine FischbacherWir nutzen keine abstrakten Beispiele. Du bringst entweder ein eigenes Projekt mit oder wir arbeiten an einem realistischen Übungsinterface, das ich für das Coaching vorbereite.
Welche Tools verwenden wir?
Primär arbeiten wir im Browser mit DevTools und in einem Code-Editor deiner Wahl. Kein Framework erforderlich. Wer möchte, kann Tailwind oder ein anderes Utility-System einbringen.
Programm & ABLAUF
Coaching-Phasen
-
Phase 1 – Flexbox und Grid ohne Shortcuts
Wir gehen durch die Eigenschaften, die die meisten Entwickler nie wirklich gelernt haben: align-content, grid-template-areas, minmax(), auto-fill. Keine Checkliste, sondern Verständnis.
-
Phase 2 – Container Queries und logische Eigenschaften
Container Queries ermöglichen Komponenten, die auf ihren eigenen Kontext reagieren. Wir bauen eine Card-Komponente, die sich in drei verschiedenen Layouts korrekt verhält.
-
Phase 3 – Breakpoints als letztes Mittel
Wann Media Queries sinnvoll sind und wie man sie so schreibt, dass sie wartbar bleiben. Wir schauen uns auch clamp() und fluid typography an.
-
Phase 4 – Abschlussprojekt
Du baust ein vollständiges responsives Layout nach einer Vorlage. Ich gebe schriftliches Feedback zu Struktur, Lesbarkeit und Logik.