Web Design News & Link-Tipps – Nr. 48
Von: Jonas, Raimund, Ferenc, Felix, Sophie, Konstantin Unsere Themen im November: Neue Figma-Features für Design Systeme, spannende CSS-Funktionen, das Wiedererstarken des IndieWeb, die nächste WordPress-Version in der Testphase und falsche Annahmen zu Barrierefreiheit.
Allgemein
45 % aller KI-Antworten sind fehlerhaft
Okay – es ist bekannt und belegt, dass KI fehlerhafte Antworten gibt. Was unserer Meinung nach allerdings stärker ins allgemeine Bewusstsein rücken sollte, ist die Tatsache, dass KI-Antworten bei Google und Co. – bei denen konkret Quellen als Beleg angegeben sind – diese Quellen falsch wiedergeben. Das ist insofern kritisch, als dass die reine Anzeige der Quellen das Vertrauen in die KI-Zusammenfassung massiv stärken dürfte und vermutlich dazu beiträgt, dass die Antwort weniger hinterfragt wird. Und aus Publisher-Perspektive sehen wir da noch ganz andere Probleme, wenn unsere Inhalte falsch zusammengefasst präsentiert werden …
IndieWeb is Punk
Jamie Thingelstad vergleicht in seinem Artikel die IndieWeb-Bewegung mit der DIY-Haltung des Punks. Statt sich den großen Plattformen zu unterwerfen, setzen die Akteure auf Selbstgestaltung, Gemeinschaft und digitale Unabhängigkeit. Vor dem Hintergrund weltpolitischer Entwicklungen erfreuen sich die Prinzipien des Open Web wieder zunehmend an Beliebtheit.
World Wide Web Consortium (W3C) präsentiert neues Logo
Am diesjährigen World Standards Day hat das W3C ein neues Logo eingeführt. Das Redesign ist Teil einer strategischen Ausrichtung zur Stärkung der Sichtbarkeit, besseren Zusammenarbeit und Vorbereitung auf künftige technologische und gesellschaftliche Herausforderungen. Neben dem neuen Logo hat das W3C den Slogan »making the web work — for everyone« (»das Web für alle nutzbar machen«) eingeführt.
Umweltauswirkungen einer Website reduzieren
Das Internet ist signifikant für die Produktion von Treibhausgasen und den daraus resultierenden Klimaveränderungen verantwortlich. James Chudley beschreibt pragmatische, effektive Ansätze, wie die Umweltbelastung einer Website reduziert werden kann.
UX/UI Design
Neue Design System Pro-Features für Figma
Auf dem digitalen Event »Schema 2025« hat Figma einige Neuerungen für Design Systeme und Bibliotheken vorgestellt, die in Kürze veröffentlicht werden und für die wir sehr konkrete Anwendungsfälle in unseren Projekten sehen. U. a. gibt es bald native Slot-Komponenten, erweiterte Collections für White Label- und Multi-Brand-Bibliotheken, automatische Konsistenz-Prüfung von Komponenten bei der Übergabe an die Entwicklung und ein UI für das Feature Code Connect, dass Design-Komponenten mit dem Code verbindet. Auch der Figma MCP-Server ist nun »Out of Beta« – Jonas hatte sich das Feature bereits vor einiger Zeit angeschaut und ein Video dazu veröffentlicht.
Die Affinity Suite ist nun vollständig kostenlos
Nach der Übernahme durch Canva stellt Affinity seine komplette Design-Suite kostenlos zur Verfügung. Photo, Designer und Publisher sind jetzt in einer App vereint und ohne Abo nutzbar. Wie Creative Bloq berichtet, will Canva damit den Zugang zu professionellen Kreativtools demokratisieren und eine Alternative zu teurer Abo-Software schaffen.
High Fidelity / Low Fidelity
Wann ist es zielführend, High-Fidelity-Designs zu präsentieren, wann macht ein Low-Fidelity-Ansatz mehr Sinn? Der Artikel ordnet die Begriffe ein, zeigt verschiedene Ansätze – auch Kombinationen – und präsentiert sogar einige Figma-Plugins, mit denen aus Hi Fi-Designs nachträglich ein Lo Fi erstellt werden kann.
Storytelling im Web
Matthias Ott erinnert in seinem Artikel »The Mystery of Storytelling« daran, dass gutes Storytelling im Web nicht aus fixen Regeln besteht. Geschichten entstehen durch Struktur, Rhythmus und kleine Überraschungen. So auch in Layout, Text und Interaktionen. Ott zeigt, dass eine Website wie eine Erzählung funktioniert: mit Spannung, Charakter und Momenten, die Raum für Interpretation lassen. Sein Fazit: Wer Gestaltung als Geschichte versteht, schafft Erlebnisse statt Oberflächen.
Frontend
CSS inherit()-Funktion
Die CSS-Funktion inherit() funktioniert ähnlich wie var(), nutzt jedoch die berechneten Werte des übergeordneten Elements anstelle des aktuellen Elements. Damit werden zukünftig komplexe Design Systeme möglich, in denen Komponenten leichter Tokens erben können.
CSS field-sizing – Passende Größen für Eingabefelder
Formulare wirken klarer, wenn Felder zur erwarteten Zeichenlänge passen. In seinem Artikel zu Field Sizing bündelt Ahmad Shadeed praxisnahe Beispiele für die Breite von Inputs – von ch-Einheiten und dem size-Attribut über fit-content/max-content bis zu responsiven Regeln und Zuständen bei Validierung. Endlich muss das Select Feld nicht mehr so breit sein, wie der längste Eintrag.
Nach außen abgerundete Tabs mit shape()
Abgerundete Ecken, Squircles und Co. können auf verschiedene Arten hergestellt werden. Von border-radius bis clip-path() gibt es zahlreiche funktionierende Ansätze. Mit der relativ neuen shape()-Funktion (ab FF 147 dann weitestgehend unterstützt) ist noch mehr möglich. Einen praxisnahen Anwendungsfall mit Tabs findet ihr bei Frontend Masters.
Performance Unterschiede bei Animationen
Matt Perry von Motion liefert mit seiner »Web Animation Performance Tier List« eine ausführliche und praxisnahe Analyse, welche Animationstechniken wirklich performant sind. Er erklärt die Browser-Render-Pipeline, bewertet Animationen von transform bis layout und zeigt, warum CSS-Variablen und globale Vererbung die Performance negativ beeinträchtigen können.
Wie sinnvoll ist eine native Länderauswahl in HTML?
Lea Verou hat auf X gefragt, wie sinnvoll es wäre, ein natives HTML-Input-Element (input type="country") für Länderwahlen inkl. Landesflagge zu entwickeln. Wer schon mal in das Rabbithole aus Sprachauswahl/Länderauswahl gestürzt ist, weiß – das Thema ist komplex und es gibt sehr viele Befindlichkeiten und Vorbehalte gegenüber einzelnen Flaggen. Terence Eden fasst mögliche Probleme gut zusammen.
View Transitions in allen Browsern verfügbar
Seit Firefox 144 wird die View Transitions API auch in Mozillas Browser unterstützt und ist damit nun in allen gängigen Browsern verfügbar. Hilfreiche Hinweise zum Einsatz von View Transitions gibt Cyd Stumpel in seinem Beitrag.
CSS Scroll State scrolled
Ab Chrome 144 soll es einen neuen Typ scrolled für CSS Scroll State Queries geben. Damit ließe sich bspw. mit wenigen Zeilen CSS ein Site-Header je nach Scroll-Richtung aus- oder einblenden.
URLs für State Management und UI nutzen
Ahmad Alfy erinnert in seinem Blog daran, wie viele nutzbare Informationen URLs bereits in Query-Strings und Pfaden für die Nutzung verschiedener Anwendungsfälle anbieten (können). Viele dieser Informationen können genutzt werden, um Informationen unterschiedlich auszuliefern, ähnlich wie im State-Management in Frameworks wie Vue.
Sections dynamisch layouten mit :has()
Ahmad Shadeed zeigt, wie Section-Layouts abhängig von der Anzahl enthaltener Inhalte mit dem CSS-Selektor :has() gezielt variiert werden können. So werden moderne intrinsische Layouts erstellt, die sich aktiv an den Inhalt anpassen. Optimiertes Raster, Abstände, Textgrößen und Hierarchie – ohne zusätzliche Klassen oder JavaScript.
Spring- und Bounce-Animationen mit CSS linear()
Die CSS-Timing-Funktion linear() ermöglicht Springs und Bounces ohne JavaScript. Josh W. Comeau zeigt in seinem anschaulichen Artikel wie. Er erklärt den Unterschied zwischen den bisher mit CSS timing-function umsetzbaren Animationen und der neuen Funktion linear(), leitet Kurven aus Messpunkten ab, verlinkt Tools für die Punktfolgen und behandelt den Browser-Support.
WordPress
6.9 Beta 3 verfügbar
Die Beta 3 von WordPress 6.9 (angekündigt für 2. Dezember) steht zum Testen bereit. Neue Features sind u. a. der Accordion-Block, der Terms Query Block, der Math Block und der Time to Read-Block. Zudem Kommentare im Backend (Notes), eine Fit-Text-Einstellung für Überschriften, Spekulatives Laden und Voreinstellungen für border-radius in den Design Tokens (theme.json).
Real Time Collaboration mit WP7 in 2026?
In der Roadmap für WordPress steht für Phase 3 die Echtzeit-Zusammenarbeit im Vordergrund. Mit dem Notes-Feature, dass in WP 6.9 eingeführt wird, ist ein erster Schritt getan, doch es ist nach wie vor nicht möglich, mit mehreren Personen ein Dokument gleichzeitig zu bearbeiten. Im Kontext von WP VIP ist nun eine Lösung erarbeitet worden, die allerdings einen Websocket-Server voraussetzt. Das wiederum ist bei einem Standard-WordPress-Server nicht gegeben, weshalb aktuell verschiedene Ansätze diskutiert werden. Dennoch ist das Feature für WP 7 vorgemerkt.
Barrierefreiheit
<h1> im <header> oder in <main>?
Ein interessanter Beitrag beschäftigt sich mit der Frage, wo die <h1> positioniert werden sollte – im <header> oder in <main>. Interessant ist in dem Zusammenhang, dass <header> innerhalb von <main> seine semantische Bedeutung verliert. Der Artikel ändert nicht unsere bisherige Vorgehensweise, erweitert diese allerdings um eine interessante neue Sichtweise.
Unverhältnismäßige Belastung?
In der Erklärung der Barrierefreiheit einer Website können unter bestimmten Voraussetzungen nicht erfüllte Punkte der Anforderungsliste ausgeklammert werden. Das trifft häufig auf PDF-Dokumente oder Video-Transkriptionen zu. Die Begründung ist dann »unverhältnismäßige Belastung«. Diese Ausnahmeregelung scheint mitunter überstrapaziert zu werden, daher gibt es nun eine interessante, offizielle Information dazu, wann diese Ausnahme greift und wann nicht.
Falsche Vorstellungen über Screenreader
Die Existenz von assistiven Technologien ist im digitalen Bereich hinlänglich bekannt. Wie sie in der Praxis funktionieren und benutzt werden, ist oft aber deutlich weniger klar. Der Beitrag von Ela Gorla geht auf Fehlannahmen zu Funktionsweisen von Screenreadern ein und unterstreicht die Verantwortung von Design und Entwicklung für die Gewährleistung von Barrierefreiheit.
Modal vs Dialog verständlich unterscheiden
Der A11y-Collective-Beitrag erklärt den Unterschied zwischen blockierenden Modals und nicht blockierenden Dialogs und zeigt, wie Fokusmanagement, Tastatursteuerung und Scrolling sauber umgesetzt werden. Erfahre, wie du das passende Pattern verwendest und vermeidest, typische Barrieren einzubauen. Der Artikel liefert außerdem Beispiel für Lösungen mit dem nativen HTML-Element inklusive Infos zu sinnvollen ARIA-Attributen.
Tools
- Impolitehouse analysiert eure Website hinsichtlich Performance und gibt das Ergebnis in wahlweise irritierter, dümmlicher oder vernichtender Kritik zurück.
- Auf Pootle Playground können Blueprints für den WP Playground per AI erzeugt werden.
- Mit diesem Tool können SVGs in CSS Shapes umgewandelt werden.
- Mit dem Online-Tool CrawlerCheck kann geprüft werden, ob Google-Bots und KI-Crawler auf eine Website zugreifen können.
- AdNauseam ist ein ungewöhnlicher Adblocker, der nicht nur Werbung ausblendet, sondern sie auch automatisiert anklickt, um damit gezielt die Tracking-Algorithmen von Werbenetzwerken zu sabotieren
- OverType ist ein minimalistischer Markdown-Editor, der einfach ein transparentes
<textarea>über eine gerenderte Vorschau legt, ganz ohne Virtual DOM oder Framework-Ballast.
Feedback & Ergänzungen – Schreibe einen Kommentar
Geschrieben von:
Raimund Büchner
Ferenc Petöcz
Felix Lehmann
Sophie Tausch
Konstantin Hanke
