Web Design News & Link-Tipps – Nr. 50

Von: Raimund, Ferenc, Jonas, Charleen, Sophie, Robert

Unsere Themen im Januar: Digitale Unabhängigkeit und Freiräume im Internet, öffentliche Design-Systeme, CSS für Masonry Layout, das Triumvirat der HTML-Semantik und inklusives Design für Gehörlose.

Aktualisiert am 13. Januar 2026

Allgemein

Rückkehr zu »Times New Roman«

Die Schriftfamilie »Calibri« überzeugt am Bildschirm durch bessere Lesbarkeit als »Times New Roman« und wurde daher seinerzeit als inklusivere Alternative gewählt. Da hier das Diversity-Thema tangiert wird, kehrt die Trump-Administration zu Times New Roman zurück …

Digital Independence Day

Die Abhängigkeit von großen Tech-Konzernen wird spätestens seit der Übernahme von Twitter durch Musk oder dem zweiten Amtsantritt von Trump öffentlich diskutiert. Wie die Befreiung von Big Tech mit wenig Aufwand möglich ist, wird nun auf der Website di.day beschrieben. Das Konzept dahinter: Jeden 1. Sonntag im Monat einen Dienst befreien.

Zielführende Design-Reviews

Parvaneh Toghiani schildert in »How to Stop the Stakeholder Swirl«, wie sich ihr Verständnis von Design-Reviews insbesondere mit Entscheidungstragenden mit zunehmender Erfahrung veränderte. Daraus hat sie eine Methodik entwickelt, mit der Reviews erfolgreicher durchgeführt werden können.

Das Ende der großen Innovationen

In einem Ausblick auf die technologische Entwicklung argumentiert der Autor des Blogs »Deciphering Glyph«, dass sich die Innovationsdichte der letzten zwanzig Jahre kaum fortschreiben lässt. Seine zentrale Beobachtung: Die Computerindustrie reift aus und stößt an physische, ökonomische und organisatorische Grenzen. Entsprechend plädiert er dafür, Open-Source-Software nicht für hypothetische Szenarien zu optimieren, sondern für reale Nutzung auf alltäglicher Hardware.

Freiräume im Internet zurückgewinnen

»A Website to Destroy All Websites« plädiert in sehr ansprechend gestalteter Weise für handgefertigte, persönliche Websites und IndieWeb-Technologien, um die Kontrolle über unsere Daten und Kreativität zurückzugewinnen. Dabei setzt er auf Pragmatismus: klein anfangen, experimentieren und die Freude am eigenen Webprojekt voranstellen.

UX/UI Design

Öffentliche Design-Systeme lohnen sich

Design-Systeme entfalten ihren größten Wert erst, wenn sie öffentlich sind. Der Artikel Public Design Systems Are Worth It beschreibt, warum sich dieser Mehraufwand lohnt und welchen Mehrwert Offenheit für Teams, Produkte und die Design-Community schafft.

Was die neuen macOS-Icons über Interface-Design verraten

In »It’s hard to justify Tahoe icons« analysiert Nikita Prokopov die neuen Icons von macOS Tahoe und nutzt sie als Ausgangspunkt für eine grundsätzliche Betrachtung von Icon-Design auf Systemebene. Seine zentrale Beobachtung: Icons funktionieren weniger als dekorative Illustrationen, sondern als visuelle Sprache, die nur dann verständlich bleibt, wenn sie konsequent gestaltet ist.

Penpot experimentiert mit MCP-Servern

In einem Artikel für das Smashing Magazine beschreibt Daniel Schwarz, wie Penpot aktuell in einer frühen, experimentellen Phase mit MCP-Servern und KI-gestützten Workflows experimentiert, um die Lücke zwischen Design und Entwicklung auch hier weiter zu verkleinern. Im Mittelpunkt stehen nicht fertige Features, sondern offene Prototypen. In einem Drive-Ordner lassen sich bereits Demos zu den Workflows ansehen.

Frontend

CSS Grid Lanes

Es gab eine jahrelange Diskussion darüber, wie mit CSS ein Masonry-Layout erstellt werden soll. Die bisherigen Techniken Flexbox und Grid ermöglichen das nicht, daher kümmerte sich eine Arbeitsgruppe darum, wie es implementiert werden soll. Nach einigem Hin und Her liegt das Ergebnis nun vor. Mit display: grid-lanes stehen uns zukünftig neue Layout-Techniken zur Verfügung.

CSS @scope in Firefox

Die Vererbung von CSS kann mitunter ungewünschte Auswirkungen auf verschachtelte Komponenten haben. Um den Wirkungsbereich eines Selektors zu begrenzen, ist @scope hilfreich. Das Feature ist ab Firefox 146 mit dabei und somit ein Baseline-Feature.

CSS Wrapped by Chrome

Das Chrome-DevRel-Team hat mit CSS Wrapped 2025 eine kurzweilige Zusammenstellung der in diesem Jahr neuen CSS-Features veröffentlicht. Achtung, einiges davon ist bisher Chrome-exklusiv.

CSS scrollbar-gutter

Ist eine Website länger als der Viewport, wird gescrollt. So viel ist bekannt. Wenn allerdings eine Unterseite erst gescrollt werden muss, nachdem Inhalte dynamisch nachgeladen oder aufgeklappt wurden, erscheint der Scrollbalken auch erst dann und sorgt mitunter für einen horizontalen Layout-Shift. Im schlimmsten Fall brechen Fließtexte anders um. CSS scrollbar-gutter kann helfen, doch es gibt auch Nachteile zu beachten.

SVG Sprites und SVG Stacks

SVG Sprites sind nun wahrlich keine Neuerung. Doch es gibt verschiedene Ansätze, die alle ihre Vor- und Nachteile haben. Wenn das Ziel darin besteht, eine zentrale Sprite zu verwenden, deren Bestandteile mit IDs sowohl im HTML- als auch im CSS-Code aufgerufen werden können, muss der Aufbau der SVG Sprite zahlreiche Anforderungen erfüllen, die von Vadim Makeev übersichtlich zusammengefasst werden.

Arbeiten mit CSS im Lauf der Zeit

In »Ciao BEM, Servus Vanilla CSS« beschreibt Gerrit van Aaken u. a. mit Code-Beispielen anschaulich, wie die dynamische Weiterentwicklung von CSS und entsprechender Methoden und Tools seine Arbeitsweise verändern, auch wenn das mitunter etwas länger braucht.

URL-Parameter ohne Performance-Kosten

Barry Pollard, Developer im Chrome-Team, erklärt in einem Blogbeitrag, warum URL-Parameter oft zu Caching- und Performance-Problemen führen können, wenn z. B. unterschiedliche Links auf den gleichen Inhalt führen. Er zeigt dabei, wie der neue, noch experimentelle Header No-Vary-Search das Caching und die Ladezeiten verbessern kann.

robots.txt notwendig für Google-Suchergebnisse

Dass das Fehlen einer erreichbaren robots.txt-Datei dazu führen kann, dass Google den gesamten Crawl stoppt und die Seite aus den Suchergebnissen verschwindet, führt Alan W. Smith in einem Post auf seiner Website aus. Anlass war ein dokumentierter Fall, als der Traffic nach dem Wegfall der robots.txt plötzlich komplett einbrach, was Google in einem Support-Video bestätigte.

Das Triumvirat der HTML-Semantik

Tomasz Jakut macht im HTMHell-Adventskalender einen Deep Dive in die HTML-Semantik. Er beleuchtet dabei die drei Ebenen für Nutzer, Maschinen und Entwickler. Sein Fazit: Korrekte Semantik verbessert nicht nur die Zugänglichkeit, sondern unterstützt auch SEO und Wartbarkeit.

WordPress

WooCommerce und Mastercard starten Partnerschaft

