Web Design News & Link-Tipps – Nr. 44
Von: Jonas, Ferenc, Sophie, Raimund, Felix, Konstantin Unsere Themen im Juli: Viel Neues aus dem Frontend-Bereich – von zahlreichen neuen oder erweiterten CSS-Eigenschaften bis zu ECMAScript 2025.
Allgemein
Aufwand bei Projekten schätzen
Realistische Zeitschätzungen sind entscheidend für den Projekterfolg. Falsche Einschätzungen belasten Projekte durch Zeitdruck und höhere Kosten. Die ausführlichen Beiträge »The work is never just „the work“« und »Improving Estimations in Software Development Projects: Why It’s So Hard and How to Get It Right« erklären anschaulich häufige Fehler und praktische Lösungsansätze.
UX/UI Design
Liquid Glass in CSS und Figma
Der Liquid Glass-Effect, den Apple angekündigt hat, schlägt nach wie vor große Wellen. Mit CSS alleine ist das nicht umsetzbar, aber in Kombination mit SVG Filtern dann doch. Du folgenden Quellen (1, 2) zeigen Lösungen für den Browser. Auch Figma hat Glass als Option ergänzt.
UX-Richtlinien für Benachrichtigungen
Der Artikel aus dem Smashing Magazine zeigt auf, wie Benachrichtigungen gestaltet sein sollten, um hilfreich statt störend zu wirken. Dabei geht es unter anderem um eine klare und kontextbezogene Priorisierung. Ziel ist ein durchdachtes Notification-Design, das Nutzer unterstützt und nicht ablenkt.
Die Wirkung von Typografie
In diesem Artikel analysiert Oliver Schöndorfer die Typografie einer fiktiven Website für Papst Franziskus. Anhand verschiedener Schriftbeispiele wird gezeigt, wie stark Typografie die Tonalität, Wahrnehmung und Glaubwürdigkeit einer digitalen Marke beeinflusst – unabhängig des Szenarios.
Wie man ein flexibles und stabiles Design System erstellt
In der Episode »How to Make a Design System That’s Not Boring« spricht Brad Frost mit Jason Lengstorf über die Herausforderungen und Erfolgsfaktoren moderner Design-Systeme.
Ein Design-System wird dann nicht langweilig, wenn es gestalterische Vielfalt ermöglicht, ohne dabei die visuelle und funktionale Konsistenz zu verlieren – etwa durch den gezielten Einsatz von Design Tokens, die Stilmittel wie Farben und Typografie klar von strukturellen Komponenten trennen. Ebenso zentral ist eine enge, kontinuierliche Zusammenarbeit zwischen Design- und Entwicklerteams.
Frontend
Highlight API
Die Highlight API ermöglicht es, Textbereiche in einem Dokument semantisch zu markieren, ohne den DOM zu verändern – ideal z. B. für Syntax-Highlighting oder Kommentarfunktionen. Auf GitHub findet ihr dazu bereits eine Web Component, mit der Syntax Highlighting ohne Span-Schlacht ermöglicht wird.
Hurra, ECMAScript 2025 ist da
Im Juni wurde der neue ECMAScript Standard bestätigt. In seinem Blog fasst Dr. Rauschmayer die Neuerungen ausführlich zusammen. So lassen sich jetzt JSON-Dateien direkt als Module importieren, Iterator-Helper-Methoden ermöglichen elegantere Datenverarbeitung ohne Zwischenarrays, und neue Set-Methoden wie union() oder intersection() erleichtern Mengenoperationen.
Umfragen, Umfragen, Umfragen
Die erste Ausgabe der State of Devs 2025-Umfrage rückt Themen in den Fokus, die in klassischen Entwicklerumfragen oft zu kurz kommen: Gesundheit, Hobbys, Arbeitsbedingungen und persönliche Erfahrungen. Der Pragmatic Engineer 2025 Survey dagegen interessiert sich vor allem für das konkrete Handwerk und die Werkzeuge dahinter. Beides also gute Möglichkeiten, sich selbst und sein Arbeitsumfeld zu reflektieren.
Zeilenlänge und Textanpassung in CSS optimieren
Der Beitrag auf CSS-Tricks erklärt, wie sich die Lesbarkeit von Text durch eine gezielte Begrenzung der Zeilenlänge verbessern lässt. Neben klassischen Ansätzen werden auch moderne Methoden gezeigt, um Text flexibel an Containergrößen anzupassen und eine harmonische Typografie zu gewährleisten.
CSS Formular-Styles in 2025
Das Styling von Formularelementen ist sehr lästig. Allerdings tut sich bei diesem Thema momentan einiges. Beim CSS Day in Amsterdam gab es einen interessanten Vortrag dazu (YouTube). Auch auf Frontend Masters wird das Thema aufgegriffen.
display:none; animieren
Mit CSS @starting-style können u. a. Elemente animiert werden, die mittels display:none; ausgeblendet wurden. Das Konzept ist nicht so trivial wie es auf den ersten Blick scheint, daher hat Zell Liew wertvolle Tipps zusammengefasst.
Von abgerundeten Ecken bis Super-Ellipse
Die border-radius-Eigenschaft von CSS wird oft missverstanden und ermöglicht durch Angabe von acht Werten, sowie dem korrekten Einsatz von em- und Prozent-Werten eine erstaunliche Anzahl an Formen. Mit corner-shape sind weitere Gestaltungsmöglichkeiten geplant, die in einem ausführlichen Beitrag zusammengefasst wurden.
Konditionale Styles nun auch in Chrome 137
Mit Chrome 137 führt Google nun auch die neue CSS-Funktion if() ein, die konditionale Styles direkt inline ermöglicht – etwa für Media Queries. Statt separate Regeln zu schreiben, könnte ihr in der Zukunft Bedingungen direkt in CSS-Eigenschaften einbauen. Die Funktion ist aber folglich noch ein ganzes Stück von baseline entfernt, aber es lohnt sich schon ein Blick darauf. Wer in die Thematik tiefer eintauchen möchte, kann dies bei diesem umfangreichen CSS-Tricks Artikel tun.
Reaktive Interfaces ohne Framework-Ballast
Loren Stewart zeigt in seinem aktuellen Blogbeitrag, wie man mit JavaScript-Proxies einen schlanken, reaktiven State Manager bauen kann und das ganz ohne externe Bibliotheken oder Frameworks. Durch das Abfangen von Objekteigenschaften durch Funktionen wie set() lässt sich der UI-State automatisch und ohne Herumfuhrwerken im DOM aktualisieren. Besonders für kleine bis mittelgroße Projekte also eine elegante Alternative und zusätzliche Option zu Frameworks wie Redux oder Zustand.
Bessere Websites mit reinem HTML und CSS
In einem Blogbeitrag erklärt Joel Dare, warum es auch im Jahr 2025 sinnvoll ist, trotz der Vielzahl verfügbarer Technologien und Tools, Websites mit reinem HTML und CSS aufzubauen. Er hebt die schnelle Ladegeschwindigkeit, die automatische Barrierefreiheit und die Suchmaschinenfreundlichkeit (SEO) derart erstellter Seiten als Hauptvorteile hervor. Außerdem ermöglicht die Abwesenheit komplexer Abhängigkeiten eine schnelle Entwicklung und eine überschaubare Wartung.
CSS-Spezifität mit Cascade Layers, BEM und Utility-Klassen
In diesem Artikel erklärt Victor Ayomipo, wie CSS Cascade Layers helfen, die Spezifität von CSS-Regeln besser zu kontrollieren und unvorhersehbares Verhalten zu vermeiden. Er zeigt, dass Cascade Layers ein mächtiges neues Feature sind, während BEM und Utility-Klassen bewährte Strategien bleiben. Er empfiehlt, Cascade Layers mit BEM oder Utility-Klassen zu kombinieren, um die Vorteile beider Ansätze zu nutzen: schlanker, gut steuerbarer CSS-Code ohne !important und unerwünschte Seiteneffekte.
Klassischen Funktionen und Arrow Functions in JavaScript
Im Artikel erklärt James Sinclair anschaulich die Unterschiede zwischen klassischen Funktionen und Arrow Functions in JavaScript. Er zeigt, dass neben Syntax und „this“-Bindung auch Lesbarkeit und Einsatzszenario entscheidend sind, welche Variante gewählt werden sollte. Ein Flowchart hilft dabei, die richtige Funktionserklärung für den jeweiligen Zweck auszuwählen.
Observer in JavaScript intuitiver nutzen
In zwei Blogbeiträgen zeigt Zell Liew, wie sich die Arbeit mit Observern in JavaScript deutlich vereinfachen lässt. Sowohl für den Resize Observer als auch für den Intersection und Mutation Observer stellt er eine optimierte API vor. Die gezeigten Hilfsfunktionen machen deren Nutzung intuitiver, konsistenter und übersichtlicher.
Zwei Spalten im CSS-Grid richtig aufteilen
Dieser Beitrag auf Frontend Masters vergleicht 1fr-, auto- und Prozent-Units für ein 50/50-Layout und zeigt, warum 1fr häufig die sauberste, flexibelste Lösung ist, während auto oder feste Prozente in manchen Fällen Überraschungen verursachen. Ein praxisnaher Leitfaden, um Grid-Spalten verlässlich zu dimensionieren.
Neue CSS-Features im Blick behalten
CSS-Tricks erklärt praxistaugliche Strategien, um wichtige Spezifikations-Updates, Browser-Changelogs und Experimente frühzeitig zu erkennen und produktiv einzusetzen. So filterst du das stetige News-Rauschen und integrierst neue Eigenschaften gezielt in deine Projekte.
WordPress
Headless WordPress auf dem Prüfstand
»Headless CMS-Ansätze mögen für einige technische Spezialfälle sinnvoll sein, doch oft sind sie over-engineered und komplex, so dass sie sich für das einzelne Projekt nicht rechnen.« Der Artikel von The Code Co räumt mit Vorurteilen und überhöhter Erwartungshaltung auf und ordnet das Thema im Kontext von WordPress ein.
Barrierefreiheit
Text-Level-Elemente zugänglich stylen
Adrian Roselli aktualisiert in diesem Beitrag seinen Leitfaden zu <mark>, <del>, <ins> und <s>. Er zeigt, wie du diese semantischen HTML-Elemente nutzt, ohne Kontrast, Forced-Colors-Mode oder Sprachwechsel auszubremsen – und warum ARIA-Workarounds dabei überflüssig sind.
Tools
- Dia ist ein Browser mit integrierter AI-Unterstützung
- Auf SVG Doodles findet ihr grafische Formen und kleine dekorative Objekte zum Download.
- Auf Formia könnt ihr 3D Formen auf Grundlage zweidimensionaler SVGs erzeugen. Auch IMGto3D ist ein kostenloses Tool, das aus 2D Bildern AI erzeugte Objekte generiert.
- Auf whatunit.com findet ihr eine Figjam-Übersicht darüber, welche CSS-Einheiten für welchen Use Case genutzt werden sollten.
- Driver.js ist ein Tool, mit dem sich geführte Touren und Schritt-für-Schritt-Anleitungen auf Webseiten erstellen lassen.
- Contrast ist ein Tool zur schnellen und einfachen Überprüfung von Farbkontrasten für barrierefreies Webdesign.
- Anubis ist ein Open-Source-Tool, das JavaScript-basiert Webseiten schützt, um automatisiertes Scraping durch Bots, insbesondere durch aggressive AI-Crawler, zu verhindern.
- Happy Hues ist ein Generator für Farbpaletten, der eine direkte Vorschau und Einblick in die Wirkung der Farben bietet.
- Fontpair bietet eine Auswahl an Kombinationen, harmonierender Google Fonts.
- Kome.ai generiert ein Text Script zu einem YouTube Video.
Geschrieben von:
Ferenc Petöcz
Sophie Tausch
Raimund Büchner
Felix Lehmann
Konstantin Hanke
