Web Design News & Link-Tipps – Nr. 47

Von: Jonas, Charleen, Felix, Sophie

In unserer Oktober-Ausgabe haben wir interessante CSS-Features und -Techniken im Gepäck, dazu zahlreiche Tools und spannende Perspektiven zu KI in der Kreativbranche.

Aktualisiert am 22. Oktober 2025

Allgemein

KI – der Tod des Internets

Starten wir dieses Mal mit einem Film. Mario Sixtus hat eine sehr spannende Doku veröffentlicht, die u. a. in der Arte-Mediathek angeschaut werden kann. KI: Der Tod des Internets behandelt das Thema der zunehmenden Vermüllung des Internets durch KI-generierte Inhalte. Nicht gerade ein Feel-Good-Movie, aber wichtig und sehenswert.

Google streicht &num=100 Parameter

Bisher konnte man sich bei Google bis zu 100 Ergebnisse anzeigen lassen. Wie Seobility berichtet, besteht diese Möglichkeit nun nicht mehr, da der entsprechende Parameter entfernt wurde.

Das Drehbuch für gute Case Studies

Wir selbst haben unsere Referenz-Projekte in Form von Case Studies aufbereitet (z. B. hier oder hier), die nicht nur das Endergebnis zeigen, sondern den tatsächlichen Weg dorthin. Auf Medium ist nun ein interessanter Artikel erschienen, der detailliert beschreibt, warum solche Cases wichtig sind und wie sie inhaltlich aufgebaut sein sollten.

»Entry-Level-Void« – Den Einstieg in die Kreativbranche neu denken

Dieser Essay bei It’s Nice That beleuchtet, warum Junior-Stellen rarer werden, Praktika oft schlecht vergütet sind und Bewerbende trotzdem »überqualifiziert« wirken. Die Analyse zeigt, wie dadurch Hürden für den Berufseinstieg wachsen – und plädiert für transparente Prozesse, faire Bezahlung und echte Ausbildungswege statt »Junior in Name only«.

UX/UI Design

Die Rolle von Designern in der »neuen Welt«

In visuellen Oberflächen positionieren Designer Buttons, planen Navigationen und führen die Besucher sorgsam zum Ziel. In den meisten Oberflächen für KI und Sprache fällt das weg und der Dialog zwischen Mensch und Maschine wird gestaltet. Ein interessanter Einblick in die rasanten Veränderungen der Branche und neue Rollen für Design und Engineering.

Zeit für das Ende der Sidebar?

Louise North hinterfragt, ob klassische Sidebars im modernen Webdesign noch zeitgemäß sind – eine Frage, die wir für uns vor einiger Zeit schon beantwortet haben. Die Debatte zeigt, dass Sidebars im Mobile-First-Kontext oft an Bedeutung verlieren, während alternative Layouts wie sticky oder kontextbezogene Inhalte an Relevanz gewinnen.

Wie man User Research optimiert – Am Beispiel von Henry Ford

Am Beispiel von Henry Ford – »Wenn ich die Leute gefragt hätte, was sie wollen, hätten sie schnellere Pferde gesagt« – wird erklärt, dass gutes Design und User Research nicht darin bestehen, Nutzer nach gewünschten Lösungen zu fragen, sondern ihre tatsächlichen Bedürfnisse zu verstehen. Fords Zitat zeigt, dass Menschen oft in bekannten Mustern denken, während Designer durch Beobachtung und Problemverständnis innovative Wege finden müssen. Deshalb liegt der Fokus im User Research darauf, Probleme zu erkennen statt vermeintliche Lösungen zu sammeln.

Frontend

Bedingte Logik in CSS mit if()

CSS erhält eine native Bedingungsfunktion, mit der Styles kontextabhängig definiert werden können. if() ermöglicht Inline-Logik, reduziert Redundanzen und erweitert die Ausdrucksmöglichkeiten in Stylesheets. Thenewstack berichten kompakt über Syntax, Support und Nutzen der revolutionären Funktion.

CSS im Jahr 2025

Chris Coyier aktualisiert jährlich den Überblick über CSS-Features, die aktuell relevant oder auf dem Vormarsch sind. In der Ausgabe 2025 werden Funktionen vorgestellt, die teils experimentell, teils bereits in Browsern nutzbar sind, darunter if(), @function und field-sizing. Er gibt damit einen kompakten Überblick, welche Neuerungen es wert sind, sie zu testen und in modernen Layouts einzusetzen.

Media Queries jenseits von Breakpoints

Moderne Media Queries können nicht nur Bildschirmbreiten abfragen, sondern auch Gerätefähigkeiten und Nutzerpräferenzen wie hover, resolution, prefers-color-scheme berücksichtigen. Frontendmasters geben einen gewohnt qualitativen und umfassenden Überblick über diese zur Nutzerfreundlichkeit beitragenden Optionen.

