Web Design News & Link-Tipps – Nr. 31

ACF 6.3

In ACF 6.3 sind interessante neue Features aufgetaucht. U. a. funktioniert nun endlich (nach Jahren!) die Validierung in Custom ACF Blocks. Darüber hinaus können Daten aus ACF-Blöcken jetzt optional – wie bei klassischen ACF Feldern – in Post Meta (und nicht im Content) gespeichert werden.

CSS calc-size(auto)

Es gibt zwei neue Features, die CSS-Animationen einfacher und JS in diesem Zusammenhang überflüssig machen. Einerseits ist es nun möglich, display: none; zu animieren, andererseits kann mit calc-size(auto) eine automatische Höhe einbezogen werden.

Checkliste zur Optimierung der CWV

Die Core Web Vitals (CWV) haben Anfang des Jahres mit INP ja ein Update erhalten, daher schadet es nicht, sich damit noch einmal zu beschäftigen. Die umfangreiche Checkliste auf corewebvitals.io hilft hoffentlich bei der Optimierung.

WordPress wird 21

WordPress wurde am 27. Mai 2024 21 Jahre alt. Gestartet 2003 als einfaches Blogsystem, betreibt es heute über 40 % aller Websites. Eine Übersicht der WordPress-Milestones gibt es u.a. bei WordPress selbst.

10 Jahre Google Algorithmus

Von Anfangs 400 Updates pro Jahr zu knapp 5000 Änderungen pro Jahr. Moz.com gibt Einblicke in die Änderungen der letzten 10 Jahre.

Safe Alignment in CSS

Mit dem Wert safe in Kombination mit anderen alignment-Values kann verhindert werden, dass Inhalte unerreichbar werden, wenn sie länger sind als der verfügbare Raum.

Alternativer Ansatz für natives CSS Masonry

Es gibt bereits einen Ansatz im Entwurfsstadium, um Masonry Grids ohne JS zu implementieren. Chrome schlägt nun einen alternativen Ansatz vor. Derzeit noch ungeklärt ist der wichtige Aspekt der Barrierefreiheit für dieses beliebte Designpattern. Auf die Problematik geht Andy Bell in diesem Beitrag ein.

Ankerpositionierung in CSS

Die CSS Anchor Positioning API ermöglicht es, Elemente relativ zu anderen Elementen, den sogenannten Ankern, zu positionieren. Der Beitrag von Brecht De Ruyte zeigt anhand von grundlegenden Beispielen, wie man das Feature verwendet, um komplexe Layouts einfacher zu gestalten und flexibler auf verschiedene Bildschirmgrößen und -formate zu reagieren. Anchor Positioning ist ab Chrome 125 verfügbar, den das hilfreiche Anchor position Tool ebenfalls voraussetzt.

Web Platform Status

Auf der Entwicklerkonferenz Google I/O wurde im Mai das Web Platform Dashboard vorgestellt. Es gibt eine Übersicht über alle verfügbaren Webfunktionen und ihre Unterstützung in den wichtigsten Browsern.

Die richtigen Namen finden

Bei Design und Entwicklung haben wir oft Mühe, den richtigen Namen zu finden – für Design-Token, Farben, UI-Komponenten, HTML-Klassen oder Variablen. In diesem Beitrag von Cosima Mielke geht es um Namenskonventionen, Tipps und Beispiele aus der Praxis, die helfen, Dinge robust und flexibel zu benennen.

Bewertung von Barrierefreiheit im Web

Das a11y Collective gibt einen Überblick über verfügbare Tools zur Bewertung von Barrierefreiheit von Websites, erläutert kurz ihre Funktionen und Benutzung.

Manifest für ein menschliches Web

Das Internet wird immer menschenfeindlicher. User werden getrackt, die Privatsphäre routinemäßig verletzt. Inhalte werden mit Werbung und einer von Bots generierten, seelenlose Marketingsuppe überflutet, während Urheberrechte ungefragt geopfert werden. Rechenzentren verbrauchen immer mehr Energie, erzeugen immer größere Umweltprobleme, um diesen digitalen Schrottplatz zu betreiben. Nebenbei wächst der Haufen an Elektronikmüll exponentiell an. Dieses Manifest wirbt für ein Internet von und für die Menschen.

Finetuning für Eingabefelder und Formularstyles

In seinem Artikel fasst Garret Dimon zusammen, wie Webformulare und Eingabefelder mit minimalem Mehraufwand durch zusätzliche Attribute optimiert werden können, die dem Browser Hinweise geben und die Benutzererfahrung beim Ausfüllen von Online-Formularen verbessern.

WordPress.com Studio

Für die Plattform-Lösung WordPress.com steht mit Studio nun ein komfortables Tool zur Einrichtung einer lokalen Entwicklungsumgebung zur Verfügung. Für selbstgehostete WordPress.org-Projekte ist das Tool nicht gedacht. Dennoch halten wir die Entwicklung für interessant. Den Unterschied zwischen WordPress.com und WordPress.org haben wir hier erklärt.

Generating text colors with CSS

In ihrem umfangreichen Artikel geht Lea Verou auf eine aktuelle Möglichkeit ein, die Textfarbe für ein Element abhängig von einer bestehenden Farbe – gängigerweise der Hintergrundfarbe des Elements – mit CSS zu errechnen, sodass der Farbkontrast barrierefrei ist. Damit kann die in der Zukunft verfügbare CSS-Funktion contrast-color() jetzt schon simuliert werden.

Eye Tracking als Accessibility Feature für iPad und iPhone

Apple kündigt an, eine neue Built-in Option für seine mobilen Betriebssysteme einzuführen, um mit der Hilfe von AI und Eye Tracking das Gerät zu bedienen. Wir sind gespannt, was das für die Bedienung von Websites bedeutet.

Tools, Tools

Geschrieben von kulturbanause Team

Benutzerbild

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.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →