Web Design News & Link-Tipps – Nr. 51

Von: Jonas, Ferenc, Felix, Sophie, Robert, Konstantin

Wichtige Themen im Januar: Wie AI die Content-Suche verändert, CSS Anchor Positioning wird Standard, neue Meta-Tags für Barrierefreiheit, WordPress 7.0 in Planung und warum Coding nicht gleich Engineering ist.

Aktualisiert am 9. Februar 2026

Allgemein

Wie KI die Content-Suche verändert

KI-gestützte Suche ist längst im Mainstream angekommen. Alex Edwards von Clearleft erklärt, wie AI-Crawler arbeiten und wie sich Websites für »Generative Engine Optimisation (GEO)« vorbereiten.

Neue W3C-Arbeitsgruppe für ActivityPub

Das W3C hat eine neue Social Web Working Group für ActivityPub und Activity Streams gegründet.

Web Almanac 2025

Der Web Almanac 2025 ist erschienen – der jährliche State-of-the-Web-Bericht des HTTP Archive. Basierend auf der Analyse von 16,2 Millionen Websites liefert er datengestützte Einblicke in 15 web-relevante Themen.

Das Ende eines Handwerks

Nolan Lawson schreibt in seinem Blogpost über die Auswirkungen von KI in der Programmierung. Die schlimmste Tatsache sei, dass Tools wie Cursor und Claude funktionieren. Seine Prognose: Wer sich aus moralischen Gründen verweigert, wird überholt.

Junior-Devs im KI-Zeitalter: Warum Coding nicht gleich Engineering ist

Unternehmen stellen kaum noch Junior-Entwickler ein – die Nachfrage nach Seniors steigt hingegen. Das Argument: KI schreibt besseren Code als Einsteiger. Das stimmt, greift aber zu kurz. Denn Coding ist nicht Engineering.

Google macht reCAPTCHA DSGVO-konformer

Ab April 2026 wechselt Google reCAPTCHA zur Auftragsverarbeitung. Webseitenbetreiber werden damit zu Datenverantwortlichen, Google verarbeitet nur noch nach deren Anweisungen. Eine willkommene Änderung, die den datenschutzrechtlichen Drahtseilakt beendet.

Privacy als Unternehmenswert verankern

Ava diskutiert in ihrem Blogpost, wie Datenschutz nicht nur als rechtliche Pflicht, sondern als fundamentaler Unternehmenswert etabliert werden kann. Dabei geht es weniger um Compliance-Checklisten als vielmehr um eine Haltung, die sich in Produktentscheidungen, Design-Patterns und Kommunikation widerspiegelt.

So funktionieren Browser – einfach erklärt

Die Website How Browsers Work erklärt visuell und interaktiv, was zwischen URL-Eingabe und gerendeter Seite passiert. Von DNS-Auflösung über HTTP-Requests bis zum Rendering-Prozess – komplexe Vorgänge werden hier in verdaubaren Häppchen aufbereitet. Besonders gelungen sind die animierten Diagramme, die etwa den Critical Rendering Path oder das Zusammenspiel von HTML-, CSS- und JavaScript-Parsing zeigen.

UX/UI Design

Pixel Perfect im Web Design neu denken

Der Artikel von Amit Sheen im Smashing Magazine argumentiert dafür, das Konzept »Pixel Perfect« im modernen Webdesign hinter sich zu lassen. Stattdessen plädiert der Autor dafür, über Verhältnisse, Hierarchien und Verhalten zu sprechen, damit Designs auf allen Geräten funktionieren und nicht nur in einem statischen Mockup.

Frontend

Firefox 147 – CSS Anchor Positioning und mehr

Die Release Notes von Firefox 147 bringen u. a. CSS Anchor Positioning als Standard, View Transition Types für SPAs und neue relative Längeneinheiten (rcap, rch, rex, ric). Anchor Positioning erreicht damit Baseline-Support.

Kreise per CSS verbinden

Auf CSS-Tip zeigt Temani Afif, wie ihr zwei Kreise per CSS mit einem dynamischen Pfeil verbindet – ohne JavaScript. Die Technik kombiniert die CSS-Techniken Anchor Positioning, shape() und sog. trigonometrische Funktionen.

Custom Select-Elemente mit CSS

Brecht De Ruyte dokumentiert auf utilitybend den aktuellen Stand eines individuell gestalteten Multi-Select-Elements. Der Artikel ist ein Follow Up des Standard-Select-Elements.

20 Jahre jQuery: Version 4.0 erschienen

Wir fühlen uns alt: 20 Jahre nach dem ersten Release erscheint mit jQuery 4.0 die erste Major-Version seit fast einem Jahrzehnt. Der Stellenwert von jQuery für die Geschichte des Web ist unbestritten. Die heutige Relevanz tendiert für uns allerdings gegen Null.