Der oft übersehene Unterschied zwischen 100% und stretch

»We completely missed width/height: stretch« beleuchtet das oft übersehene CSS-Schlüsselwort stretch für width und height. Anders als 100% orientiert sich stretch am verfügbaren Innenraum eines Containers und bezieht dessen Padding mit ein, was exaktere und stabilere Layouts bewirken kann.

Schwebender Tastaturfokus mit CSS – Anchor Positioning in der Praxis

Mit CSS Anchor Positioning könnt ihr eine schwebende Fokusmarkierung umsetzen, die dem aktuell fokussierten Element folgt. Der Polypane-Beitrag führt durch Konzept, progressive Enhancement und Fallbacks und zeigt, wie ihr sichtbare Tastaturfokusse in komplexen Oberflächen robust gestaltet.

WordPress

RSS vs. Block Editor

Thorsten hat einen interessanten Artikel geschrieben, in dem er einerseits den Niedergang von RSS bedauert und zudem auf Probleme der Technologie in Kombination mit dem Block Editor hinweist. In der Tat ist das ein Thema, das bedacht werden sollte. Wir selbst bieten RSS auf unserer Website an (inkl. der identifizierten Probleme). Wie stark die Feeds noch genutzt werden, können wir allerdings nicht sagen.

Blocktober

Über Telex – Automattics AI-Tool zur Erzeugung von WordPress-Blöcken – hatten wir bereits letzten Monat berichtet. Auf blocktober.fun wurde nun ein Experiment gestartet, bei dem jeden Tag im Oktober ein Block erstellt wurde.

Barrierefreiheit

In welchen Fällen eine sticky Navigation schädlich ist

Eine Navigation, die beim Scrollen stehen bleibt, ist ein beliebtes Design-Pattern. Im Kontext von digitaler Barrierefreiheit macht es aber Sinn, sich die Vor- und Nachteile einmal im Detail anzuschauen.

Alt-Text für CSS-generierte Inhalte korrekt einsetzen

Sara Soueidan erklärt in CSS to speech: alternative text for CSS-generated content, wie die Slash-Syntax der content-Eigenschaft eingesetzt wird, um Textalternativen für CSS-generierte Inhalte zu ermöglichen. Sie geht auch darauf ein, wie gut Screenreader und Browser die Funktion unterstützen. Spoiler: Aktuell ist das Feature noch mit Vorsicht zu genießen. Bedeutungsrelevante Informationen sollten derzeit noch nicht per CSS hinzugefügt werden – die Alt-Texte werden je nach Betriebssystem und Browser nicht zuverlässig angekündigt und können zu einem Label-Mismatch führen und User verwirren. Dennoch eine vielversprechende Technik.

Tools

• SizeMatters ist ein Tool zum Erzeugen skalierender Typo-Systematiken
• Auf design.dev findet ihr zahlreiche Online-Generatoren für CSS-Snippets
• Dev-tool.dev bietet eine Sammlung von über 20 webbasierten Entwicklungstools wie Cron Calculator, Base64- und Image Format Converter
• Formatjsononline.com stellt eine umfangreiche Suite mit mehr als 40 Tools zur Formatierung, Validierung, Umwandlung und Visualisierung von JSON-Dateien bereit
• Die VS Code-Extension OKLChanger wandelt Farbdefinitionen wie HEX, RGB, HSL oder Lab direkt im Code-Editor in das moderne OKLCH-Farbsystem um
• Das Pessimists Archive dokumentiert, wie neue Technologien seit über 150 Jahren auf Widerstand stoßen
• I’m not a robot ist ein CAPTCHA-Experiment von Neal.fun, bei dem ihr absurde »Mensch-gegen-Bot«-Aufgaben erfüllen müsst
• Symbols.so bietet eine frei nutzbare Sammlung von Unicode-Symbolen inkl. Emojis und Sonderzeichen zum direkten Kopieren und Einfügen
• Auf Media Cheat Sheet gibt es aktuelle Formatvorgaben für Bilder, Videos und Anzeigen für alle gängigen Social-Media Plattformen

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer von kulturbanause und des kulturbanause Blogs. 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.

Charleen Warkentin

Charleen arbeitet als Webdesignerin bei kulturbanause. Sie gestaltet und realisiert Websites, die durch klare Strukturen, ästhetisches Design und hohe Benutzerfreundlichkeit überzeugen. In enger Zusammenarbeit mit den Developern sorgt sie dafür, dass Gestaltung und Funktion perfekt ineinandergreifen.

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.