Web Design News & Link-Tipps – Nr. 27

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.

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

Geschrieben von:

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Design + Code

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Schulung + Beratung