Web Design News & Link-Tipps – Nr. 45
Von: Jonas, Ferenc, Raimund, Sophie, Charleen Unsere Themen im August: Coding mit Claude Desktop, Grundlagen der Farbpsychologie, jährliche Umfragen zu HTML und CSS, die Roadmap für WordPress 6.9 und Barrierefreiheit in öffentlichen Websites.
UX/UI Design
Einführung und Grundlagen zu SVG
Der Beitrag von Josh Comeau gibt eine leicht verständliche Einführung in SVG und erklärt anhand von Beispielen die SVG-Grundformen, das viewbox-Attribut sowie Style-Attribute. Gezeigt wird hierbei, wie sich Grafiken unbegrenzt skalieren und mit CSS oder JavaScript animieren lassen.
UX Design für Linkshänder
Viele digitale Interfaces sind auf Rechtshänder ausgelegt, was Linkshänder in der Navigation und Interaktionen einschränkt. Der Artikel empfiehlt flexible Layouts, ergonomische Platzierung von Buttons und konfigurierbare Bedienelemente. Tests mit Linkshändern sollen außerdem helfen, reale Probleme zu erkennen und inklusivere, nutzerfreundliche Designs zu schaffen.
Farbpsychologie bei digitalen Produkten
Der ausführliche Grundlagenartikel erläutert, wie Farben gezielt eingesetzt werden, um Nutzererfahrungen zu steuern und Interfaces effektiver zu gestalten. Er zeigt, dass Farben Emotionen und Entscheidungen beeinflussen, die Markenidentität stärken und interaktive Elemente hervorheben können. Gleichzeitig betont er die Bedeutung von Kontrast, Barrierefreiheit und kulturellen Assoziationen für eine inklusive und klare Gestaltung.
Frontend
Nur ein <details> gleichzeitig öffnen
Mit <details> und <summary> können schöne Accordions gebaut werden. Wenn sich zuvor geöffnete Accordions schließen sollen, sobald ein neues Accordion geöffnet wird, muss ein identisches name-Attribut auf alle Elemente gesetzt werden.
Eine praktische Einführung in CSS Anchor Position
CSS Anchor Position funktioniert bereits in Chrome und bald in Safari (26+). Wir warten sehnsüchtig auf Firefox und den Baseline-Support, denn dann wird das CSS-Feature in Kombination mit der Popover API unsere Herangehensweise bei der Erstellung von Multi-Level-Navigationen usw. grundlegend verändern. Im WebKit-Blog ist nun ein Artikel erschienen, der praktisch und niedrigschwellig in das Thema einführt.
Start der HTML-Umfrage
Die jährliche Umfrage zu HTML ist gestartet und wir empfehlen dringend mitzumachen. In Kategorien wie »Forms«, »Interactivity«, »Graphics & Multimedia« oder »Accessibility« wird abgefragt, welche Web-Features bekannt, interessant oder bereits genutzt sind. Die Ergebnisse haben direkte Auswirkung auf die Roadmap der Browser-Hersteller. Darüber hinaus lernt ihr sicher sehr viel Neues kennen.
HTML lebt!
Jono Alderson erinnert daran, dass semantisches HTML mehr ist als Nostalgie: Es ist die Grundlage für Performance, Accessibility und maschinenlesbare Inhalte. Wenn alles ein <div> ist, verliert die Struktur ihre Bedeutung und reduziert damit die Zugänglichkeit und Wartbarkeit von Webseiten.
Auf acko.net wird das Ganze radikaler analysiert: Der DOM ist überladen, inkonsistent und für moderne UI-Muster kaum geeignet. Semantic HTML hat seine Versprechen nie ganz eingelöst, und viele Entwickler umgehen den DOM inzwischen komplett mit Frameworks, die HTML zum Transportmedium degradieren.
Ergebnisse der CSS-Umfrage
Und direkt noch eine Umfrage. Die Ergebnisse von State of CSS 2025 sind da und bringen Erkenntnisse darüber, wie CSS genutzt wird und was sich die Community wünscht. Besonders interessant finden wir die Übersicht aller Features mit Infos dazu, wie diese genutzt werden. Ebenfalls höchst interessant sind die Missing Features (es hält sich in Grenzen) und Infos zu Inkompatibilitäten (Hey Anchor Position!).
CSS-Baseline direkt in DevTools
Die Chrome DevTools können bald im Elements-Panel den Baseline-Status von CSS-Eigenschaften anzeigen. Damit lässt sich direkt erkennen, ob eine Eigenschaft Baseline-Support hat, neu verfügbar oder nur eingeschränkt nutzbar ist. Aktuell kann das Feature bereits in der Beta-Version genutzt werden.
Ein Fazit aus 12 Jahren PostCSS
PostCSS zählt zu den einflussreichsten CSS-Tools der letzten Dekade. Schöpfer Andrey Sitnik teilt auf Evil Martians acht zentrale Erfahrungen in der Entwicklung, von der Bedeutung guter Dokumentation und gezielter Promotion bis hin zu Community-Management und technischen Entscheidungen.
CSS zentrieren, wieder einmal
Das Thema »Elemente in CSS zentrieren« wirkt abgegriffen, bleibt aber im Alltag relevant. Der Artikel von Picalilli zeigt, wie sich mit modernen Layout-Techniken das bekannte Problem schlank und zuverlässig lösen lässt.
Parallax-Effekte mit scroll-driven CSS-Animationen
Der Beitrag auf CSS-Tricks zeigt, wie sich Parallax-Effekte ganz ohne JavaScript umsetzen lassen. Mit den neuen scroll-driven CSS-Animationen wird die Bewegung direkt an die Scroll-Position gekoppelt, was für flüssige und performante Animationen sorgt.
WordPress
WordPress 6.9 Roadmap veröffentlicht
WP 6.9 ist für den 2. Dezember angekündigt. Geplant sind spannende Features wie Kommentare für Blöcke im Editor, zahlreiche Updates im Block und Site Editor, API- und Performance-Verbesserungen und ein Redesign des Admin-Bereichs.
Neues KI-Plugin und Infrastruktur für WordPress
Das neue AI Experiments Plugin bündelt erste Ergebnisse des kürzlich gestarteten AI-Teams im WordPress-Projekt. Es ermöglicht die Anbindung verschiedener KI-Anbieter und die experimentelle Nutzung von KI-Funktionen direkt im Editor und Admin-Bereich.
Es wurden zudem ein PHP AI Client zur einheitlichen KI-Integration, die Abilities API zur standardisierten Beschreibung von Plugin-Funktionen und ein MCP-Adapter zur strukturierten Kontextübergabe an Sprachmodelle (LLMs) vorgestellt.
Alle Elemente erscheinen zunächst als separate Pakete, sollen aber perspektivisch in den WordPress-Core einfließen.
Diskussion um weitere Blöcke im WP Core
Auf Github wird diskutiert, ob der WordPress-Core weitere Blöcke erhalten soll. Im Gespräch sind u. a. Slider, Accordions, Tabs usw. – also Blöcke, die für fast alle Websites benötigt werden, Herausforderungen in der Barrierefreiheit mit sich bringen und heute durchaus als Standard-Feature erwartet werden dürften. Wir selbst haben viele der gewünschten Blöcke in unserer WordPress Pattern Bibliothek vorbereitet.
Barrierefreiheit
Digitale Barrierefreiheit bei öffentlichen Stellen
Im aktuellen Bericht der Überwachungsstelle des BFIT-Bundes (Bund für Barrierefreiheit von Informationstechnik) wird der Stand der Barrierefreiheit von Webauftritten und mobilen Anwendungen öffentlicher Stellen in Deutschland dargestellt. Bezogen auf den Zeitraum von 01/2022 bis 12/2024 fällt die Bilanz eher ernüchternd aus: Kein Webauftritt und keine mobile Anwendung haben die vollständige Barrierefreiheit nach allen zu prüfenden Anforderungen erreicht.
Overlays nicht ausreichend
Weiterhin nutzen auch öffentliche Stellen sogenannte Overlay-Tools in der Hoffnung, ihren Websites zur Barrierefreiheit zu verhelfen. Da das unverändert nicht der Fall ist, haben die Überwachungsstellen des Bundes und der Länder ihren Bericht dazu aktualisiert. Barrierefreiheit kann nicht im Nachhinein übergestülpt werden! Auch wir haben bereits mehrfach darauf hingewiesen.
Allgemein
Tipps und Erfahrungsberichte zum Coding mit Claude
Der Artikel beschreibt detailliert, wie mit Claude Desktop gearbeitet werden kann, um professionelle Ergebnisse zu erreichen. Angefangen bei Vibe Coding für Prototypen und Nebenprojekte bis hin zu detaillierten Prompts, wie die AI als Pair Programmer oder Reviewer genutzt werden kann.
EU-Streitbeilegungsplattform eingestellt
Die europäische Online-Streitbeilegungsplattform (ODR) wurde zum 20.07.2025 eingestellt. Shop-Betreibern wird empfohlen, die bisher notwendigen Hinweise aus dem Impressum zu entfernen, um das Risiko von Abmahnungen zu senken.
Altbekannte KI in neuen Schläuchen
Der Journalist Max Read argumentiert auf seinem Blog, dass der gegenwärtige KI-Hype, insbesondere um Chatbots wie ChatGPT, keine revolutionäre, sondern eine »normale« Technologie ist. Eingebettet in bekannte Geschäftsmodelle, mit Fokus auf emotionale Nutzerbindung und abhängigkeitsfördernde UX-Strategien. Die Enttäuschung über GPT-5 zeigt, wie stark sich Nutzer an die Spiegelungen der Modelle gewöhnt haben und wie darauf basierende Apps bereits in intime Lebensbereiche vorgedrungen sind.
PNGs in Vogelstimmen speichern
Und zuletzt noch ein interessantes Experiment: Der Musiker Benn Jordan zeigt auf YouTube nicht nur, wie man relativ kostengünstig Naturgeräusche aufnimmt, sondern auch, dass sogar Stare eine Möglichkeit bieten, PNGs zu speichern.
Tools
- Mit SVG Crop könnt ihr den Freiraum um SVGs entfernen. Sehr praktisch!
- AI Design Guide – Ein übersichtlicher Guide, der Werkzeuge, Methoden und Best Practices für den Einsatz von KI im Designprozess zusammenstellt.
- Mit Tooooools.app können Bilder mit generative lo-fi Effekten bearbeitet werden.
- Die Comment Blocklist für WordPress ist eine umfangreiche, manuell gepflegte Sammlung von über 60.000 Spam-bezogenen Begriffen, die in WordPress als »Disallowed Comment Keys« eingefügt werden können, um Kommentarspam zu blockieren.
- git-gpt-commit erstellt mithilfe von GPT automatisch Commit-Messages für Git.
- Auf CSS Questions könnt ihr euer Wissen mit Quizfragen testen und typische Stolperfallen im Umgang mit CSS erkennen.
Geschrieben von:
Ferenc Petöcz
Raimund Büchner
Sophie Tausch
Charleen Warkentin
