Web Design News & Link-Tipps – Nr. 53
Von: Jonas, Raimund, Ferenc, Sophie, Felix, Charleen, Konstantin Im April haben wir u.a. große Verschiebungen in unserer Branche besprochen: KI verändert, wie wir gestalten, Code schreiben und zusammenarbeiten, CSS übernimmt Aufgaben, die lange JavaScript vorbehalten waren, und mit EmDash greift Cloudflare WordPress direkt an. Außerdem: das Fediverse als Bildungsinfrastruktur, WordPress 7.0, Barrierefreiheit 2026 und jede Menge Tools.
Allgemein
Das Fediverse als Bildungsinfrastruktur
Rüdiger Fries beschreibt in einem Artikel für die bpb, welches Potenzial das Fediverse für politische Bildung bietet. Als dezentrales Netzwerk und Diskursraum ohne algorithmische Priorisierung, als Vernetzungsort und als Chance für institutionelle digitale Souveränität.
AGENTS.md richtig schreiben
Philipp Schmid beschreibt in seinem Artikel, wie eine gute AGENTS.md-Datei für Coding-Agents aufgebaut sein sollte. Weniger ist offenbar mehr.
Endgame für das offene Web
Anil Dash warnt vor einer existenziellen Bedrohung des Open Webs. Große Tech-Player und Konzerne untergraben zunehmend offene Standards und Infrastrukturen. Beschleunigt durch den aktuellen AI-Hype und die Flutung des Webs mit AI-Slop entstehen negative Feedbackschleifen, die etablierte Strukturen irreparabel beschädigen könnten. Dash beleuchtet in seinem Blogbeitrag dabei aber auch verschiedene Strategien, um diesen Entwicklungen entgegenzuwirken.
Stack Overflow für KI-Agenten
Mozilla hat mit CQ ein neues Open-Source-Projekt gestartet, das als »Stack Overflow für KI-Agenten« fungiert. Die vorgeschlagene Standardisierung soll es Coding-Agenten ermöglichen, eine gemeinsame Wissensbasis zu nutzen, statt jedes Problem isoliert neu zu lösen. Dadurch soll die Effektivität von Agents erhöht und Ressourcen geschont werden.
Die versteckten Kosten von KI-generiertem Code
Addy Osmani, führender Mitarbeiter von Google Cloud AI, warnt vor einem zunehmenden Verständnisdefizit durch übermäßigen KI-Einsatz. Studien zeigen, dass Entwickler, die massenhaft und unhinterfragt KI-generierten Code nutzen, deutlich schlechter bei Verständnis und Debugging abschneiden als solche, die manuell programmieren. Der Verständnisverlust führt zu falschem Selbstvertrauen und schafft Abhängigkeiten, die mittelfristig Projektbudgets und menschliche Intelligenz belasten.
Das alte Internet ist noch da
Tyler Gaw argumentiert auf seinem Blog, dass persönliche Websites, Blogs und Nischenforums nie verschwunden sind, sondern nur von Streams und Feeds überlagert wurden. Was sich verändert hat, sind unsere Erwartungen: Jahre algorithmischer Inhaltslieferung haben uns das Surfen verlernen lassen. Das Good Old Internet ist noch da, man muss nur wieder anfangen zu suchen.
UX/UI Design
Claude Design
Anthropic hat mit Claude Design ein Tool veröffentlicht, das Wireframes, Prototypen, Websites und Design-Systeme erstellt bzw. bestehende Systeme als Quelle nutzt. Die Arbeitsergebnisse können mittels Prompt an Claude Code übergeben werden. Ein interessanter (wenn auch nicht völlig neuer) Ansatz, der die Veränderungen im Design/Development-Kontext weiter beschleunigen dürfte.
Figma Weave
Figma hat das Unternehmen Weavy übernommen und unter dem Namen Figma Weave integriert. Das Tool besteht aus einer freien Arbeitsfläche, auf der sich Outputs verschiedener KI-Modelle für Video, Bild und Animation direkt kombinieren und nachbearbeiten lassen.
Die Startseite als Auslaufmodell
Viele Kunden möchten als erstes die Startseite sehen und lassen diesem Seitentyp unverhältnismäßig hohe Bedeutung zukommen. Aus unserer Perspektive ist das häufig nicht zielführend, da die ersten Berührungspunkte mit einer Website häufig die Keyword-optimierten Unterseiten sind. Insbesondere dann, wenn SEO und SMM hohe Bedeutung haben. Mit KI als Suchmaschine bekommt dieser Trend noch einmal eine ganz andere Dimension.
Figma Skills
Wie in der letzten Ausgabe berichtet, hat Figma die Kooperation mit Anthropic deutlich gestärkt und den MCP in Richtung bidirektionale Design/Code-Workflows erweitert. Im Zuge all dieser Entwicklungen wurden jetzt einige Skills für den Figma MCP veröffentlicht.
Persuasive Design zehn Jahre später
Anders Toxboe schaut sich »Persuasive Design« noch einmal neu an, nachdem er schon 2015 im Smashing Magazine darüber geschrieben hatte: Einfache Tricks wie Nudging oder Gamification reichen oft nicht mehr aus, weil Verhalten viel stärker vom jeweiligen Kontext abhängt. Gleichzeitig ist das Bewusstsein für ethische Fragen wie Manipulation und Dark Patterns spürbar gewachsen. Heute geht es weniger darum, ob Verhalten beeinflusst wird, sondern darum, wie bewusst und verantwortungsvoll man das macht.
Frontend
Pretext: Hype trifft auf Realität
Pretext, eine Bibliothek, die nur mit TypeScript und ohne CSS Textlayouting ermöglicht, war eines der Hypethemen der letzten Wochen. Donnie D’Amato setzt sich damit kritisch auseinander, insbesondere mit dem vollmundig versprochenen »Ende von CSS-Layouts«. Dabei zeigt er auch auf, welche Aspekte modernes CSS bereits löst und was abzuwiegen gilt.
CSS verdrängt JavaScript – was sich gerade verändert
Pavel Laptev rechnet im GitButler Blog konkret vor, welche Libraries durch neue CSS-Features obsolet werden. Von Floating UI über GSAP ScrollTrigger bis react-select. Der Unterschied zu JavaScript-Lösungen: kein Main-Thread-Blocking, keine Peer-Dependency-Konflikte, keine Breaking Changes in Major Releases. 322 Kilobyte weniger Bundle, bessere Core Web Vitals, weniger Wartungsaufwand.
Focus-Zustände mit CSS tracken
Patrick Brosset aus dem Edge Team hat einen interessanten CSS-Ansatz gefunden, mit dem Animationen zu kleinen State Machines werden und sich focus und hover dauerhaft merken.
CSS-Subgrid effektiv nutzen
David Bushell zeigt praxisnah, wie CSS-Subgrid in CMS wie WordPress komplexe Fullwidth-Blöcke und damit bestimmte Layouts sauber und elegant ermöglicht.
Signals verständlich erklärt
Der Frontend-Entwickler Willy Brauner erklärt in seinem Journal wunderbar aufbereitet, wie der reaktive Signals-Algorithmus in JavaScript funktioniert. Er zeigt, wie dieser in Frameworks wie Vue oder Solid genutzt wird, um UI-Zustände zu tracken und zu aktualisieren. Die Funktionalität ist aber auch abseits von Frameworks grundsätzlich interessant, da es dafür ein TC39-Proposal für JavaScript gibt, welches Signals nativ in JavaScript verankern würde.
Verschleierung von E-Mail-Adressen
Mit Code-Beispielen und Erfolgsquoten analysiert Spencer Mortensen verschiedene Techniken zur verschleierten Darstellung von E-Mail-Adressen im Web. Seine dreijährige Beobachtung zeigt, dass keine Methode vollständig sicher ist, da Scraping-Bots ständig weiterentwickelt werden. Durch eine Kombination mehrerer Techniken gleichzeitig kann Missbrauch aber effektiv eingeschränkt werden.
Vorschlag für zeitbasiertes CSS
In einem aktuellen Vorschlag der CSS Working Group werden zeitbasierte CSS-Funktionen diskutiert. Damit sollen beispielsweise dynamische Farbthemes basierend auf dem Wochentag, Hervorhebung der aktuellen Zeile in Zeitplänen oder das Anzeigen von Bannern zu bestimmten Uhrzeiten möglich werden. Dies würde Code unabhängig von komplizierten JavaScript-Lösungen und damit übersichtlicher und wartbarer machen.
Unterstriche, die Leerzeichen überspringen
Chrome arbeitet gerade an der Implementierung von text-decoration-skip-spaces – eine CSS4-Property, die steuert, ob Unterstreichungen, Überstriche und Durchstreichungen über Leerzeichen hinweg gezeichnet werden oder nicht. Besonders bei Links in Navigationselementen ein willkommenes Detail, das bisher nur mit Tricks lösbar war.
WordPress
WordPress 7.0: Die wichtigsten Neuerungen für Entwickler
Der WordPress Developer-Blog und Gutenberg Times fassen aus unterschiedlichen Perspektiven zusammen, was mit WordPress 7.0 kommt: Echtzeit-Kollaboration im Editor, ein AI-Connector mit Providerpaketen für OpenAI, Google und Anthropic, visuelle Revisionen sowie ein neuer Icon-Block, neue Funktionen für die theme.json und Updates beim Menü.
Cloudflare launcht EmDash als WordPress-Alternative
Cloudflare hat EmDash vorgestellt – ein CMS, das den WordPress-Ansatz in die heutige Zeit transportieren soll. Vom Admin-Bereich stark an WordPress angelehnt, ist EmDash MIT-lizenziert, in TypeScript geschrieben und basiert auf Astro. Plugins werden in isolierten Sandboxen ausgeführt, was laut Cloudflare das grundlegende Sicherheitsproblem der WordPress-Plugin-Architektur beheben soll – dieses Feature ist allerdings momentan an eine Cloudflare-Umgebung gebunden. Integrierter MCP-Server und zahlreiche Agent Skills runden das Paket ab. Ein interessanter Ansatz, der als direkter Angriff auf WordPress gewertet werden darf.
Reaktionen auf EmDash
WordPress-Mitgründer Matt Mullenweg hat auf seinem Blog auf die Ankündigung reagiert und widerspricht erwartungsgemäß der Aussage, EmDash sei ein würdiger Nachfolger von WordPress. Das Projekt sei primär darauf ausgelegt, Cloudflare-Dienste zu verkaufen, und das zentrale Plugin-Sicherheitsfeature funktioniere nur in deren Infrastruktur. Yoast-Gründer Joost reagiert ebenfalls – allerdings deutlich positiver.
Barrierefreiheit
Accessibility im Web: Viel erwartet, wenig umgesetzt
Der aktuelle WebAIM Million Report zeigt, wie es 2026 um die Barrierefreiheit im Web steht: Nur ein kleiner Teil der einer Million getesteten Websites ist tatsächlich barrierefrei, bei durchschnittlich 50 Accessibility-Problemen allein auf den Startseiten. Hauptfehler sind unverändert fehlende Kontraste, ARIA-Attribute und Alt-Texte.
WCAG-Level: Warum A nicht ausreicht
Die Einordnung von Barrierefreiheit anhand von WCAG-Leveln wie A oder AA wirkt oft klarer, als sie tatsächlich ist. Vor allem das Erfüllen von Level-A-Kriterien suggeriert eine ausreichende Zugänglichkeit, obwohl nur minimale Anforderungen abgedeckt sind. Nicolas Steenhout erklärt mithilfe einer anschaulichen Analogie die Unterschiede der einzelnen Level in WCAG A vs AA Outdated Accessibility Statements und hinterfragt die Klassifizierung kritisch.
Design für Menschen mit Angststörungen
Der Artikel von Demelza Feltham gehört zu einer Serie von Artikeln zum Thema Barrierefreiheit. Es werden konkrete Gestaltungsregeln aufgezählt, die Menschen mit Angststörungen bei der Nutzung von Websites unterstützen können. Dazu zählen beispielsweise vorhersehbare Abläufe, gut erkennbare Fortschrittsanzeigen, verständliche Infos und weniger unnötige Komplexität. Wichtig sind außerdem bekannte Muster, klare Rückmeldungen und Möglichkeiten, Dinge zu prüfen und sich besser zu orientieren.
Tools
- ArrowJS ist ein Framework für agentische Umgebungen.
- Cascade ist ein kostenloses Icon-Set, das Icons für Funktionen in digitalen Design-Tools beinhaltet. Sehr interessant!
- Der WP Theme JSON Editor ist ein Plugin für VS Code, das die Bearbeitung der besagten Datei spürbar vereinfacht.
- Das View Transitions Toolkit ist ein npm-Package mit Funktionen, die bei der Arbeit mit View Transitions helfen sollen.
- Delphitools ist eine umfangreiche Sammlung unterschiedlicher Tools für Design und Entwicklung, gebündelt auf einer Plattform.
- All SVG Icons ist eine beträchtliche Sammlung mit frei verfügbaren SVG-Icons aus verschiedenen Bibliotheken.
- Rehumanize ist ein Tool zur Überarbeitung von KI-generierten Texten, das Formulierungen natürlicher wirken lässt.
- Pencil ist ein kostenloses Design-Tool, das visuelle Entwürfe automatisch in Code umwandelt und direkt in Tools wie VS Code verwendet werden kann.
- Particles ist ein Tool zur Erstellung interaktiver Partikel-Hintergründe, bei denen Bewegung, Dichte und Verhalten flexibel konfiguriert werden können. Es gibt verschiedene Optionen zum Export.
- Crashcat ist eine webbasierte JavaScript-Physik-Engine für Spiele, Simulationen und allerlei kreative Ideen.
- Wiretext ist ein visuelles Werkzeug für Wireframes, Diagramme und Mockups, bei dem alles als Unicode-Zeichen gerendert wird. Das ermöglicht wiederum den Export als HTML oder Markdown.
- heerich.js ist eine minimalistische JavaScript-Engine für beeindruckende geometrische Formen, die 3D-Voxelkompositionen erstellt und diese in makelloses SVG umwandelt.
- Ditherimage ermöglicht einfache Dither-Bildeffekte.
- CodingFont ist ein interaktives Tool zum Durchsuchen und Vergleichen von Schriften für Entwicklungsumgebungen.
Und zum Schluss …
Death by Clawd analysiert SaaS-Projekte und erstellt einen Prompt, mit dem das Tool ersetzt werden kann, sowie einen Todesschein, der angibt, ob das Projekt durch Claude in absehbarer Zeit überflüssig wird.
16 der besten CSS-Entwickler weltweit treten bei Mad CSS in einem Single-Elimination-Turnier gegeneinander an: 15 Minuten Zeit, ein Ziel-UI, nur HTML und CSS. Wer zuerst 100 % Übereinstimmung erreicht, gewinnt das Match.
CSS is DOOMed ist ein ambitioniertes Experiment, das zeigt, wie sich das Spiel DOOM komplett mit CSS rendern lässt.
Feedback & Ergänzungen – Schreibe einen Kommentar
Geschrieben von:
Raimund Büchner
Ferenc Petöcz
Sophie Tausch
Felix Lehmann
Charleen Warkentin
Konstantin Hanke
