Web Design News & Link-Tipps – Nr. 23

In diesem Monat hat uns neben spannenden neuen CSS-Features und Tools auch die Umfrage »State of HTML« beschäftigt. Photoshop gibt es jetzt online, XD ist Geschichte und für WordPress & WooCommerce gibt es Updates.

Aktualisiert am 10. November 2023

HTMX

Das HTMX-Projekt ist nicht neu, in jüngerer Vergangenheit wurde aber wieder mehr dazu diskutiert und darüber berichtet. HTMX erweitert HTML-Elemente um Attribute, mit denen interaktive Webanwendungen ohne aufwändiges JavaScript-Framework bzw. Build-Prozess erstellt werden können.

Wegweisende Artikel über Webdesign

Zach Leatherman hat eine Zusammenfassung der aus seiner Sicht wichtigsten (= educational, sensational, inspirational oder foundational) Webdesign-Artikel erstellt. Ein sehr gutes Archiv mit vielen bekannten Artikeln und einigen Perlen, die uns bisher durchs Netz gerutscht sind.

Adobe XD offiziell im »Wartungsmodus«

Wir haben dazu bereits mehrfach Prognosen und Empfehlungen zum Umstieg auf Figma abgegeben. Nun informiert Adobe alle Kunden im HomeScreen von XD darüber, dass sich das Programm im sog. »Wartungsmodus« befindet und nicht weiterentwickelt wird. Details findet ihr auf der Support-Seite von XD. Diese offizielle Information hätte aus unserer Sicht deutlich früher kommen müssen und stärkt sicher nicht das Vertrauen in Adobe-Produkte.

Umfrage: State of HTML

HTML entwickelt sich ständig weiter – auch wenn viele der neuen Möglichkeiten eher unbekannt sind. In diesem Zusammenhang gibt es nun eine neue Umfrage namens State of HTML, die Einblicke in den Bekanntheitsgrad und die Nutzung dieser HTML-Features geben soll. Sehr interessant ist bereits das Durchlaufen der Umfrage. Über die Ergebnisse werden wir berichten.

:user-invalid in Chrome verfügbar

Chrome 119 unterstützt endlich die CSS-Pseudoklasse :user-invalid. Damit ist es möglich, Fehleingaben ohne CSS Hack zu schreiben. Der Chrome-Support macht das Feature praxistauglich, da Firefox und Safari bereits kompatibel sind.

Photoshop als Web-Version veröffentlicht

Photoshop ist nun als Browser-Version verfügbar. Safari wird momentan jedoch noch nicht unterstützt.

WordPress 6.4 Beta 3 verfügbar

Die Beta 3 von WP 6.4 ist verfügbar. Wie bereits im letzten Newsletter angekündigt, gibt es zahlreiche Verbesserungen zur aktuellen Version. Noch nicht erwähnte Neuerungen sind u.a. sog. Block Hooks, per JavaScript synchronisierte Pattern, Hintergrundbilder für Gruppen oder einstellbare Seitenverhältnisse für Platzhaltergrafiken.

WCAG 2.2 veröffentlicht

Die nächste Version der Richtlinie für Barrierefreiheit hat die Hürde zur »W3C Recommendation« genommen. Damit handelt es sich um eine stabile Version, die implementiert werden kann. Es gibt neue Prüfkriterien für alle Konformitätsstufen. U.a. Vorgaben zur Größe von Klickflächen, Sichtbarkeit von Focus-Zuständen oder Authentifizierungen wie Captchas. Details sind u.a. bei BITVTest zu lesen.

WooCommerce – Neuer Produkt Editor (Beta)

Bereits seit WooCommerce 7.9 gibt es einen neuen Produkt-Editor in der Beta Version. Um diesen zu testen, muss er in den Einstellungen aktiviert werden. Die Verwaltung von Produkten wechselt anschließend auf eine moderne Ansicht und lässt den Look des Classic Editors hinter sich.

