Web Design News & Link-Tipps – Nr. 46
Von: Jonas, Raimund, Charleen, Sophie, Ferenc, Felix, Konstantin Unsere Themen im September: Top-down-Modernisierung von US-Regierungswebsites, ein Blick auf alle CSS-Features von den Anfängen bis heute, neue Blöcke in WordPress und die aktualisierten Accessibility Quick Checks der WAI.
Allgemein
»America by Design« & das National Design Studio (NDS)
Ende August unterzeichnete Donald Trump die Executive Order »America by Design« zur Schaffung des National Design Studio — mit Joe Gebbia (Mitgründer Airbnb) als Chief Design Officer. Das Ziel: zahllose veraltete Regierungs-Websites benutzerfreundlicher, moderner und konsistenter gestalten. Während das offizielle Bild Professionalität, Effizienz und Einheitlichkeit vermittelt, wird u. a. eine ästhetik- und top-down-getriebene Agenda kritisiert. Auch verweisen Kritiker auf den Kompetenzverlust durch die zuvor erfolgte Schließung der Fachagentur 18F sowie Spannungen rund um die USDS (ehem. US Digital Service, jetzt US DOGE Service).
Das Internet 1999 – ein Rückblick
Vom Aufstieg neuer Suchmaschinen, Blogs und Napster: Cybercultural beleuchtet mit »What the Internet Was Like in 1999« die prägenden Entwicklungen des Internets im Jahr 1999 und zeigt, wie diese Innovationen die Art und Weise, wie wir das Internet nutzen, nachhaltig beeinflusst haben.
Kritik an W3C-Plänen zum Ende von Third-Party-Cookies
Die Organisation »Movement for an Open Web« (MOW), zuletzt auch schon daran beteiligt, Googles Privacy Sandbox zu Fall zu bringen, hat Kritik an den W3C-Plänen zum Ende von Third-Party-Cookies (3PCs) formuliert. MOW argumentiert, dass die Abschaffung von 3PCs vor allem großen Marktteilnehmern wie Google einen Vorteil verschafft, weil diese durch ihre Marktmacht weiterhin umfangreiche Nutzerdaten erheben und auswerten können. Kleinere Anbieter und unabhängige Publisher hätten dagegen ohne 3PCs kaum noch Möglichkeiten, effektiv im Werbemarkt zu konkurrieren und ihre Geschäftsmodelle aufrechtzuerhalten.
Google Stitch zum generieren von Interfaces
Google Stitch ist ein experimentelles Tool, das auf Basis von Text- oder Bild-Prompts komplette, responsive Interfaces generiert. Nutzer können mehrere Screens gleichzeitig erstellen, diese gesammelt auf einem Board betrachten, den zugehörigen Code direkt einsehen und die Ergebnisse nahtlos nach Figma übertragen. Vorgestellt wurde Stich bereits auf der Entwickler-Konferenz im Mai.
Welche Fähigkeiten KI nicht ersetzen kann
Der Artikel aus dem Figma-Blog zeigt, dass KI zwar Geschwindigkeit und Skalierung bringt, aber entscheidende menschliche Fähigkeiten unersetzbar bleiben. Beispiele von Figma, Plaid und Polaroid verdeutlichen, dass gute Produkte nicht nur funktionieren, sondern durch menschliches Gespür lebendig, konsistent und bedeutungsvoll werden.
UX/UI Design
Was sind OKLCH-Farben?
Mit dem fantastischen Farbmodell oklch() können Farbpaletten erstellt werden, die im Code logisch aufgebaut sind und hinsichtlich ihrer Farbwirkung dennoch gut funktionieren. In Kombination mit dem P3-Farbraum eine große Bereicherung im digitalen Design.
Weniger ist mehr bei UI-Animationen
Überflüssige Bewegung lenkt ab und erschwert die Orientierung. In diesem Beitrag plädiert Emil Kowalski dafür, Animationen nur dann einzusetzen, wenn sie Statuswechsel erklären, Feedback geben oder Latenzen kaschieren. Plane ein bewusstes »Motion Budget«, respektiere prefers-reduced-motion und teste Interfaces zunächst ohne Effekte – erst dann fein dosiert anreichern.
Frontend
<legend>-Elemente in Formularen steuern
Der Artikel von Morgan Cugerone zeigt, wie sich mit CSS <legend>-Elemente in Formularen durch Floating zuverlässig neben Labels platzieren lassen, wo Standardmethoden wie display: flex häufig versagen.
Erste und letzte Reihen in CSS Grid ansprechen
Wenn auch schon etwas älter, sind die von Keith Clark gezeigten Methoden zur gezielten Ansprache von Elementen in der ersten oder letzten Zeile eines Grid-Layouts nach wie vor aktuell und funktionieren zuverlässig. Gezeigt wird, welche CSS-Selektoren bei vollständig gefüllten Reihen greifen und wie sich auch unvollständig gefüllte letzte Reihen korrekt ansprechen lassen, sodass Layouts präzise gesteuert werden können. Ein Artikel bei A List Apart behandelt das gleiche Thema.
Historie aller CSS-Eigenschaften
Das Projekt »CSS Properties« gibt einen Einblick in die historische Entwicklung von CSS. Alle 2.525 CSS-Eigenschaften (Stand September 2025) sind nach Jahren gruppiert aufgeführt und mit Veröffentlichungsdaten und Links zu Spezifikationen und Dokumentationen versehen. Die Seite zeigt anschaulich, welche Eigenschaften bereits seit Jahrzehnten bestehen und wie kontinuierlich sich CSS weiterentwickelt.
CSS-Neuheiten der letzten 5 Jahre
Dieser Artikel von nerdy.dev fasst noch einmal detailliert die während der letzten fünf Jahre erschienenen CSS-Neuigkeiten zusammen Eine interessante Liste, in der auch wir neues entdecken konnten. Habt ihr beispielsweise image-set() schon einmal in einem Projekt verwendet?
Nützliche CSS-Eigenschaften für moderne Webentwicklung
Auf Kool Codez werden zehn weniger bekannte, aber äußerst praktische CSS-Eigenschaften vorgestellt, die häufig benötigte JavaScript-Lösungen ersetzen. Zu den vorgestellten Features gehören unter anderem accent-color für die native Farbgebung von Formularsteuerelementen, :has() als Parent-Selektor, sowie scroll-snap-type für flüssige Scroll-Interaktionen.
CSS Alignment erklärt
Der jüngst von »CSS-Tip« veröffentlichte Artikel räumt auf mit den Unsicherheiten rund um CSS-Alignment und erklärt, wie man Inhalte in verschiedenen Layouts gezielt ausrichtet. Dabei wird zwischen content-und item-Level unterschieden, Grid, Flexbox, Block-Layouts und deren Properties werden detailliert gegenübergestellt, ebenso wird auf absolute Positionierung eingegangen.
Interaktive Webfeatures ohne JavaScript
Der Beitrag »You no longer need JavaScript« zeigt anhand aktueller Beispiele, welche Techniken und Effekte sich mittlerweile allein mit HTML und CSS umsetzen lassen. Viele Aufgaben, die früher JavaScript erforderten, können heute performant und wartungsarm mit modernen Webstandards gelöst werden.
Mutationsfrei sortieren: Neue JS-Array-Methoden
Mit ES2023 – und nun baseline – wurden drei neue Array-Methoden eingeführt, die das Original-Array nicht verändern bzw. mutieren: toSorted(), toReversed() und toSpliced(). Die neuen Methoden verhalten sich wie ihre klassischen Pendants, liefern aber eine Kopie statt das Original zu verändern.
CSS random(): Zufall fürs Styling
CSS-Tricks beschreibt ausführlich die noch experimentelle CSS-Funktion random(), die nun in der Safari Technology Preview verfügbar ist, mit der sich zufällige Werte direkt in Stylesheets erzeugen lassen. Praktisch etwa für dynamische Animationen, bei denen sich die Position oder Farbe eines Elements bei jedem Seitenaufruf verändert.
Dynamisches Inhaltsverzeichnis mit scroll-target-group
Der Artikel »Creating a ‚Scroll-Spy‘ with 2 Lines of CSS« zeigt, wie sich mit der neuen CSS-Eigenschaft scroll-target-group und der Pseudo-Klasse :target-current ein dynamisches Inhaltsverzeichnis umsetzen lässt. Mit dieser Methode kann der aktive Navigationslink barrierefrei und ohne JavaScript entsprechend der Scrollposition hervorgehoben werden.
CSS interpolate-size: Die Höhe animieren
Die neue CSS-Eigenschaft interpolate-size, bisher in Chrome und Opera verfügbar, lässt Übergänge zu intrinsischen Größen wie height: auto oder width: fit-content endlich direkt animieren. Mittels Progressive Enhancement lässt sich die Funktion bereits sinnvoll einsetzen, etwa um <details>-Elemente in einem Accordion zu animieren.
Responsive Typografie anschaulich verstehen
Miriam Suzanne stellt in ihrem Artikel ihr Tool zur Visualisierung von fluiden Typosettings vor. Es macht sichtbar, wie clamp()-Bereiche, vw/vi-Units und em/rem zusammenwirken. Die Grafiken helfen, Lesbarkeit und Skalen sauber zu planen, statt blind zu rechnen – ideal, um Headline- und Body-Größen konsistent über Viewports hinweg zu steuern.
WordPress
WordCamp US 2025
Ende August hat das WordCamp US in Portland stattgefunden. Es gab zahlreiche Talks und Workshops, eine Keynote von Matt Mullenweg und neue Formate wie Student-Tickets. Trotz etwas weniger verkaufter Tickets war die Stimmung laut offiziellen und inoffiziellen Quellen sehr gut und die WP-Community einmal mehr das Highlight.
AI zur Erzeugung von Blöcken
Ebenfalls auf den WP Camp hat Automattic das experimentelles Tool Telex zur Erzeugung von WordPress-Blöcken vorgestellt. Mit einem WordPress.com-Account kann unter telex.automattic.ai ein Promt geschrieben werden, der einen Block erzeugt und im WP-Playground anzeigt. Das könnte noch ziemlich praktisch werden.
Gutenberg 21.5 mit neuen Blöcken und Tokens
Gutenberg 21.5 ist veröffentlicht und enthält u.a. einen neuen Block für Accordions sowie die Unterstützung von Border Radius in der theme.json.
Performance
Best Practices beim Laden von Web Fonts
Der Artikel »You’re Loading Fonts Wrong (and It’s Crippling Your Performance)« erklärt die Hintergründe zur Einbindung von Web Fonts und zeigt auf, wie eine falsche Implementierung die Performance von Websites beeinträchtigen kann. Der Autor gibt konkrete Empfehlungen, wie Web Fonts effizient und performant eingebunden werden sollten.
Barrierefreiheit
Können Komponenten barrierefrei sein?
Nein. Denn Barrierefreiheit ist so definiert, dass das gesamte Dokument betrachtet wird. Der Artikel Can Components conform to WCAG geht detailliert auf das Thema ein.
Accessibility Quick-Check: WAI frischt die Easy Checks auf
Das aktualisierte WAI-Dokument »Easy Checks – A First Review of Web Accessibility« bietet eine praxisnahe Einstiegshilfe zur Bewertung der Barrierefreiheit von Webseiten. Es enthält einfache Prüfungen zu zentralen Aspekten wie Alternativtexten, Farbkontrasten, sichtbarem Tastaturfokus oder Formularfeldern.
Das Accessibility Nutrition Label
Apple führt das »Accessibility Nutrition Label« im Appstore ein. Geri Reid beschreibt, wie es entstand und warum es sich in der Design- und Produkt-Community etabliert. Das Label hält fest, was getestet wurde (AT, Browser, OS), welche Einschränkungen bekannt sind und wer Verantwortung übernimmt.
Tools
- Dieses Figma Widget erzeugt einen aufschlussreichen Audit aller Komponenten einer Datei/Seite und der Qualität der Umsetzung.
- Die Bibliothek Accented markiert Zugänglichkeitsprobleme während der Entwicklung direkt im Browser. Das Tool läuft framework-agnostisch und liefert kontinuierliches Feedback. Ideal, um Accessibility-Regeln früh im Workflow durchzusetzen.
- oklch.fyi ist ein Tool zur Erzeugung von Farbpaletten.
- FliiipBook ist eine benutzerfreundliche Webanwendung, die es ermöglicht, einfache GIF-Animationen direkt im Browser zu erstellen.
- intlin.site visualisiert interaktiv die Optionen der JavaScript-API
Intl.DateTimeFormat(), mit der Datums- und Zeitangaben sprach- und regionsspezifisch formatiert werden können. - PatternCraft ist eine Library mit frei verwendbaren Hintergrund-Pattern als Tailwind-CSS.
Geschrieben von:
Raimund Büchner
Charleen Warkentin
Sophie Tausch
Ferenc Petöcz
Felix Lehmann
Konstantin Hanke
