Web Design News & Link-Tipps – Nr. 58
Von: Charleen, Sophie, Ferenc, Jonas, Felix, Robert, Konstantin Rund um WordPress hat sich im September einiges getan: der überraschende Führungswechsel bei Automattic und seine ebenso schnelle Rücknahme, die zentrale Registrierung eigener SVG-Icons und gleich mehrere Neuerungen bei WooCommerce. Außerdem haben wir uns zum aktuellen Stand von HTML, dem spürbaren Einfluss von KI sowie zu einigen Design- und UX-Themen ausgetauscht.
Allgemein
Nur 1 % der Top-Websites nutzt valides HTML
Jens Oliver Meiert untersucht jedes Jahr, wie viele der 200 meistbesuchten Websites technisch valides HTML verwenden. In der diesjährigen Auswertung HTML Conformance 2026 kommen nur zwei Homepages komplett ohne HTML-Validierungsfehler aus – ein leicht besseres Ergebnis als im Vorjahr, aber weiterhin erstaunlich wenig.
Weniger Cookie-Banner, aber nicht weniger Datenschutz
Cookie-Banner stehen schon länger in der Kritik, weil sie für viele Internetnutzende nervig und unübersichtlich sind. Dabei geht es bei den zugrunde liegenden ePrivacy-Regeln nicht nur um Cookies, sondern auch um den Schutz von persönlichen Geräte-, Kommunikations- und Standortdaten. Der European Digital Rights Verbund macht darauf aufmerksam, dass der aktuell viel diskutierte Wunsch nach weniger Cookie-Bannern (wie die »Kill the Cookie Banner«-Kampagne) nicht auch zu einer Abschwächung der Datenschutzregelungen führen darf.
Sicherheitsstandard wird wenig genutzt
Laut Bundesamt für Sicherheit in der Informationstechnik (BSI) nutzen nur 1,8 Prozent der deutschen Website-Betreibenden eine security.txt-Datei. Mit diesem einfachen Standard soll einheitlich kommuniziert werden, wie Sicherheitslücken gemeldet werden können. Ziel ist es, Sicherheitsforschenden einen klaren Meldekanal zu bieten, damit Schwachstellen schneller behoben werden und die IT-Sicherheit insgesamt steigt.
Neue EU-Regeln für AI-Labels
Vitaly Friedman, Mitgründer von Smashing Magazine, erklärt die neuen EU-Vorgaben zur Kennzeichnung von KI-Inhalten. Nicht jede AI-Unterstützung muss gelabelt werden, aber bei Deepfakes, Chatbots und bestimmten KI-generierten Inhalten braucht es klare, sichtbare Hinweise statt bloßer »✨«-Symbole.
LLMs sind real, AI-Mythologie ist es nicht
Autor Cory Doctorow analysiert auf seinem Blog wiederkehrende AI-Narrative, insbesondere rund um aktuelle Hacks durch KI-Bots und die Forderungen der KI-Branche nach stärkerer Regulierung. Er zeigt, wie diese angeblich autonomen Systeme tatsächlich funktionieren, auf welchen historischen Vorbildern sie basieren und warum sie keine »eigenen Ziele« verfolgen, sondern als schlecht überwachte Kombination aus Chatbot und Automatisierung genau das tun, wofür sie entwickelt wurden.
Musiktheorie und Klangsynthese in JavaScript
Der musikalische Laie Luke Haas lässt musiktheoretische Konzepte im Browser erklingen. Er erklärt die Arithmetik von Tönen und Klängen (Tonhöhen, Intervalle, Akkorde, Skalen etc.), überführt diese in JavaScript-Snippets und macht die digitale Klangsynthese über die Web Audio API hörbar. Eine sehr detaillierte und unterhaltsame Lektüre.
Shopify übernimmt Tailwind CSS
Trotz großer Verbreitung geriet Tailwinds Geschäftsmodell in diesem Jahr durch den KI-Boom stark unter Druck. Mit der Übernahme durch Shopify soll die Zukunft des Frameworks nun langfristig abgesichert werden. Für die Community ändert sich augenscheinlich noch wenig: Tailwind bleibt Open Source und MIT-lizenziert, wird künftig aber unter dem Dach eines großen E-Commerce-Anbieters weiterentwickelt.
UX/UI
Dark Mode besser ohne sichtbaren Schalter?
Lea Verou hinterfragt in The best dark mode toggle is probably none, ob ein sichtbarer Dark-Mode-Toggle auf Websites überhaupt nötig ist. Ihre Argumentation: Meist reicht es aus, wenn die Website automatisch die Systemeinstellung übernimmt. Zudem nimmt ein permanenter Schalter unnötig Platz ein und lenkt Aufmerksamkeit auf eine Funktion, die nur selten aktiv genutzt wird. Sinnvoller sei es ihrer Meinung nach, prefers-color-scheme als Standard zu nutzen und manuelle Einstellungen bei Bedarf auszulagern.
Design-Regeln, die (fast) immer gelten
Anthony Hobday hat eine Liste mit Design-Regeln erstellt, die so gut wie immer gültig sind. Die Liste ist für Einsteigende, Design-fremde Personen und KI-Agenten :) mit Sicherheit sehr hilfreich.
Core Web Vitals nicht immer passend
Die pauschalen Bewertungen einer Website durch Core Web Vitals sollten mit Vorsicht genossen werden: Was für Google »gut« ist, reicht für User oder Unternehmen möglicherweise nicht aus; was »schlecht« bewertet wird, kann möglicherweise genügen. Die Nutzungsdaten von zehn Online-Shops zeigen beispielsweise, dass die optimale Ladezeit bei maximal einer Sekunde liegt und der LCP-Schwellenwert von 2,5 Sekunden damit deutlich zu hoch angesetzt ist. Die Autorin Tammy Everts empfiehlt daher, anhand eigener Nutzungsdaten individuelle Performance-Ziele zu bestimmen, statt auf Googles Durchschnittswerte zu vertrauen.
Wie KI die Rolle im Design verändert
Matthew Santone erklärt in seinem Artikel, was von der Rolle im Design übrig bleibt, wenn KI hochwertige Interfaces und Designs immer schneller erzeugen kann. Seine These: Entscheidend werden weniger reine gestalterische Fähigkeiten als vielmehr eine klare Urteilskraft, Haltung und die Fähigkeit, aus vielen möglichen Lösungen die richtige auszuwählen und begründen zu können.
Feste Icon-Größen in Figma verwalten
Alice Packard vergleicht vier Ansätze, um feste Icon-Größen in Figma zu verwalten: separate Komponenten pro Größe werden schnell unübersichtlich, Variable Modes sind zwar zentral steuerbar, werden bei verschachtelten Komponenten aber schnell komplex. Ein Icon-Wrapper bündelt die Größen ebenfalls zentral, kann jedoch zusätzliche Properties und Abhängigkeiten sichtbar machen. Packard bevorzugt deshalb eine Size-Property direkt am Icon: Sie ist zwar etwas aufwendiger zu pflegen, für Nutzende aber am klarsten und lässt sich sauber in andere Komponenten integrieren.
Der Nutzen von Design Systemen 2026
Der Design Systems Report 2026 von zeroheight zeigt, dass Design Systeme inzwischen fest etabliert sind, viele Teams aber weiterhin mit zu wenig Ressourcen, einer uneinheitlichen Nutzung und fehlender Unterstützung im Unternehmen kämpfen. Gleichzeitig bleibt es schwierig, den tatsächlichen Nutzen eines Design Systems zu messen, während KI vor allem für Dokumentation, Code-Generierung und Prozessautomatisierung eingesetzt wird.
Frontend
Weißer als Weiß
Es ist möglich auf modernen Displays Farben darzustellen, die außerhalb des klassischen RGB-Farbraums liegen. Bei Weiß gibt es hier einen besonders interessanten Effekt, denn es kann extrem helles Weiß dargestellt werden, indem Farben als HDR-Grafik oder Video eingebunden werden. Wir hatten 2023 schon einmal über diesen Trick berichtet, nun gibt es eine hilfreiche Mini-Website dazu. Interessant ist in diesem Zusammenhang auch unser Artikel zu P3-Farben.
HTML 2026: Wo stehen wir aktuell?
Viele der aktuellen und kommenden HTML-Funktionen waren bei uns bereits einzeln Thema. New things you should know about HTML here in mid-2026 fasst zahlreiche Entwicklungen noch einmal in einer Übersicht mit gut erklärten Beispielen zusammen – darunter eher unbekannte Ansätze wie <geolocation> und <usermedia>, das neue <install>-Element, HTML-in-Canvas oder focusgroup.
Fair verteiltes Flexbox-Wrapping ganz ohne Workarounds
Wer mit flex-wrap: wrap arbeitet, kennt das Waisenkind-Problem: Ein einzelnes Element rutscht allein in die letzte Zeile, obwohl der Rest sauber verteilt ist. Ahmad Shadeed vergleicht fünf Lösungsversuche für dieses altbekannte Layout-Ärgernis und zeigt anschließend, wie sich mit der neuen Eigenschaft flex-line-count sogar rudimentäre Masonry-Layouts bauen lassen. Aktuell läuft das Ganze nur in Chrome 150, ein Blick darauf lohnt sich aber schon jetzt.
WordPress
WordPress-Chef abgesetzt und wieder zurück
Matt Mullenweg wurde kürzlich vom Aufsichtsrat seines Postens enthoben und Mark Davies (CFO) als Interims-CEO eingesetzt. Mullenweg bezeichnete dies erwartungsgemäß als Verschwörung und hat seine Position als CEO nun wohl wieder. Die Hintergründe sind noch unklar.
Agentur-Workflows für Block Themes
Wie die Trennung zwischen Design und Content bzw. zwischen Repository und Datenbank in WordPress-Block-Themes organisiert werden kann, erklärt Brian Coords in einem Vortrag auf dem WordCamp US. Tatsächlich war für uns nichts wirklich Neues dabei, aber der Vortrag fasst wichtige Kern-Philosophien und neue Workflows (Agenten) kompakt und unterhaltsam zusammen.
WordPress: Eigene SVG-Icons in WordPress 7.1 registrieren
Mit WordPress 7.1 können eigene SVG-Icons offiziell registriert werden. Damit lassen sich zum Beispiel im Theme oder Plugin definierte Icon-Sets einheitlich in WordPress einbinden und an anderer Stelle wiederverwenden, statt Icons einzeln als Bild oder Inline-Code einzufügen.
WooCommerce Subscriptions Version 9.2.0
Das WooCommerce Subscriptions Plugin bringt in der neuen Version 9.2.0 zwei relevante Neuerungen mit. Beim Wechsel des Abos innerhalb der Laufzeit wird künftig auch für physische Produkte die Zahlung nur noch anteilig für die restliche Zeit berechnet. Die Verschenken-Funktion lässt sich nun für einzelne Produkte statt für den ganzen Shop ein- oder ausschalten.
WooCommerce erhöht die Mindestanforderung auf PHP 8.1
Mit WooCommerce 11.5, das für Januar 2027 angekündigt ist, steigt die Mindestanforderung von PHP 7.4 auf PHP 8.1. Betroffene Shops erhalten nur noch Updates für ihre aktuelle Version, bis sie auf PHP 8.1 aktualisiert haben. Dabei ist auch diese PHP-Version bereits seit Anfang des Jahres deprecated.
WooCommerce 11.1: Produktgalerien für Varianten, Videounterstützung und Widerrufsformular
Bei WooCommerce 11.1 gab es einige Änderungen. Folgende finden wir besonders relevant: Pro Variante bei variablen Produkten ist es nun möglich, eine eigene Produktgalerie zu integrieren, nach Aktivierung in den WooCommerce-Einstellungen sind nun auch Videos in Produktgalerien möglich und ein Widerrufsformular für den EU-Bereich ist integriert worden.
Barrierefreiheit
Barrierefreie Farben sind mehr als nur ein Kontrastwert
Accessibility-Expertin Sheri Byrne-Haber erläutert, warum WCAG-Konformität bei Farben oft nur die Mindestanforderung erfüllt. Sie beleuchtet dabei Themen wie Farbenblindheit und bietet eine Liste mit Empfehlungen an, um diese Aspekte besser im Blick zu haben.
Tools & Fun
- Der Rename-Tracker listet alle Microsoft-Produkte inkl. der jeweiligen Umbenennungs-Historie.
- pour ist ein kostenloses Accessibility-Tool für WCAG-Audits, das neben Lösungsvorschlägen auch integrierte Simulationen für Seh-, Wahrnehmungs- und motorische Einschränkungen liefert.
- Ambient CSS ist ein CSS-Tool für physikbasierte Licht-, Schatten- und Materialeffekte. Ausgangspunkt ist hierbei die Lichtquelle, auf deren Basis passende Highlights etc. berechnet werden.
- Die Geschichte von VS Code ist eine neu veröffentlichte Dokumentation zur Entstehung und Entwicklung des Editors.
- Dass es weder KI-Slop noch Unsplash sein muss, beweist das Public Domain Image Archive, welches gemeinfreie Werke aus Kunst, Illustration, Fotografie und Wissenschaft zur freien Verwendung sammelt.
- TermDOM ist ein Open-Source-Tool, mit dem sich Terminal-Apps und CLIs direkt mit HTML und CSS entwickeln lassen.
- Morphicons ermöglicht es, zwei verschiedene Icons bei einem Übergang miteinander zu verbinden.
- Tegaki erzeugt animierte Handschrift aus beliebigen Schriftarten.
- CSS Units ist eine interaktive Übersicht über alle 63 CSS-Einheiten, von px und rem bis dvh, cqi oder fr.
- Normal Tools ist eine Sammlung mit rund 190 kostenlosen Browser-Tools.
- Mesurer ist ein kostenloses Browser-Add-on, um Abstände, Größen, Farben und Typografie direkt auf Websites zu prüfen und zu kommentieren.
- Kugiri ist eine kleine JavaScript-Library, die Text genau an den Stellen aufteilt, an denen der Browser ihn ohnehin umbricht.
- Der Hook Generator ermöglicht es, schnell Actions und Filter für WordPress zu schreiben, ohne lange nach den richtigen Hooks suchen zu müssen.
- Wire Loop: die browserbasierte Umsetzung des Klassikers »Heißer Draht«
Feedback & Ergänzungen – Schreibe einen Kommentar
Geschrieben von:
Charleen Warkentin
Sophie Tausch
Ferenc Petöcz
Felix Lehmann
Robert Menzel
Konstantin Hanke
