Web Design News & Link-Tipps – Nr. 32
Von: Jonas Unsere Themen im Juli: neue Figma-Features, Inline Conditionals in CSS, die Überbewertung von Google Lighthouse, moderner Browser-Support und (endlich!) Overrides in Synced Patterns von WordPress.
Config 2024 – AI, Figma Slides, UI3 etc.
Auf der Figma-Konferenz Config 2024 wurden einige interessante Features veröffentlicht. Neben AI-Integration in das Design-Tool gibt es ein neues Produkt zum Erstellen von Präsentationen (Figma Slides), ein neues Design für Figma selbst (UI3) sowie zahlreiche kleine Änderungen für Design Tool und Dev Mode. Wir hatten auf eine Grid-Implementierung gehofft. Sowohl AI als auch Slides werden perspektivisch kostenpflichtige Ergänzungen. Dieser Artikel bietet wertvolle Einblicke für Designer, die Figma verwenden.
WordCamp 2024 Turin
Das WCEU 2024 hat in Turin stattgefunden. Die Highlights des Events wurden auf der Website von WordPress veröffentlicht. Das WordCamp Europe 2025 findet im Juni in Basel statt.
WordPress Playground
Der WordPress Playground ist eine voll funktionsfähige WordPress-Installation in der Cloud. Per Klick eingerichtet, können Themes und Plugins importiert, konfiguriert und exportiert werden. Ideal, um Features auszuprobieren und verschiedene WP- oder PHP-Versionen zu simulieren, ohne dass eine Dev-Instanz eingerichtet werden muss.
Overrides in Synced Patterns
Mit der anstehenden WP Version 6.6. wird voraussichtlich endlich das Feature veröffentlicht, auf das unser gesamtes Team seit Ewigkeiten wartet. Design und Layout einzelner Patterns können dann zentral gepflegt werden, wobei Inhalte pro Instanz überschrieben werden können. Im WP Dev Blog gibt es eine Einführung. Die sog. Overrides stehen leider noch nicht für alle Blöcke zur Verfügung (aber für die Wichtigsten) und werden in der Datenbank organisiert, was den Export über die Theme-Dateien verhindert.
WordPress: Block Binding Panel kommt in WP 6.6
In WP 6.6 gibt es ein neues Panel in den Block-Einstellungen, in dem die Verbindung zu einem benutzerdefinierten Feld hergestellt werden kann. Das kann man bspw. auch im Zusammenspiel mit ACF einsertzen.
Designsysteme als solide Grundlage
In seinem Artikel hebt Brad Frost die Bedeutung solider Grundlagen in digitalen Organisationen hervor. Er betont, dass robuste Designsysteme entscheidend für Stabilität und Innovation sind.
Design Engagement Report
Der Artikel »Designer Engagement Report« von Matej Latin analysiert die berufliche Zufriedenheit und Herausforderungen von Designern. Außerdem werden anhand von Umfragen verschiedene Probleme im Berufsfeld aufgezeigt.
Animationen im Webdesign
»Great Animations for Your UI« von Emil Kowalski bietet einen umfassenden Leitfaden zur Erstellung von effektiven und ansprechenden Animationen. Kowalski betont die Bedeutung von durchdachten Animationen, die nicht nur ästhetisch ansprechend sind, sondern auch die Benutzererfahrung verbessern.
Empfindungsfähiges Design
Mehr Zukunft von Big Medium: »Sentiment Design« gestaltet intelligente, AI-getriebene User Interfaces, die adaptiv auf ihre Nutzung eingehen und sich den erkannten Bedürfnissen entsprechend anpassen und verändern.
Webinar-Reihe zum Barrierefreiheitsstärkungsgesetz
Zum Schwerpunkt E-Commerce informiert die Bundesfachstelle Barrierefreiheit insbesondere Unternehmen ein Jahr vor Inkrafttreten des Gesetzes mit einer Webinar-Reihe. Neben den gesetzlichen Grundlagen geht es u. a. um praktische Beispiele zur Umsetzung und die Vorteile digitaler Barrierefreiheit.
Eigene Inhalte vor KI-Bots schützen
Immer mehr Personen machen sich darüber Gedanken, wie die unkontrollierte Plünderung von Inhalten und deren Verwertung durch die KI aufgehalten werden kann. Jeremy Keith setzt unter anderem auf die sogenannte »Prompt Injection«.
Inline Conditionals (if) in CSS
Die CSS Working Group hat Inline-Statements mit if auf »resolved« gesetzt. Die Thematik war schon länger in der Diskussion, konnte nun aber gelöst werden. If-Statements ergänzen Style Queries und können jetzt spezifiziert werden. Lea Verou fasst alles zusammen und schätzt den Zeitraum auf ca. 2 Jahre, bis das Feature in den Browsern angekommen ist.
WooCommerce: Custom Stock Status
In diesem Artikel wird beschrieben, wie in WooCommerce ein eigener Bestellstatus hinzugefügt werden kann. Es werden zusätzlich alle Codesnippets dafür bereitgestellt.
Lighthouse ist nur ein grober Leitfaden
Die Performance-Werte von Google Lighthouse priorisieren die Benutzerfreundlichkeit und die Reaktionsfähigkeit einer Website. Anhand einiger Experimente zeigt Salma Alam-Naylor, dass diese Werte auf Kosten der Benutzerfreundlichkeit und Zugänglichkeit verbessert werden können. Dies zeigt auch, dass Lighthouse nicht alle Probleme zuverlässig erkennen kann, weshalb die Bewertungen nicht als absolute Wahrheit angesehen werden sollten.
Overlay Widgets machen Websites nicht barrierefrei
Sogenannte Overlay Widgets versprechen, Websites barrierefrei zu machen. Matt Litzinger beschreibt, warum sie das nicht können und welche Probleme sie verursachen. Wir haben das Thema schon mehrfach aufgegriffen, halten es aber leider für unverändert relevant.
Zeitgemäßer Umgang mit Browser Support
Die immer kürzeren Release-Zyklen der gängigsten Browser erfordern ein zeitgemäßes Konzept für die Browserunterstützung. Die Agentur Clearleft beschreibt einen pragmatischen Ansatz, der im Wesentlichen auf zwei Grundprinzipien beruht: 1. Der Inhalt und die Kernfunktionen der Website sollten für alle zugänglich sein. 2. Es ist in Ordnung, wenn Websites in verschiedenen Browsern unterschiedlich aussehen.
Animierter Custom Range Slider mit reinem CSS
Bramus Van Damme zeigt mit seinem Beispiel CSS-only Custom Range Slider with Motion, was mit den neuesten CSS-Technologien @property, counters, anchoring und scroll-driven animations jetzt schon in Browsern möglich ist, die alle Technologien unterstützen.
Alle CSS-Einheiten
Geoff Graham liefert in seinem Artikel auf CSS-Tricks eine vielleicht vollständige Übersicht über alle Einheiten, die uns in CSS zur Verfügung stehen. Außerdem kategorisiert er die Typen von Einheiten sinnvoll und liefert Erklärungen für ein besseres Verständnis.
Mesh Gradients in CSS?
Es gibt einen Vorschlag und Diskussionen dazu, ob Mesh Gradients (aka. Freeform Gradients) mit CSS möglich werden sollen. Bisher muss auf Online-Tools oder Grafiken zurückgegriffen werden.
WAI-Techniken übersichtlich zusammengefasst
Die Arbeitsgruppe für Barrierefreiheit (WAI) des W3C hat eine Übersicht und einen Einstieg zum Thema veröffentlicht. Ein guter Startpunkt für alle, die sich aus HTML-Richtung dem Thema annähern möchten.
JavaScript-Frameworks sind (oft) überflüssig
Das Thema ist nicht neu – unsere Haltung dazu auch nicht (wir sind über Jahre sehr gut damit gefahren, den JS-Framework-Bullshit zu umgehen) – doch nun gibt es einen weiteren »Rant«, dem wir inhaltlich viel abgewinnen können und den wir daher gerne weitergeben möchten.
Tools, Tools, Tools
- Iconify Icon Sets ist eine Sammlung von vielen freien Icon-Sets mit nützlicher Set-übergreifender Suchfunktion und verschiedenen Kopiermöglichkeiten.
- Mit Pic Smaller kann man schnell und unkompliziert Bilder per Drag & Drop komprimieren.
- Uiverse.io ist eine Sammlung von Open-Source-UI-Elementen, die mit CSS oder Tailwind erstellt wurden.
- Das WCAG Plugin für Figma verbessert die Zugänglichkeit digitaler Designs, indem es die WCAG-Richtlinien direkt in Designprozesse und -systeme integriert.
- Superfile ist ein Dateimanager im Terminal.
- Who Can Use? zeigt, wie Farbkontraste von Menschen mit visuellen Beeinträchtigungen gesehen werden.
