Web Design News & Link-Tipps – Nr. 60
Von: Charleen, Ferenc, Jonas, Felix, Sophie, Robert, Konstantin Im November haben wir uns darüber ausgetauscht, dass wenige Menschen große Teile des Webs tragen, immer mehr Open-Source-Projekte ihre Türen für Beiträge von außen schließen und der EU KIDS ACT Altersverifikation für alle erzwingen könnte. Außerdem: Neuheiten von der Figma Config India, echtes HTML im Canvas, Safaris Adaptive Dark Mode, WordPress 7.2 und jede Menge Tools.
Allgemein
Firefox Enterprise
Firefox hat eine Enterprise-Version des Browsers veröffentlicht, die gezielt Anforderungen bei Sicherheit und Datenschutz großer Organisationen berücksichtigt und zentrale Steuerungselemente für Admins bereitstellt.
CSS-Tricks hat einen neuen Eigentümer
Geoff Graham hat CSS-Tricks von DigitalOcean übernommen und führt die Plattform unabhängig weiter. Er war zwölf Jahre lang als Autor für die Website tätig und hat bereits einige Neuerungen umgesetzt, wie die Rückkehr des Newsletters, einen eigenen Shop und kostenpflichtige Mitgliedschaften. Künftig sollen wieder wöchentlich Beiträge erscheinen, häufiger auch als Gastbeiträge. KI-generierte Massenbeiträge sollen dabei keinen Platz haben.
Open Source auf wenigen Schultern
Ein Großteil der Infrastruktur des Webs basiert auf freier Software, die oft von Einzelpersonen oder kleinen Teams gepflegt wird, die dafür nicht angemessen entlohnt werden. Wie wichtig diese Arbeit ist, wird meist erst sichtbar, wenn etwas schiefgeht. Das zeigte sich zuletzt bei den kritischen PHP-Sicherheitslücken (PHP2Shell), als zahlreiche Websites vorsorglich vom Netz gingen. Die Ursachen waren teilweise lange bekannt, konnten aber aus Mangel an Ressourcen nicht endgültig behoben werden. Wir alle profitieren von Open Source, deshalb brauchen diese »kleinen Giganten« nachhaltige Unterstützung.
Fingerprinting: Wenn Cookies löschen nicht mehr reicht
Wer regelmäßig Cookies löscht oder ein VPN nutzt, fühlt sich im Netz meist ziemlich gut geschützt. Spätestens seit Google Fingerprinting 2025 in den eigenen Werbeprodukten erlaubt hat, trifft das allerdings immer weniger zu. Grafikkarte, installierte Schriften, Zeitzone und weitere Merkmale verraten zusammen so viel über ein Gerät, dass es sich auch ohne Cookies wiedererkennen lässt. Wie gut das funktioniert, könnt ihr direkt im eigenen Browser testen und erfahrt nebenbei, welche Browser aktuell besser vor Fingerprinting schützen können.
Offene Konsultation zum EU KIDS ACT
Der EU KIDS ACT soll Kinder online schützen, würde aber Altersverifikation für alle erzwingen. Die »Digitale Gesellschaft« warnt in ihrem Beitrag vor Grundrechtseingriffen und Schäden für das Fediverse. Bis zum 3. Dezember kann die Öffentlichkeit Rückmeldung geben. netzpolitik.org fasst die Kritik daran auch noch einmal ausführlich zusammen.
Wie KI Open-Source-Communities aushöhlt
Chris Person beschreibt auf Aftermath, wie die Flut an Vibecoding und agentischem Reverse-Engineering Communities in der Spieleszene zermürbt und erfahrene Leute vertreibt. Auch im Web zeigen sich die Folgen: Viele Projekte wie das JS-Framework Hono schränken Beiträge von außen ein oder schließen sie ganz aus. James Ross beklagt, was dabei verloren geht.
Kopieren ist billig, Konzipieren nicht
Bestehende Software mit KI nachzubauen, ist inzwischen schnell und günstig möglich, wie zuletzt Projekte wie »ArtCraft« gezeigt haben. Solche Nachbauten sind Idealfälle für Agenten, weil das Original als überprüfbare Vorlage dient. Abgeschaut ist aber nicht entschieden, heißt es in einem Kommentar bei heise: Der eigentliche Wert von Software liegt in der Konzeption, also in tausenden fachlichen Entscheidungen, über die Menschen nachgedacht haben und auch künftig nachdenken müssen.
Online-Shops: Garantie- und Gewährleistungslabel sind seit Ende September Pflicht
Nur als Erinnerung: Seit dem 27. September 2026 müssen Shops, die physische Produkte an Privatkundschaft verkaufen, ein EU-weit einheitliches Gewährleistungslabel als unveränderte Grafik vor Abschluss der Bestellung anzeigen, etwa auf der Produktseite oder im Checkout. Ein Link oder ein Hinweis in den AGB reicht nicht aus. Fehlende Labels können inzwischen abgemahnt werden. Gibt der Hersteller eine Haltbarkeitsgarantie von mehr als zwei Jahren, kommt auf der jeweiligen Produktseite ein Garantielabel hinzu. Was genau zu tun ist, erklärt eRecht24.
UX/UI Design
Das Terminal für Design-Teams verständlich erklärt
Tools für Design Tokens, Storybook und KI-Agenten wie Claude Code laufen über die Kommandozeile, weshalb sich auch Design-Teams immer öfter mit dem Terminal beschäftigen müssen. Dass es sich dort so fremd anfühlt, liegt vor allem an fehlenden Menüs und Buttons. Murphy Trueman erklärt verständlich, wie das Terminal funktioniert, und gibt einen guten Überblick über die wichtigsten Grundlagen für den Einstieg.
Figma-Neuheiten der Config India
Figma hat auf der Config-Konferenz in Indien zahlreiche für uns spannende Produkt-Neuheiten veröffentlicht. Unter anderem wurden mit »Figma Specs« und »Figma Guidelines« Möglichkeiten geschaffen, Textdokumentation in Figma zu holen. Markdown-Dateien werden live in Figma gerendert und können als Kontext für KI-Agenten dienen. Darüber hinaus wird es bald möglich sein, Code-Bibliotheken zu importieren. Die sogenannten »Code Layers« sind nicht mehr in der Beta, und mit der neuen Chrome-Erweiterung können Code-Komponenten nativ in Figma importiert werden. Die Abhängigkeiten in komplexen Design Systemen werden zukünftig in sogenannten »Design System Maps« visualisiert. Als CMS-Lösung hat Figma zudem das Tool Payload integriert, das selbstgehostete Projekte auf Next.js-Basis ermöglicht.
Gutes Design ist keine Geschmackssache
KI-Tools können mittlerweile in kürzester Zeit optisch ansprechende Design- und Layoutentwürfe erstellen. Ob einer davon jedoch wirklich funktioniert und genutzt werden sollte, sollte nicht nach Geschmack, sondern nur durch bewährte UX-Regeln, Studien und Usertests entschieden werden. Keine neue Erkenntnis, aber gerade jetzt ein guter Reminder vom UX Collective.
Was die 500 in »blue-500« bedeutet
Dieselbe Zahl bedeutet in jedem Design System etwas anderes: Bei Tailwind und Material ist sie nur eine Position in der Skala, bei Carbon, USWDS und Material 3 eine garantierte Kontrastdifferenz. Deshalb kann weißer Text auf Stufe 600 bei Blau den Kontrasttest bestehen und bei Grün durchfallen. Der Vergleich auf hipuku.dev ordnet die Design Systeme von Tailwind, Material & Co. in dieses Schema ein.
Ein Design System ist, was es tut
Matt Henry war Teil des Teams hinter dem US Web Design System (USWDS). Er vergleicht dessen Typografie mit shadcn/ui und zeigt, wie Standardeinstellungen bestimmen, für wen eine Website gebaut ist.
KI sinnvoll in digitale Produkte integrieren
Künstliche Intelligenz sollte die Nutzungserfahrung verbessern, statt bewährte Interaktionen zwanghaft zu ersetzen. Sinnvoller ist es laut John Voss, klassische Interfaces und KI-Funktionen miteinander zu verbinden, Menschen die Kontrolle über automatisierte Abläufe zu lassen und KI gezielt dort einzusetzen, wo sie echten Mehrwert bietet.
Frontend
Web Development für das iPhone Duo
Das iPhone Duo bietet zahlreiche Möglichkeiten, um Inhalte auf die Displays und Display-Regionen zu verteilen. Ein Artikel von videojs.org fasst die zentralen Ansätze und Techniken anschaulich zusammen.
Echtes HTML im <canvas>
Mit HTML-in-Canvas bringt Chrome 157 echtes HTML in 2D- und 3D-Szenen im <canvas>-Element. Anders als bisher bleibt der Inhalt dabei voll funktionsfähig: Text lässt sich beispielsweise markieren, durchsuchen und übersetzen, und auch Screenreader können ihn erfassen. Wie die neue API funktioniert und welche Funktionen es noch gibt, erklärt der Chrome-Blog, inklusive eines zwölfminütigen Demovideos.
SVG-Icons direkt über CSS gestalten
»CSS Linked Parameters« sollen es ermöglichen, externe SVG-Dateien über CSS anzupassen, ohne sie inline ins HTML einzubinden. Dadurch könnten Icon-Systeme flexibler werden, während Vorteile wie Browser-Caching und Lazy Loading erhalten bleiben. Die Funktion befindet sich noch in der Entwicklung.
Neues HTML-Element soll Video-Poster barrierefrei machen
Vorschaubilder von Videos lassen sich bisher nur über das poster-Attribut einbinden, ohne responsive Bildgrößen und ohne Alt-Text. Ein Vorschlag für ein eigenes <poster>-Element soll das ändern: Darin steckt ein ganz normales <img>– oder <picture>-Element inklusive alt-Attribut. Bis zum Baseline-Status und zur tatsächlichen Nutzbarkeit dürfte es aber noch etwas dauern.
KI-taugliche Design Systems beginnen im Code
Eine Figma-Datei kann nicht alles abbilden, was eine Komponente im Code ausmacht. Früher hat das Entwicklungsteam diese Lücken geschlossen. Eine KI füllt sie dagegen stillschweigend mit plausiblen Annahmen. Deshalb lohnt es sich, die Richtung umzudrehen, die Figma-Library per MCP aus dem Code zu generieren und festzuhalten, was sich nicht übertragen lässt.
Adaptive Dark Mode: Safari färbt helle Websites künftig selbst dunkel
Rund 40 % aller Seitenaufrufe kommen aus dem Dark Mode, doch nur etwa 10 % der Websites bieten ein dunkles Farbschema an. Diese Lücke will Apple mit dem Adaptive Dark Mode in der Beta von Safari 27.3 schließen: Websites ohne color-scheme-Deklaration werden automatisch abgedunkelt, inklusive Kontrastprüfung nach WCAG und Anpassung von SVG-Icons. Ein guter Anlass, eure Projekte noch einmal im Dark Mode zu testen.
Fromme CSS-Wünsche für 2027
Josh W. Comeau, bekannt für seine interaktiven CSS-Tutorials, stellt seine zehn Favoriten für Interop 2027 vor. Darunter eigene CSS-Funktionen und neue Eckformen, die ihr teils schon heute nutzen könnt.
Zur Zukunft von Web Components
Web Components wurden in einer Zeit entworfen, in der sich bestimmte Anforderungen mit dem Stand der Technik nicht anders umsetzen ließen, Code von Hand geschrieben wurde und Wiederverwendbarkeit daher wirtschaftlich notwendig war. Ihre Konzepte stecken inzwischen in neuen Plattform-Features wie Popover oder dem anpassbaren <select>, die außerdem performanter und barrierefreier sind. Zudem verliert Wiederverwendbarkeit in Zeiten agentenbasierten Codings an Bedeutung. Nolan Lawson, jahrelang selbst Verfechter der Technologie, meint: Der größte Erfolg von Web Components könnte darin liegen, dass sie sich selbst überflüssig gemacht haben.
Lazy Loading von Bildern und Medien
Ben Schwarz zeigt, wie weit im Voraus verschiedene Browser Medien mit loading="lazy" laden: Chrome passt den Wert dynamisch an die Verbindungsgeschwindigkeit an, während Firefox und Safari mit festen Werten arbeiten. Außerdem erklärt er, welche Elemente sich per Lazy Loading laden lassen, für welche es vermieden werden sollte, und wie die Attribute loading und fetchpriority sinnvoll zum Einsatz kommen.
CSS: Den Pfeil von Select-Feldern gestalten
Mit dem neuen CSS-Pseudoelement ::picker-icon lässt sich der kleine Pfeil in Select-Feldern gezielt gestalten, also etwa einfärben, durch ein eigenes Icon ersetzen oder beim Aufklappen drehen. Noch unterstützen das leider nicht alle gängigen Browser.
WordPress
WordPress 7.2: Überblick für die Entwicklung
WordPress 7.2 erscheint am 8. Dezember. Justin Tadlock fasst im Developer Blog die Neuerungen zusammen. Für uns besonders relevant sind u. a. responsive Block-Controls pro Viewport, Text-Shadow als Block Support mit Presets und das Ersetzen der Skript- und Style-Konkatenation durch Prefetching.
WordPress im Zeitalter des »Agentic Web«
WordPress bietet gute Voraussetzungen für eine agentische Nutzung. Anstatt selbst zahlreiche KI-Features zu integrieren, soll sich das System nativ für fremde Agenten öffnen. Das AI-Team schlägt daher vor, MCP, Abilities und OAuth bis Version 7.3 in den Core zu bringen.
Barrierefreiheit
Accessible Components
TetraLogical – ein renommiertes Unternehmen aus dem Dunstkreis des barrierefreien Web Designs – hat die eigene Komponenten-Bibliothek als Open Source veröffentlicht. Die Liste ist recht überschaubar, aber ein Blick in den Code ist sicherlich interessant.
Deskilling in der Barrierefreiheit
Im Podcast A11yInsights (auch als Transkript verfügbar) sprechen die Accessibility-Experten Thomas Logan und Ken Nakata darüber, ob LLMs unsere Fähigkeiten in der Barrierefreiheit verkümmern lassen. In KI-generiertem Code beobachten sie WCAG-Fehler, die ihnen in 20 Jahren Audits noch nie begegnet sind. Außerdem besprechen sie Studien und raten dazu, KI nicht als erste, sondern frühestens als zweite Prüfinstanz zu nutzen.
Tools & Fun
- Strudel Flow verbindet den Live-Coding-Synthesizer Strudel mit einer visuellen Oberfläche für Musikexperimente im Browser.
- Shaders ist eine Open-Source-Library für Shader-, WebGL- und Three.js-Projekte und bietet eine kuratierte Sammlung von Komponenten zur Nutzung oder als Inspiration.
- Throwie ist eine kuratierte Sammlung an Grafiktools, um Bilder direkt im Browser mit Effekten wie Halftone, Grain, Sketch oder Dithering zu bearbeiten und zu exportieren.
- Wer schon länger nach einer Komponentenbibliothek sucht, die sämtliche fragwürdigen UI-Trends des Slop-Zeitalters vereint, wird bei Performative UI fündig.
- Bramus hat mittels KI das Spiel GTA 1 für den Browser umgesetzt.
- Poznote ist eine kostenlose Open-Source-Alternative zu Notion, Obsidian, Evernote oder OneNote, die ihr per Docker auf dem eigenen Server, NAS oder Raspberry Pi betreibt. Neben Markdown, Kanban-Boards, Mermaid-Diagrammen und Excalidraw bringt sie auch Git-Synchronisierung, eine REST-API und einen MCP-Server mit.
- CSS Text Effects ist eine Sammlung von 123 animierten Text-Effekten in reinem CSS, ohne JavaScript und unter MIT-Lizenz. Die Farben lassen sich über Custom Properties anpassen und
prefers-reduced-motionwird berücksichtigt. - This Hue Shall Pass von Clearleft prüft alle Kombinationen einer Farbpalette in einer Matrix auf die WCAG-Kontrastwerte für AA und AAA. Knapp scheiternde Paare lassen sich per Klick korrigieren: Das Tool passt dabei nur die Helligkeit im OKLCH-Farbraum an, der Farbton der Markenfarbe bleibt also erhalten.
- Energy Icons ist eine Open-Source-Icon-Bibliothek mit über 2.000 Icons rund um Energie, Klima, Infrastruktur und Nachhaltigkeit.
- Claudish übersetzt natürliche Sprache in präzise, für Claude optimierte Anweisungen und hilft dabei, Prompts verständlicher und effektiver zu formulieren.
- Jelly UI ist eine Library mit Web Components für interaktive, animierte Elemente mit Dark Mode und integrierter Barrierefreiheit.
Feedback & Ergänzungen – Schreibe einen Kommentar
Geschrieben von:
Charleen Warkentin
Ferenc Petöcz
Felix Lehmann
Sophie Tausch
Robert Menzel
Konstantin Hanke