CSS-Kapselung mit @scope

Die @scope-Regel ist zwar kein CSS-Allheilmittel, kann aber den Bedarf an komplexen Methoden und Tools reduzieren. Das native Feature ermöglicht echte Style-Kapselung und vereinfacht die Wartung komponentenbasierter Projekte. Blake Lundquist beschreibt in seinem Beitrag, wie @scope anstelle von oder zusammen mit strategischer Klassenbenennung verwendet werden kann, um das Erstellen von wartbarem CSS einfacher zu machen.

Modaler Dialog mit minimalen Mitteln

Seit der Einführung des <dialog>-Elements lassen sich modale Dialoge mit geringem Aufwand und barrierefrei erstellen. Es ist nur minimales Markup notwendig, damit ein Modal funktioniert, und mit wenigen zusätzlichen Angaben lässt es sich noch effizienter gestalten. Entgegen einer weit verbreiteten Ansicht bedarf das Dialog-Element keiner Focus-Trap, um barrierefrei zu sein.

Warum viele Browser-APIs keine echten Web-APIs sind

Kilian Valkhof, Entwickler von Polypane, zeigt, dass viele Browser-APIs zwar wie standardisierte Web-APIs wirken, in der Praxis aber auf proprietäre Dienste der Browserhersteller zurückgreifen. Die Geolocation API beispielsweise nutzt pro Browser unterschiedliche Lokalisierungsdienste und liefert so auch potenziell andere Ergebnisse.

Experimentelle »Shrinkwrapping«-Ansätze

Roman Komarov erläutert in seinem Blog-Deep-Dive eine experimentelle Methode, mit der sich durch Anchor Positioning und Scroll-Driven Animations die äußeren Abmessungen eines Elements dynamisch an seinen automatisch umbrechenden Inhalt anpassen lassen, um »echtes« Shrinkwrapping zu erreichen. Aktuelle Versionen von Chrome und Safari unterstützen seinen Ansatz bereits, er empfiehlt jedoch noch keinen Einsatz in Live-Systemen.

Sass-Kompilierung: Warum @use die bessere Wahl ist

Stuart Robson beschreibt in seinem Artikel, wie er jahrelang Sass mit @import kompiliert hat – und warum das problematisch war. Der Wechsel zu @use und @forward macht den Code nicht nur wartbarer, sondern vermeidet auch Namenskonflikte und reduziert die finale CSS-Größe erheblich. Wer noch mit der alten Syntax arbeitet, findet hier einen praxisnahen Einstieg in die moderne Sass-Architektur.

CSS Grid Lanes: Wann können wir damit arbeiten?

Jen Simmons erklärt im WebKit-Blog, was hinter CSS Grid Lanes steckt und wann das Feature produktiv einsetzbar sein wird. Grid Lanes erweitern CSS Grid um Funktionen, die beispielsweise ein echtes Masonry-Layout möglich machen.

Barrierefreiheit

Microsofts Inclusive Design Toolkit überarbeitet

Microsoft hat die Website Inclusive Design neu gelauncht und stellt dort eine umfangreiche Methodensammlung bereit, die Design-Teams dabei unterstützt, Produkte von Anfang an inklusiv zu gestalten. Eine sehr wertvolle Ressource, die uns schon seit Jahren begleitet und nun ein notwendiges Update erhalten hat.

Text Scaling per Meta-Tag in Chrome Canary

Wieder was gelernt: Mobile Browser ignorieren offenbar bislang die Textskalierung des Betriebssystems. Das neue Meta-Tag <meta name="text-scale"> ändert das. Josh Tumath beschreibt in seinem Artikel, wie das Feature funktioniert und was bei der Umsetzung zu beachten ist.

Accessibility for everyone – kostenlos online lesen

Die gleichnamige Seite stellt das Buch »Accessibility for Everyone« von Laura Kalbag (2017) kostenlos zur Verfügung. Es behandelt Best Practices für Barrierefreiheit und verlinkt zusätzlich weitere frei zugängliche Bücher aus dem Design-Kontext.

Shortcuts in Web-Apps für die Barrierefreiheit

Eric W. Bailey zeigt, wie Keyboard-Shortcuts in Web-Apps so gestaltet werden können, dass sie die Zugänglichkeit verbessern, ohne mit assistiven Technologien zu kollidieren. Thematisiert werden hierbei vor allem sinnvolle Einsatzszenarien und eine transparente Dokumentation von Shortcuts.

Komponenten auf Barrierefreiheit prüfen

Mit fünf konkreten Checks lassen sich häufige Accessibility-Probleme schnell erkennen und unkompliziert beheben. Der praxisnahe Leitfaden zeigt, wie Komponenten in Design und Entwicklung für Barrierefreiheit vorbereitet und geprüft werden können. Die Methode ersetzt keine WCAG-Bewertung des finalen Produkts, da dafür immer der Kontext benötigt wird. Sie gewährleistet aber eine solide Ausgangsbasis für barrierefreie Nutzung.

