Web Design News & Link-Tipps – Nr. 55
Von: Jonas, Robert, Ferenc, Charleen, Raimund, Felix Im Juni ging es bei uns um die angekündigten Änderungen an der Google-Suche und deren Auswirkungen, das veränderte Nutzerverhalten im Web und den Einsatz kuratierter Skills für KI-Agenten. Weiterhin um neue CSS-Features, die neue Gutenberg-Version sowie Automattics Radical Speed Month.
Allgemein
Die Google-Suche in der KI-Ära
Google hat auf der Entwicklerkonferenz I/O 2026 bemerkenswerte Änderungen angekündigt. Die klassische Trefferliste mit zehn blauen Links gehört der Vergangenheit an. Was das für den Traffic von Website-Betreibern bedeutet, ordnet TechCrunch ein. Werbebanner wird es wohl auch nicht mehr geben, stattdessen sind verschiedene Ansätze im Gespräch, wie die agentischen Ergebnisse im Sinne von Werbekunden beeinflusst werden können. Google will zudem nicht mehr nur finden, sondern agentisch handeln und beispielsweise Reservierungen vornehmen, Anrufe tätigen und Einkäufe erledigen. Ein universeller Warenkorb soll Käufe über verschiedene Websites hinweg ermöglichen.
Browser behandeln populäre Websites unterschiedlich
Man könnte annehmen, dass Browser den Code aller Websites gleich behandeln – doch das scheint nicht der Fall zu sein. Den Odell zeigt auf, dass Firefox und Safari offenbar gezielt Custom-Code laden, um Fehldarstellungen in großen Websites zu vermeiden. Bei Chrome ist das wohl nicht der Fall, möglicherweise, da für diesen Browser primär optimiert wird.
Ergebnisse der »State of AI«-Umfrage
Die Ergebnisse der Umfrage geben detaillierte Einblicke in Tool-Nutzung, Ängste und Meinungen der Branche. Einige interessante Erkenntnisse: Für 72 % der befragten Personen ist AI ein wesentlicher Bestandteil des Workflows geworden und am häufigsten bezahlt wird für Claude. Die Code-Qualität wird besser beurteilt als in der letzten Umfrage, Halluzinationen signifikant schlechter. Die größten Bedenken gibt es hinsichtlich möglicher Job-Verluste, allerdings äußern selbst das nur ca. 50 % der Befragten.
Neue EU-Strategie für technologische Unabhängigkeit
Die EU hat mit ihrer neuen Strategie zur europäischen Technologiesouveränität einen klaren Kurs für mehr digitale Unabhängigkeit eingeschlagen. Dabei wird sich unter anderem darauf konzentriert, eigene Kapazitäten in Bereichen wie Cloud, Künstliche Intelligenz und Chips auszubauen, zudem soll künftig Open Source eine große Rolle spielen. Das Ziel der Europäischen Union ist, sich von einer reinen Regulierungsrolle hin zu einer aktiveren Industriepolitik zu entwickeln, um die digitale Infrastruktur in Europa langfristig stabiler und wettbewerbsfähiger zu machen.
KI direkt im Browser: Chromes Prompt API
Mit der Prompt API lässt sich ein KI-Modell direkt im Browser ansprechen. Somit sind Text-, Bild- und Audioanalysen ohne den Umweg über einen Server möglich. Das klingt technisch interessant, sollte aber im Google- und KI-Kontext kritisch betrachtet werden. Die API ist Chrome-only, das Gemini Nano-Modell kommt von Google. Die Dokumentation zeigt den aktuellen Stand.
Das »echte« Internet unter der Oberfläche
Terry Godier hebt den schweren Stein des Plattform-Webs aus Daten-Extraktion, Werbung und AI-Slop aus und findet darunter ein älteres, robusteres Internet der Protokolle und Texte. Dieses unscheinbarere, »langweiligere« Netz mag weniger interessant für Investoren sein, gehört aber niemandem und kann dadurch bestehen.
Wiederholt genAI die verlorene Dekade des Frontends?
Mauro Bieg, Entwickler hinter Mastro, vergleicht genAI mit der »Lost Decade« des Frontends: Tools senken zwar Hürden, aber auch Qualität und das Verständnis dahinter. Wie bei Frameworks verschiebt GenAI Arbeit auf eine weitere Abstraktionsebene mit erheblichen Nebenwirkungen.
UX/UI
Figma Design Agents
Figma wird einen KI-Agenten direkt in das Design-Tool integrieren, um mit Hilfe von Prompts zu gestalten bzw. lästige Aufgaben zu erledigen. Im Ergebnis ist das nicht neu; bisher war dieser Workflow allerdings nur über externe KI-Anbieter wie Claude möglich.
Neue UX-Herausforderungen durch verändertes Nutzerverhalten?
Noah Davis vom Webdesigner Depot argumentiert, dass agentische KI die Art verändert, wie Menschen digitale Oberflächen wahrnehmen und nutzen. Statt klassischen Scanmustern wie dem F-Pattern zu folgen, suchen Nutzende immer gezielter nach den Informationen und Funktionen, die sie für ihre aktuelle Aufgabe benötigen. Zudem beleuchtet er, welche Auswirkungen diese Entwicklung auf visuelle Hierarchien und die Gestaltung moderner Benutzeroberflächen haben könnte.
DESIGN.md: Design-Systeme maschinenlesbar machen
Google Labs hat mit DESIGN.md ein Open-Source-Format veröffentlicht, das Design-Systeme für KI-Agenten lesbar macht. Eine Markdown-Datei bündelt Design-Regeln wie Farben, Typografie und Barrierefreiheitsstandards in einem portablen Dokument, das sich plattformübergreifend nutzen lässt. Florian Schröder erklärt das Format und seine Möglichkeiten.
Frontend
CSS round() und fluide Skalierung
Ahmad Shadeed hat einen ausführlichen und interaktiven Artikel veröffentlicht, in dem er aufzeigt, wie fluide Container, Schriften etc. mit CSS round() optimiert bzw. gezielter gesteuert werden können. Die Rundungsfunktion von CSS hat Baseline 2024-Support.
HTML <install>-Element
Um Webanwendungen aus dem Browser heraus zu installieren ist JavaScript notwendig. Zukünftig kann dies möglicherweise über das neue, aktuell experimentelle HTML-Element <install> gelöst werden. Details dazu bietet u.a. der Google Developer Blog.
CSS-Formvariationen mit shape() und border-shape
Gefüllt, nur als Rahmen oder ausgestanzt – mit shape() und border-shape lassen sich verschiedene Formvarianten aus nahezu identischem CSS erzeugen. Der Artikel auf css-tip.com zeigt, wie wenig Code dafür nötig ist. Aktuell nur in Chrome.
Modern Web Guidance: Google Skills fürs Frontend
Das Chrome-Team stellt kuratierte Skills für KI-Agenten wie Claude Code oder Copilot bereit. Ziel ist es, Barrierefreiheit, Performance und Sicherheit direkt in den KI-gestützten Coding-Workflow zu integrieren.
Adrian Roselli, Accessibility-Experte, kritisiert Googles »Modern Web Guidance« für AI Tools allerdings in Hinsicht auf die Barrierefreiheit. Seine Tests zeigen: Die Beispiele sind oft nicht WCAG-konform und unzuverlässig. Er empfiehlt, auf selbst geprüfte Patterns zu setzen, statt blind AI-Guidance zu vertrauen.
In Chrome ist position: sticky jetzt achsensensitiv
Bisher funktionierte position: sticky nur in eine Scroll-Richtung pro Bereich. Eine neue Änderung in der Overflow-Spezifikation ändert das jetzt. In einer Tabelle mit Overflow auf einer Achse kann zum Beispiel die erste Spalte horizontal am Tabellen-Container hängen bleiben und der Tabellenkopf vertikal im sichtbaren Bereich der Seite. Es wird kein zusätzlicher Tabellenkopf oder JavaScript benötigt, um das Scrollen synchron zu halten. Das Feature kann ab Chrome 148 freigeschaltet werden.
Infinite CSS Animations kontrollieren
Eine laufende CSS-Animation ist schwer anzupassen, ohne dass Frames springen. Temani Afif zeigt im Frontend Masters Blog, wie das besser geht: Geschwindigkeit und Richtung einer Animation können durch animation-composition: add und eine zweite, zunächst pausierte Animation deutlich glatter gesteuert werden.
image() statt url() für Hintergrundbilder
Mit der CSS Images Level 4 Spezifikation kommt die image()-Funktion als Erweiterung des bekannten url(). Kevin Powell erklärt, was sie konkret ermöglicht: Bildausschnitte per Fragment-Identifier, Richtungsabhängigkeit für RTL-Layouts und Fallback-Farben direkt in der Deklaration. Browser-Support ist noch überschaubar, aber der Artikel gibt einen guten Überblick darüber, wohin die Reise geht.
Linien dynamisch mit CSS verformen
Temani Afif zeigt auf css-tip.com, wie eine Verbindungslinie zwischen zwei Elementen allein mit CSS physikalisches Verhalten simulieren kann. Die Linie krümmt sich, wenn die Elemente sich näher kommen, und wird dünner, wenn diese sich voneinander entfernen. Umgesetzt ist es rein mit modernem CSS: Anchor Positioning, border-shape und if(), ganz ohne JavaScript.
:open ist jetzt Baseline
Wer Elemente wie <details>, <dialog> oder geöffnete Select-Menüs stylen möchte, kann dafür nun den CSS-Selektor :open nutzen. Seit Mai 2026 hat die Pseudo-Klasse Baseline Support und ist damit in allen aktuellen Browsern verfügbar. Dadurch lassen sich einige bisher notwendige Workarounds mit Attributselektoren oder JavaScript künftig vermeiden.
CSS vs JS Animationen im Vergleich
Josh Comeau, bekannter Frontend-Dozent, vergleicht anschaulich die Performance von JS und CSS Animationen auf seinem Blog. Sein Fazit: CSS ist nicht immer, wie vielleicht erwartet, vorzuziehen, sondern der Kontext der Animation entscheidet.
JavaScript ins »Schattenreich« verbannen
Mat Marquis erklärt auf CSS-Tricks die geplante ShadowRealm API, die JavaScript in isolierte »Pseudo-Realms« mit eigenen Globals verlagert. Das reduziert Nebeneffekte und macht Code von Drittanbietern kontrollierbarer.
WordPress
Gutenberg 23.3
Es gibt ein paar interessante Features in der nächsten Gutenberg-Version. Besonders relevant dürften die responsiven Styling-Anpassungen sein, die es erlauben, Blöcke je nach Viewport unterschiedlich zu gestalten bzw. zu layouten. Zudem können States für Buttons zukünftig im Editor gestyled werden und nicht nur in den globalen Stilen. Auch ein experimentelles neues Dashboard ist dabei.
WordCamp Europe 2026: Talks jetzt online ansehen
Das WordCamp Europe 2026 hat Anfang Juni in Krakau stattgefunden und über 3.000 Teilnehmende zusammengebracht. Die mehr als 50 Talks zu Themen wie KI-Integration, Barrierefreiheit und WordPress-Sicherheit sind jetzt auf WordPress.tv abrufbar.
400 Projekte in 30 Tagen: Automattics Radical Speed Month
Beim Radical Speed Month von Automattic arbeiteten rund 400 zweiköpfige Teams einen Monat lang an selbstgewählten Projekten, abseits ihrer regulären Aufgaben und ohne die üblichen Freigabeprozesse. The Repository hat die Ergebnisse überblickt: Entstanden sind unter anderem eine Podcast-Funktion für WordPress.com, WooCommerce-Zahlungsunterstützung für 13 neue Länder, eine Fediverse-Integration für den WordPress-Reader und verschiedene KI-Tools.
Barrierefreiheit
Barrierefreiheit mit stoischer Haltung
Technisches Wissen allein reicht für eine erfolgreiche Umsetzung der Barrierefreiheit im Web oft nicht aus. Steve Frenzel überträgt im Piccalilli-Blog drei stoische Prinzipien auf den Arbeitsalltag als Accessibility-Praktizierende: den Fokus auf das setzen, was man beeinflussen kann, Hindernisse als Lernchancen verstehen und auch dann weitermachen, wenn der Widerstand groß ist. Ein ungewöhnlicher, aber treffender Blickwinkel auf ein Thema, das oft mehr am Mindset als an der Technik scheitert.
Tools & Fun
- RYBitten ist ein interaktiver Playground zum digitalen Erkunden verschiedener Farbsysteme, die sich an der Farbtheorie von Itten aus der Malerei orientieren.
- CSS or BS ist ein Quiz, das CSS-Wissen in 20 Runden prüft. Man muss angeben, welche CSS-Eigenschaften es wirklich gibt und welche nur erfunden sind.
- Mit einem Klick auf The Useless Web landet man auf einer zufällig ausgewählten Seite, die keinen erkennbaren Zweck verfolgt, dafür aber kreativ, kurios oder einfach nur absurd ist, wie beispielsweise Pointer Pointer. Eine kleine Erinnerung daran, dass das Web auch ein Ort für Experimente, Humor und digitale Spielereien sein kann.
- NASA 3D Resources ist eine kostenlose NASA-Datenbank mit 3D-Modellen, druckbaren Assets und Texturen rund um Raumfahrt in verschiedenen Dateiformaten.
- npq ist ein Tool, das npm-Installationen sicherer macht. Es agiert als vorgeschaltete Instanz vor npm und überprüft Pakete vor der Installation.
- Wer wie wir gerne BEM im CSS nutzt, bekommt durch das BEMoji‑CSS‑Framework endlich die Möglichkeit, die Unverständlichkeit der Klassen wieder enorm zu erhöhen.
- PolyCSS ermöglicht als npm‑Package, 3D‑Modelle direkt im DOM zu rendern. Polygon‑Meshes werden als normale HTML‑Elemente mit CSS‑Transforms dargestellt, völlig ohne WebGL oder Canvas.
- Qite.js ist ein leichtgewichtiges Frontend-Framework, das ohne Build-Tooling oder Virtual DOM direkt mit dem echten DOM arbeitet und HTML, CSS und JavaScript strikt trennt.
Feedback & Ergänzungen – Schreibe einen Kommentar
Geschrieben von:
Robert Menzel
Ferenc Petöcz
Charleen Warkentin
Raimund Büchner
Felix Lehmann
