Web Design News & Link-Tipps – Nr. 27
In unserem News-Mix aus UI/UX Design, CMS- und Frontend-Entwicklung haben wir diesmal einige feine Tipps zur Verbesserung der User Experience gesammelt, dazu kümmert sich die EU um Monopole und Barrierefreiheit und andere geben Design-Prognosen für 2024 ab.

Input type switch
In Safari Technology Preview kann eine neue Ergänzung zur bisherigen HTML Checkbox ausprobiert werden. Mithilfe von <input type=checkbox switch>
wird aus einem anklickbaren Checkbox-Feld ein Switch. Sehr hilfreich!
SCSS-Core für Utopia
Das sehr empfehlenswerte Tool Utopia (erzeugt fluide Schrift- und Spacing-Hierarchien für CSS und Figma) steht nur auch in einer SCSS-Version zur Verfügung. Die Variablen können somit direkt im Code erzeugt werden.
Penpot mit spannenden neuen Features
Das kostenlose Open Source Design-Tool Penpot hat mehrere Neuerungen angekündigt. U.a. wird es bald einen Support für CSS Grid geben, der einen sehr guten Eindruck macht. Der Code-Export sieht ebenfalls überraschend gut aus und auch Komponenten erhalten zahlreiche Updates.
Accessibility Overlays sind schlecht
Aufgrund des 2025 anstehenden Barrierefreiheitsstärkungsgesetzes (BFSG) sind viele Unternehmen aufgeschreckt und haben das Thema Barrierefreiheit auf die Agenda genommen. Zudem gibt es momentan viele Anbieter, die behaupten, mit einer automatischen Lösung in Form sog. »Accessibility Overlays« Probleme auf einfachem Weg beheben zu können. Das ist nicht so und wurde nun auch offiziell von der EU Kommission so formuliert. Auf die Einschätzungen der nationalen Stellen wiesen wir bereits in News & Link-Tipps Nr. 24 hin.
Alternative Browser-Engines und App-Stores unter iOS (in der EU)
Apple öffnet – nicht ganz freiwillig – seine Plattform für alternative App-Stores und Browser-Engines. Bisher wurde immer die Safari-Engine verwendet, auch wenn nominell andere Browser oder In-App-Browser genutzt wurden. Ab iOS 17.4+ ändert sich das – vorerst nur in der EU. Gut für die Browser-Diversität – schlecht für das Debuggen unter iOS.
Figma Dev Mode mit größerem Update
Der Dev Mode von Figma erlaubt nun u. a. Anmerkungen und das Vergleichen von Versionen. Zusätzlich wurde die Integration in VS Code verbessert. Wie im letzten Newsletter bereits angekündigt, kostet der Dev Mode jetzt ab 12 Dollar monatlich – abhängig vom Lizenzmodell.
Web Design Trends 2024
Bei Looka werden 15 potenzielle Webdesign-Trends für das Jahr 2024 aufgezeigt. Der Artikel präsentiert diese Trends in einer klaren Übersicht und hebt jeden einzelnen durch ein anschauliches visuelles Beispiel hervor.
Wir machen Web-Entwicklung zu kompliziert
Der Artikel »Web Development Is Getting Too Complex, And It May Be Our Fault« behandelt die steigende Komplexität in der Web-Entwicklung, die auf die Zunahme von Frameworks und Tools zurückgeführt wird.
Die Zukunft von Design
Jorge Arango diskutiert in »Shaping the Future of Design«, wie Designer angesichts schneller technologischer Entwicklungen wie VR und generativer KI relevant bleiben können.
KI für Barrierefreiheit
»Using AI for accessibility« erörtert den Einsatz von KI zur Verbesserung der Zugänglichkeit im Web. Der Artikel betrachtet kritisch, ob Werkzeuge wie ChatGPT oder Vision dabei helfen können, zugänglichere Webseiten und Apps zu erstellen, und erwähnt Beispiele, bei denen KI sowohl nützlich als auch problematisch sein kann.
WordPress 6.5 kommt voraussichtlich am 26. März 2024
Mit dem Update auf WordPress 6.5 kommen neue Funktionen wie die Schriftenbibliothek, die Synchronisation von Pattern und Templates, ohne die Inhalte zu beeinflussen, und eine abschnittsspezifische theme.json. Bestehende Funktionen werden weiterentwickelt und verbessert.
WooCommerce mit neuer Developer-Dokumentation
WooCommerce hat die Developer Dokumentation Grund auf erneuert und optimiert. Hier gibt es eine kleine Einführung in die neue Doku.
WooCommerce 8.6 kommt voraussichtlich am 13. Februar 2024
Mit dem Update auf WooCommerce 8.6 kommt unter anderem ein neuer Style für den Produkt-Detail-Block, ein neuer Product Collections Block und ein verbesserter Debug-Log-Bereich.
Was PWAs alles können
Eine Progressive Web App (PWA) ist eine Website, die installiert werden kann und ein App-ähnliches Erlebnis bietet. Die Website »whatpwacando.today« sammelt Beispiele, was mit PWAs heute möglich ist.
KI liefert Code schneller, sorgt aber für höheren Wartungsaufwand
Eine aktuelle Studie zeigt, dass die Lesbarkeit und Wartbarkeit von Code, der mit KI-basierten Hilfstechnologien wie GitHubs Copilot verfasst wurde, deutlich schlechter ist als vergleichbare Arbeit von erfahrenen Entwickler*innen. Es können zwar schneller sichtbare Ergebnisse erzielt werden, durch die aufgeblähte, redundante Codebasis steigt aber der Wartungsaufwand deutlich an.
Klickflächen besser gestalten
»Designing better target sizes« beschäftigt sich mit der Gestaltung von adäquat großen Klickflächen. Diese sind in der Praxis nämlich oft viel zu klein, besonders auf mobilen Geräten. Der umfassende, durchdachte und interaktive Leitfaden zeigt, was es zu beachten gilt.
Inhalte von Google Search Snippets ausschließen
Es kann ärgerlich sein, wenn ungünstige Textausschnitte in den Suchergebnissen von Google auftauchen. Mit dem Data-Attribut data-nosnippet
können bestimmte Elemente von der Anzeige in den Ergebnis-Snippets ausgeschlossen werden.
Text beim Scrollen highlighten
Mit einer Scroll-Driven Animation können Textbestandteile dynamisch gehighlightet werden, sobald der Text im Viewport auftaucht. Dieser simple, aber überzeugende Effekt wird im Beispiel kurz erklärt.
Die komplexe, aber geniale CSS-Eigenschaft border-image
Temani Afif demonstriert verschiedene Ansätze für die Verwendung von CSS border-image, um raffinierte dekorative Akzente und Formen zu schaffen.
Eine praktische Einführung in Scroll-Driven CSS-Animationen
Adam Argyle hat auf Codrops diesen Artikel veröffentlicht, in dem er eine praktische EInführung in die Verwendung von Scroll-Driven CSS Animationen mit den CSS –Eigenschaften scroll()
und view()
gibt.
Barrierefreie Web Component Bibliothek vom ITZ Bund
»KoliBri – Public UI« ist eine barrierefreie Open Source-Bibliothek der Bundesbehörde ITZ. Sie enthält aktuell über 40 Komponenten, die sowohl für Design als auch Entwicklung ansprechend und zugänglich aufbereitet sind.
Legacy Code verstehen
Mit Legacy Code müssen wir öfter umgehen, als uns lieb ist. Auf »Understand Legacy Code« ist eine Anlaufstelle entstanden, die Beiträge, Ratgeber sowie Podcast-, Video- und Buchempfehlungen zum Thema versammelt.
Netzwerk für nachhaltiges UX-Design
Das Sustainable UX Network (SUX) hält u. a. eine Ressourcen-Sammlung zu den unterschiedlichen Design-Phasen bereit und arbeitet an einem Playbook mit nachhaltigen Tools und Methoden. Es könnte sich lohnen, dort nach Fortschritten zu schauen.
Zu viele Features schaden dem Produkt
In seinem Artikel beschreibt Andy Budd, wie fortgesetzte »Featuritis« den unvoreingenommenen Anfängerblick verstellt, weil das Produkt-Team als »Superuser« die Empathie für die tatsächliche User-Experience verliert.
Am meisten geherzt
Die auf Codepen im Jahr 2023 am besten bewerteten 100 Projekte bieten reichlich Anlass zum Stöbern, Staunen und Schmunzeln (Abkürzung zu den Top 10).
Tools, Tools
- Mit Pa11y können Barrierefreiheitstests automatisiert werden. Das Tool kann über die Kommandozeile bedient und in Build-Prozesse eingebunden werden.
- qr-code ist eine SVG-basierte Webkomponente, die einen animierbaren und anpassbaren QR-Code erzeugt. Auf der interaktiven Demo-Seite können die verschiedenen Animationseffekte ausprobiert werden.
- ShaderGradient generiert animierte Gradients, die manuell konfiguriert werden können. Das Ganze kann anschließend per Plugin in jedes beliebige Figma Dokument eingefügt werden.
- Include ist ein Figma-Plugin, das mit Anmerkungen zur Barrierefreiheit (a11y) bereits in der Designphase eines Projekts Hilfestellung gibt und die Zusammenarbeit zwischen Design und Entwicklung erleichtert.