Web Design News & Link-Tipps – Nr. 35

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

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

Raimund Büchner

Benutzerbild

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.

Felix Lehmann

Benutzerbild

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.

Robert Menzel

Benutzerbild

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause. Zu seinen Aufgaben gehören die visuelle Gestaltung und die technische Umsetzung von Websites, eCommerce-Shops oder dessen Kombination. Besonders gerne übernimmt er die Entwicklung individueller und anspruchsvoller Websites mit umfangreichen ineinandergreifenden Funktionen, getreu dem Motto: »Der beste Lack bringt nichts, wenn die Maschine darunter nicht läuft.«

Konstantin Hanke

Benutzerbild

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.

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