Web Design News & Link-Tipps – Nr. 57
Von: Charleen, Jonas, Sophie, Ferenc, Felix Unsere Themen im August: agentische Workflows und Design Systeme, Prototyping direkt im Repo und die Rolle des »Design Engineering« zwischen Design und Entwicklung. Dazu die neue KI-Kennzeichnungspflicht, richtig viel CSS und die neuen Features in WordPress 7.1.
Allgemein
Ecosia zeigt nun einen europäischen Suchindex auch in Deutschland
Die Suchmaschine Ecosia nutzt nun auch in Deutschland die eigene europäische Suchdatenbank namens EUSP, die gemeinsam mit der französischen Suchmaschine Qwant entwickelt wurde. Ein wichtiger Schritt in Richtung einer datenschutzkonformen, unabhängigen Infrastruktur für Europa.
Kill the Cookie Banner
Die Kampagne Kill the Cookie Banner wirbt für einen Vorschlag der EU-Kommission, die Cookie-Präferenzen global im Browser zu setzen und somit Banner pro Website loszuwerden. Die Initiative wird von verschiedenen zivilgesellschaftlichen Organisationen unterstützt und positioniert sich gegen die Lobby der Tracking-Industrie.
Kennzeichnungspflicht für KI-Inhalte
Seit dem 1. August gilt eine Kennzeichnungspflicht für KI-Inhalte und Icons für die jeweilige Kennzeichnung. Relevant ist das u.a. bei Deep Fakes (gemeint sind Bilder oder Videos, die echte Orte und Personen zeigen) und Texten von öffentlichem Interesse, die nicht von Menschen geprüft wurden. Hier sind noch Lücken in der Vorgabe zu erkennen, aber der Weg scheint uns grundsätzlich richtig zu sein. Netzpolitik ordnet das Thema ein.
Wie Wasserzeichen in Claude-Texten funktionieren
Anthropic hat einen interessanten Artikel veröffentlicht und erklärt, wie Wasserzeichen in KI-Texten von Claude funktionieren.
Wie zuverlässig und datenschutzkonform sind KI-Detektoren?
Proton untersucht die Aussagekraft von KI-Detektoren und zeigt, dass ihre Ergebnisse schnell unzuverlässig werden, etwa bei überarbeiteten Texten oder Fehlklassifizierungen menschlicher Inhalte. Zusätzlich weist Proton auf potenzielle Datenschutzprobleme hin, wenn vertrauliche Texte zur Analyse an externe Dienste übermittelt werden.
Die Zukunft der Website
Kurzweiliger Artikel von Joost über die Zukunft der Website, wie er sie sieht. Websites werden nicht überflüssig, sie ändern ihre Rolle zur zentralen Informationsquelle, die sowohl für Menschen als auch für Maschinen optimiert ist. Also eigentlich alles wie immer, oder?
UX/UI
Design Engineering
Ein interessanter Artikel über Design Engineering, was die Rolle im Design-Dev-Prozess auszeichnet und wie sie sich verändert hat. Der Text hat zwar zum Ende hin erkennbar das Ziel, Recruiting-Anfragen zu erzeugen, ist aber dennoch sehr lesenswert.
Warum manche Websites bewusst altmodisch wirken
WebdesignerDepot erklärt, warum altmodisch wirkendes – und dadurch vertrautes – Web Design bei großen Plattformen wie Amazon bis heute gut funktioniert: Bekannte Strukturen erleichtern die Orientierung, reduzieren die kognitive Belastung und stellen Bedienbarkeit und Performance über aktuelle Designtrends.
Wenn der Prototyp im Produkt-Repo entsteht, nicht in der Mockup-Blase
In ihrem Erfahrungsbericht beschreibt Margarita Skiada, wie ihr Design-Team von pixelbasierten Mockups auf Prototypen umgestiegen ist, die direkt auf einem Git-Branch im echten Produkt-Repo entstehen. Ein KI-Editor übersetzt die Anweisungen des Teams in Code, aufgebaut aus den bestehenden Komponenten. Ganz ähnliche Erfahrungen konnten wir selbst schon sammeln – vorausgesetzt, alle Systeme sind wirklich gut dokumentiert.
Design Systeme und KI-Agenten
KI-Agenten erstellen zwar immer mehr Code nach den Vorgaben von Design Systemen, aber selbst die besten Modelle befolgen oft nicht alle Regeln, besonders wenn es viele sind. Murphy Trueman schlägt automatisierte Tests vor, die prüfen, ob beispielsweise echte Design Tokens verwendet wurden oder hardcodierte Werte. Joey Banks zeigt außerdem, dass auch die Benennung der Tokens oft unterschätzt wird. Agenten brauchen präzise Namen für den Kontext. Ergänzend dazu erklärt Matt Rothenberg, dass selbst ausführliche Komponenten-Bibliotheken allein nicht für Konsistenz sorgen: Erst schriftlich festgehaltene Regeln führen zu einheitlichen Ergebnissen. Das bestätigt, was wir in unserem Artikel zu Figma und KI-Agenten schreiben: ein echtes Design System braucht detaillierte Beschreibungen und dokumentierte Entscheidungsregeln, nicht nur einzelne Komponenten.
Frontend
Unendliche CSS Weiten: infinity in der Praxis
Adam Argyle fasst in einem aktuellen Beitrag auf seiner Seite praktische Anwendungsfälle für den CSS-Wert infinity zusammen. Von Buttongestaltung über Animationen bis hin zu z-index-Hacks demonstriert er dabei mehrere Einsatzmöglichkeiten.
CSS Gap Decorations einsetzbar
Sam Davis Omekarajr aus dem Edge Web Platform Team zeigt bei CSS Tricks, wie sich Abstände in Grid und Flexbox nun direkt gestalten lassen, und nennt praktische Einsatzfälle für strukturiertere Layouts. Verfügbar vorerst in Chrome und Edge Version 149.
Styling über Containergrenzen
Basierend auf scrollbasierten Animationen hat Preethi Sam eine Technik entwickelt, wie sich mit der CSS-Funktion view() Elemente abhängig von ihrer Nähe zu den Containergrenzen stylen lassen. Dabei funktioniert ihr Ansatz aber auch ohne Scrolling und ermöglicht adaptive Layouts ohne zusätzliche Klassen oder Selektorensuppe.
Was benötigt ein Build-Prozess noch im Jahr 2026?
Wie viele Build-Tools heute noch wirklich nötig sind, hinterfragt Frontend-Entwickler Ollie Williams in seinem Blog. Moderne Browser haben viele frühere Aufgaben von Bundlern, Transpilern und Präprozessoren übernommen. Sein Fazit: Für größere Projekte bleiben Build-Schritte sinnvoll, kleine Anwendungen können dagegen oft erstaunlich gut ohne sie auskommen.
Agentic Browsing in Lighthouse
Page Speed Insights, Lighthouse und Co. zeigen nun auch die Prüf-Kategorie »Agentic Browsing« an. Das neue Feature ist schon seit ein paar Wochen aktiv, wurde bei uns aber noch nicht im Team detailliert besprochen. Das haben wir somit nachgeholt.
Die Ergebnisse der State of CSS sind da
Mit fast 5000 Teilnehmenden geben die Ergebnisse des State of CSS 2026 einen guten Überblick über aktuelle Trends und Herausforderungen rund um CSS. Anchor Positioning wurde zum beliebtesten neuen Feature gewählt, gefolgt von :has(), CSS Nesting und Container Queries. Gleichzeitig steht Anchor Positioning wegen mangelnder Browser-Unterstützung aber auch ganz oben auf der Liste problematischer Features. Als weiterhin besonders vermisst gelten Mixins, während durchschnittlich wohl 28 % des von den Teilnehmenden geschriebenen CSS-Codes mit KI erzeugt werden.
Wo PWAs überzeugen und wo nicht
Martin Grubinger hat einen Beitrag veröffentlicht, in dem er kurz und knapp zusammenfasst, was seiner Ansicht nach heute an Progressive Web Apps (PWAs) »rockt« und was »sucked«. Eine lesenswerte Auffrischung.
Von der gemalten Kulisse zum begehbaren 3D-Raum
perspective, perspective-origin und transform-style: Carmen Ansio erklärt in diesem interaktiven Guide, wie aus einer flachen CSS-Kulisse eine Szene mit echter, begehbarer Kamera wird, am Beispiel von Super-Mario-Leveln.
Dreiecke aus Winkeln statt aus Kurven denken
Wer für dekorative Dreiecke reflexartig zu clip-path oder dem klassischen Border-Trick greift, bekommt hier eine Alternative an die Hand: Mit harten Farbstopps und einem verschobenen Ursprungspunkt lässt sich conic-gradient() so einsetzen, dass ganze Flächen in Winkeln statt in Kurven gedacht werden. Chris Coyier ordnet dabei auch ehrlich ein, wo klassische Techniken oder SVG nach wie vor die bessere Wahl bleiben, etwa bei Pie-Charts mit Interaktions- oder Accessibility-Anforderungen. Den ganzen Artikel gibt es hier.
Full-Bleed-Layouts: Warum 100vw nicht immer 100 % der Wirklichkeit entspricht
Der Klassiker unter den CSS-Utility-Classes für randlose Layout-Elemente hat einen Haken, den viele erst auf Windows-Systemen bemerken: 100vw ignoriert die Breite der Scrollbar und führt zu abgeschnittenen Pixeln am Rand. David Bushell zeigt in seinem Blogbeitrag, wie sich das Problem mit Container Queries und einer cleveren @property-Definition sauberer lösen lässt als mit den bisher üblichen Workarounds über overflow-x: hidden oder scrollbar-gutter.
Wenn Flexbox beim Umbruch endlich mitdenkt
Bislang füllte flex-wrap: wrap die erste Zeile stur bis zum Anschlag, bevor der Rest in eine oft fast leere letzte Zeile rutschte. Seit Chrome 150 gibt es mit dem neuen Wert balance eine Alternative: Die Flex-Items werden gleichmäßig auf alle Zeilen verteilt, ganz ähnlich wie es text-wrap: balance bereits bei Textzeilen macht. Ahmad Shadeed hat dazu ein einfaches CodePen-Beispiel erstellt.
WordPress
WP 7.1 kurz vor Veröffentlichung – mit guter Übersicht aller Features
WordPress 7.1 ist für den 19. August angekündigt und liegt bereits als Release Candidate vor. Neben zahlreichen kleinen Optimierungen gibt es ein paar für uns erwähnenswerte Features. U.a. Styling für verschiedene Viewports im Editor (Responsive Styling), Interaktion wie Hover, Fokus etc. können im Editor angepasst werden, ein neues Identity-Segment in den Site-Editor-Einstellungen steuert Branding-Einstellungen wie Logo und Slogan und es gibt neue Blöcke für Tabs und Playlisten. Zudem können nun eigene Icon-Sets registriert werden.
Barrierefreiheit
WCAG-EM 2.0
Eine aktualisierte Version der WCAG Evaluation Methodology (WCAG-EM) wurde veröffentlicht. Das Dokument beinhaltet keine konkreten technischen Anforderungen, sondern hilft dabei, einen Test auf Barrierefreiheit erfolgreich zu planen und durchzuführen.
Angepasste Systemschrift im Mobile Browser berücksichtigen
Etwa 37 Prozent aller Personen mit Android- oder iOS-Geräten stellen in den Systemeinstellungen eine größere Schrift ein. In den meisten mobilen Browsern hat das auf Websites bislang trotzdem keine Wirkung. Der BBC-Entwickler Josh Tumath ist genau dieses Problem mit der CSS Working Group angegangen und stellt in seinem Recap seines CSS-Day-Talks die Lösung vor: das neue Meta-Tag <meta name="text-scale"> sowie die Umgebungsvariable env(preferred-text-scale), mit denen Websites gezielt auf die bevorzugte Textgröße reagieren können. Den ganzen Talk-Recap gibt es hier, inklusive sehr praktischer Tipps, etwa zum Umgang mit rem in Media Queries oder zu Layouts, die bei größerer Schrift schnell gestaucht werden.
Warum CSS Grid Lanes in der Standardeinstellung kaum barrierefrei sind
Manuel Matuzović zeigt in seinem Blog, dass die neue CSS-Eigenschaft grid-lanes (besser bekannt als Masonry-Layout) in der Standardkonfiguration fast immer gegen WCAG 2.4.3 verstößt, weil die visuelle Reihenfolge von der Tab-Reihenfolge abweicht. Die Eigenschaft flow-tolerance kann das zumindest abmildern, verlangt dafür aber oft überraschend hohe Werte, und die eigentliche Lösung reading-flow funktioniert bislang nur in Chromium und noch nicht für Grid Lanes, weshalb sich ein Blick in den Artikel vor dem produktiven Einsatz lohnt.
Tools
- Figma Lint ist ein sehr hilfreiches Plugin, das eine Bibliothek auf »AI Readiness« prüft. Es setzt einen API-Key eines LLM-Anbieters voraus.
- Mit dem CSS Type Studio lassen sich typografische CSS-Funktionen wie Kerning, Ligaturen und Optical Sizing direkt im Browser mit Google Fonts ausprobieren und der passende CSS-Code anschließend exportieren.
- CodeTV verbindet Coding-Lerninhalte mit unterhaltsamen TV-Formaten wie Wettbewerben, Challenges und Reality-Shows rund um Webentwicklung.
- Why some people mow a lawn better than others erklärt anhand eines interaktiven Rasenmäh-Experiments spielerisch, wie Wegplanung und Optimierung in der Informatik funktionieren.
- Mit Hyperblam zeigt Heydon Pickering, wie sich samplebasierte Musik über maßgeschneiderte HTML-Elemente erstellen lässt. Die Grundlage dafür bildet die Web Audio API.
- Block Runner überträgt HTML in den WordPress Block Editor.
- Fontastic Space ist ein Tool zum Vergleichen zweier Google-Fonts, um optimale Schriftpaarungen anhand der Anatomie und Metrik zu finden.
- Dither It! wandelt hochgeladene Bilder per Dithering-Algorithmen wie Floyd-Steinberg oder Ordered Dithering in einen körnigen Retro-Look um, mit einstellbarer Farbpalette und direktem Export.
- Loading UI ist eine Sammlung mit verschiedenen Loading Animations.
- Datatype ist eine kostenlose Schriftart, die Text und Zahlen direkt in Charts und Datenvisualisierungen umwandelt.
- Guess the designer ist ein Spiel, in dem erraten werden muss, welche KI die jeweiligen Interfaces erstellt hat.
Feedback & Ergänzungen – Schreibe einen Kommentar
Geschrieben von:
Charleen Warkentin
Sophie Tausch
Ferenc Petöcz
Felix Lehmann
