Web Design News & Link-Tipps – Nr. 36

Von: Raimund, Jonas, Sophie, Konstantin, Felix

Unsere Themen im November: Immer mehr Web-Entwicklung nur mit Webstandards und nur mit CSS möglich, neue WP-Version 6.7 veröffentlicht, der Einfluss von KI auf die Rolle von Designern, eine bessere Messung der tatsächlichen Webseiten-Performance und die Umsetzung von barrierefreien Carousels.

Aktualisiert am 10. Dezember 2024

Allgemein

Webflow übernimmt GSAP

GSAP, das sehr populäre und leistungsstarke Animations-Framework für SVG, ist von Webflow übernommen worden. Die Fusion macht Sinn, da die Website-Builder-Plattform Webflow insb. für Projekte mit Animationen, Scroll-Triggern etc. bekannt ist.

Internetfreiheit im internationalen Vergleich

Der Freedom on the Net Report 2024 zeigt einen weltweiten Rückgang der Internetfreiheit. Deutschland bleibt auch in diesem Jahr mit hohem Internetfreiheits-Score stabil. Durch zunehmende Einschränkungen zeichnet sich aber auch hierzulande für die Zukunft eine negative Entwicklung ab.

Frontend

Icons oder Logos automatisch ausrichten

Mit der CSS-Eigenschaft text-wrap: balance; werden meist Überschriften so gestaltet, dass keine einzelnen Wörter alleine in eine Zeile umbrechen. Sehr praktisch ist der Befehl allerdings auch für Listen von Icons oder Logos, wie Terence Eden in seinem Blog kurz und knackig beschreibt.

Plain Vanilla – Webstandards pur!

Auf Plain Vanilla werden moderne Web-Techniken aufgeführt, mit denen Websites und Anwendungen erstellt werden können – ohne den Einsatz von Build-Tools, Präprozessoren oder Frameworks. Alles, was man dafür benötigt, ist ein Texteditor, ein Browser und die Nutzung der gängigen Webstandards. Ein guter Überblick über HTML Web Components, modernes CSS & Co.

Scroll-Animations ohne JS

Auf CSS Tricks wurde ein Artikel veröffentlicht, der erklärt, wie eine JS-Bibliothek für Scroll-Animationen mit modernem CSS ersetzt werden kann. Konkret wird eine Kombination von animation-timeline, Variablen und Style Queries genutzt.

Custom HTML Formular-Validierung mit setCustomValidity

HTML-Formularelemente haben eingebaute Validierungsfunktionen – abhängig vom Input-Type. Mit setCustomValidity kann hier einiges individualisiert werden, wie der Beitrag auf Expression Statement anschaulich zeigt.

HTML für Menschen

Die Website HTML for People bietet eine Einführung in HTML für Anfänger ohne Vorkenntnisse. In einem Schritt-für-Schritt-Ansatz zeigt sie, wie man einfache Webseiten erstellt und gestaltet, um jedem den Einstieg ins Webdesign zu ermöglichen.

Verbesserungen für <details> und <summary> Elemente

Die HTML-Elemente <details> und <summary> bekommen neue Möglichkeiten zur besseren Anpassung insbesondere durch erweiterte CSS-Funktionalität wie Flexbox und Grid-Support sowie neue Pseudoelemente für detailliertes Styling. Einige dieser Updates kommen schon bald und sollen es Entwicklern erleichtern, die Benutzerfreundlichkeit und Zugänglichkeit dieser Elemente zu nutzen, ohne sie komplett neu erstellen zu müssen.

CSS width: stretch; anstatt 100 %

Beim Lesen des kurzen Artikels auf fullstacked.net haben wir uns ein wenig ertappt gefühlt. width: stretch; oder fill/fill-available ist eine simple Lösung, damit Elemente wie bspw. Buttons, die standardmäßig nicht die gesamte verfügbare Breite ihres Elternelements einnehmen, sich in dieser Hinsicht wie ein div oder p verhalten, sodass beispielsweise mit inline Margins gearbeitet werden kann, ohne einen Overflow zu erzeugen.

