Web Design News & Link-Tipps – Nr. 14

Vorgeschlagener Standard zum Festlegen von Security Policies

security.txt ist ein Projekt zum Verankern eines neuen Standards, mit dem Sicherheitsrichtlinien definiert werden können. Google, GitHub und diverse Regierungen (UK, Niederlande, Italien) machen bereits mit.

Design System Tokens von Figma nach WordPress

WordPress VIP, der Enterprise-Zweig von Automattic, bietet ein Tool an, das Design System Tokens aus Figma nach WordPress exportiert. Es setzt auf vorhandenen Workflows auf und ist nur eingeschränkt zugänglich, aber es zeigt die Entwicklung: Design-Tools werden zunehmend kompatibel mit den technischen Systemen, in denen sie zum Einsatz kommen.

SPF-Record online erstellen

Das »Sender Policy Framework« (SPF) soll das Versenden von E-Mails über nicht legitimierte Mailserver unterbinden. spf-record.de bietet das Prüfen und Erstellen des SPF-Records an. Das ist u.a. dann relevant, wenn ihr mit dem Absender eurer eigenen Domain, Mails über einen Drittanbieter verschicken möchtet.

Aufgaben von User Interfaces verdeutlichen

Ein Hierarchie-Streifen in einem UI-Design (»hierarchy strips«) verdeutlicht die Aufgaben einzelner Bestandteile und unterstützt ein besseres visuelles Design. Ein weiterer interessanter Ansatz, sich dem höchst komplexen Thema »Spacing« zu nähern.

System-Farben mit CSS einbinden

Wer die eingestellten Browser-System-Farben für das eigene Styling nutzen möchte, findet in diesem Eintrag bei mdn web docs die CSS-Befehle dazu. Mit LinkText könnt ihr beispielsweise die eingestellte Farbe für Links verwenden (Standard = blau). Mit VisitedText die Farbe von besuchten Links (Standard = violett) usw.

Mit HTML automatisierte Übersetzung regeln

Je mehr automatisierte Übersetzungen Einzug halten, desto mehr fallen uns im Kontext missverständliche oder schlicht falsche Übersetzungen auf. Mit dem HTML-Attribut translate kann man das verhindern (noch mal mdn web docs), leider noch nicht in Firefox.

Dokumentation von UX-Komponenten

Das UI Playbook stellt eine Sammlung von dokumentierten UI-Pattern bereit. Die ausführlichen Einträge beinhalten Best Practices, Implementierung, Beispiele, Barrierefreiheit und weitere Ressourcen.

Bilder-Layout mit CSS-Trigonometrie-Funktion

CSS-Trigonometrie-Funktionen sind schon experimentell nutzbar. Mit der Funktion sin() kann man bspw. Bilder-Layouts auf Sinus-Kurven legen.

Neue Transition-Effekte

Ein interessantes Beispiel für die Umsetzung von text transitions ist bei nerdy.dev zu finden. Ebenfalls noch experimentell, aber »behind the flag« schon in Chrome 109+.

Website-Performance in 2023

Auf ultimatelybetter.com gibt es einen sehr ausführlichen Ratgeber zum Thema Audit und Performance-Optimierung von WordPress-Websites. Checkpunkte und Abfolge entsprechen grundsätzlich auch unserem erprobten Verfahren. Die Core Web Vitals-Empfehlungen des Chrome DevRel-Teams für 2023 stimmen ebenfalls grundsätzlich mit unserem Vorgehen überein. Dennoch zwei sehr hilfreiche Zusammenfassungen auf aktuellem Stand.

Verbesserte Barrierefreiheit beim Nutzen des Block-Editors in WordPress

Mit Mini-Plugins vom WordPress-Kernteam kann die Barrierefreiheit von Webseiten verbessert werden:

Spacing Tokens semantisch gestalten

Dieser sehr interessante Artikel beschäftigt sich mit dem Gestalten von Zwischenräumen anhand semantischer Eigenschaften (Gestaltgesetz der Nähe) und der systematischen Umsetzung mit Design Tokens. Die oben genannten Hierarchy-Strips könnten das gut begründen.

Schriftgrößen im Responsive Design

Dieser interessante, dabei recht »printige« Ansatz macht die Schriftgrößengestaltung von der Anzahl der genutzten Spalten abhängig: Je breiter, desto wichtiger (also größer).

Responsive Images und Container Queries – noch nicht zusammen

Das Bereitstellen von responsiven Bildern funktioniert noch nicht im Zusammenspiel mit Container Queries. Stefan Judis gibt einen Überblick und zeigt schon vorhandene Ansätze.

»Unique visits« ohne Cookies feststellen

Der nach Selbstaussage datenschutzkonforme und umweltbewusste Web-Analyse-Dienst »Cabin« zählt die Anzahl der »unique visitors« über das Auswerten von direkt an den Browser geschickten last-modified-Abfragen.

Eine andere Methode der Cookie-freien Informationsgewinnung ist das sogenannte »CSS Fingerprinting«, welches das Abfragen von diversen Media-Queries nutzt. Zwar interessant, aber wohl erst mit der CSS-Spezifikation »Values 4« skalierbar einzusetzen.

Highlighter-Effekt mit CSS

Wie mit dem Marker markierte Textstellen wirken dynamisch, benötigen jedoch ein vergleichsweise aufwändiges CSS. Vadim Makeev zeigt, wie es gehen kann.

Produkt-Sync in WP-Multisites

Bei mehreren Web-Shops in einer Multisite-Umgebung kann es gewünscht sein, Produkte zwischen den Shops zu synchronisieren. Misha Rudrastyh zeigt, wie das mit der Funktion switch_to_blog geht, hält aber auch ein Plugin bereit.

WooCommerce: Nutzende bestimmen den Preis

In einem WooCommerce-Shop gibt man den Nutzenden mit einem PHP-Snippet die Möglichkeit, den Preis eines Produkts selbst festzulegen.

Barrierefreie Texte für SVGs

Unter bestimmten Umständen benötigen auch SVG-Grafiken eine barrierefrei zugängliche Text-Alternative. Der Beitrag der Deque University zeigt, wie man diese Anforderung umsetzt.

Kurs zur Barrierefreiheit ist komplett

Beim Online-Kurs »Learn Accessibility!« sind nun alle Module vorhanden. Damit ist eine überaus empfehlenswerte, zentrale Anlaufstelle zum Thema Barrierefreiheit vollständig.

Inhalte direkt aus dem Browser heraus teilen

Das W3C schlägt eine neue Web Share API vor, die das Teilen von Inhalten direkt aus dem Browser ermöglicht, so wie es schon diverse mobile Apps tun.

Gemeinsame Browser-Benchmark

Um die Leistungen ihrer Browser angemessen vergleichen zu können, planen die Hersteller Apple, Google und Mozilla die gemeinsame Entwicklung der Benchmark »Speedometer 3«.

Apache – kein passender Name mehr?

Die Initiative »Natives in Tech« fordert die »Apache« Software Foundation zur Namensänderung auf.

Tools, Tools, Tools

Das Gegenteil von neu, aber zum Schluss bei all dem permanenten & multimedialen Crossover-Schingbumm-Geklingel vielleicht mal ein gutes Detox: So ging es mal los!

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 →