Web Design News & Link-Tipps – Nr. 49
Unsere Themen im Dezember: Bessere Workflows für UX/UI Design-Teams, ein neues Buch vom Erfinder des Web, Design Tokens in v1, WordPress in Version 6.9 und praktische Tipps für mehr Barrierefreiheit.
Allgemein
Die unvollendete Geschichte des WWW
Tim Berners-Lee teilte seine Erfindung, das World Wide Web, ohne sie kommerziell zu verwerten, und ermöglichte damit ein neues Zeitalter der Kollaboration und Kreativität. In seinem neuen Buch »This Is for Everyone« erzählt er von anfänglicher Euphorie sowie seinem Hadern mit der bald einsetzenden Instrumentalisierung für Macht- und Profitzwecke durch diverse Akteure. Er beschreibt, wie sich die ursprüngliche Utopie wiederbeleben ließe und warum es sich heute mehr denn je lohnt, für eine freie und selbstbestimmte Zukunft im Web zu kämpfen.
Sollte man Open Source-Arbeit als Ehrenamt anerkennen?
Es gibt aktuell eine Petition, die dafür wirbt, dass Open Source-Arbeit als ehrenamtliche Tätigkeit anerkannt wird. Ein Ansatz, der für uns nachvollziehbar und unterstützenswert klingt.
Cloudflare down: Kleine Seiten, große Folgen
Während des großen Cloudflare-Ausfalls im November waren viele Websites – auch kleine, unkritische – stundenlang offline, obwohl sie eigenständig hätten weiterlaufen können. Der Autor des Artikels möchte Websitebetreibern einen Denkanstoß geben, indem er die weitverbreitete Praxis kritisiert, Websites ohne zwingenden Grund hinter Cloudflare oder vergleichbare zentrale Dienste zu verlagern und so externe Abhängigkeiten zu schaffen.
Jenseits der Maschine – kreative Tätigkeit in der KI-Landschaft
Frank Chimero hat nach längerer Pause wieder einen seiner bemerkenswerten Vorträge gehalten und in Essay-Form gebracht. Er setzt sich mit möglichen Ansätzen auseinander, mit GenAI vor allem im kreativen Prozess umzugehen.
Kürzere Laufzeit von SSL-Zertifikaten
Let’s Encrypt wird über die nächsten zwei Jahre die Gültigkeit von Zertifikaten schrittweise von 90 auf 45 Tage verkürzen. Die Maßnahme folgt einer aktuellen Richtlinie des CA/Browser Forums (Arbeitsgruppe von Zertifizierungsstellen und Browser-Herstellern). Sie soll hauptsächlich die Sicherheit erhöhen, da Kompromittierungen begrenzt und Technologien zur Zertifikatswiderrufung effizienter werden.
»Gut genug« als Strategie
Perfektion frisst Tempo und Fokus. Trevor Lasn zeigt in »Good enough is a strategy«, wie klare Akzeptanzkriterien und kurze Iterationen zu besseren Ergebnissen führen: früh releasen, Feedback nutzen, gezielt nachschärfen, anstatt Features zu überoptimieren.
UX/UI Design
Wie KI die Arbeit mit Design Systems verändert
Morgane Peng fasst zusammen, wie die Arbeit mit Design Systemen die Workflows zwischen 2010 und 2020 verändert hat. Anschließend gibt sie einen Ausblick darauf, wie der Einsatz von KI die Arbeit mit Design Systemen in Zukunft verändern wird. Wir können nur ergänzen, dass vieles, was sie als Zukunftsvision beschreibt, bereits gelebte Realität ist.
Wireframe-Look mit Lo-Fi-Platzhalter-Schrift »Flow«
Selbst wenn Websites direkt im Browser gestaltet werden und konkrete Inhalte vorliegen, macht es mitunter Sinn, die visuelle Qualität bewusst zu reduzieren, damit sich Kundinnen, Kunden und Partner auf die wichtigen Bereiche konzentrieren können. Die Schriftart »Flow« gibt es zwar schon etwas länger, sie ist in unserem letzten Wissensaustausch aber wieder einmal Thema gewesen. Flow erzeugt die Wirkung von Platzhalter-Text und ermöglicht es, eine funktionierende Website zu einem Lo-Fi-Prototyp zurückzubauen.
Rapid Prototyping 2.0
Klickbare Prototypen sind ein wesentlicher Bestandteil des digitalen Produktdesigns. Ob zum Testen responsiver Layouts oder um ganze Nutzungsbewegungen zu überprüfen – schnell muss es gehen. Nur dann können Fehler früh erkannt und behoben werden – ganz nach dem Motto »Fail early, fail often«. Tools wie Figma Make und Vibe Coding-Ansätze sorgen aktuell für eine Art »Rapid Prototyping 2.0« und könnten die »Product Discovery« im UX-Design signifikant verändern.
Verstimmung rund um »Extended Collections« in Figma
Figma hat auf der Schema 2025 ein neues Feature namens »Extended Collections« angekündigt. Dieses Feature ist relevant für das Theming von Multi-Brand-Projekten. Es ermöglicht, Design Tokens weiterzuvererben und bei Bedarf zu überschreiben – ein Feature also, das im CSS-Code Standard ist (Grüße an das »C« in CSS). Leider macht Figma »Extended Collections« nur für Enterprise-Lizenzen verfügbar. Das erzeugt Unmut.
Varianten und Properties in Penpot
Das Smashing Magazine erläutert, wie in Penpot mithilfe von Component Variants und Design Tokens Buttons und andere UI-Elemente so aufgebaut werden, dass alle Zustände über Properties gesteuert und zentral gepflegt werden können. Penpot bietet mittlerweile zahlreiche Funktionen, die bisher vor allem von Figma bekannt waren, und entwickelt sich zunehmend zu einer sehr interessanten Alternative.
Designer sind keine Künstler
Tobias van Schneider erinnert daran, dass der Job von Designerinnen und Designern in erster Linie darin besteht, Probleme zu lösen. Oft hilft es, sich selbst und seine Arbeit als Werkzeug zu betrachten. Er plädiert dafür, nicht bei anderen Designern zu kopieren, da das Ergebnis sonst nur dieselbe Lösung für unterschiedliche Probleme sein wird. Stattdessen sollten Designerinnen und Designer sich lieber mit Künstlern auseinandersetzen, mehr infrage stellen und passendere Lösungen für ihr konkretes Problem finden.
Frontend
W3C Design Tokens V1
Design Tokens als W3C-Standard haben die erste stabile Version erreicht. Unter designtokens.org sind alle wichtigen Informationen zusammengefasst. Auch die ersten Tools implementieren den Standard bereits – Penpot beispielsweise schon länger, Figma in Kürze.
Web Monetization API
Die Web Monetization API ist eine Technologie, die es Websites ermöglicht, Zahlungen von Besuchern zu erhalten – entweder einmalig oder fortlaufend – und so bestehende Einnahmemodelle zu ergänzen oder zu ersetzen. Die Zahlungen können über Links empfangen werden.
Neue Selektoren für Überschriften mit :heading(), :heading
In Firefox Nightly werden neue Pseudo-Klassen bzw. Funktionen unterstützt, die die Auswahl von Überschriften vereinfachen sollen. Ähnlich wie es im Site Editor von WordPress bereits umgesetzt ist, können dann alle Überschriften gemeinsam oder einzelne gezielt angesprochen werden. Die Einsatzzwecke scheinen auf den ersten Blick recht speziell zu sein und werden von Alvaro Montoro eingeordnet.
Arbeiten mit Baseline
Wir schreiben oft im Newsletter über CSS-Features, die die sogenannte Baseline erreicht haben. Patrick Brosset, der an der Definition mitarbeitet, führt in seinem Artikel aus, was der Begriff abbildet, was nicht und wie man im Alltag damit arbeiten kann.
Wertebereiche für Style Queries
Wie Media Queries und Container Queries können Style Queries nun auch auf Wertebereiche prüfen und nicht nur auf feste Werte. Für Vergleiche können numerische Datentypen aus Custom Properties oder aus Funktionen wie attr() in @container style() verwendet werden.
Sicheres JavaScript schreiben
JavaScript ist ein wichtiger Bestandteil des Internets. Aufgrund seiner weiten Verbreitung ist es ein beliebtes Ziel für Angreifer. Tanya Janca gibt sinnvolle Hinweise für das Schreiben von sichererem JavaScript.
WordPress
WordPress 6.9 erschienen
Die neue WordPress-Version ist erschienen und wurde dieses Mal live in San Francisco beim »State of the Word« gelauncht. Über die neuen Funktionen haben wir in den letzten Monaten immer wieder berichtet, eine vollständige Zusammenfassung gibt es bei Gutenberg Times.
Abilities API
Die in WP 6.9 eingeführte Abilities API hält fest, was die WordPress-Installation inklusive Erweiterungen kann und wie die verschiedenen Funktionen heißen. Die API ist höchst relevant für AI, muss aber insbesondere von Theme- und Plugin-Herstellern mit Informationen versorgt werden. Dazu wurde nun ein ausführlicher Artikel veröffentlicht.
Barrierefreiheit
Github verabschiedet sich von Toasts aus Gründen der Barrierefreiheit
Toasts oder Snackbars – beliebte UI-Elemente zum Anzeigen von kurzzeitig relevanten Informationen und Bestätigungen – sind eine Herausforderung für die Barrierefreiheit. Offenbar so sehr, dass Github die Elemente nun aus dem eigenen Design System »Primer« verbannt. In einem ausführlichen Statement wird detailliert erklärt, welche WCAG-Anforderungen kritisch sind und welche Alternativen es gibt.
Erkenntnisse zu Überschriften, skalierenden Schriften etc.
Im letzten Wissensaustausch haben wir bereits über einen Artikel berichtet, der auf die Position der <h1> innerhalb oder außerhalb von <header> und <main> eingeht. CSS Tricks greift das Thema nun auf und ordnet es (besser verständlich) ein. Zudem werden auch angrenzende Themen im Kontext der Barrierefreiheit behandelt – beispielsweise das Problem mit dem maximalen Zoom bei skalierenden Schriften.
Das Zeichenlimit für Alternativtexte
Der Artikel von Chris Yoong räumt mit dem verbreiteten Mythos auf, dass Alternativtexte für Bilder ein Limit von 100, 150 oder 200 Zeichen hätten. Es gibt keine feste Zeichenbegrenzung für Alt-Texte, weder in Screenreadern noch in den gängigen Accessibility-Standards. Entscheidend ist allein, dass der Alt-Text den Bildinhalt und seine Funktion im Kontext klar und verständlich beschreibt.
Alt-Text vs. Bildbeschreibung
Lauren Sherrard erklärt in ihrem Artikel »Alt text or image description?« kurz und übersichtlich die Unterschiede, Einsatzmöglichkeiten und Best Practices für Bildbeschreibungen und Alt-Texte.
Barrierefrei beschriften
Im Artikel »Accessible Names and Labels« wird erklärt, wie verschiedene Bestandteile in HTML barrierefrei beschriftet werden können. Es wird gezeigt, welche Techniken zuverlässig sind und welche Fehler häufig gemacht werden (z. B. Platzhalter als Ersatz für Labels, falscher Gebrauch von ARIA). Wenig überraschend wird die Kombination von nativen HTML-Labels und semantischen Elementen in diversen Szenarien als robusteste Lösung empfohlen.
Erklärung zur Barrierefreiheit (EzB) bei öffentlichen Stellen
Die BFIT-Bund (Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik) hat in Kooperation mit anderen Stellen ein Webinar zur Erklärung zur Barrierefreiheit öffentlicher Stellen durchgeführt. Es gibt eine Videoaufzeichnung, aber auch ein PDF der Folien. Es wird u. a. durch alle Anforderungen an die EzB geführt. Eine Botschaft ist: Die Erklärung taugt nicht zum Feigenblatt.
CAPTCHA als Problem für die Barrierefreiheit
Warum gängige Authentifizierungsmethoden für Menschen mit Behinderungen oft unüberwindbare Hürden sind und wie man mit barrierefreien Alternativen wie MFA, Single Sign-On und Magic Links bessere Inklusion schaffen kann, führt Eleanor Hecks auf Smashing Magazine aus.
Tools
- SlimSelect.js verwandelt native
<select>-Elemente in moderne, anpassbare, WCAG-konforme Dropdowns. - Im digitalen Nachschlagewerk webglossary.info werden tausende Begriffe aus Webentwicklung, Design und UX erklärt.
- Visual Types bereitet Typescript-Typisierung visuell schön reduziert auf.
- Horizon generiert einen CSS-Gradienten, basierend auf dem aktuellen Himmel an deinem Standort; nachts ist folglich alles schwarz, aber tagsüber kannst du den Himmel als Farbverlauf sehen.
- Scope Creep als spielbarer Horror? Dieses Browser-Game zeigt, wie schnell Projekte außer Kontrolle geraten.
- Typing SVG generiert animierte Texte und hat verschiedene Einstellungsmöglichkeiten.
- Colorpalette Pro ist ein Tool, das sechs unterschiedliche Farbpaletten, in vier Stilen und über acht Farbräume generiert.