WooCommerce geht eine strategische Zusammenarbeit mit Mastercard ein, durch die Händler in Europa, dem Nahen Osten und Afrika einfachen und sicheren Zugang zu erweiterten Zahlungsfunktionen über die Mastercard Merchant Cloud erhalten.

Stripe’s Agentic Commerce Suite mit WooCommerce-Support

WooCommerce ist Launch-Partner der neuen Agentic Commerce Suite von Stripe, die es Shop-Betreibern ermöglicht, ihren Produktkatalog einmal zu integrieren und anschließend über verschiedene KI-Shopping-Agenten zu verkaufen. Aktuell jedoch erst einmal nur für den US-Markt.

Barrierefreiheit

Accessibility 2026: Ein Blick in die Glaskugel

Neben vielen vagen Weissagungen zu Design-Trends für das kommende Jahr gibt es (hoffentlich) auch einige anstehende Verbesserungen beim Thema Accessibility im Web. Eine Vorhersage, die uns gefällt!

Design für Gehörlose

In seinem Artikel »How To Design For (And With) Deaf People« zeigt Vitaly Friedman, dass inklusives Design für gehörlose Menschen weit über technische Barrierefreiheit hinausgeht. Die zentrale Erkenntnis hierbei: Gute Lösungen entstehen nur, wenn Betroffene aktiv in Research, Testing und Entscheidungsfindung eingebunden werden. Friedman macht deutlich, dass Kommunikation immer mehrere gleichwertige Wege braucht. Beispielsweise Text statt Telefon, Untertitel und Transkripte für Audio sowie visuelle und haptische Hinweise.

Wieso DOM-Mutationen im Browser für a11y wichtig sind

Max Design erklären auf verständliche Art und Weise, wie der Browser das DOM (also die Struktur einer Webseite) automatisch ändert, etwa durch Klicks oder Eingaben, auch bevor dieses mit JavaScript manipuliert wird. Diese DOM-Mutationen sind zentral für die Interaktivität und folglich auch für die Barrierefreiheit.

Keine Konformitätsaussage für ein Webangebot mit Overlay-Tool

BIK (Barrierefrei informieren und kommunizieren), die maßgebliche Stelle für die Entwicklung und Pflege des BITV-Tests, ergänzt die Beschreibung des Prüfverfahrens um eine Aussage zu sogenannten Overlay-Tools und erklärt sich außerstande, eine Konformitätsaussage für Websites mit Overlay-Tools zu machen. Auch können solche Sites BIK-Prüfergebnisse und -Prüfzeichen nicht nutzen. Wir haben das Thema Overlay-Tools schon wiederholt aufgenommen.

Tools

• »WCAG 2.2 Card Deck« ist eine Figma-Vorlage für einen ausdruckbaren Satz von handlichen Karten, welche die aktuellen Standardkriterien für Barrierefreiheit anschaulich darstellen.
• ExposedByDefault ist ein browserbasiertes Tool, das alle standardmäßig freigegebenen Browser-Daten wie Canvas-Fingerprints, GPU-Details, Hardware-Infos und Permissions scannt und anzeigt, um Tracking-Risiken sichtbar zu machen.
• Mit colorize.design lassen sich Farbpaletten aus beliebigen Websites extrahieren, anzeigen und exportieren.
• Der E-Mail-Editor von Courselit ist ein kostenloser, Open-Source-E-Mail-Template-Editor, mit dem responsive HTML-E-Mails per Drag-and-Drop gebaut und getestet werden können.
• Auf Scroll-driven-animations.style ist eine interaktive Demo- und Lernseite des Chrome-Teams, die CSS Scroll-Driven Animations mit editierbaren Beispielen wie Parallax-Effekten, Fade-Ins und Scroll-Timelines vorführt.
• Mit ReliCSS lassen sich CSS-Browserhacks außerhalb eines Codeeditors auf Aktualität und Alternativen prüfen.

Geschrieben von:

Raimund Büchner

Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.

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.

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.

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.«