WordPress

Googles KI-Commerce-Protokoll ignoriert WordPress

Joost de Valk analysiert Googles neues »Universal Commerce Protocol« für KI-gestütztes Shopping – und kritisiert, dass WooCommerce bei den Launch-Partnern fehlt. Während Shopify, BigCommerce und Etsy direkt integriert werden, droht dem WordPress-Ökosystem die Abkopplung.

Verschiedene Methoden, um ACF/Custom Fields in WordPress zu benutzen

Wenn Daten in einem festen Design oder in strukturierter Form angezeigt werden sollen, ist die freie Eingabe im WordPress-Editor oft unzureichend. Mit Custom Fields und der Block Binding API lassen sich Werte in strukturierter Form erfassen und an verschiedenen Stellen der Website anzeigen. Der Übersichts-Beitrag von ACF erklärt, wie Custom Fields angelegt und in Templates ausgegeben werden können.

WordPress Studio Update 1.7.0

WordPress Studio ist das offizielle Werkzeug von Automattic zur lokalen Erstellung von WordPress-Websites. Mit dem Update 1.7.0 (Januar 2026) wurde die Kommandozeile (Studio CLI) deutlich erweitert, sodass sich lokale Sites, Previews und WordPress-Befehle direkt per Terminal steuern lassen.

WordPress 7.0

Das nächste Major-Release von WordPress ist 7.0 und ist für den 9. April 2026 geplant. Am 19. Februar 2026 soll die erste Beta-Version erscheinen. WP Umbrella fasst die zu erwartenden Features zusammen.

Tools

• Der Wavy Divider Generator erzeugt zufällige Wellenformen per clip-path: shape(). Der CSS-Code ist direkt kopierbar.
• OpenScreen ist eine kostenlose Open-Source-Alternative zu Screen Studio für professionelle Screenrecordings mit Zoom-Effekten, Annotationen und anpassbaren Hintergründen.
• Der Google Analytics Baseline Checker ist ein Tool von Chrome.dev, das anhand importierter Google-Analytics-Daten ermittelt, welches Baseline-Target für die eigene Website am besten geeignet ist.
• ItsHover ist eine Library mit Hover-Animationen für Icons.
• Pattern Collider ist ein Generator zum Erzeugen von symmetrischen und algorithmischen Pattern.

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer von kulturbanause. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Mastodon, LinkedIn, Xing und YouTube.

Ferenc Petöcz

Als Webentwickler setzt Ferenc bei kulturbanause maßgeschneiderte Webauftritte und Website-Komponenten um und betreut und optimiert Bestehende. Er hat besonderes Interesse an innovativen Ansätzen und modernen Lösungen, wobei er dabei stets auf die Robustheit und Verlässlichkeit des Gesamten achtet.

Felix Lehmann

Als Team Lead für Design und Code bei kulturbanause verantwortet Felix die Konzeption, Gestaltung und Entwicklung komplexer Websites und Designsysteme. Er begleitet den gesamten Prozess – vom ersten Workshop bis zum Launch. Wenn er nicht selbst maßgeblich an der Umsetzung beteiligt ist, unterstützt er das Team bei der Umsetzung moderner, funktionaler Lösungen mit aktuellsten Browser-Technologien und ist die Schnittstelle zum Kundenteam.

Sophie Tausch

Sophie beschäftigt sich mit allen Themen rund um UX/UI Design. Ihre Hauptaufgaben beinhalten Produkt- und Nutzerforschung, das Strukturieren von Informationen und Inhalten und die Erstellung von visuellen Konzepten und Prototypen. Hierbei legt sie besonders Wert auf die Balance zwischen Ästhetik und Benutzerfreundlichkeit, sowie auf eine enge Zusammenarbeit mit dem Development.

Robert Menzel

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause. Zu seinen Aufgaben gehören die visuelle Gestaltung und die technische Umsetzung von Websites, eCommerce-Shops oder dessen Kombination. Besonders gerne übernimmt er die Entwicklung individueller und anspruchsvoller Websites mit umfangreichen ineinandergreifenden Funktionen, getreu dem Motto: »Der beste Lack bringt nichts, wenn die Maschine darunter nicht läuft.«

Konstantin Hanke

Konstantin arbeitet als Webentwickler bei kulturbanause. Seine Hauptaufgabe ist die technische Umsetzung von klaren, soliden und effizienten Webauftritten und Website-Komponenten. Darüber hinaus kümmert er sich um die Wartung, Optimierung und Weiterentwicklung von bestehenden Websites. Sein besonderes Interesse gilt der Idee von quelloffener, freier Software.