Web Design News & Link-Tipps – Nr. 29
Auch im April sind Themen wie Design Systeme und CSS für uns kein Scherz. Weitere Neuigkeiten zu bspw. WordPress oder Barrierefreiheit vervollständigen diese Ausgabe.

Barrierefreies Design mit Fokus auf Mental Health
Microsoft stellt das Mental Health Toolkit vor, eine Erweiterung des Cognitive Inclusion Toolkits, das auf Inklusivität und mentale Gesundheit in der Produktgestaltung fokussiert ist. Ziel ist es, Produkte zu entwickeln, die Stress reduzieren und das Wohlbefinden fördern, basierend auf Forschungen zu kognitiver Diversität.
Wie geht es weiter mit dem globalen Design System?
Trotz breiter Zustimmung gibt es Herausforderungen und Bedenken hinsichtlich der Durchführbarkeit und der Berücksichtigung aller Anwendungsfälle. Im Update geht Brad Frost auf viele entstandene Diskussionspunkte ein, unter anderem auf den Beitrag von Chris Coyier (wir berichteten). Die Unterhaltung ist im Gange …
Icons in Figma erstellen
Der Artikel in der »Icon University« bietet eine umfassende Anleitung zur Erstellung von Icons in Figma, beginnend mit einer Einführung in grundlegende Werkzeuge wie Rahmen, Raster, Formen und den Stift.
Flexbox und CSS Grid für Designer
In ihrem Beitrag erläutert Christine Vallaure anschaulich, wie Flexbox und CSS Grid eine flexiblere, inhalts- und raumbezogene Anpassung der Designs ermöglichen, und gibt einen Überblick über die Grundlagen.
WordPress 6.5 »Regina« ist da
Die neue WordPress Version 6.5 ist am 03.04.24 veröffentlicht worden und bringt u. a. folgende Features mit: Hinzufügen und Verwalten von Schriften, Revisionen für Templates und Template-Teile (parts), neue Werkzeuge für Hintergrundbilder, eine neue Datenansicht und einige kleine Verbesserungen in der Handhabung. Leider wurde das von uns sehnlichst erwünschte Feature mit »Partially Synced Patterns« auf Version 6.6 verschoben.
Neue WordPress-APIs
Die mit der neuen WordPress-Version veröffentlichte Interactivity API bietet Entwicklern eine Standardmethode, um dem Frontend ihrer Blöcke Interaktionen hinzuzufügen. Die Block Bindings API ermöglicht es, Core-Blöcke mit individuellen Feldern zu verknüpfen.
Aus Woo.com wird wieder WooCommerce.com
Vor allem aus SEO-Gründen entscheidet sich WooCommerce, von Woo.com wieder auf WooCommerce.com umzustellen. Dadurch verschiebt sich der Release der neuen WooCommerce-Version um voraussichtlich einen Tag.
Alte Store-API von WooCommerce wird deaktiviert
Die alte WooCommerce Store-API wird deaktiviert. Ab Mitte Mai läuft damit nur noch die neue oder es muss ein Fallback eingebaut werden.
KI und Design-Systeme
Der aktuell wieder recht rührige Brad Frost beschreibt, wie seine neue Agentur Big Medium speziell »Große Sprachmodelle« für unterschiedliche Zwecke wie etwa zum Schreiben von Komponenten-Code, Unit-Tests und Dokumentationen einsetzt.
Appetit kommt beim Essen
37signals, die Firma hinter bspw. Basecamp, hat im kostenlosen Online-Buch »Shape Up« ihre Arbeitsmethoden zusammengefasst. Ansätze wie »Setting the appetite« sind erfrischend und eine Beschäftigung damit wert, auch wenn man nicht Software-Produkte herstellt.
Tailwind kritisch gesehen
In »Tailwind marketing and misinformation engine« setzt sich Tero Piirainen mit der Entwicklungsgeschichte von Tailwind auseinander. In seinem mit sehr anschaulichen Screenshots bebilderten Beitrag »Tailwind vs. Semantic CSS« vergleicht er zwei sehr ähnliche Webseiten, eine gebaut mit Tailwind, eine mit semantischem CSS. Wie gewohnt noch meinungsstärker formuliert Heydon Pickering in »What is Utility-First CSS?«.
Neue mathematische Funktionen in CSS: pow(), sqrt() und mehr
CSS hat neue mathematische Funktionen erhalten, um die alten Favoriten (wie calc()) zu ergänzen. In diesem Zuge hat Dan Wilson ebenfalls seine Blog-Serie, um einen Beitrag erweitert.
Highlights der 10th WebAIM Screen Reader User Survey
Die Ergebnisse der 10. WebAIM Screen Reader Nutzerbefragung wurden veröffentlicht. Screen Reader auf mobilen Geräten sind die am häufigsten verwendeten. Die Navigation über Überschriften ist die häufigste Methode zur Erkundung des Seiteninhalts. WebAIM gibt an, dass die problematischsten Punkte in den letzten 14 Jahren weitestgehend unverändert geblieben sind. Dieser Beitrag auf Webaxe bietet eine knappe Zusammenfassung und einige Highlights.
Neue CSS-Eigenschaft »reading-order-items« in Draft
Eine neue CSS-Eigenschaft ist nun in Arbeit, um die Reading-Order von Elementen via CSS bestimmen zu können. Ein Accessibility-Feature, um Lese-, Layout- und Tab-Reihenfolge logisch zusammenzubringen (wir berichteten in Nr. 17 über den Vorschlag der CSS Working Group).
Modernes Tooltip-Styling mit CSS-Clip-path
In seiner Artikelserie stellt Temani Afif moderne Techniken vor, um Tooltips mit möglichst wenig Markup und größtmöglicher Flexibilität zu erstellen. Hier geht’s zu Teil 1 und Teil 2.
Persönliches Statement von Chris Coyier zum aktuellen Stand von CSS-Tricks
Zwei Jahre nach dem Verkauf von CSS-Tricks schildert Chris Coyier seine aktuelle Sicht der Dinge und wie er versucht hat, mit einem »Big Swing« die Plattform zurückzubekommen.
Tools
- Trangram ist ein kostenloser Online Editor, in dem kleine Animationen erstellt und exportiert werden können.
- Mit gradiator.app von Rodolfo Fanti lassen sich spielerisch CSS-Gradients erstellen und der Code exportieren.
- Auf nucleoapp.com findet ihr über 200 Länderflaggen als optimierte SVG-(Icons).