Web Design News & Link-Tipps – Nr. 59
Von: Charleen, Jonas, Ferenc, Sophie, Felix, Robert, Konstantin Im Oktober haben wir darüber gesprochen, wie KI unsere Branche verändert: ArtCraft baut die Adobe Suite als Open Source nach, Bildungsangebote und Fachpublikationen geraten unter Druck und der Figma-Agent übernimmt die Pflege von Design-Systemen. Außerdem ging es um responsive iframes, weniger Workarounds dank modernem CSS und anstehende WordPress Änderungen.
Allgemein
ArtCraft – Die Adobe Suite kostenlos, Open Source & vibe-coded
Der Software-Riese Adobe erlebt gerade das, was seit Beginn der KI-Ära für SaaS-Unternehmen prognostiziert wird. Jemand hat per KI die gesamte Produktpalette nachgebaut und kostenlos sowie Open Source unter dem Namen ArtCraft (PhotoCraft, VectorCraft, VideoCraft etc.) zum Download bereitgestellt. Viele Kreative sind erfreut und schadenfroh zugleich, denn Adobe hat sich in den letzten Jahren durch Lizenzmodelle und KI-Nutzung selbst nicht beliebt gemacht.
Allerdings gibt es auch Gegenstimmen: Die Programme befinden sich laut Ars Technica noch in einem sehr frühen Stadium mit fehlenden Funktionen, technischen Schwächen und offenen rechtlichen Fragen.
Der Niedergang der Development-Bildung
Mathias Schäfer hat einen meinungsstarken Artikel zum Niedergang eines ganzen Berufsfelds verfasst: Der Bildungsbereich im Design und Development ist durch KI massiv unter Druck geraten und hat zahlreiche Personen bereits zur Aufgabe gezwungen. In seinem Beitrag lässt er einige prominente Stimmen zu Wort kommen und wünscht sich Solidarität statt Durchhalteparolen.
Dev-Community quo vadis?
Andy Bell, Gründer von Piccalilli, schlägt in eine ähnliche Kerbe und warnt vor dem gerade rapide fortschreitenden Verlust unabhängiger Publikationsplattformen für die Dev-Community. So hängt CSS-Tricks gerade wieder in den Seilen, was Bell als Ausgangspunkt nimmt, um generell die Finanzierung solcher Plattformen zu diskutieren.
Die zukünftige Rolle von Softwareentwicklung
Die Nachfrage nach Software wird praktisch unbegrenzt bleiben, während die Entwicklung, Wartung und der Betrieb zukünftig weitestgehend durch KI-Agenten übernommen werden. Mit den dadurch sinkenden Kosten ist auch das handwerkliche Programmieren als bezahlte Arbeit vorbei. Übrig bleibt das, was Agenten nicht können: Laut Laurie Voss werden wir zukünftig als Product Engineers herausarbeiten, was die Kundschaft wirklich will und braucht, Software brauchbar und angenehm machen und definieren, was »gut« ist.
Gerechte Entlohnung für Open Source
Die Maintainer von freier und offener Software (FOSS) arbeiten oft ehrenamtlich und ohne Vergütung. Ihr Code bildet die Grundlage fast aller Softwareprojekte, die Profite landen jedoch woanders. Der zunehmende Einsatz von KI-Agenten verschärft die Situation zusätzlich. Laut einer Harvard-Studie müssten Unternehmen weltweit etwa 8 Billionen Euro investieren, um die Fehlstellen zu kompensieren, falls Open Source verschwände. Bezahlmodelle wie Lizenzkosten, Trinkgelder, Stiftungen, Unternehmensspenden und Staatsfonds sind gescheitert, die kommerziellen Anbieter für verlässliche Lieferung freier Software werden aber großzügig bezahlt. Laurie Voss (Mitbegründer von npm) schlägt vor, die Nutzung von Open Source über die Registries abzurechnen und die Maintainer damit gerecht an den Gewinnen zu beteiligen.
Die Ergebnisse der State of Dev 2026 sind da
Nachdem kürzlich die State of HTML 2026 gestartet ist, sind nun die Ergebnisse für die State of Dev 2026 da. Untersucht wurde die Arbeitsrealität von Menschen in der Softwareentwicklung, mit Fragen zu den Themen KI-Nutzung, Karriere, Arbeitszufriedenheit und mentaler Gesundheit. Die diesjährigen Ergebnisse zeigen unter anderem, dass 42 % der Teilnehmenden KI negativ gegenüberstehen und rund zwei Drittel von sinkender Motivation und zunehmendem Zynismus im Arbeitsalltag berichten. Auf die Frage, welches Gefühl ihre aktuelle Einstellung zur Tech-Branche am besten beschreibt, antworteten die meisten mit »Exhausted« (erschöpft).
UX/UI
Einsatzmöglichkeiten für den Figma-Agenten
Wayne Lin erklärt im Figma-Blog, wie der Figma-Agent die Pflege von Design-Systemen automatisieren kann. Der Agent unterstützt bei der Dokumentation von Komponenten, erkennt hartcodierte Werte und falsch verwendete Design Tokens und kann bestehende Designs an Komponentenbibliotheken anpassen. Über Guidelines in Markdown-Dateien lassen sich projektspezifische Gestaltungsregeln hinterlegen, während wiederkehrende Aufgaben und Prüfprozesse als Skills gespeichert werden können. Ergänzend dazu zeigt Jenny Xie verschiedene Praxisbeispiele.
Agenten brauchen eine klare Dokumentation
Klassische Memory-Systeme für KI-Agenten haben verschiedene Schwächen, beispielsweise sind gespeicherte Erinnerungen häufig unvollständig, veraltet oder lassen wichtige Zusammenhänge vermissen. Zudem ist oft unklar, welche Informationen ein Agent für seine Entscheidungen tatsächlich heranzieht. Eine strukturierte, transparente und kontinuierlich gepflegte Dokumentation kann laut Kevin Liao stattdessen als verlässlichere Wissensbasis dienen.
Write-first design
Warum Designentscheidungen vor einem visuellen Entwurf schriftlich begründet werden sollten, erklärt DuckDuckGo-Designer Karl Koch. Schriftliche Checkpoints strukturieren den Designprozess, machen Zwischenstände und Entscheidungsgrundlagen nachvollziehbar und helfen dabei, den Fokus auf die ursprünglichen Ziele zu behalten.
Frontend
Responsive iframes in Chrome
Seit Chrome 154 gibt es nativ die Möglichkeit, ein <iframe> so einzubinden, dass es sich automatisch der enthaltenen Höhe anpasst. Dazu muss es im CSS-Code frame-sizing: auto bzw. content-height oder content-width erhalten. Zudem muss in der eingebetteten Quellseite ein Meta-Tag enthalten sein. Bramus hat die relevanten Infos kompakt zusammengefasst.
CSS-Pixel und Device-Pixel
Vale hat einen kurzen Artikel zur Erklärung von CSS-Pixeln veröffentlicht. Das Thema ist nicht neu, aber eine Auffrischung lohnt sich möglicherweise. Wer seinerzeit die Einführung der sog. Apple Retina Displays miterlebt hat, erinnert sich vielleicht auch noch an Themen wie Device-Pixel-Ratio (DPR) und Co.
JPEG XL erlebt ein Comeback
Seit Version 155 unterstützt nun auch Chrome JPEG XL nativ. Die Unterstützung ist allerdings noch nicht vollständig plattformübergreifend, zudem gibt es auch generelle Kritik am Mehrwert des Formats.
progress() hat Baseline-Status erreicht
Mit der neuen CSS-Funktion progress() lassen sich Werte zwischen einem Minimum und Maximum berechnen, was unter anderem Animationen und fließende Größenänderungen ohne den manuellen Einsatz von calc() ermöglicht. Mehrere Beispiele zum Einsatz der Funktion hat CSS-Tricks bereits am Anfang des Jahres veröffentlicht. Für ältere Browser zeigt Fallbacks for CSS progress() verschiedene Fallback-Methoden, abhängig von den verwendeten Einheiten.
Weniger Workarounds dank modernem CSS
CSS übernimmt immer mehr Aufgaben, für die bisher Sass, JavaScript oder andere Workarounds nötig waren, von verschachtelten Regeln über Container Queries bis zu dynamischen Viewport-Einheiten. Flavio Copes hat eine nützliche Übersicht erstellt, was sich heute direkt im Stylesheet umsetzen lässt und wie es um die Browserunterstützung steht.
Zoom beim Doppeltippen auf Mobilgeräten verhindern
Schnelles Doppeltippen auf Buttons kann unter iOS einen nervigen, ungewollten Zoom auslösen. Andy Bell erklärt, wie sich das mit touch-action: manipulation verhindern lässt, ohne gleichzeitig das Zoomen per Pinch-Geste einzuschränken.
WordPress
WordPress 7.2: Erste Beta im Oktober, Release für Dezember 2026 geplant
Der Zeitplan für WordPress 7.2 steht, die erste Beta-Version soll am 20. Oktober erscheinen. Die finale Version ist für den 8. Dezember 2026 geplant und wird das letzte große WordPress-Update des Jahres. Mit an Bord ist ein neues Standard-Theme.
Ipsum – das neue Default Theme für WordPress
Nach 16 Jahren wechselt WordPress beim Standard-Theme von der Twenty-Reihe zu Ipsum und rückt von den bisher jährlichen Standard-Theme-Veröffentlichungen ab. Ab sofort wird es neue Themes anlassbezogen und jeweils unter eigenem Namen geben. Das Ipsum-Theme ist bewusst schlank gehalten, um die Möglichkeiten des Block-Editors zu demonstrieren, und kann bei GitHub heruntergeladen werden. Details fasst WordPress.org zusammen.
Automattic hat KI-Tool Telex eingestellt
Automattic hat sein experimentelles KI-Tool Telex eingestellt, mit dem sich WordPress-Blöcke erstellen ließen. Auf der Telex-Seite kann man sich nur noch einloggen, um erstellte Projekte zu sichern.
Einheitliches Benachrichtigungssystem für das Backend
Seit Längerem wird an einem zentralen Benachrichtigungssystem für WordPress gearbeitet, das Hinweise im Backend künftig gesammelt an einer Stelle anzeigen soll, statt sie über viele Seiten zu verteilen. Nach längerer Pause soll Anfang Dezember 2026 eine erste testbare Version als Plugin erscheinen. Langfristig soll das System fester Bestandteil von WordPress werden.
WordPress-Alternative EmDash veröffentlicht
Das von Cloudflare als WordPress-Alternative ins Rennen geschickte EmDash ist in Version 1 erschienen. Das quelloffene CMS wurde speziell für Astro und TypeScript entwickelt und ist für die Interaktion mit Künstlicher Intelligenz konzipiert.
Barrierefreiheit
a11y Experience Guide
Mit dem a11y Experience Guide hat Matt Soriano eine Online-Referenz veröffentlicht, die zentrale Infos zur WCAG übersichtlich und filterbar zugänglich macht – inkl. einer Markdown-Datei für KI-Agenten. Für ausführliche Details ist jeweils ein Verweis auf die offiziellen Websites enthalten.
Was der Dunning-Kruger-Effekt über Accessibility verrät
Craig Abbott beschreibt, wie der Dunning-Kruger-Effekt sich negativ auf die Arbeit von Entwicklungsteams auswirken kann. Tools und Halbwissen liefern oft trügerische Sicherheit, während echtes Verständnis erst durch Tests, Nutzerfeedback und Erfahrung entsteht.
Wann ist ein Bild wirklich dekorativ?
Würde das Bild fehlen oder durch ein anderes ersetzt werden können, ohne dass sich die Aussage der Seite verändert? Die Antwort darauf hilft bei der Entscheidung, ob ein Bild dekorativ ist, also keinen Alternativtext benötigt und mit alt="" für Screenreader ausgeblendet werden kann. Adrian Roselli unterstützt und veranschaulicht die Einordnung anhand einer Reihe gezielter Fragen.
Tools
- Gradient Builder von Feral UI erzeugt organische und animierte Farbverläufe in verschiedenen Stilen inklusive Customizing- und Exportoptionen. Sehr cool: Zu jeder Farbe wird gleich das Kontrastniveau nach WCAG angezeigt.
- Typoclast ist ein Font-Editor, mit dem sich
.otf– und.ttf-Dateien bearbeiten, kreativ »zerstören« und wiederum exportieren lassen. - Book of Shapes ist eine Sammlung von minimalen, generativen und bearbeitbaren SVG-Formen.
- Mit Destroy Any Website lassen sich beliebige Websites im Stil von Worms unterhaltsam in Schutt und Asche legen.
- css.earth ist eine 3D-Visualisierungsplattform, die ein Modell des Universums mittels PolyCSS als HTML-Geometrie darstellt, völlig ohne WebGL oder Canvas.
- Size Limit ermöglicht es, Performance-Budgets von JavaScript-Bundles zu überwachen.
- Front-End Checklist bietet, wie der Name andeutet, eine ausführliche Liste an Regeln und Best Practices.
- privacytests.org listet auf, welche Daten Browser erheben.
- HTML Periodic Table of Elements lädt als interaktive Übersicht dazu ein, HTML-Tags nach Kategorien gruppiert und mit ihren Funktionen erklärt zu entdecken.
- Cube Type ist ein interaktiver Playground zum Erstellen isometrischer Typografie.
- FG Libraries ist eine Sammlung von JavaScript-Bibliotheken, UI-Komponenten und Webdesign-Ressourcen.
- Image to ASCII ist ein kostenloser Online-Konverter, der Bilder in individuell anpassbare ASCII-Art umwandelt und als Text, PNG oder SVG exportiert.
Feedback & Ergänzungen – Schreibe einen Kommentar
Geschrieben von:
Charleen Warkentin
Ferenc Petöcz
Sophie Tausch
Felix Lehmann
Robert Menzel
Konstantin Hanke
