Web Design News & Link-Tipps – Nr. 35
Unsere Themen im Oktober: Die heftigen Ereignisse um WordPress/Automattik vs. WP Engine, neu nutzbare CSS-Features, Auswertungen der HTML-Qualität der Top-200-Websites und der Barrierefreiheit von Online-Shops sowie der Einfluss von KI auf Frontend-Prototyping.
WordPress
Kernschmelze bei WordPress – Automattic vs. WP Engine
Die letzten Wochen wurden durch eine hitzige Auseinandersetzung zwischen Matt Mullenweg (Gründer von WordPress und CEO von Automattic) und WP Engine (Hosting-Anbieter und Betreiber sehr populärer Plugins wie ACF, LocalWP, WP Migrate) sowie Silverlake (Fond hinter WP Engine) bestimmt.
Matt hat auf dem WordCamp US und kurz danach über die offizielle Kanäle von WordPress.org das Unternehmen WP Engine (WPE) mit einem Krebsgeschwür verglichen. Er beschwert sich u. a. darüber, dass WPE zu wenig des hohen Gewinns an die Community zurückzahlt – z. B. in Form von kommerziellen Lizenzen oder Arbeitsstunden, die dem WP-Projekt zugute kommen. Automattic investiert bei gleicher Unternehmensgröße wohl ca. 4000 h pro Woche – WPE hingegen nur 40 h pro Woche. Zudem begrenzt WPE für seine Kunden die Revisionen, was Matt zu der Aussage verleitet, WPE würde keine »echtes WordPress« anbieten. Auch sieht er die Markenrechte von WordPress verletzt und argumentiert, dass der Eindruck entsteht, WP Engine würde offiziell zu WordPress gehören. Der Unterschied zwischen Automattic und WPE besteht darin, dass Automattic die kommerziellen Markenrechte an WordPress und WooCommerce besitzt. »WP« ist allerdings nicht geschützt und Automattic bietet mit WordPress.com eine sehr ähnliche, »nicht echte« (um Matts Argumentation zu folgen) Version von WordPress inkl. Hosting an. Abgesehen davon ist WordPress open source …
Die Reaktionen waren erwartbar heftig. WP Engine schickte eine Abmahnung und reichte mittlerweile Klage ein. Automattic mahnte ebenfalls ab. Zudem sperrte Automattic zwischenzeitlich den Zugriff auf WordPress.org für WPE, so dass Kunden von WPE keine Sicherheits-Updates durchführen konnten. WPE wiederum verhinderte wohl die Anzeige offizieller News von WordPress.org in den Dashboards aller Kunden. Da viele Mitarbeitende von Automattic mit der Strategie von Matt sehr unzufrieden sind, hat das Unternehmen bereits knapp 160 Personen (ca. 9%) verloren. Darunter sehr populäre Personen des WordPress-Projekts.
Bis zu diesem Zeitpunk war es schwer, sich auf eine Seite zu schlagen, da hier beide Seiten schlecht ausgesehen haben. Das änderte sich für uns spätestens am Wochenende um den 12. Oktober 2024. Automattic hat in einer bisher beispiellosen Aktion das Plugin ACF von WPE nach eigener Aussage »geforkt«, und unter dem Namen SCF (Secure Custom Fields) veröffentlicht. Die Argumentationsgrundlage von Matt, dass dies aus Sicherheitsgründen passierte, ist unserer Einschätzung nach dünn. Auch handelt es sich nicht um einen typischen Fork, denn es wurde der URL-Slug, alle Bewertungen und alle Support-Foren-Einträge übernommen. In Developer-Kreisen ist eher von feindlicher Übernahme oder Diebstahl die Rede. Auch aktualisiert sich die kostenlose Version von ACF ab sofort auf SCF. Das wiederum kann verhindert werden, wie WPE schreibt. Auch sind die Pro-Versionen von ACF nicht betroffen.
Matts Aktionen entfachen aktuell eine sehr hitzige Diskussion um Open Source-Projekte an sich und schaden dem WordPress-Projekt enorm. Wichtige Core-Entwickler haben das Projekt verlassen. Matt schreibt im offiziellen WordPress-Blog bereits vor der ACF-Übernahme etwas zum Thema Forking. Bleibt abzuwarten, wie sich die Situation entwickelt. Es ist nicht auszuschließen, dass WPE, Elementor und Co. auf den Geschmack gekommen sind, ihrerseits den WP Core zu forken …
Das sieht alles gar nicht gut aus und zeigt erneut, dass einzelne Personen nicht über so viel Macht verfügen sollten. Detaillierte Infos findet ihr u.a. bei TechCrunch oder im WPpodcast.
Autoren-Auswahl in Quick-Edit einblenden, wenn nicht vorhanden
Bereits seit WordPress Version 6.0 verschwindet die Autoren-Auswahl in der Quick-Edit-Funktion, wenn die Anzahl der User die Grenze von 10.000 überschreitet — wie in einem unserer Projekte kürzlich geschehen. In diesem Artikel gibt es einen Filter, um die Autoren-Auswahl wieder anzuzeigen. In diesem Artikel gibt es einen Filter, um die Autoren-Auswahl wieder anzuzeigen.
Safe SVG – WordPress-Plugin erlaubt die Verwendung von SVGs in WordPress
Das Safe SVG Plugin ermöglicht das Hochladen von SVG-Grafiken in WordPress, welches standardmäßig nicht erlaubt ist. Es ergänzt Höhen- und Breitenangaben, optimiert die SVGs und entfernt potentiell gefährlichen Code. Zusätzlich bringt das Plugin einen neuer Block für Inline-SVGs mit.
Block Templates via Plugin registrieren
Ab WordPress 6.7 können Blocktemplates via Plugin registriert und Standardinhalte definiert werden. Neben den Grundlagen der Blockregistrierung teilt Justin Tadlock in seinem Tutorial auf dem WordPress Developer Block auch ein paar weiterführende Tipps und Tricks.
Frontend
Die CSS Working Group braucht unser Feedback zu Implementierung von Masonry
Aktuell gibt es noch zwei Varianten, zwischen denen entschieden werden muss; display: masonry
mit masonry-template-tracks: repeat(3, 1fr)
oder display: grid
mit grid-template-rows: masonry
. Das Chrome Team hat in diesem Artikel einige Beispiele durchgespielt, um zu zeigen, wie Masonry funktionieren würde und ruft auf Feedback zu geben.
display: contents;
Mit display: contents;
können HTML-Elemente über CSS ignoriert werden, so als würde das Element im Markup nicht existieren. Wir lieben diese Technik und setzen sie regelmäßig ein. Eine ausführliche Übersicht gibt es nun auch bei Ahmad Shadeed.
Animation intrinsischer Werte mit CSS – height: auto animieren
Mit der Eigenschaft interpolate-size
oder der Funktion calc-size()
sind weiche Übergänge und Animationen von festen Werten zu intrinsischen Größenangaben und zurück möglich. Dieser Artikel erläutert, wie mit sehnlich gewünschten CSS-Features ein Element zum Beispiel zu der Eigenschaft height: auto
animiert werden kann. Weitere Features, die uns den Gebrauch von Javascript für so kleine Aufgaben überflüssig werden lässt.
View-transition und alle weiteren Features, die mit dem Safari 18 Update kommen
View Transition, Style Queries, Animation von display: none
, Backdrop Filter Support ohne Browserpräfix, CSS content-visibility
und mehr. Am meisten gespannt sind wir auf die View Transitions API, um Elemente von einem Zustand in einen anderen zu animieren und die Unterstützung von Style Queries. In dieser Zusammenfassung findet ihr alle neuen Webkit Features, die mit Safari 18.0 ausgeliefert werden.
Andy Bells Variante einer Button Komponente
Wir alle haben sie schon gebaut und wahrscheinlich in jedem zweiten Projekt aufgrund neuer Erkenntnisse etwas anders. Darum fanden wir es durchaus interessant zu sehen, welche Gedanken Andy Bell in die Erstellung einer Button Komponente steckt und welche Parallelen wir in seinem Artikel zu unseren aktuellen Umsetzungen finden können.
Farbvarianten mit color-scheme()
Verschiedene Farbmodes – z.B. Light und Dark Mode – können u.a. mit dem Media Query prefers-color-scheme: dark/light
realisiert werden. Zusätzlich existiert aber auch die CSS-Funktion color-scheme(light dark)
. Unterschiede und Beispiele zeigt Roma Komarov.
Neue CSS-Features im Entwurfsstadium
Es wurde ein neuer Public Working Draft der CSS-Spezifikation für »Values und Units« veröffentlicht. Dort kann u.a. entnommen werden, dass wir uns auf Dinge wie calc-size()
, sibling-count()
oder random()
freuen dürfen. Details sind auf dev.to zusammengefasst.
Erstaunlich geringer Anteil der Websites mit validem HTML
Die Auswertung von HTML-Konformitätsdaten für das Jahr 2024 ergab, dass nur 0,5 % der 200 wichtigsten Websites weltweit gültiges HTML verwenden. Der Artikel schließt mir dem Aufruf: »Professional web developers write valid HTML.«
content-visibility erreicht Baseline-Support
Mit Safari 18 hat die CSS-Eigenschaft content-visibility
nun Baseline-Support erreicht. Die Eigenschaft steuert das Rendering-Verhalten von Elementen und kann dazu eingesetzt werden, die Performance signifikant zu verbessern. Details findet ihr bei Mozilla.
Was unterscheidet die HTML-Elemente Dialog und Popover
Weil sich die HTML-Elemente Dialog und Popover in Aussehen und Funktionalität ziemlich ähnlich sind,arbeitet dieser Beitrag die wichtigen Unterschiede heraus, geht auf die verschiedenen APIs ein und beschreibt allgemeine Anwendungsfälle. Hier gibt es eine Übersicht aus UX/UI-Sicht über die Nutzung dieser und anderer modaler Elemente.
Sticky Header mit Scroll-Driven Animations
Dieser Beitrag zeigt, wie ein Sticky Header mit CSS so umgesetzt werden kann, das er je nach Scrollrichtung ein- und ausgeblendet wird. Das war bisher nur mit JavaScript möglich, kann nun aber mit Scroll-Driven Animation umgesetzt werden.
Farbsysteme in CSS
In »Chasing Colors« überlegt Adam Stoddard, wie (s)ein ideales CSS-Farbsystem aussehen könnte. Er erwähnt dabei neuere CSS-Funktionen und -Techniken, so dass der Beitrag auch in dieser Hinsicht interessantes bietet.
UX/UI Design
Werden Personas durch AI überflüssig?
Personas gehören zur klassischen Grundausstattung in Konzept und UX Design. Doch inwiefern sind Personas noch relevant, wenn mit AI Personalisierung gearbeitet wird? Daleen Rabe widmet sich dem Thema in ihrem Artikel »Death of the persona: Embracing AI-driven personalization«.
Dark Patterns Hall of Shame
Die Hall of Shame zeigt Dark Patterns und andere ethisch fragwürdige Designs. Anhand realer Beispiele wird gezeigt, welche problematischen und manipulativen Designs es gibt, warum diese Designentscheidungen getroffen wurden und warum bei UI-Designs darauf verzichtet werden sollte.
Jetzt lernen, wie man codet
Andy Bell sieht es als Aufgabe von Designern, Dinge für Menschen zu gestalten und nicht über Design-Tools und ihre ständig wachsenden Funktionen zu »schwadronieren«. Das geht am besten, wenn man Code versteht und schreiben kann. In seinem Beitrag bietet er eine Übersicht über Einstiegsmöglichkeiten für Lernwillige jedweder Wissensstufe.
Für Prototyping ist die Zukunft schon da
Für Branchen-Vordenker Brad Frost ist die Frage »Sollen Designer coden?« nur noch eine Scherzfrage. Denn mit KI sei es jedem Designer nun möglich, in einem solchen Tempo zu funktionierenden Frontend-Prototypen zu kommen, dass man die Abstraktions-Schicht der visuellen Tools wie Figma überhaupt nicht mehr benötigt. Er demonstriert das in einem interessanten Video, inklusive index.html-Nuke …
Barrierefreiheit
Animationen, Scrolling und Parallax + Barrierefreiheit
Inwiefern sind Bewegungen ein Problem im Zusammenhang mit Barrierefreiheit? Die Indiana University fasst Probleme kompakt zusammen und sensibilisiert dafür, Effekte gezielt und sparsam einzusetzen.
Nachteile bei impliziten Formularen
Zwischen Formularfeldern (<input>
etc.) und Beschriftung (<label>
) muss mittels for
und id
eine explizite Beziehung hergestellt werden. Alternativ kann das Formular implizit aufgebaut werden, indem <input>
und <label>
verschachtelt werden und for
– sowie id
-Attribute entfallen. Ein schöner Ansatz, den wir gerne genutzt haben. Doch Screenreader scheinen implizite Beziehungen nicht zu verstehen …
Testberichte zur Barrierefreiheit von Online-Shops
Die Aktion Mensch und Google haben bereits mehrfach Online-Shops hinsichtlich ihrer Zugänglichkeit getestet. Die Testberichte können kostenlos heruntergeladen, geben interessante Einblicke und zeigen immer ein Positivbeispiel. Viele der groben Schnitzer könnten verhältnismäßig leicht behoben werden. Bemerkenswert ist auch, dass sich die Ergebnisse z.B. im Bereich der Tastaturbedienung von 2023 zu 2024 nicht nennenswert verbessert haben.
Allgemein
Puppeteer-Support für Firefox
Das Automatisierung-Framework Puppeteer wird nun offiziell von Firefox unterstützt. Automatisierte Test können somit nicht nur in Chrome, sondern auch in Firefox durchgeführt werden.
Website-Crawling durch KI-Bots mit robots.txt blockieren
Der »Content Detection«-Anbieter originality.ai zeigt mit einer Echtzeit-Visualisierung, wie viele der Top-1000-Websites bereits KI-Bots blockieren. Das Hase und Igel-Rennen hat längst begonnen: Der sehr ausführliche Artikel listet viele bekannte Bots auf, ordnet sie ein und zeigt, welche Anweisungen in die robots.txt geschrieben werden müssen. ai.robots.txt ist eine weitere Ressource, die alle zu schreibenden Angaben für die robots.txt zusammenfasst.
Tools
- Motion One ist eine super performante Web-Animations-Bibliothek von Matt Pery, dem führenden Kopf hinter Framer Motion. Mit Motion One können HTML- und SVG-Elemente mit der Web Animations API animiert werden, wodurch Animationen flüssig bleiben, selbst wenn die Website gerade rendert oder verarbeitet – eine Alternative zu GSAP, aber kompakter und kostenfrei.
- Layout Generator ist ein Online-Tool mit dem Flexbox- und Grid-Layouts erzeugt und der Code heruntergeladen werden kann.
- Atropos.js ist ein JavaScript zum Erzeugen von Touch-Friedly Parallax-Effekten. Von den Machern von Swiper.js.
- Firefox unterstützt nun das Editieren von PDFs direkt im Browser.
- Can I Use CLI ist ein Kommandozeilentool zur Abfrage von MDN Browser Compat Data und damit die Developer-Alternative zur Can-I-Use-Website.