Web Design News & Link-Tipps – Nr. 56
Von: Charleen, Jonas, Ferenc, Raimund, Robert, Konstantin, Sophie Im Juli wurde es agentisch: MDN und Apple stellen eigene MCP-Server vor, WooCommerce lässt KI-Assistenten mit Shops »sprechen« und Figma richtet sich nach der Config 2026 strategisch neu aus. Dazu die Frage, wem die KI-Produktivität eigentlich nützt, ein wegweisendes Urteil zu Googles AI Overviews und viele frische Tools.
Allgemein
Websites werden nicht sterben
Eine beruhigende These für alle, die sich um die Zukunft des offenen Webs sorgen: Jens Oliver Meiert argumentiert in seinem Artikel, dass der Wandel bei Google keine Bedrohung für Websites im IndieWeb bedeutet.
Die Frage hinter der KI-Frage
Wenn wir fragen, was im Bereich KI als nächstes passiert, meinen wir laut Ethan Marcotte oft: »Habe ich in dieser Arbeitswelt noch einen Platz?« Der Schaden, den KI in unserer Branche anrichtet, ist bereits jetzt real und bleibt bestehen, auch wenn die KI-Blase platzt. In seinem Essay plädiert Ethan dafür, diese Frage aktiv und gemeinsam zu beantworten.
Produktiv, aber für wen?
Josh Collinsworth vergleicht bekannte Studien zu KI und Produktivität und kommt zu dem Ergebnis, dass die erhöhte Produktivität oft nur gefühlt ist, die Wartungskosten dabei steigen und der eigentliche Gewinn am Ende selten bei den Entwickelnden selbst landet – ein Befund, den auch Rachel Andrew teilt, die den Mangel an ganzheitlichen Produktivitätsdaten bemängelt. KI-Agenten hält Collinsworth dabei nicht für gänzlich nutzlos, dieser Nutzen werde aber durch die Anreize, sie maximal zu nutzen, konterkariert.
Digitale Erinnerung braucht eigene Strukturen
Jeffrey Zeldman wirft einen kritischen Blick auf die Abhängigkeit digitaler Inhalte von wenigen großen Plattformen und Diensten. Er macht deutlich, warum Erinnerungen, persönliche Archive und veröffentlichte Inhalte nicht automatisch erhalten bleiben, nur weil sie online sind, und weshalb eigene Domains, lokale Kopien und offene Formate wichtige Grundlagen für ein Web sind, das digitale Erinnerung bewahren kann.
KI halluziniert, Google haftet
Das Landgericht München I hat geurteilt, dass Google für Falschaussagen seiner AI Overviews haftet, weil diese als eigene Inhalte gelten. Google will in Berufung gehen. Passend dazu hat der Europäische Datenschutzausschuss neue Leitlinien zu Anonymisierung und Web-Scraping veröffentlicht. Beim Scraping für KI-Training greift die DSGVO, sobald personenbezogene Daten verarbeitet werden.
Websites für Agenten lesbar machen
Während diverse Tools eine Vielzahl von Maßnahmen empfehlen, sind laut Google keine speziellen Technologien wie MCP oder Markdown notwendig, um Websites für KI-Agenten zugänglich zu machen. Demnach genügt die Verwendung von semantisch korrektem HTML und die Einhaltung von Accessibility-Standards, damit KI-Agenten mit Websites interagieren und Inhalte ausreichend verstehen können. Da sind sich Maschine und Mensch überraschend ähnlich.
Cloudflare baut Webökosystem weiter aus
Nach Astro, Outerbase und nun auch VoidZero hat Cloudflare beinahe alle Hebel in der Hand, um eine eigene Umgebung für Webentwicklung anzubieten. Mit Vite landet ein weiterer zentraler Baustein des JavaScript-Ökosystems unter dem Cloudflare-Dach. Die Projekte sollen zwar weiterhin Open Source und plattformunabhängig bleiben, zugleich positioniert sich Cloudflare damit aber immer stärker als Alternative zu Vercel.
Mozilla entwickelt KI-Client Thunderbolt
Thunderbolt ist ein quelloffener KI-Client, der eine datensparsame Nutzung von LLMs ermöglicht. Mozilla möchte damit eine Möglichkeit für Unternehmen schaffen, die Abhängigkeiten von proprietären Lösungen zu verringern und die damit verbundenen Datenschutzbedenken auszuräumen. Die Anwendung unterstützt sowohl lokale Sprachmodelle als auch Cloud-APIs und lässt sich flexibel anpassen und erweitern. Die Software ist Teil von Mozillas Engagement für transparente, benutzergesteuerte und vertrauenswürdige KI-Lösungen.
UX/UI Design
Config 2026 & Figma in Zeiten von AI
Die Figma-Konferenz fand Ende Juni statt und präsentierte sowohl eine strategische Neuausrichtung als auch neue Funktionen. Mit Code Layers und stärkerem agentischen Design zeigt Figma Funktionen, die zwar die Pro-Zielgruppe gut ansprechen, sich aber zunehmend von der visuellen Arbeitsfläche in Richtung Code/KI entfernen. Mit Figma Motion und Shadern kommen hingegen starke visuelle Features, mit der Weave-Integration und generativen Plugins halten KI- & Vibe-Workflows Einzug. Schlüssige Analysen zur Präsentation inkl. Marktumfeld und möglicher Strategien liefert Darren Yeo.
Die Verantwortung im Design-System liegt jetzt bei allen
Figmas Funktionen »Code Connect«, »Check designs« und KI-Agenten bauen alle auf dem Design-System (der Figma-Library) auf. Dolphia erklärt in ihrem Artikel, warum vernachlässigte Systeme zukünftig noch offensichtlicher scheitern und warum die Verantwortung nicht mehr nur beim Design-Team liegt.
Was Figma sichtbar machte – und was KI wieder verbirgt
Figma half vielen Design-Teams, abstrakte Konzepte wie Komponenten oder Tokens wirklich zu verstehen. Murphy Trueman fragt sich, ob die nächste Generation von KI-Tools diese notwendige (und erfüllende!) Erkenntnis eliminieren wird, indem sie direkt das Ergebnis präsentiert und den Lernprozess überspringt.
Wie man Design-Systeme für die agentische Umsetzung vorbereitet
Vitaly Friedman erklärt in seinem Artikel für das Smashing Magazine, wie Design-Systeme so vorbereitet werden können, dass KI-Tools damit gute Prototypen erstellen. Das Ganze basiert auf einem Leitfaden von Hardik Pandya, der ebenfalls beschreibt, wie man Fehler vermeidet und die Ergebnisse optimiert.
Psychologie für besseres Produktdesign
»Product Design Psychology« ist die Online-Version von Wouter de Bres‘ Buch mit demselben Titel. Darin erklärt er, wie psychologische Erkenntnisse das Verhalten von Nutzenden beeinflussen. De Bres zeigt auch, wie diese Prinzipien Designentscheidungen und die Entwicklung digitaler Produkte prägen.
Frontend
Ist Atomic-Design noch zeitgemäß?
B. Prendergast kritisiert in seinem Artikel das Atomic-Design-Modell von Brad Frost, das nun schon über zehn Jahre alt ist. Prendergast meint, dass diese Vergleiche zwar gut erklären, wie Elemente zusammengesetzt werden, aber sie in der Praxis eher zu endlosen Diskussionen darüber führen, was wohin gehört.
Kontextbezogene Überschriftenebenen in HTML
Das experimentelle HTML-Attribut headingoffset ermöglicht es, Überschriftenebenen dynamisch basierend auf ihrer Verschachtelungstiefe anzupassen, statt diese fest zu definieren. Dies vereinfacht die semantisch korrekte Strukturierung von Dokumenten, besonders in CMS-Systemen und generierten Inhalten, wo Redaktionen konsistent die gleichen Überschriften-Tags verwenden können, während headingoffset die richtige semantische Ebene bestimmt. Das Feature ist noch nicht in Browsern implementiert, wird aber als Ansatz zur Verbesserung der Zugänglichkeit und Flexibilität von Webdokumenten diskutiert.
Ressourcen zu CSS Grid Lanes
Grid Lanes – eine CSS-Technik, mit der native Masonry Grids erstellt werden können – ist seit Safari 26.4 verfügbar und in den anderen Browsern »behind the Flag«. Das WebKit-Team hat in diesem Zusammenhang eine umfangreiche Ressource inkl. Generator zusammengestellt.
MDN-MCP-Server vorgestellt
Mit dem neuen MDN-MCP-Server lassen sich die aktuellsten Infos aus dem Mozilla Developer Network inklusive Browser-Kompatibilitätsdaten direkt in KI-Agenten und IDEs integrieren. Dadurch erhalten KI-Tools Zugriff auf aktuelle, verlässliche Informationen über die Web-Plattform, statt sich auf veraltete Trainingsdaten zu verlassen. Aktuell noch im experimentellen Status, aber bereits eine deutliche Bereicherung, die im Kontext von Deskilling allerdings auch Kritik hervorruft.
Safari MCP-Server
Auch Apple hat einen MCP-Server für Safari angekündigt. Über den KI-Agenten kann dann direkt auf den Browser zugegriffen werden (z. B. auf DOM, Konsole etc.), was das Debugging erheblich vereinfachen kann. Das WebKit-Team beschreibt im Blog, was möglich ist.
Dynamische Formularfelder mit reinem CSS
Mit field-sizing: content lassen sich Formularelemente ab sofort deutlich flexibler gestalten: Inputs, Textareas und Selects können damit ihre Größe automatisch am aktuellen Inhalt ausrichten, statt mit festen Breiten oder zusätzlichem JavaScript angepasst zu werden. Ahmad Shadeed zeigt, wie dynamisch wachsende Formularfelder mit CSS eingesetzt werden können.
Responsive Typografie nutzerfreundlicher denken
Typografie im Web muss nicht nur flexibel, sondern auch nutzerfreundlich skalieren. Matthew Morete gibt einen Ausblick darauf, wie zugänglichere Fluid Typography mit progress() in der Zukunft funktionieren könnte und warum klassische clamp()-Berechnungen nicht immer ideal mit individuellen Browser-Schriftgrößen umgehen.
Dafür braucht man kein JavaScript mehr
Dank der rasanten Entwicklung von HTML und CSS können diverse Dinge, für die bisher JavaScript notwendig war, nun deutlich schlanker umgesetzt werden. Darüber wurde in den vergangenen Monaten schon viel geschrieben und viel gesagt. Eine praktische Zusammenfassung relevanter Situationen bietet nun das NoLoJS-Projekt, inklusive Beschreibungen, Codebeispielen und Demos.
Neue Default-Sperren in npm v12
Nach den erhöhten Sicherheitsproblemen bei npm bietet die kommende Version 12 nun eine bessere Aussteuerung. Installations-Skripte sowie Git- und Remote-Abhängigkeiten laufen künftig nur noch mit ausdrücklicher Freigabe. Wer auf npm 11.16+ aktualisiert, kann vorab Fehler und Warnungen in seinen Skripten prüfen.
WordPress / WooCommerce
WP-SHELLSTORM: 25.000 WordPress-Seiten über offenen Server kompromittiert
Eine Hackergruppe namens WP-SHELLSTORM hat massenhaft WordPress-Seiten kompromittiert, indem sie in diese eine Hintertür (»Webshell«) eingeschleust und so die Kontrolle übernommen hat. Laut TechRepublic blieb der Server der Angreifer versehentlich drei Wochen lang offen einsehbar, sodass Sicherheitsforschende Werkzeuge, Logs und Ziellisten der Kampagne auswerten konnten. Über 1,4 Millionen Websites standen auf der Wunschliste der Gruppe, tatsächlich betroffen waren rund 25.000 Seiten aufgrund veralteter Plugins.
Template-Teile in Block-Themes dynamisch laden
Im WordPress Developer Blog zeigt Justin Tadlock einen Trick für Block-Themes: Statt für jede Seite ein eigenes Template zu bauen, kann man einen kleinen Code-Schnipsel nutzen, der automatisch den passenden Baustein lädt, wie zum Beispiel eine andere Sidebar je nach Kategorie einer Seite. So spart man sich viele fast identische Templates und das Theme bleibt übersichtlicher.
WooCommerce-Rückblick: KI-Anbindung per MCP und schnellere Bestellverarbeitung
Funnelish fasst zusammen, was bei WooCommerce in der ersten Jahreshälfte 2026 passiert ist. Mit Version 10.9 können nun auch KI-Assistenten direkt mit einem Shop »sprechen« und zum Beispiel Bestellungen abwickeln. Version 10.8 brachte zuvor vor allem Verbesserungen bei Geschwindigkeit und den automatischen E-Mails. Außerdem drängt WooCommerce Shop-Betreibende dazu, auf eine neue, deutlich schnellere Art der Bestellspeicherung umzusteigen, und ist jetzt mit der aktuellen WordPress-Version 7.0 kompatibel.
Farbmuster statt Text-Select: Neuer Produktattributtyp in WooCommerce
Wer online Produkte in mehreren Farben verkauft, kennt das Problem: Bisher zeigte WooCommerce die Farbauswahl nur als Textliste an. Seit Version 10.9 lassen sich nun echte Farbkästchen oder Bilder statt Text anzeigen. Das neue Feature ist seit dem 8. Juni als Beta verfügbar, gilt aber noch als experimentell und muss erst in den Einstellungen eingeschaltet werden.
Barrierefreiheit
Leere Zustände brauchen klare Bedeutung
Leere Bereiche in Interfaces sind nicht automatisch verständlich. Was visuell wie bewusste Gestaltung wirkt, kann mit Screenreadern oder in vergrößerter Ansicht schnell unklar werden: Fehlt Inhalt, ist etwas nicht geladen oder ist der Zustand absichtlich leer? Ein genauer Blick auf leere Zustände für Menschen mit Blindheit oder Sehbehinderung zeigt, wie wichtig klare Labels, Hinweise und Empty States für verständliche digitale Produkte sind.
Ein Web für Menschen, eins für Maschinen
Durgesh Rajubhai Pawar zeigt im Master.dev-Blog, warum KI-generierte UIs auf den ersten Blick bedienbar scheinen, semantisch und bei der Barrierefreiheit aber oft versagen. Passend dazu argumentiert Tech Policy Press, dass das Web gerade für KI barrierefrei gemacht wird, während dieselben Forderungen von Menschen mit Behinderungen seit Jahrzehnten ignoriert wurden. In dieselbe Kerbe schlägt WebKit und lehnt den vorgeschlagenen WebMCP ab, denn dieser spalte die Oberflächen für Menschen und Maschinen.
Barrierefreiheit günstiger umsetzen
Die BFIT-Bund (Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik) hat in ihrer Leitfadensammlung die detaillierte Handreichung »Barrierefreiheit und Kosten: Darf es günstig sein?« veröffentlicht. Enthalten sind u. a. eine Checkliste für Auftraggebende und Wege, um Kosten ohne Qualitätseinbußen zu senken. Es läuft vor allem darauf hinaus: Je früher Barrierefreiheit in das Projekt eingebunden wird (möglichst schon in der Beschaffung), desto preiswerter ist die Umsetzung!
Tools & Fun
- Die JavaScript-Library prop-for-that vom CSS-Experten Adam Argyle stellt Laufzeitdaten wie Elementgrößen oder Formularwerte automatisch als CSS Custom Properties bereit. So lassen sich interaktive UI-Effekte oft direkt in CSS umsetzen.
- Mit Mitos lassen sich Bilder, GIFs oder sogar JavaScript-Code in anpassbare ASCII-Art verwandeln.
- Das CLI-Tool npkill durchsucht das System nach verstreuten, potenziell überflüssigen
node_modules-Ordnern. - 3D SVG Design ist ein Tool, mit dem sich SVG- oder Pixel-Grafiken in 3D-Elemente umwandeln lassen.
- Shrtcts ist eine umfangreiche Übersicht über Shortcuts für verschiedene Programme.
- CSS Buttons ist eine Bibliothek mit verschiedenen Buttons.
- Transitions.dev ist eine Sammlung verschiedener Animationen und Übergänge für UI-Elemente.
- FigmaLint ist ein Figma-Plugin, das die Komponenten-Struktur in Design-Systemen automatisiert überprüft und Fehler aufzeigt.
- Storied Colors ist ein fortwährend wachsendes Verzeichnis, das die Geschichte benannter Farben und die Herkunft ihrer Namen dokumentiert.
- Scale of Universe lässt euch die Größenverhältnisse im Universum interaktiv erkunden und vom kleinsten bekannten Objekt bis zu kosmischen Dimensionen zoomen.
- Mit Explorable Explanations könnt ihr interaktive Lerninhalte entdecken, die komplexe Themen spielerisch und anschaulich vermitteln.
- Website Spec bietet eine umfangreiche Sammlung an technischen Features, die eine Website beinhalten oder unterstützen kann, von Webstandards über SEO und Barrierefreiheit bis hin zu Datenschutz und Maschinenlesbarkeit.
Feedback & Ergänzungen – Schreibe einen Kommentar
Geschrieben von:
Charleen Warkentin
Ferenc Petöcz
Raimund Büchner
Robert Menzel
Konstantin Hanke
Sophie Tausch