Light-Darkmode Umsetzung mit modernem CSS

Bogdan Bendziukov zeigt in seinem Artikel »Dark theme for your site in one click!« auf medium.com, wie effektiv ein Darkmode mit modernem CSS umgesetzt werden kann, und liefert einen praktischen Script-Ansatz, um den Mode auf einer Website unabhängig von den Browser- oder Betriebssystemeinstellungen zu wechseln.

Orbit – CSS Framework für radiale Layouts

Radiale Layouts, bei denen die Elemente in einem kreisförmigen Muster angeordnet sind, sind mit reinem CSS ziemlich kompliziert umzusetzen. Das neue CSS-Framework Orbit vereinfacht die Umsetzung solcher Layouts drastisch – mit reinem CSS.

Webkit Font-Smoothing »antialiased« in 2024

Wir haben die CSS-Eigenschaft ‌-webkit-font-smoothing: antialiased; seit Jahren standardmäßig in unseren Projekten im Einsatz und gar nicht mehr infrage gestellt, da wir damit immer gut gefahren sind. David Bushel erklärt in seinem Artikel, was die Eigenschaft in macOS genau macht und warum die Verwendung absolut valide ist.

WordPress

WordPress 6.7 RC

WordPress 6.7 ist veröffentlicht worden. Im Editor kann nun herausgezoomt werden, um das gesamte Layout besser beurteilen zu können. Das Block Binding UI ist offiziell und es gibt zahlreiche kleine Verbesserungen in den Editor-Optionen bzw. im Hintergrund. U. a. erlaubt der Loop-Block mehr Einstellungen, fluide Fonts können über das UI konfiguriert werden, Gruppen können mit Schatten versehen werden und Templates können via Plugin registriert werden! Darüber hinaus gibt es das neue Standard-Theme »twentytwentyfive«. Eine detaillierte Übersicht findet ihr bei YouTube.

Bessere Style-Übersicht & Editor-Kommentare

Das WP Design Team hat einige Vorschläge für Verbesserungen im Editor. Unter anderem wird eine Verbesserung für die Darstellung globaler Stile angestrebt, die einem in WordPress integrierten Styleguide nahekommt. Sehr interessant ist auch die Kommentarfunktion im Editorbereich, mit der sich mehrere Personen zum Inhalt oder Layout einer Seite austauschen können.

Malware befällt tausende WordPress-Websites

Zahlreiche WordPress-Websites wurden in den vergangenen Wochen durch infizierte Plugins kompromittiert. Über Sicherheitslücken werden mit Malware infizierte Versionen bekannter Plugins installiert, die im Beitrag aufgelistet werden. Die Schadsoftware versucht, Nutzerdaten abzugreifen.

Dokumentation der Kontroverse um WordPress

Die Website mullenweg.wtf ist eine chronologische Sammlung von Beiträgen, die das WordPress-Drama der letzten Wochen umfangreich und fortlaufend dokumentieren.

WordPress-Alternativen im Überblick

Unabhängig von solchen Unruhen im WordPress-Kosmos lohnt sich die Beschäftigung mit alternativen Open-Source-Publishing-Systemen. Dabei stellt sich die Frage, ob man bei einem PHP-basierten CMS bleibt oder sich für ein modernes JS-basiertes CMS entscheidet.

UX/UI Design

Design für Gen Z

Generation Z sucht Authentizität, Nachhaltigkeit und Barrierefreiheit in digitalen Erlebnissen. Der Artikel von Vitali Friedman zeigt, wie Mobile-First-Designs, kurze Inhalte und klare Navigation ihre Erwartungen erfüllen und warum ihre Einbindung in den Designprozess entscheidend ist.

Wie KI das Design verändert