WooCommerce – High Performance Order Storage (HPOS)

Am 10. Oktober 2023 hat WooCommerce ein Performance-Upgrade vorgenommen. High Performance Order Storage (HPOS) beschleunigt unter anderem den Checkout-Prozess deutlich. Shops die vor dem 10. Oktober gelaunched wurden, müssen die neue Einstellung aktiv einschalten, bei allen neuen Projekten ist die Option voreingestellt.
Wir haben das Feature bei den meisten der von uns betreuten Shops noch nicht aktivieren können, da Plugins inkompatibel waren.

ACF »InnerBlocks-Wrapper« anpassen

Beim Verwenden von InnerBlocks mit Hilfe des WordPress-Plugins »ACF« wird automatisch ein umschließender <div> mit einer festen Klasse geschrieben. In diesem Artikel wird beschrieben, wie dieser Wrapper entfernt werden kann bzw. wie ihr die Klasse umbenennt.

Custom Blocks für WordPress erstellen

Im Blog des Hosting-Anbieters Kinsta ist eine aktuelle, sehr detaillierte und deutschsprachige Anleitung zum Erstellen von Custom Blocks für den Gutenberg Editor erschienen.

Video: Accessibility for designers

Stéphanie Walter, UX- und Produktdesignerin, gib in diesem Video eine umfangreiche Einführung darüber, wie und wo Designer den größten Einfluss auf die Barrierefreiheit eines Produkts haben können.

Textareas automatisch an die Textmenge anpassen

Mit der neuen CSS-Eigenschaft form-sizing wird es möglich sein die Größe einer <textarea> dynamisch anhand der enthaltenen Textlänge zu gestalten. Geplant ist die Implementierung aktuell nur für Chrome Canary.

CSS light-dark() – Vereinfachtes wechseln zwischen Light- und Darkmode

Die CSS-Funktion light-dark() ist eine Ergänzung der CSS Color Module Level 5-Spezifikation und nimmt zwei Farbwerte als Argumente entgegen. Je nachdem, welches Farbschema aktiv ist, gibt sie das erste oder das zweite Farbargument aus. Bisher wurde dafür prefers-color-scheme verwendet.

WordPress-Plugin ActivityPub

Das Plugin »ActivityPub« ermöglicht die Anbindung einer WordPress-Website an das Fediverse, was es ermöglicht, mit einem breiteren Publikum in Kontakt zu treten und mehr Follower zu generieren. Im eBildungslabor haben wir einen interessanten Bericht dazu gefunden.

cssdb – CSS-Features auf dem Weg zum Webstandard

Die Website cssdb zeigt eine umfassende Liste von CSS-Funktionen und ihrer jeweiligen Position im Prozess der Einführung als Webstandard.

OWASP Secure Headers Project

Das OWASP Secure Headers Project ist eine hilfreiche, zusammenfassende Infoquelle zum Thema »Security Headers«.

Block the Bots

Neil Clarke hat einen Artikel verfasst, in dem er erklärt, wie AI Bots davon abgehalten werden können, die Inhalte einer Website zum Trainieren der künstlichen Intelligenz zu nutzen. Ob mir Hilfe der robots.txt oder mittels htaccess – es werden verschiedene Herangehensweisen aufgezeigt.

Chrome Topics API

Google treibt zielgerichtete Werbung auf Basis des Browser-Verlaufs voran. Wenn ihr die Option deaktivieren möchtet, seht ihr euch mit einem Dark Pattern konfrontiert, denn Google verpackt das Feature als »Enhanced Ad Privacy«.

Tools

Icones ist eine umfangreiche Sammlung von farbigen und schwarz-weißen Icons, Logos etc. im SVG-Format.
File Samples ist eine Bibliothek mit Beispiel-Dateien verschiedener Datei-Typen. Sehr praktisch, wenn schnell eine Test-Datei benötigt wird.

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.