0 Fork 0

Files

T

kantarciandClaude Opus 5 7251b82f09 Designer: 93 Eigenschaften, neun Einblendungen, drei neue Bausteine

Umut fragte nach Zeilen, nach Rahmen und Rundungen - und ob der Designer so
aufgestellt ist wie Flatsome. Der Vergleich steht in
docs/DESIGNER-VERGLEICH.md, mit der Einschraenkung, dass Flatsome hier nicht
installierbar war: das ist Wissen, keine Messung.

Zwei echte Fehler kamen dabei heraus, beide vorher unbemerkt.

Eine Rahmenstaerke je Seite wurde zu border-width-top. Das ist kein CSS, der
Browser verwirft die Zeile stillschweigend - Rahmenstaerken je Seite hatten
nie eine Wirkung, und es gab keine Meldung, die darauf hingewiesen haette. Die
Schreibweise steht jetzt je Eigenschaft im Schema, weil padding-top dem Namen
folgt und border-top-width nicht.

Und eine Rundung auf einem Bildblock landete auf dem figure, waehrend das Bild
darin eckig blieb. Eigenschaften koennen jetzt auf das Bild im Block zielen
(target 'img' im Schema, eine zweite Regel im Compiler) - deshalb tut
object-fit ueberhaupt etwas, denn auf einem figure tut es nichts.

Von 50 auf 93 Eigenschaften: Bild (Ausschnitt, Bildmitte, Seitenverhaeltnis,
Hoehe, Ecken, Rahmen), Positionierung mit z-index, getrennte Zeilen- und
Spaltenabstaende, Flex je Element, Innen- und Textschatten, acht Bildfilter
als eine filter-Deklaration in fester Reihenfolge, Mischmodus, Zusatzrahmen,
Mauszeiger. Neun Einblendungen mit Verzoegerung, sieben Hover-Effekte, alle
innerhalb von prefers-reduced-motion.

Drei neue Bausteine (Dokumentschema v15): Symbol als eigenes Element,
Fortschritt mit role=meter und dem Wert im Markup statt nur in der
Balkenbreite, und ein Slider als Scrollbereich mit Einrasten - ohne
JavaScript, ohne Autoplay, mit Finger, Trackpad, Mausrad und Tastatur.

Zeilen waren nicht unauffindbar, sondern unbrauchbar leer: eine Zeile ohne
Spalten sieht aus wie nichts. Jetzt legt "Zeile, 2/3/4 Spalten" beides auf
einen Klick an, und im Werkzeugkasten steht, wie der Aufbau gemeint ist.

315 PHP-Tests / 1309 Assertions, 16 JS-Modelltests, axe auf dreizehn
Bildschirmen ohne Verstoesse. 16 Datensaetze rechnen jede Eigenschaftsform
gegen die erwartete Deklaration nach - die Pruefung, die die beiden Fehler
oben gefunden haette, wenn es sie vorher gegeben haette.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

2026-09-12 20:37:49 +02:00

9.3 KiB

Raw Blame History

Der Designer im Vergleich mit Flatsome (UX Builder)

Stand: 12.09.2026.

Woran dieser Vergleich hängt

Umut hat gefragt: „Ist der Designer vom Funktionsumfang so aufgestellt wie Flatsome?“ Zur Ehrlichkeit gehört, wie ich das geprüft habe – und wie nicht.

Nicht geprüft: Flatsome selbst. Die Erweiterung ist hier nicht installiert, das WordPress-Backend des Piloten ist mir nicht zugänglich, und in der öffentlich ausgelieferten Startseite sieht man die Bausteine, nicht den Baukasten. Ich habe also keinen Klick in UX Builder gemacht.

Geprüft: der eigene Designer, Eigenschaft für Eigenschaft, gegen den mir bekannten Funktionsumfang von UX Builder (Elementliste, Optionsgruppen je Element, Animations- und Hover-Sammlung). Das ist Wissen, keine Messung – wo es falsch ist, korrigiere mich, dann ziehe ich nach. Für die konkrete Pilotseite ist ohnehin der Abgleich aus Arbeitspaket K maßgeblich, und der braucht Backendzugang.

Gestaltungsoptionen

Vor heute hatte der Designer 50 Eigenschaften, jetzt 93 – jede je Gerät (Desktop, Tablet, Mobil) und ein Teil zusätzlich für den Hover-Zustand.

