Web Design News & Link-Tipps – Nr. 31
Von: Jonas Unsere Themen in Juni: Ein Manifest für mehr Menschlichkeit im Web, WordPress wurde 21, Google macht einen neuen Vorschlag für CSS Masonry Layouts, Finetuning für Formularfelder, ein neues Animations-Feature für automatische Höhen in CSS und Apple führt Eye-Tracking ein.
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
- KeywordsPeopleUse liefert zu eingegebenen Themen die Fragen, die Nutzende stellen. Für die ersten 15 Credits kostenlos, man kann es zumindest mal ausprobieren …
- Mit redirect.li bekommt ihr schnelle und umfassende Informationen über HTTP-Anfragen, Statuscodes, Server-Probleme und einiges mehr.
- Das WordPress-Plugin Block Catalog zeigt komfortabel an, wo welche Gutenberg-Blöcke im Einsatz sind.
- Formsubmit bietet eine einfache Methode für den Versand von HTML-Formularen an. Sobald ein Formular mit dem Endpoint des Dienstes verbunden ist, übernimmt dieser die Validierung und den Versand der Mail, ohne dass PHP, JavaScript oder sonstiger Code notwendig ist.
- Mit dem Generative Gradients Figma Plugin können komplexe Gradients mit nur wenigen einfachen Werkzeugen wie Farbe, Radius, Positionierung, Unschärfe und Körnung erstellt werden. In Figma stehen Sie dann als PNG zur Verfügung.
