Web Design News & Link-Tipps – Nr. 21
Von: Jonas, Raimund Diesmal beschäftigen uns neue WordPress- und ACF-Versionen ebenso wie die Nutzung von KI und ein freies Internet. Interessante Meldungen zu CSS, UI/UX Design und Frontend Entwicklung sowie neue Tool-Tipps kommen wie gewohnt hinzu.
CSS Scroll-Animationen in Chrome verfügbar
Ab Chrome 115 funktionieren CSS Scroll-Animationen. Der sehr anschauliche Artikel auf utilitybend.com zeigt, was mit aktueller Syntax möglich ist. Was bald möglich sein wird, steht bei developer.mozilla.org. Eine interessante Case Study dort zeigt den Performance-Vorteil von CSS Scroll-Animations gegenüber einer herkömmlichen Umsetzung mit JavaScript.
UX-Probleme bei manipuliertem Scrollverhalten
Der Artikel von der Nielsen Norman Group beschreibt und begründet, welche UX-Probleme entstehen, wenn das native Scrollverhalten des Browsers manipuliert wird.
Empfehlungen für Accordions auf Desktop-Displays
Ein weiterer informativer Artikel der NNG setzt sich damit auseinander, wann und wie Accordions in der Desktop-Ansicht von Websites verwendet werden sollten.
Adaptive Typografie mit Media-Queries und Variable Fonts
Dieser Beitrag von Adam Argyle zeigt, wie mit CSS-Media-Queries für variablen Schriften das individuelle Leseerlebnis weiter verbessert werden kann.
ACF-Update 6.2
Die neue ACF-Version 6.2 enthält u. a. eine Benutzeroberfläche zur Erstellung von Options-Seiten, native bidirektionale Felder, die Möglichkeiten mehrere JSON-Pfade zu verwenden und eine Funktion zum Duplizieren von CPTs und Taxonomien.
Menschen lösen Captchas langsamer als KI
Eine aktuelle Studie belegt, dass Menschen beim Lösen von Captchas fast durchgehend langsamer als automatisierte Bots sind.
Eigene Inhalte von KI-Crawl ausnehmen
OpenAI, das Unternehmen hinter ChatGPT, stellt Möglichkeiten bereit, eigene Seiten vom Crawlen für das Training von GPT per robots.txt auszuschließen.
Google treibt Browserkontrolle voran
Google integriert die »Web Environment Integrity« (WEI) in Chrome/Chromium-Browser. Der Beitrag bei digitalcourage.de zeigt auf, warum das als Generalangriff auf das freie Internet verstanden werden kann.
Alle HTML-Elemente in einem Beitrag
Patrick Weaver bringt in einem Blog-Post alle HTML-Elemente unter und lernt dabei einige unterhaltsame Dinge.
Tipps zur Organisation der CSS-Farbarchitektur
Sehr guter und aktueller Artikel über die Benennung und Organisation von Variablen sowie Tipps zur Umsetzung mit CSS und Sass.
Die fünf Elemente der UX gut vermittelt
In seiner Tutorialreihe zu User Experience Design gibt Omar Elgabry eine verständliche und kompakte Übersicht über die fünf Elemente der User Experience. In den weiteren Beiträgen geht er deutlich mehr in die Tiefe.
Neuigkeiten in WordPress 6.3
WordPress 6.3 »Lionel« ist da und bringt unter anderem neue Blöcke (Fußnoten, Details/Summary), viele Performance-Verbesserungen und anderes mehr mit. Der Tweet-Thread von Rich Tabor stellt mit vielen Videos alle Neuigkeiten ausführlich vor.
Workflow-Konzept ohne eine Übergabe von Design an Development
»No Handoff: close the gap between product and engineering« zeigt einen Ansatz, der für uns nicht neu ist. Wir arbeiten bevorzugt so, auch Artikel wie »The Hot Potato Process« gehen in dieselbe Richtung. Aber es lohnt, immer wieder darauf hinzuweisen, dass viel Potenzial in der stärkeren Verschränkung von Design und Code liegt.
Mit Block Filtern WordPress Core Blocks anpassen
Misha Rudrastyh zeigt in seinem gewohnt informativen Tutorial, wie man mit WordPress Block filtern fast alle Bestandteile von Core Blocks anpassen kann.
Semantische Zukunft für Designsysteme
Der Artikel »The future of design systems is semantic« beschreibt den Mehrwert von Variablen in Figma – erschienen im Figma-Blog »Shortcut«. Ein sehr wichtiges Konzept, dass in Figma dringend notwendig war und einen wichtigen Schritt hin zu einem gemeinsamen Design/Code-Verständis darstellt.
Neue Projekte von Google und Stack Overflow mit KI-Unterstützung
Von Google kommt die browserbasierte Entwicklungsumgebung »Projekt IDX«, die bekannte Frameworks unterstützt und weitere interessante Features bietet. Stack Overflow startet »OverflowAI«, das bspw. eine KI-unterstützte, semantische Suche ermöglichen soll.
Tools, Tools, Tools
- Arc, der neue Browser von The Browser Company aus New York setzt auf schlichtes, individualisierbares Design und berücksichtigt die Privatsphäre seiner User – Chromium-basiert ohne verpflichtende Integration von Google Diensten. Aktuell nur für MacOS und iOS verfügbar und für Microsoft angekündigt. Unser erster Eindruck ist positiv.
- Der »Image Energy Calculator« berechnet den Energieverbrauch einer Datei (z.B. Logo), indem er die Intensität der Farbe (RGB) pro Pixel anzeigt, die in einem OLED Display zur Darstellung der Grafik benötigt wird.
- »OddContrast« ist ein weiteres Tool zum Prüfen von Farb-Kontrasten, hat aber im Vergleich zu anderen mehr Farbformate wie OKlab, OKlch, p3 und weitere.
- Filesize.js ist eine kleine JavaScript-Bibliothek, die eine einfache Möglichkeit bietet, Dateigrößen in menschenlesbare Strings umzuwandeln.
- »Free Faces« ist eine hübsch aufbereitete Sammlung von Schriftarten mit offenen Lizenzen.
- npmgraph.js ist ein Webtool zur Visualisierung von Paketabhängigkeiten in npm-Projekten.
- Preline UI ist eine Open Source Komponenten-Bibliothek aus vorbereiteten UI-Komponenten, die auf dem CSS-Framework »Tailwind« basiert.
- »html.to.design« ist ein Figma-Plugin zum Import von Websites in Figma. Die Ergebnisse sind sehr überzeugend – in der kostenlosen Version sind pro Monat 12 Importe verfügbar.
Noch Sommerloch?
Diesmal bieten wir zum Ausklang mehrere unterhaltsame Links, viel Spaß dabei, zumal der Sommer endlich zurückzukommen scheint.
- macintosh.js ist eine Electron-App, die einen Macintosh Quadra von 1991 simuliert.
- Aniso ist ein Open-Source-ASCII-Tool zur Erzeugung textbasierter Bilder.
- Chip Player JS ist ein Browser-basierter Audio-Player für MIDI und Games-Audioformate, gebaut mit JS, in MS-DOS/Norton-Commander-Optik.
Geschrieben von:
Raimund Büchner
