Die Anforderungen an das moderne Webdesign haben sich radikal verändert: Heterogene Bildschirmgrößen, dynamische API-Inhalte und agile Design-Systeme fordern Webentwickler:innen täglich heraus. Klassische Ansätze des Responsive Webdesigns (RWD) stoßen dabei oft an ihre Grenzen und führen zu instabilen Layouts oder wartungsintensiver Code-Snippets. Doch in der Geschichte des Weblayouts gab es Veränderungen, die dem responsive Design zugute kamen: Moderne native CSS-Spezifikationen wie CSS Grid, Subgrid, Flexbox, sowie Media- ud Container-Queries bieten neue Möglichkeiten der Schnittstellenentwicklung. Doch welche Potenziale hinsichtlich des RWD´s stecken wirklich in diesen Technologien?
Im Rahmen dieses Praxisrprojekt wurden diese Potenziale anhand aufgestellter Kriterien untersucht und anschließend mit sieben typischen Layoutanforderungen im RWD in Verbindung gebracht. Diese Layoutanforderungen reichen vom fluiden Seitenskelett über kontextsensitive Widgets bis hin zur Entkopplung visueller und semantischer Strukturen für Barrierefreiheit. Durch die Verbindung der Layoutanforderungen im RWD mit den analysierten CSS-Layouttechnologien soll gezeigt werden, wie moderne CSS-Standards gezielt eingesetzt werden.
Der Mehrwert der Arbeit liegt in der Entwicklung einer strukturierten Vergleichs- und Bewertungsgrundlage, die Entwicklern und Designern bei der Auswahl geeigneter CSS-Technologien für responsive Layoutsysteme unterstützen soll. Ein weiteres Ergebnis bildet dabei die interaktive Live-Demonstration anhand eines eigens entwickelten Figma-Designs und derer technischen Umsetzung, die Webkomponenten gezielten Live-Demos unterzieht.