Web Design News & Link-Tipps – Nr. 38
Von: Raimund, Jonas, Sophie, Robert, Konstantin Unsere Themen im Januar: Prinzipien für Ethik als auch für Barrierefreiheit im Web, Suchen mit Google kommt in die Jahre, relativ neues und weniger bekanntes HTML sowie nicht abreißende Turbulenzen um WordPress/Automattic.
Allgemein
W3C Ethical Web Principles
Aufgrund der jüngeren Entwicklungen bei den großen Social Media-Plattformen (Entfernung von Fakten-Checkern usw.) möchten wir noch einmal an die Ethical Web Principles des W3C erinnern, denen wir uns verbunden fühlen.
UX/UI Design
The State of UX in 2025
Der jährliche Report »The State of UX in 2025« beleuchtet die aktuellen Entwicklungen im Bereich User Experience und beschreibt einen Wandel in der Rolle von Designern. Auch Figma hat sich mit diesem Thema auseinandergesetzt und relevante Zahlen und Fakten in einem Bericht (Regwall) zusammengefasst.
Google ist für alte Leute
Der Artikel »Is Googling for ‚Old People‘?« beleuchtet, dass jüngere Generationen Suchmaschinen wie Google zunehmend meiden und stattdessen zur Informationsbeschaffung auf visuelle Plattformen wie TikTok und Instagram setzen. Das bedeutet für Webdesigner eine verstärkte Ausrichtung auf visuell ansprechende, interaktive und mobil-optimierte Designs, um die Bedürfnisse und Erwartungen dieser Zielgruppen zu erfüllen. Dies erfordert ein Umdenken in der Art und Weise, wie Informationen präsentiert und zugänglich gemacht werden.
Frontend
CSS text-box trim
Eine Text-Box ist – sowohl im Code als auch in Design-Tools immer etwas höher als der Text inkl. Ober- und Unterlängen. Das führt zu Problemen bei der Positionierung. In Figma ist eine Option enthalten, welche die Text-Box auf die sichtbare Höhe des Textes beschneidet, mit einem Hinweise im Dev-Mode, dass dieses Feature in CSS experimentell ist. Jason Bradberry beschreibt die Möglichkeiten mittels CSS ausführlich in einem Blog-Post.
Neue Frontend-Features in 2025
Im Smashing Magazine ist ein Artikel erschienen, der neue bzw. neu verfügbare HTML/CSS/JS-Features für 2025 vorstellt. Eine bunte Sammlung aus bekannten und tatsächlich neuen Möglichkeiten, die definitiv einen Blick wert ist.
Relativ neue Dinge, die man über HTML wissen sollte
Chris Coyier erklärt zum Jahresauftakt einige HTML-Funktionen, die für die unkomplizierte Erstellung interaktiver und zugänglicher Webanwendungen verwendet werden können. Dazu zählen u. a. die Möglichkeit, <details>-Elemente als Akkordeons zu nutzen, anpassbare <select>-Menüs, die Einführung von Popovers ohne JavaScript, sowie die Verwendung des <search>-Elements für Suchbereiche. All diese Funktionen sind nicht mehr ganz neu, aber nun uneingeschränkt einsetzbar.
Übersetzungsfehler durch richtiges Markup verhindern
Stefan Judis erläutert die Verwendung des HTML-Attributs translate="no", um die automatische Übersetzung bestimmter Seitenelemente zu verhindern. Dies ist nützlich, um Eigennamen oder Markennamen vor unbeabsichtigten Übersetzungen durch Übersetzungstools zu schützen. Durch das Hinzufügen von translate="no" zu entsprechenden HTML-Elementen kann sichergestellt werden, dass deren Inhalt in allen Sprachversionen unverändert bleibt.
Weniger bekannte Verwendungen von HTML-Attribute
In seinem Artikel »Lesser Known Uses Of Better Known Attributes« beleuchtet John Rhea weniger bekannte Anwendungen gängiger HTML-Attribute. Er zeigt beispielsweise, wie das name-Attribut im details-Element verwendet werden kann, um sicherzustellen, dass immer nur ein Akkordeon in einer Gruppe geöffnet ist. Zudem erläutert er, wie das title-Attribut im input-Element genutzt werden kann, um Benutzern Hinweise zu Eingabemustern zu geben. Diese Einblicke helfen Entwicklern, HTML-Attribute effektiver einzusetzen und dadurch die Funktionalität und Benutzerfreundlichkeit ihrer Webseiten zu verbessern.
Text mit CSS besser ausrichten
Ahmad Shadeed erläutert in »Balancing Text in CSS« die Anwendung der CSS-Eigenschaft text-wrap zur visuellen Optimierung von Texten. Er zeigt, wie Werte wie balance und pretty eingesetzt werden können, um eine ausgewogene Textdarstellung zu erzielen, und beleuchtet die Grenzen dieser Methoden. Der Artikel bietet praxisnahe Beispiele für den Einsatz von text-wrap in verschiedenen Szenarien, wie etwa bei Überschriften, Karteninhalten und Tooltips.
Gedanken zu React
Das äußerst populäre JS-Framework React wird in jüngerer Vergangenheit häufiger kritisiert. Die folgenden Artikel beleuchten dies aus zwei Richtungen. Einerseits wird argumentiert, React wäre aus heutiger Sicht technisch überholt und verkompliziere zudem native HTML/CSS/API-Ansätze. React steht aber auch in der Kritik, da die Zeit, die Developer in React investieren müssen, nur einen kurzfristigen Mehrwert am Markt bietet und die Ansätze schlecht auf andere Bereiche übertragbar sind.
WordPress
Joost de Valk spricht sich für WP Board aus, Matt reagiert
Das Vertrauen in Matt als zu mächtige Einzelperson an der Spitze von WordPress sinkt weiter. Nun hat sich u.a. auch Joost (Gründer von Yoast) zu Wort gemeldet und spricht sich ebenfalls dafür aus, WordPress stärker zu demokratisieren. Das wiederum sorgt für eine weitere Reaktion von Matt in den offiziellen WP-Kanälen und befeuert die Diskussion um eine Abspaltung (Fork) von WordPress.
Automattic fährt Engangement zurück und schließt Nachhaltigkeit-Team
Automattic hat angekündigt, das wöchentliche non-profit-Investment in WordPress von 3800 h auf 45 h zu reduzieren. Begründet wird dies mit dem Rechtsstreit mit WP Engine und einer Angleichung an das Engagement anderer Unternehmen. Die freigewordenen Zeiten fließen wohl in die Bearbeitung des Rechtsstreits und in die Arbeit an Profit-Projekten wie WooCommerce, JetPack oder VIP.
Zudem reduziert Automattic das Sponsoring und schließt das Nachhaltigkeitsteam.
KI-Einsatz im Webdesign mit Schwerpunkt WordPress
In diesem Artikel werden Einsatzbereiche von KI im Webdesign und die Vorteile davon beleuchtet. Der Schwerpunkt liegt dabei auf WordPress. Von Designautomatisierung über personalisierte Inhalte und verbesserte Suche bis hin zu Barrierefreiheit, SEO und Sicherheit werden verschiedene Anwendungsfälle beleuchtet.
WooCommerce in 2025
Im Jahr 2025 wird bei WooCommerce auf drei Kernaufgaben gesetzt: Leistungsoptimierung, Verbesserung des Einkaufserlebnisses und die Integration verschiedener Handelsfunktionen, wie bspw. die Integration einer Marken-Verwaltung, die bereits im Oktober 2024 integriert wurde. Im Zusammenhang mit der Weiterentwicklung der eigenen Marke bekommt WooCommerce 2025 ein neues Logo.
Performance
CrUX Vis
CrUX Vis ist ein Experiment des Chrome-Teams, das dabei helfen soll, die Chrome User Experience Report (CrUX)-Daten für eine bestimmte Webseite mithilfe von Visualisierungen zu analysieren.
Barrierefreiheit
Grundsätze für Barrierefreiheit im Web
Heydon Pickering beschreibt in »Principles of Web Accessibility« zwölf Leitlinien für die Gestaltung barrierefreier Webinhalte. Die Prinzipien betonen die Wichtigkeit einfacher und robuster Lösungen, wie etwa Inhalte sinnvoll zu strukturieren, Barrierefreiheit als Standard zu integrieren und unnötige Komplexität zu vermeiden. Die Grundsätze sollen als praktische Orientierungshilfe für die Entwicklung inklusiver und benutzerfreundlicher Webseiten dienen.
Ausgebautes Wissensportal rund um die Leserlichkeit
Der Deutsche Blinden- und Sehbehindertenverband (DBSV) gibt mit »leserlich.info« ein umfangreiches Nachschlagewerk für die barrierefreie Gestaltung von Texten heraus. Die Website erklärt, was beim Layout zu beachten ist, gibt konkrete Tipps für Schriftarten und -größen, Abstände, Textanordnung, Kontraste etc. und stellt Schriftgrößen- und Kontrastrechner mit neuen Features bereit.
Tools & Fun
- Easing.dev ist eine interaktive Galerie von Easing-Kurven mit der Möglichkeit, deren Verläufe anzupassen und den Code zu exportieren. (kh)
- Zum Abschluss empfehlen wir noch eine Game-Show für Web bzw. JS-Developer auf YouTube.
Geschrieben von:
Raimund Büchner
Sophie Tausch
Robert Menzel
Konstantin Hanke
