Web Design News & Link-Tipps – Nr. 22

Von Ankündigungen zur Zukunft von WordPress bis zu neuen Features in Figmas DevMode haben wir wieder einen hoffentlich interessanten Querschnitt zu aktuellen Trends und Innovationen unserer Branche zusammengestellt.

Aktualisiert am 13. September 2023

WordCamp US 2023

Das WordCamp US hat Ende August 2023 in Maryland stattgefunden. Der Beitrag auf wordpress.org gibt einen Ausblick, wo es mit WordPress und Gutenberg hingehen wird.

Matt Mullenweg kündigt in seiner Keynote WordPress 6.4 für den 07.11.23 an. Die Version bringt einige neue Features mit. Dazu zählen unter anderem ein TOC-Block, eine Anbindung an Google Fonts (Schriften werden lokal gespeichert) und eine integrierte Lightbox für Bilder. Mit der Veröffentlichung kommt auch das neue Theme »Twenty Twenty-Four«, welches vor allem für kleine Unternehmen, Künstler oder Fotografen zugeschnitten ist.

Weiterhin gibt er Informationen zum Start der dritten Phase in der Entwicklung von Gutenberg. In dieser Phase steht vor allem Real-Time-Collaboration auf dem Plan. Das ist zwar nicht neu, konkretisiert sich jetzt allerdings. Die aktuellen Ideen inkl. des Aufrufs, sich zu beteiligen, können auf der Website eingesehen werden.

Sticky State Container – Intend to prototype

Es wäre schön, wenn mit CSS Container Queries geprüft werden könnte, ob ein Element sticky (=stuck) ist. Daran wird jetzt intensiver gearbeitet.

Captcha – barrierefrei und DSGVO-konform?

Captchas sind unkomfortabel und machen größere und kleinere Probleme bei Datenschutz, Usability und Barrierefreiheit. FriendlyCaptcha ist bei mehreren unserer Projekte im Einsatz und behauptet von sich selbst, diese Probleme zu lösen. Hat dazu jemand schon Erfahrungswerte, bspw. mit assistiven Technologien?

Ergebnisse der State of CSS-Umfrage 2023

Dieses Jahr gab es zahlreiche neue CSS-Features, bzw. Browser-Support für solche. Die Ergebnisse der Umfrage haben für uns keine Überraschung bereitgehalten. Allerdings ist die Übersicht über Features, Frameworks und Tools immer sehr interessant, um sicherzugehen, dass man nichts verpasst.

Es gibt keine festen Viewports

Wir propagieren es bereits seit Jahren und neu ist die Erkenntnis in der Branche auch nicht: Es macht keinen Sinn, für fest definierte Breakpoints zu gestalten. Die Kollegen bei Set Studio haben in einer kurzen 48h-Auswertung über 2.300 verschiedene Viewports gemessen.

Natives CSS Nesting in allen Browsern verfügbar

Das Verschachteln von CSS-Selektoren ist ab Firefox 117 in allen Browsern mit nativem CSS möglich.

Astro 3 erschienen

Version 3 des populären Astro-Frameworks ist erschienen. U. a. sind nun View Transitions mit an Bord, die Performance wurde verbessert und die Bild-Optimierung ebenfalls. Kurz vorher wurde eine Kooperation mit Vercel bekannt gegeben. Ein weiteres Beispiel für eine Kooperation zwischen Hosting und Tool, die hoffentlich nicht zu Abhängigkeiten führt.

200+ Features für den Figma-DevMode

Der Blog-Beitrag von Figma stellt die wichtigsten von rund 200 neuen Features und Fixes zum Dev-Mode vor. Es können u. a. jetzt auch einzelne Frames als »Ready for Dev« gekennzeichnet werden und das jeweils verwendete Grid angezeigt werden. Veränderte Komponenten (Detached) können mit dem Original verglichen werden und Variablen werden automatisch vorgeschlagen, wenn passende Werte im Design verwendet wurden.

Neue CSS Animation-Features in Chrome

Chrome 116/117 bringt vier neue Funktionen mit, die sanfte Animationen und Übergänge für sog. diskrete Eigenschaften ermöglichen. Konkret kann damit die CSS-Eigenschaft »display« in einer Keyframe-Timeline animiert werden und mehr.

Theming mit CSS Container Style Queries

Christopher Kirk-Nielsen zeigt in diesem Artikel, wie Theming in CSS unter Verwendung von Container Style Queries optimiert umgesetzt werden kann. Der Abschnitt zu JSON Design Tokens in CSS kommt mit einem Code-Beispiel zum automatisierten Umwandeln von JSON zu CSS.

Die Alt-Text Hall of Fame – So sehen gute Alt-Texte aus

In der »Hall of Fame« der Alt-Texte sind die wichtigsten Punkte zu Alt-Texten zusammengefasst und mit vielen Beispielen und unterschiedlichen Ansätzen anschaulich erläutert.

Figma-Widget mit KI-Unterstützung

Das neue Widget »Jambot« integriert eine visualisierte Version von ChatGPT in FigJam. Das Tool kann u.a. in Brainstorming-Sessions, zur Erstellung von Mindmaps und in ähnlichen UX-Formaten eingesetzt werden. Es nimmt einen Prompt (Befehl) entgegen und entwickelt dann neue Ideen, erstellt Varianten von Ansätzen oder fasst Informationen in thematischen Clustern zusammen.

CSS-Selektoren visualisiert

Auf fffuel.co gibt es einen Leitfaden, der die wichtigen CSS-Selektoren detailliert und anschaulich darstellt.

WCAG 2.2 nun eine W3C »Proposed Recommendation«

Das World Wide Web Consortium (W3C) hat die Version 2.2 der Web Content Accessibility Guidelines (WCAG) als vorgeschlagene Empfehlung akzeptiert. In Folge stimmen nun die W3C-Mitglieder über die Veröffentlichung des Dokuments als W3C-Empfehlung ab.

Tools, Tools

draw.oooo.so ist ein hilfreiches kleines Tool, das handgezeichnete Skizzen automatisch in animierte SVGs derselben Skizze umwandelt
Bei Cloudflare gibt es einen sehr detaillierten Speed-Test der Internetgeschwindigkeit.
Project Wallace analysiert CSS-Dateien und gibt sehr detaillierte Ergebnisse dazu aus.
Checklist Design stellt verschiedene Workflows, Seiten und Elemente dar und liefert dazu eine Checkliste mit notwendigen Informationen, die zu beachten sind.
iconbuddy.app bietet über 180.000 freie SVG Icons verschiedener Iconsets zum Personalisieren und Herunterladen an.
Lightning CSS ist ein extrem schneller CSS-Parser, Transformer, Bundler und Minifier, den wir zur Optimierung unseres eigenen Gulp-Buildprozesses testen werden, um gegebenenfalls CSSNano abzulösen.

Geschrieben von kulturbanause Team

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.