Web Design News & Link-Tipps – Nr. 19
Von: Jonas Dieses Mal haben wir eine bunte Mischung aus Produkt-Updates, neuen CSS-Features und interessanten Hintergrundartikeln zusammengestellt.
Microsoft Fluent in neuer Version
Microsoft hat mit Fluent 2 die Weiterentwicklung des hauseigenen Design Systems veröffentlicht. In der Außendarstellung von Fluent ist eine starke Entwicklung in Richtung Maximalismus zu erkennen.
Bessere CSS-Animationen
»Using linear() for better animation« erklärt sehr gut, wie man mit der Easing-Funktion linear() bessere Ergebnisse erzielen kann.
Generative AI in Photoshop
Mit »Generative Fill« kommt KI-Unterstützung in Photoshop (beta) an. Damit wird das Bearbeiten von Bildern mit Text-Prompts möglich, zudem stellt die KI kontextbezogen Auswahlmöglichkeiten bereit.
CSS display: contents sorgt für Probleme
Mit der CSS-Deklaration display: contents lassen sich Layout-Probleme lösen, aber sie beschädigt unter Umständen die von Browsern ausgegebene HTML-Struktur und macht damit Webseiten nicht mehr uneingeschränkt zugänglich.
Neue W3C-Website
Das World Wide Web Consortium (W3C) hat seine Website in einer Beta-Version relauncht. Bessere Usability, Zugänglichkeit sowie ein modernerer Look standen dabei im Vordergrund.
Besserer Schutz bei npm install
Die Eingabe von npm install ist ein potenzielles Sicherheitsrisiko, »Introducing „safe npm“, a Socket npm Wrapper« erklärt, wie man die Sicherheit erhöht.
WordPress 6.3 kommt am 08.08.2023
Es sind zwar noch ein paar Wochen bis dahin, aber die Roadmap führt schon diverse Features auf, denen wir gespannt entgegensehen.
Erweiterte CSS-Farbräume in allen großen Browsern
Erweiterte CSS-Farbräume sind nun flächendeckend verfügbar. Rachel Andrews erklärt, wie man diese einsetzt. Dennoch sollte man sie produktiv vorerst nur mit Fallback einsetzen.
Unscharfer Hintergrund in Web-Apps
Ein unscharfer Hintergrund ist ein beliebtes Feature in Video-Calls. Jetzt kann das Feature per »Background Blur API« in Web-Apps genutzt werden, allerdings aktuell nur in Chrome mit experimenteller Flagge.
Safari unterstützt in Beta 17 JPEG XL
Im Unterschied zu Chrome soll Safari das Format JPEG XL künftig unterstützen. Wir können nur mutmaßen, was Apple zu diesem überraschenden Schritt treibt.
Achtung bei der Menü-Wahl
Während der Entwicklung sollte man bei der Wortwahl für die Bezeichnung der Navigation vorsichtig sein. Der Artikel »Be Careful Using ‘Menu’« zeigt gute Gründe dafür.
WooCommerce-Update
Im August 2023 erscheint das Plattform-Update »High-Performance Order Storage« (HPOS) für WooCommerce. Diese Datenbank-Verbesserung soll eine deutliche Performance-Verbesserung mit sich bringen.
Alle WordPress Hooks
Diese Liste aller WordPress Hooks ist sehr hilfreich. Sie informiert bspw. darüber, in welcher WordPress-Version der Hook eingeführt wurde und ob er aktuell (noch) nutzbar ist.
»View Transitions« für Websites
Auch Jeremy Keith erwartet viel von der View Transitions API für Websites (multi-pages) und zeigt, wie man diese schon als Progressive Enhancement einsetzen kann. Bei Dave Rupert gibt es zum Thema eine sehr gute Schritt-für-Schritt-Einführung.
Mit beiden Händen nutzbar
Der 2. Teil der Serie »UX-Design und Inklusion« beschäftigt sich mit den Anforderungen an die gute Nutzbarkeit von Interfaces auch mit der nichtdominanten Hand.
5 Jahre DSGVO: Kein Grund zum Feiern
Der gewohnt ausführliche und informative Artikel bei Kuketz zieht eine recht ernüchternde Bilanz für Deutschland.
Checkliste für barrierefreie Entwicklung
Beim A11Y Project gibt es eine sehr anschauliche Checkliste mit Quellenangaben für eine barrierefreie Webseiten-Entwicklung.
CSS-Architektur und Methodologien – Die Entwicklung im Überblick
»The evolution of scalable CSS« ist eine sehr schöne Übersicht über die Entwicklung der CSS-Architektur inkl. der Methodologien. Am Ende vermisst man etwas eine Erwähnung moderner Techniken wie Layers und Scoping.
Übersicht zu theme.json-Einstellungen von WordPress
Auf CSS-Tricks gibt es eine sehr ausführliche Übersicht zu den Block Theme-Einstellungen in der theme.json.
Neue WebKit-Features in Safari
Ab Version 16.5 werden u. a. interessante CSS-Features wie CSS-Nesting unterstützt. Ab Version 17 (beta) unterstützt Safari Web Apps für Mac. Damit ist es möglich, Websites mitsamt Push-Benachrichtigungen und Badges im Dock zu speichern.
HTML oft besser als PDF
Im Format HMTL verfügbar gemachte Inhalte haben viele Vorteile gegenüber dem Format PDF. Sie sind mit geringerem Aufwand zu aktualisieren und barrierefrei zu erstellen sowie auf mobilen Geräten besser lesbar. Alle Vor- und Nachteile erörtert dieser Beitrag auf popetech.
Rhythmus, nicht Länge von Web-Inhalten ist entscheidend
Das Lesen langer Inhaltsseiten scheitert nicht am Scrollen, sondern am unzulänglichen Interaction Design. In einem weiteren Artikel zeigt Christopher Butler, wie solch langen Inhalte besser strukturiert werden können.
Tools, Tools, Tools
- Mit dem Plugin »LottieFiles for Figma« können Animationen aus Figma exportiert werden.
- Auf isotropic.co gibt es einen Konverter, der Hex-Farbwerte in CSS-Filter umwandelt.
- Splitting.js teilt Wörter oder andere Zeichenketten so auf, dass einzelne Buchstaben mit CSS angesprochen und animiert werden können.
- Proportio ist eine Web-App für Designer*innen, um die Grundlagen eines proportionalen Design Systems anzulegen.
- shapecatcher.com analysiert live gezeichnete Formen und zeigt die ähnlichsten Unicode-Zeichen.
- »WebPerf Snippets« ist eine Liste von JS-Snippets zum Optimieren von Performance-Werten, die direkt in Chrome ausgeführt werden können.