In seinem Artikel diskutiert Andy Budd, wie künstliche Intelligenz (KI) und Designsysteme die Rolle von Designern verändern. Durch den Einsatz dieser Technologien können auch Nicht-Designer ansprechende Designs erstellen, was zu einer Demokratisierung des Designprozesses führt. Dies verschiebt die Rolle von Designern hin zu Kuratoren, die Designoptionen auswählen und verfeinern. Budd warnt jedoch, dass diese Entwicklung auch die Qualität und den einzigartigen Beitrag von Designern gefährden könnte, da die Linie zwischen professionellen Designern und Generalisten zunehmend verschwimmt.

Performance

Real-User-Monitoring statt Lighthouse-Score

Ein hoher Lighthouse-Score sagt wenig über die tatsächliche Ladegeschwindigkeit einer Website aus, da Google hier mit simulierten Daten arbeitet. Für ein realistischeres Bild der Nutzererfahrung sind reale Nutzerdaten und Core Web Vitals wichtiger, da sie auf tatsächlichem Benutzerverhalten basieren und eine genauere Bewertung bieten. Real-User-Monitoring (RUM) wird daher empfohlen, um echte Optimierungen zu erzielen.

Barrierefreiheit

Schlüsselmerkmale barrierefreier Schriften

»What Makes a Font Accessible? A Designer’s Guide« erläutert die wesentlichen Eigenschaften barrierefreier Schriftarten, wie klare Lesbarkeit, starken Kontrast und flexible Anpassbarkeit, und liefert praxisnahe Tipps für die Gestaltung zugänglicher Texte, die allen Nutzern gerecht werden.

Barrierefreie Carousels

Für die barrierefreie Umsetzung von Carousels bzw. Slidern gibt es (immer noch) kein Patentrezept. Die komplexen Anforderungen erläutert der ausführliche Beitrag »How to Test and Improve Carousel Accessibility: A Complete Guide« vom Schulungsanbieter »A11Y Collective«, ebenso aufschlussreich ist der unverändert aktuelle Artikel »Barrierefreie Karussells« vom tollwerk.

Tools

• Der Web Features Explorer listet neue Technologien nach ihrem Baseline-Support auf.
• Mit Cobalt können Dinge heruntergeladen werden, die eigtl. nicht für einen Download vorgesehen sind. Z.B. YouTube-Videos.
• ApexCharts ist eine flexible und interaktive Diagrammbibliothek, die sich zur unkomplizierten Erstellung dynamischer Datenvisualisierungen eignet.
• npmpackage.info bietet eine übersichtliche Dashboard-Ansicht für npm-Paketen und zeigt Informationen zu Releases, Commits, offene Issues, Qualitätsbewertungen etc.
• nvm-desktop ist eine Desktop-Anwendung, die installierte Node.js-Versionen in einer grafischen Benutzeroberfläche verwaltet.

Geschrieben von:

Raimund Büchner

Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.

Jonas Hellwig

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

Sophie Tausch

Sophie beschäftigt sich mit allen Themen rund um UX/UI Design. Ihre Hauptaufgaben beinhalten Produkt- und Nutzerforschung, das Strukturieren von Informationen und Inhalten und die Erstellung von visuellen Konzepten und Prototypen. Hierbei legt sie besonders Wert auf die Balance zwischen Ästhetik und Benutzerfreundlichkeit, sowie auf eine enge Zusammenarbeit mit dem Development.

Konstantin Hanke

Konstantin arbeitet als Webentwickler bei kulturbanause. Seine Hauptaufgabe ist die technische Umsetzung von klaren, soliden und effizienten Webauftritten und Website-Komponenten. Darüber hinaus kümmert er sich um die Wartung, Optimierung und Weiterentwicklung von bestehenden Websites. Sein besonderes Interesse gilt der Idee von quelloffener, freier Software.

Felix Lehmann

Als Team Lead für Design und Code bei kulturbanause verantwortet Felix die Konzeption, Gestaltung und Entwicklung komplexer Websites und Designsysteme. Er begleitet den gesamten Prozess – vom ersten Workshop bis zum Launch. Wenn er nicht selbst maßgeblich an der Umsetzung beteiligt ist, unterstützt er das Team bei der Umsetzung moderner, funktionaler Lösungen mit aktuellsten Browser-Technologien und ist die Schnittstelle zum Kundenteam.