Web Design News & Link-Tipps – Nr. 41
Von: Jonas, Raimund, Sophie, Robert, Felix, Konstantin Unsere Themen im April: Design im Browser, Vorteile von einfach gestalteten Websites, Item Flow für einheitliche Layoutsteuerung mit CSS, konditionale Inhalte für WordPress und Design Tokens in PenPot.
Allgemein
llms.txt
Es gibt einen Vorschlag zur Einführung einer weiteren .txt-Datei (ähnlich wie robots.txt), die Informationen zu einer Website für AI-Bots beinhaltet. Ziel von llms.txt ist es, großen Sprachmodellen (LLMs), Informationen und Kontext in strukturierter Form zur Verfügung zu stellen. Das wiederum soll die Genauigkeit von Antworten verbessern.
Website Headlines
Das Schreiben von knackigen Headlines für Startseiten oder Landing-Pages ist nicht leicht. Auf websiteheadlines.com sind richtig gute Beispiele zusammengefasst und kategorisiert. Zudem wird erklärt, warum die Headlines gelungen sind und welche sprachlichen Methoden verwendet wurden.
Design im Browser
Eine gute Zusammenstellung von Starthilfen für den »Design in the Browser«-Prozess. Der Artikel von Tyler Sticka listet zwar teils ältere, aber sehr fundamentale und hilfreiche Links und Tools auf.
Drittanbieter-Cookies bleiben in Chrome doch erhalten
Nach jahrelangem Hin und Her ist Google nun endgültig eingeknickt und hat seine ursprünglichen Pläne endgültig aufgegeben, Cookies von Drittanbietern aus Chrome zu entfernen. Der Konzern beugt sich damit dem Druck der Tracking- und Werbeindustrie, die den Status Quo zu Ungunsten der Anwendenden aufrechterhalten möchte.
UX/UI Design
Hilfreiche Fehlermeldungen gestalten – statt Nutzer frustrieren
Amy Hupe zeigt in diesem Beitrag auf Piccalilli, wie durchdachte Fehlermeldungen die Nutzererfahrung verbessern können. Sie empfiehlt, Fehlertexte klar, empathisch und aktiv zu formulieren, auf unnötige Verspieltheit zu verzichten und konkrete Hilfestellungen zu bieten. Ein praxisnaher Leitfaden für alle, die UX ernst nehmen.
Hilfreiche Mini-Updates für Figma
Figma hat den Kontrast-Check für Farben nun direkt im Color Picker integriert. Wir haben unseren Beitrag zum Thema Kontrastprüfung entsprechend aktualisiert. Zudem können Anmerkungen, die bisher nur im DevMode möglich waren, jetzt auch im Design Mode hinzugefügt werden und kategorisiert werden. Auf YouTube sind alle Neuerungen schön zusammengefasst.
Warum einfach gestaltete Websites oft besser verkaufen
Der Artikel »Do Ugly Websites Sell Better?« von Noah Davis untersucht die These, dass unästhetische Websites mitunter höhere Konversions erzielen als ihre professionell gestalteten Pendants. Anhand von Beispielen und psychologischen Überlegungen wird erläutert, dass solche Seiten oft authentischer und vertrauenswürdiger wirken, da sie weniger wie durchgestylte Marketinginstrumente erscheinen. Diese »hässlichen« Websites vermitteln den Eindruck, von echten Menschen erstellt worden zu sein, was insbesondere in Branchen, in denen Vertrauen entscheidend ist, von Vorteil sein kann.
w3c Design Tokens in PenPot
Das Design Tool Penpot hat nun Design Tokens integriert. Der große Unterschied zu Variablen in Figma besteht darin, dass PenPot den aktuellen Entwurf der w3c Design Tokens integriert hat – also einen Webstandard!
Frontend
CSS shape()
Die neue shape()-Funktion in CSS ermöglicht es, innerhalb von clip-path responsive Formen zu erstellen. Bisher war dies nicht möglich, da die Pfade – meist aus SVG übernommen – mit absoluten Werten definiert wurden.
Neue HTML-Attribute command und commandfor
command und commandfor sind zwei neue Attribute für das HTML-Element. Sie bieten eine deklarative Möglichkeit, Dialoge und Popups ohne JavaScript zu öffnen und zu schließen. Das Feature funktioniert seit April in Chrome (Version 135) und soll auch in kommenden Versionen von Firefox und Safari verfügbar sein.
Anwendungsbeispiele für die erweiterte CSS-Funktion attr()
Die erweiterte CSS-Funktion attr() gibt den Wert eines Attributs eines HTML-Elements im Kontext einer beliebigen Eigenschaft zurück. Es kann ein bestimmter Typ und ein Standardwert angegeben werden. Das Feature hat noch keinen Baseline-Support, aber Ahmad Shadeed zeigt in seinem Beitrag schon mal, was sich zukünftig damit machen lässt.
Item Flow: Native CSS-Ansätze für einheitliche Layoutsteuerung
Ein Artikel im Blog von Webkit bildet ausführlich den momentanen Stand der Diskussion um die native Umsetzung von Masonry-Layouts ab und stellt das neue Konzept von »Item Flow« vor. Die Idee von »Item Flow« ist, Flexbox, Grid und Masonry zu einem einheitlichen Layout-System zu kombinieren und JavaScript überflüssig zu machen.
Auch Ahmad Shadeed geht in einem weiteren Beitrag auf diesen interessanten neuen CSS-Ansatz ein. Die vorgeschlagene Syntax integriert sich nahtlos in bestehende Grid- und Flexbox-Strukturen und wird derzeit in der CSS Working Group diskutiert.
CSS-only LQIP: Bild-Platzhalter ohne JavaScript oder Markup-Ballast
Lean Rada stellt in diesem Artikel eine Technik vor, um Low-Quality Image Placeholders (LQIPs) ausschließlich mit CSS zu erzeugen. Die Methode nutzt Bitpacking, um Bildinformationen in einer Ganzzahl zu kodieren, die dann wiederum in CSS dekodiert wird – nicht ganz einfach, aber eine clevere Lösung für performante Bild-Ladeeffekte ohne zusätzlichen Code-Overhead, die einfach adaptiert werden kann.
CSS Holographic Masks: Interaktive Shader-Effekte mit reinem CSS
Christian Alder demonstriert in seinem CodePen, wie sich allein mit CSS beeindruckende holografische Effekte erzielen lassen. Durch den Einsatz von mix-blend-mode, background-attachment: fixed und cleveren Masken entstehen visuelle Effekte, die an Shader erinnern – ganz ohne JavaScript. Diese Technik eignet sich hervorragend für experimentelle Webdesigns und kreative Interfaces.
Wo CSS-Prä- und Postprozessoren bereits ersetzbar sind
Dieser kurze Artikel auf CSS-Tricks gibt einen Überblick, inwieweit Funktionalitäten von Pre- und Post-Prozessoren wie Sass und PostCSS bereits durch natives CSS ersetzt werden und ob es sich bereits lohnen könnte, komplett auf diese Tools zu verzichten.
Lektionen aus dem Stylen eines Dialog Elements
Chris Coyier hat auf Frontend Masters einen Erfahrungsbericht geschrieben, der ganz gut die aktuellen Stolpersteine aufzeigt, wenn man ein <dialog> Element stylen möchte, dass sich über die ganze Höhe einer Website erstreckt.
Default-Styles von H1 Elementen ändern sich
Die auf MDN zusammengefassten Änderungen an den nativen Default-Styles von verschachtelten h1-Elementen sind eine gute Erinnerung daran, dass man nicht nur auf die valide Hierarchie von Headings achten, sondern diese auch immer gestalten sollte.
WordPress
WordPress-Websites mit AI erzeugen
Auf wordpress.com ist ein AI-Builder veröffentlicht worden, mit dessen Hilfe neue Projekte auf Grundlage des Block Editors erzeugt werden können. Der Bot fragt nach Titel und Zusammenfassung und erzeugt dann Vorschläge, die gestalterisch feinjustiert werden können. Für einfache Projekte hat es in unseren Tests ganz gut funktioniert.
Konditionaler Inhalt für WordPress
Mit dem WordPress-Plugin »Block Visibility« kann festgelegt werden, ob bzw. unter welchen Bedingungen ein Block für die Besucher einer Website sichtbar sein soll. So können Inhalte zu bestimmten Zeiten ein- und ausgeblendet werden oder nur in Abhängigkeit von Benutzerrollen, Bildschirmgrößen, URL-Parametern etc. angezeigt werden.
Barrierefreiheit
Barrierefreiere Dokumente mit Word
Die Website »digitalbarrierefrei.at« gibt Tipps zum Erstellen möglichst barrierefreier Dokumente in Microsoft Word – auch wenn vollständige Barrierefreiheit nicht immer erreichbar ist. Umfassend werden Anforderungen und Vorgehensweisen erklärt, um Dokumente zugänglicher zu gestalten.
Dark Mode barrierefrei gestalten – mehr als nur ein Trend
Ein Dark Mode kann die Nutzererfahrung verbessern, birgt aber auch Herausforderungen für die Barrierefreiheit. Alex Williams erläutert in diesem Artikel auf Smashing Magazine, wie durchdachtes Design – etwa durch angemessene Kontraste, typografische Feinabstimmung und die Vermeidung von reinem Schwarz – Dark Themes für alle zugänglich macht. Besonders wichtig ist dabei, Nutzer*innen die Wahl und Anpassungsmöglichkeiten zu bieten.
Tools
- beinclusive.app ist ein kostenpflichtiges Online Tool zur Unterstützung beim manuellen Erstellen von Barrierefreiheits-Tests.
- Clippy ist ein Figma-Plugin zum Hochladen und Verwalten von Anhängen direkt in Design-Dateien. Mit zahlreichen Funktionen erleichtert es die zentrale Verwaltung von projektbezogenen Anhängen.
- Anime.js ist eine JavaScript-Bibliothek zur Erstellung von Animationen. Nach umfangreichem Rebrush bietet die Website interaktive Beispiele und gut dokumentierte Tools, um Animationen effizient umzusetzen.
- Pages CMS ist ein neues, in der Entwicklung befindliches CMS, welches es ermöglicht, GitHub-Repos als CMS zu nutzen.
- tally.so ist ein sehr benutzerfreundliches Tool zur Erstellung von Online-Formularen mit großem kostenlosem Umfang und datenschutzkonformem EU Hosting.
- breit.app ist eine Website, die random KI-generierte, interaktive Grafiken von der Website archillect.com abspielt.
Geschrieben von:
Raimund Büchner
Sophie Tausch
Robert Menzel
Felix Lehmann
Konstantin Hanke
