Web Design News & Link-Tipps – Nr. 52
Von: Jonas, Ferenc, Charleen, Felix, Konstantin Unsere Themen im März: Widerrufs-Buttons in Online-Shops, kritisches Denken in der KI-Ära, bessere Workflows mit Design Systemen und Experimente mit modernem CSS.
Allgemein
Selber denken!
Sophie Koonin hat auf ihrem Blog einen guten Überblick über die momentanen Debatten rund um GenAI und Agentic Coding geschrieben. Sie plädiert dafür, das Denken nicht LLMs zu überlassen und die Arbeit mit diesen Tools im eigenen Arbeitsalltag klar einzugrenzen, um hart erarbeitetes Wissen und Erfahrung nicht dabei zu verlieren.
Welches Problem lösen wir mit KI?
Das aggressive Marketing der großen KI-Anbieter erzeugt branchenübergreifend ein Gefühl, dass jeder diese Technologien einsetzen muss, um nicht irrelevant zu werden. Das erzeugt Ängste und beeinflusst Geschäftsentscheidungen. Wenn aber Angst zum Haupttreiber für Entscheidungen wird, gehen die Strategien verloren: Panikgetriebene Einführung von KI schafft eine Illusion von Sinnhaftigkeit, wo möglicherweise gar keine ist. Um menschliches Wohl und betriebliche Ressourcen zu schonen, schlägt Ana-Maria Stanciuc vor, statt »Können wir es uns leisten, KI nicht einzusetzen?« besser diese Frage zu stellen: »Welches Problem lösen wir mit KI?«
Widerrufsbutton wird 2026 für Online-Shops Pflicht
Erinnerung: Ab Juni 2026 müssen Online-Shops per EU-Richtlinie einen elektronischen Widerrufsbutton implementieren – klar beschriftet, sichtbar und mit zweistufiger Bestätigung. In der ausführlichen Erklärung werden die Anforderungen detailliert beschrieben.
Git-Historie mit Conventional Commits lesbar machen
Nicht ganz neu – aber nach wie vor hilfreich: Conventional Commits ist eine einfache Spezifikation für strukturierte Git-Commit-Messages. Die Standardisierung ermöglicht konsistente Kommunikation in Teams und übersichtliche Git-Historien. Der Ansatz ist mit SemVer kompatibel und ermöglicht Automatisierungen wie Releases oder Changelog-Erzeugung.
UX/UI Design
Warum Design Systems einen »Enforcer« brauchen
Ein Design System allein reicht nicht – es braucht jemanden, der die Einhaltung aktiv durchsetzt. Laura Klein beschreibt bei der NN/g, wie ohne diese Rolle kleine Abweichungen schnell zu inkonsistenten Produkten führen.
False Bottom
Wir haben bei einem aktuellen Projekt ein Nutzer-Testing gemacht und wurden schmerzlich an den False-Bottom-Effekt erinnert. Gemeint ist damit das Problem, dass Nutzer glauben, das Ende einer Seite erreicht zu haben, obwohl es noch mehr Inhalte darunter gibt. Sie stoppen also das Scrollen und lesen nicht weiter. Es lohnt sich, Basics regelmäßig in Erinnerung zu rufen.
Design-Systeme als Kontext für bessere KI-Ergebnisse
Hardik Pandya zeigt, wie LLMs deutlich präzisere UI-Vorschläge liefern, sobald sie ein bestehendes Design-System kennen und anwenden. Die Designentscheidungen sind dabei längst getroffen, das Modell übersetzt sie nur konsequent in die Praxis und liefert erstaunlich konsistent überzeugende Ergebnisse. Ein starkes Argument dafür, gut dokumentierte Design-Systeme nicht nur für Menschen zu pflegen.
Figma Code to Canvas
Figma ist hat in Kooperation mit Anthropic (Claude) und Open AI (Codex) die MCP-Schnittstelle erweitert. Figma ist nun ohne Plugins dazu in der Lage, gecodete Komponenten auf dem Canvas zu rendern. Ein Trend der für uns wenig überraschend ist. Auch Southleft hat mit der sog. MCP Console eine sehr interessante Erweiterung geschrieben, die Prompts in Figma-Layouts verwandelt.
Ist das Ende der Figma-Ära gekommen?
Jonny Burch argumentiert in »Life after Figma is coming (and it will be glorious)«, dass nicht ein einzelnes Tool Figma ablösen wird, sondern ein ganzes Ökosystem: Design-Werkzeuge als Dependencies im Code, direkt im Editor, offen und austauschbar. Ein provokanter, aber schlüssiger Blick auf die Zukunft des Design-Workflows, in dem Code zur einzig verlässlichen Source of Truth wird.
Wenn UI-Elemente mehr Klarheit brauchen
In seinem Blogbeitrag »Chip Away« setzt sich Donnie D’Amato mit wiederkehrenden und unklaren UI-Patterns auseinander (z. B. Badges und Tags, die auch Buttons sein könnten) und warum klare Definitionen helfen, deren Funktion vor der Umsetzung zu entscheiden.
Frontend
CSS border-shape
Im Gegensatz zu clip-path, das Inhalte lediglich maskiert, definiert die neue CSS-Eigenschaft border-shape die Box eines Elements tatsächlich neu – inklusive Hintergrund, Fokus-Outline und Box-Shadow. Una Kravets hat dazu eine schöne Zusammenfassung geschrieben. Das Feature ist aktuell unter der Chrome-Flag verfügbar.
Container Timing: Performance auf Komponentenebene messen
Metriken wie LCP messen die Ladezeit einer ganzen Seite – aber wie schnell eine Komponente rendert, war bisher schwer zu erfassen. Die neue Container-Timing-API schließt diese Lücke: Per containertiming-Attribut lassen sich DOM-Teilbäume überwachen. Daniel Pecos Martínez beschreibt in seinem Artikel, wie die API funktioniert. Aktuell hinter Feature-Flag in Chromium 144+ testbar.
Interop 2026 ist gestartet
Die browserübergreifende Initiative für bessere Webkompatibilität geht in die nächste Runde. Zu den 20 neuen Fokusthemen gehören unter anderem verbesserte Unterstützung für moderne CSS-Features und Web APIs. Jake Archibald fasst im Mozilla-Blog zusammen, was sich ändert.
Kreativ mit zukünftigem CSS
Frontend Masters zeigen anhand eines Kilometerzähler-Effekts, wie sich komplexe Zahlenanimationen mit reinem CSS umsetzen lassen und geben dabei einen guten Ausblick auf kommende Features wie die erweiterte attr()-Funktion und sibling-index().
Neue CSS-Längeneinheiten und »Multi-Keyword-Syntax« für display
Die CSS-Längeneinheiten rcap, rch und rex haben kürzlich Baseline-Support erhalten. Sie beziehen sich auf typografische Eigenschaften wie die Versalhöhe, die 0-Breite und die x-Höhe. Ebenfalls Baseline-Support erhielt die sogenannte »Multi-Keyword-Syntax« für die CSS-Eigenschaft display, durch die sich äußeres und inneres Layout-Verhalten eines Elements getrennt und präziser definieren lässt – wie beispielsweise display: block flex.
CSS im echten Web: Die CSS Selection 2026
Die CSS Selection von Project Wallace analysiert die CSS-Strukturen von über 100.000 Websites und gibt Einblicke, wie CSS im Web tatsächlich verwendet wird. Ausgewertet wurde unter anderem, wie viel CSS Websites typischerweise ausliefern, wie verbreitet Regeln wie @media oder @container sind und wie häufig !important eingesetzt wird. Grundlage der Analyse sind Daten des HTTP Archive, die auch für den Web Almanac genutzt werden.
Typografische Skalen als mathematisches System
Wer Überschriftengrößen bisher manuell berechnet und einzeln deklariert hat, bekommt bei Stuart Robson eine elegantere Alternative: Die Kombination aus :heading(), sibling-index() und pow() macht es möglich, die gesamte typografische Skala auf eine einzige CSS-Regel zu reduzieren. Die Technik ist aktuell nur in der Safari Technology Preview vollständig verfügbar, weshalb noch kein produktiver Einsatz möglich ist – aber sie gibt einen spannenden Ausblick.
Lazy-Loading für Audio und Videos am Horizont
Scott Jehl fasst auf seinem Blog die aktuellen Updates für lazy-loading bei Videos und Audio zusammen. Die Entwicklung hat einen Sprung gemacht und das Attribut ist nun zum Testen in Chrome Canary verfügbar.
»State of JS 2025« Ergebnisse veröffentlicht
Die Ergebnisse der jährlichen »State of JS« Umfrage wurden veröffentlicht. Immer interessant zum Stöbern und um den eigenen Stack abzugleichen.
Polyfill macht HTML-Switch-Element überall nutzbar
Thomas Steiner zeigt, wie ein Polyfill das neue HTML-Switch-Element in allen Browsern nutzbar macht und dabei Barrierefreiheit berücksichtigt. So werden einfache Checkboxes zu echten Switches und unterstützen klare An/Aus-Zustände.
Verbesserte XSS-Prävention durch setHTML
Als Teil der neuen, standardisierten Sanitizer API führt Firefox 148 als erster Browser die neue setHTML()-Methode ein. Diese bietet einen standardisierten Schutz vor Cross-Site-Scripting-Angriffen und bereinigt HTML-Inhalte automatisch von potenziell gefährlichen Elementen. Sie ersetzt damit die problematische innerHTML-Methode.
Barrierefreiheit
»Visually Hidden« auf dem Prüfstand
Was verbirgt sich wirklich hinter .visually-hidden? David Bushell unterzieht den altbekannten CSS-Hack einer kritischen Analyse und zeigt, warum die gängige Implementierung mehr Fallstricke hat, als die meisten vermuten. Von unerwarteten Scroll-Problemen bis hin zu fragwürdigen Annahmen darüber, was assistive Technologien tatsächlich leisten – eine unterhaltsame Geschichtsstunde.
Textgrößeneinstellungen von Mobilgeräten in Websites respektieren
Die Textgrößeneinstellungen in mobilen Betriebssystemen wie Android und iOS werden von den Browser-Engines unterschiedlich behandelt. Aktuell respektiert nur Firefox die Systemeinstellungen der Nutzer unmittelbar. Wenn man die Sonderwege der anderen Hersteller kennt, ist es jedoch möglich, in allen Browsern die eingestellten Textgrößen auf Websites anzuwenden.
WordPress
WordPress.com integriert KI-Assistent im Editor
Automattic rollt auf WordPress.com einen KI-Assistenten aus, der direkt im Site-Editor, im Block-Editor, in der Mediathek und in Notizen funktioniert. Der Assistent lebt in der rechten Sidebar und kann das Theme anpassen, Layouts bauen, Texte verfeinern oder Bilder generieren.
»Internet Archive Wayback Machine Link Fixer« Plugin
Internet Archive und Automattic haben bei einem Plugin kollaboriert, welches automatisierte Redirects auf archivierte Seiten der Wayback Machine ermöglicht.
Tools
- designtools.fyi kategorisiert und bewertet Design- und KI-Tools – eine hilfreiche Übersicht.
- modern-css.com ist eine Sammlung moderner und direkt kopierbarer CSS-Code-Snippets, die alte Workarounds und Hacks durch native Browser-Features ersetzen.
- ColorFlow ist ein kostenloser Mesh-Gradient-Editor, der animierte und interaktive Verläufe mit WebGL-Rendering erzeugt und diese als Embed-Snippet oder Video exportiert.
- Blogs Are Back ist ein datenschutzfreundlicher Blog-Reader zum Entdecken und Folgen unabhängiger Blogs – ohne Account, ohne Tracking und ohne algorithmische Feeds. Alles bleibt lokal im Browser gespeichert.
- Web Haptics ist eine Bibliothek, die haptisches Feedback auch im Browser ermöglicht.
- Wer sich ein schnelleres Suchinterface für NPM wünscht, ist bei npmx.dev richtig.
- 8bitcn ist eine Open-Source-UI-Komponentenbibliothek im 8-Bit-Stil.
- canwe.dev sammelt ähnliche Seiten wie caniuse.
- openpencil.dev ist ein kostenloses, Figma-kompatibles UI Design Tool im Browser
Feedback & Ergänzungen – Schreibe einen Kommentar
Geschrieben von:
Ferenc Petöcz
Charleen Warkentin
Felix Lehmann
Konstantin Hanke