Bereich	Flatsome (UX Builder)	KantSites
Typografie	Schriftart, Größe, Gewicht, Zeilenhöhe, Laufweite, Ausrichtung, Schreibweise, Farbe	11 Eigenschaften, dazu Schriftlage, Textlinie, Wortabstand; Schriftart aus der Website-Palette (Systemschrift oder Google Fonts)
Hintergrund	Farbe, Bild, Position, Größe, Wiederholung, Parallax, Überlagerung, Verlauf, Video	11: Farbe, Bild aus der Mediathek, Größe, Ausschnitt, Wiederholung, Scrollverhalten, Überlagerung mit Deckkraft, Verlauf mit Winkel. Fehlt: Parallax und Video-Hintergrund
Abstand	Innen/Außen je Seite	je Seite, je Gerät
Größe	Breite, Höhe, Mindesthöhe	7: Breite, Mindest-, Maximalbreite, Höhe, Mindest-, Maximalhöhe, Überlauf
Rahmen	Stärke je Seite, Farbe, Art, Rundung je Ecke	8: alles davon, dazu ein zweiter Rahmen (outline) mit Abstand. Heute behoben: die Stärke je Seite erzeugte `border-width-top` statt `border-top-width` – ungültiges CSS, das der Browser stillschweigend verwarf. Rahmenstärken je Seite hatten damit nie eine Wirkung
Bild	Rundung, Zuschnitt, Seitenverhältnis, Filter	neu, 8 Eigenschaften, die auf das Bild im Block wirken statt auf seinen Rahmen: Ausschnitt (object-fit), Bildmitte, Seitenverhältnis, Höhe, Ecken je Ecke, Rahmen. Vorher landete eine Rundung auf dem `figure` und das Bild blieb eckig – genau das, was Umut aufgefallen ist
Layout	Spalten, Abstand, Verteilung, Ausrichtung	20: Anzeige, Flexrichtung, Umbruch, Verteilung, Ausrichtung, Spaltenzahl, Abstände (auch getrennt für Zeilen und Spalten), Reihenfolge, eigene Ausrichtung, Wachsen, Schrumpfen, Grundbreite, Positionierung (auch freigestellt und klebend), Abstände zu allen vier Rändern, Ebene (z-index)
Wirkung	Schatten, Deckkraft, Animationen, Hover	26: Deckkraft, Schatten (auch innen), Textschatten, Verschieben, Skalieren, Drehen, Übergangsdauer, Weichzeichnen, Helligkeit, Kontrast, Sättigung, Graustufen, Sepia, Farbdrehung, Umkehren, Mischmodus, Mauszeiger
Eigener Code	CSS je Element	CSS je Element für alle, Skript je Element nur für Administratoren (ADR 028)
Sichtbarkeit je Gerät	„Hide on mobile/tablet/desktop“	über `Anzeige: keine` je Gerät möglich, aber nicht als eigener Schalter – siehe „Was noch fehlt“

Bewegung

	Flatsome	KantSites
Einblendungen	rund fünfzehn, beim Scrollen ausgelöst	neun (sanft, von unten, von oben, von links, von rechts, Heranzoomen, Kippen, aus der Unschärfe) mit Verzögerung in drei Stufen. Sie laufen beim Laden der Seite, nicht beim Scrollen – dafür bräuchte es JavaScript, und eine öffentliche Seite führt keines aus. Das steht so im Editor
Hover	rund zehn	sieben (anheben, absenken, Bild vergrößern, Leuchten, Kippen, Rahmen einfahren) – dazu frei: jede Farbe, jeder Schatten, jede Verschiebung, jede Skalierung hat einen eigenen Hover-Wert
„Bewegung reduzieren“	teilweise berücksichtigt	jede Animation liegt in der Abfrage `prefers-reduced-motion`; wer weniger Bewegung wünscht, bekommt den Endzustand

Bausteine

