kantarciandClaude Opus 5
af3589c95c
Drei Fragen, drei unterschiedliche Antworten. Die globale Seitenbreite war einstellbar und wirkte nur in eine Richtung: site.css schrieb width:min(1180px,...), also schluckte die 1180 jeden groesseren Wert aus dem Designbereich. Schmaler ging, breiter nicht, ohne jede Meldung. Die Zahl kommt jetzt aus dem Theme. Das ist der dritte Fehler dieser Art an einem Tag - nach der Rahmenstaerke und der Bildrundung -, und alle drei hatten dieselbe Ursache: CSS, das nie gegen eine Erwartung geprueft wurde. Menueplaetze und Menueart waren vermischt. Wo ein Menue steht, bestimmt der Block und war immer frei. Welche Eintraege es zeigt, bestimmt der Platz - davon gab es zwei, jetzt vier (Haupt, zweite, Fusszeile, Rechtliches). Wie es aussieht, war gar nicht einstellbar: jetzt waagerecht, untereinander oder aufklappbar als Burger. Der Burger ist ein details-Element, denn ein Menue, das ein Skript zum Oeffnen braucht, geht auf einer Seite ohne Skript nicht auf. "Seiten ohne Menue" war nicht moeglich - der Kopfbereich war ein Dokument fuer alle Seiten. Jetzt waehlt jede Seite: Standard, ein anderer Bereich, oder keiner. Dafuer musste die Regel "es gibt genau einen Kopf- und Fussbereich" fallen; sie war richtig, solange niemand waehlen konnte, und wurde falsch, sobald man waehlen kann. Ein bestehender Test, der diese Regel zusicherte, ist deshalb umgeschrieben und prueft jetzt die neue. Gespeichert wird die Wahl, nicht das Ergebnis: leer heisst Standard, none heisst keiner, sonst die Adresse. Ein Verweis auf einen geloeschten Bereich faellt auf den Standard zurueck, statt die Seite stillschweigend ohne Navigation auszuliefern. Neu im Ausbauplan: ein einzelnes install.php, das das Releasearchiv herunterlaedt und entpackt, damit niemand tausende Dateien per FTP hochladen muss. Mit den Regeln, die darueber entscheiden, ob das eine Hilfe oder eine Einladung ist: Adresse und SHA-256 stehen in der Datei und nicht im Formular, HTTPS mit Zertifikatspruefung, Schutz gegen ZIP-Slip, Selbstloeschung danach. 336 PHP-Tests / 1354 Assertions, 17 JS-Modelltests. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
10 KiB
10 KiB
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“ |
| Abschnittsbreite | Normal, breit, randlos | Normal (1180 px), schmal (800 px), breit (1600 px), randlos – randlos heißt ohne Begrenzung und ohne Rand, für Bild oder Farbfläche von Kante zu Kante |
| Globale Inhaltsbreite | im Theme einstellbar | im Designbereich einstellbar – und wirkt seit heute auch nach oben; vorher deckelte das Stylesheet bei 1180 px |
| Volle Bildschirmhöhe | „Full screen“ je Abschnitt | über Mindesthöhe: 100dvh plus Anzeige: flex und Ausrichtung quer: Mitte; die Vorlage „Vollbild-Hero“ setzt genau das auf einen Klick. Neu sind dafür die Einheiten dvh, svh, lvh – 100vh ist auf dem Handy höher als der Bildschirm |
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 – vier Plätze (Haupt, zweite, Fußzeile, Rechtliches) und drei Arten: waagerecht, untereinander, aufklappbar als Burger (ohne JavaScript) |
| Kopfbereich je Seite („Hide header“) | je Seite wählbar: Standard, ein anderer Kopf- oder Fußbereich, oder keiner |
| 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: keineje 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: fixedgibt es schon; echtes Parallax bräuchteanimation-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-topist 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.