Flatsome-Element	KantSites
Section, Row, Column	Sektion, Zeile, Spalte – neu: „Zeile, 2/3/4 Spalten“ auf einen Klick, weil eine leere Zeile aussieht wie nichts und deshalb niemand sie gefunden hat
Text, Headline	Text mit Werkzeugleiste und HTML-Ansicht, Überschrift
Button	Button
Image, Gallery	Bild, Galerie
Icon, Icon Box	neu: Symbol als eigenes Element (vorher nur in der Symbolkarte), Symbolkarte
Slider, Banner	neu: Slider als Scrollbereich mit Einrasten – ohne JavaScript, ohne Autoplay, mit Finger, Trackpad, Mausrad und Tastatur bedienbar. Sichtbare Folien je Gerät einstellbar
Accordion, Tabs	Akkordeon, Tabs
Progress bar	neu: Fortschritt – mit `role="meter"` und dem Wert im Markup, nicht nur in der Balkenbreite
Testimonial	Kundenstimme mit Sternen
Counter, Countdown	fehlt – braucht JavaScript
Team member, Price table	fehlt als eigenes Element; aus Zeile, Spalte, Bild, Überschrift und Liste zusammensetzbar
Video	teils: ein eingebettetes Video geht über „Externer Inhalt“ und lädt erst nach Einwilligung. Eine selbst gehostete Videodatei fehlt
Google Map	über „Externer Inhalt“ – und zwar richtig: ohne Einwilligung wird keine Verbindung zu Google aufgebaut
Social icons, Share	fehlt als Element; aus Symbolen mit Linkziel zusammensetzbar
Contact form	Formular, serverseitig validiert, mit Einwilligung und Spamschutz
Blog posts	Beitragsliste, nach Kategorie oder Schlagwort filterbar
Shop-Elemente	bewusst nicht – kein Shop im Projekt
Popup, Lightbox	fehlt – braucht JavaScript
HTML, Custom CSS	eigenes CSS je Element für alle, eigenes Skript nur für Administratoren
Divider, Gap	Trennlinie, Abstand
Search	fehlt – es gibt keine Suche auf der Website (Arbeitspaket M)
Breadcrumbs, Navigation	Brotkrumen, Navigation aus der Menüverwaltung
Verknüpfte Abschnitte	Verknüpfte Sektion – eine Änderung wirkt auf allen Seiten, die sie einbinden

Was absichtlich anders ist

Das ist kein Funktionsmangel, sondern eine Entscheidung:

Eine öffentliche Seite führt kein JavaScript aus (script-src 'none'), außer sie enthält Tabs oder ein eigenes Skript. Deshalb gibt es kein Autoplay-Karussell, keinen Countdown und kein Popup. Der Preis: diese drei fehlen. Der Gegenwert: die Seite ist ohne Skript vollständig lesbar und schnell, und eine ganze Klasse von Fehlern und Angriffen entfällt.
Keine Inline-Stile. Jede Gestaltung wird zu einem Stylesheet mit Hash zusammengefasst. Deshalb sind Symbolgrößen und Fortschrittswerte Klassen und keine style-Attribute.
Eingebettete Inhalte laden erst nach Einwilligung – vorher steht nicht einmal die Adresse des Anbieters im HTML.
Jeder Wert wird serverseitig geprüft. Was der Editor anbietet, ist genau das, was der Server annimmt; ein Muster oder eine feste Liste je Eigenschaft, keine freie CSS-Eingabe außer im ausdrücklich dafür gedachten Feld.
Kein Shop und keine Produktelemente.

Was noch fehlt, nach Nutzen geordnet

Sichtbarkeit je Gerät als eigener Schalter. Technisch über Anzeige: keine je Gerät schon möglich, aber niemand sucht es dort. Ein Häkchen „Auf diesem Gerät ausblenden“ im Designbereich – klein, hoher Nutzen.
Parallax und Video-Hintergrund. Parallax geht in modernen Browsern rein mit CSS (background-attachment: fixed gibt es schon; echtes Parallax bräuchte animation-timeline: scroll(), das Safari und Firefox noch nicht können). Video-Hintergrund braucht ein <video>-Element und eine Entscheidung über Datenmenge und Einwilligung.
Selbst gehostetes Video als Element, mit Vorschaubild und ohne Autoplay mit Ton.
Countdown und Popup. Beide brauchen ein Skript. Machbar wie die Tabs: eine Seite, die eines enthält, bekommt script-src 'self' und lädt eine kleine Datei. Das ist eine bewusste Aufweichung – ich würde sie nur bauen, wenn du sie wirklich brauchst.
Einblendung beim Scrollen statt beim Laden. Ohne Skript nur mit animation-timeline: view() möglich, das noch nicht überall funktioniert; mit Skript sofort.
Soziale Symbole, Preistabelle, Teammitglied als eigene Elemente – heute zusammensetzbar, aber jedes Mal Handarbeit.
Suche auf der Website.
Vorlagenbibliothek. Flatsome bringt fertige Seitenvorlagen mit. Hier gibt es drei Abschnittsvorlagen und die Zeilenvorlagen; eine echte Sammlung gehört zu Arbeitspaket H (Templates).

Was heute dabei herauskam

Neben dem Ausbau zwei echte Fehler, beide vorher unbemerkt:

Rahmenstärken je Seite hatten nie eine Wirkung. border-width-top ist kein CSS; der Browser verwirft die Zeile stillschweigend. Die Schreibweise steht jetzt je Eigenschaft im Schema, weil sie sich nicht erraten lässt.
Eine Rundung auf einem Bildblock rundete den Rahmen, nicht das Bild. Jetzt erbt das Bild die Rundung seines Rahmens, und die neuen Bild-Eigenschaften schreiben ohnehin direkt auf das Bild.

9.3 KiB Raw Blame History Unescape Escape