Warum Vorlagen brechen — und warum es niemand merkt

Jede Vorlage funktioniert. Mit dem Text, mit dem sie gebaut wurde.

Das ist keine Spitze gegen Vorlagen — es ist einfach, wie sie entstehen. Jemand setzt eine Grafik, tippt einen Beispieltitel ein, rückt alles zurecht, bis es gut aussieht, und speichert. Und es sieht gut aus.

Der eigentliche Test ist der erste echte Datensatz.

Der Titel, der nicht passt

Nehmen wir einen, wie er tatsächlich in Portalen steht:

Denkmalgeschütztes Gründerzeit-Anwesen mit sanierter Stuckfassade und direktem Seezugang

91 Zeichen. Der Beispieltitel, mit dem die Vorlage gebaut wurde, hatte vielleicht dreißig.

Jetzt gibt es vier Möglichkeiten, und jedes Werkzeug macht eine davon:

1. Der Text läuft über den Rand. Sichtbar kaputt. Ärgerlich, aber ehrlich — man sieht es sofort.
2. Der Text wird abgeschnitten. „Denkmalgeschütztes Gründerzeit-Anwesen mit…” Meistens akzeptabel, wenn die Ellipse sauber gesetzt ist.
3. Der Text wird verkleinert, bis er passt. Sieht auf dem Bildschirm in Ordnung aus und ist im Feed nicht mehr lesbar.
4. Der Text drückt andere Elemente aus dem Bild. Der Preis rutscht unter die Kante, das Logo verschwindet. Das ist der schlimmste Fall, weil er aussieht wie ein anderes Layout und nicht wie ein Fehler.

Die Frage, welche dieser vier Möglichkeiten Ihr Werkzeug wählt, ist die wichtigste bei der Auswahl. Sie steht in keiner Funktionsliste.

Warum Deutsch es schwerer macht

Das ist kein Detail, sondern strukturell.

„Denkmalgeschütztes” ist ein Wort mit 18 Zeichen. Es gibt darin keine Stelle, an der ein Umbruch erlaubt wäre — ohne Silbentrennung bricht es überhaupt nicht. Es passt in die Zeile oder es passt nicht.

Im Englischen hieße das „listed historic building”: drei Wörter, zwei mögliche Umbruchstellen. Dasselbe gilt für „Gründerzeit-Anwesen”, „Wohnflächenberechnung”, „Erbbaurechtsvertrag”, „Mehrfamilienhaus”.

Ein Layout, das an englischen Beispielen entwickelt wurde, hat diese Klasse von Problemen nie gesehen. Es ist nicht schlecht gebaut — es wurde für eine Sprache gebaut, in der lange Wörter umbrechen.

Wenn Sie ein internationales Werkzeug prüfen, ist das der erste Test.

Der Fall, der wirklich teuer ist

Bis hierhin klingt alles nach einem Schönheitsproblem. Das ändert sich mit der Menge.

Bei drei Objekten sehen Sie sich jede Grafik an. Bei zwanzig noch. Bei zweihundert nicht mehr — und genau dafür haben Sie das Werkzeug angeschafft. Der ganze Sinn der Automatisierung ist, dass Sie nicht mehr hinschauen müssen.

Damit wird der teure Fall nicht die kaputte Grafik. Es ist die kaputte Grafik, die niemand sieht.

Sie merken es, wenn ein Kollege fragt, warum bei Objekt 47 der Preis fehlt. Da läuft der Beitrag seit vier Tagen.

Verkleinern ist keine Lösung

Der naheliegende Reflex — „dann skalieren wir die Schrift eben, bis es passt” — verschiebt das Problem nur.

Diese Bilder werden auf einem Telefon gesehen, in einem Feed, im Vorbeiscrollen. Eine Überschrift, die auf 60 Prozent skaliert wurde, passt zwar in den Kasten und wird nicht mehr gelesen. Man hat den Fehler von „sieht kaputt aus” zu „wirkt nicht” gemacht, und die zweite Variante fällt bei der Kontrolle nicht auf.

Es gibt eine Untergrenze, unterhalb derer Text im Feed keine Funktion mehr hat. Ein Werkzeug, das ohne Untergrenze skaliert, hat die Frage nicht beantwortet, sondern umgangen.

Eine Reihenfolge, die man erklären kann

Was stattdessen funktioniert, ist unspektakulär: eine festgelegte Reihenfolge, in der Inhalte aufgegeben werden.

Bei uns sieht sie so aus:

1. Das unwichtigste Detail weglassen. „Baujahr 1908” zu streichen kostet weniger, als alles kleiner zu machen — die übrigen Angaben bleiben in voller Größe und das Bild wirkt gesetzt statt gequetscht.
2. Die Details verkleinern, bis zu einer festgelegten Untergrenze. Darunter ist eine Angabe in Vorschaugröße nicht mehr erfassbar, und in Vorschaugröße werden diese Bilder gesehen.
3. Die Überschrift kürzen. Zuletzt, und sichtbar — mit Auslassungspunkten. Sichtbar ist hier richtig: Die Alternative wäre Text, der aus dem Bild läuft.

Der Wert liegt weniger in der konkreten Reihenfolge als darin, dass es eine gibt. Eine festgelegte Reihenfolge lässt sich prüfen, testen und einem Kunden erklären. Ad-hoc-Verkleinerung an fünf Stellen im Code kann das nicht — und liefert je nach Vorlage ein anderes Ergebnis.

Und: Der Kunde erfährt, was aufgegeben wurde. Unter jeder Grafik steht ein Satz — „Ein Detail weggelassen”, „Überschrift gekürzt”, „Wird eng”. Kein Prozentwert und keine Stufennummer, weil man damit nichts anfangen kann. Ein Satz über den eigenen Text, neben dem Bild, das er beschreibt.

Die Prüfung, die wir zu spät gebaut haben

Jetzt der Teil, der uns selbst erwischt hat — und der Grund, warum dieser Text konkreter ist als eine Broschüre.

Wir hatten eine Prüfung, die auf jedem Rendering läuft: Liegt die gezeichnete Schrift innerhalb des Bildes? Wenn nein, greift die Leiter. Das funktioniert, und es hat lange gereicht.

Dann kam eine Anordnung dazu, bei der der Text in einer Spalte neben dem Foto sitzt. Und dort war die Prüfung blind.

Denn ein Titel, der von der Fotokante abgeschnitten wird, liegt weit innerhalb des Bildes. Die Prüfung meldete: alles in Ordnung. Auf dem Bild stand „Denkmalg”, mitten im Buchstaben abgeschnitten.

Gemessen: Die Überschrift lief 417 Pixel über ihre Spalte hinaus, der Preis 133. Und die Prüfung sagte, es passe.

Wir haben das gefunden, weil wir uns die Bilder angesehen haben. Nicht durch einen Test — zwölf Tests waren grün.

Die Korrektur ist mittlerweile eingebaut: Die Schrift wird jetzt auch gegen den Kasten geprüft, in dem sie sitzen soll, nicht nur gegen den Bildrand. Aber die Lehre ist allgemeiner:

Eine Prüfung, die nur den äußeren Rand kennt, findet nicht den Fehler, den ein Layout mit Spalten tatsächlich hat.

Wenn Sie ein Werkzeug bewerten, ist das eine gute Frage: Woran wird gemessen, ob eine Grafik in Ordnung ist? „Sieht gut aus” ist keine Antwort, weil bei zweihundert Objekten niemand hinsieht.

Vier Tests, fünf Minuten

Das können Sie bei jedem Anbieter machen, uns eingeschlossen:

Test	Was Sie sehen wollen
Titel mit 90 Zeichen	Sauber gekürzt oder umgebrochen — nicht mitten im Wort abgeschnitten, nicht auf Briefmarkengröße skaliert
Objekt ohne Foto	Etwas Gestaltetes. Kein graues Rechteck, kein fremdes Beispielfoto
Objekt ohne Ort	Die Zeile fehlt. Kein leerer Balken, kein Satz mit einem Loch
Preis mit sieben Stellen	1.234.567 € — jede Ziffer richtig, mit Punkt als Tausendertrenner, Leerzeichen vor dem Eurozeichen

Der letzte Test ist der, den Bildmodelle nicht bestehen und der bei einer Immobilie am meisten zählt. Mehr dazu im Beitrag über Anzeigen aus echten Daten.

Was wir zusagen — und was nicht

Wir sagen nicht zu, dass nie etwas kaputtgeht. Diese Woche haben wir in unserer eigenen Ausgabe sechs Fehler gefunden, und zwar dadurch, dass wir uns die Bilder angesehen haben: einen leeren Knopf ohne Beschriftung, ein Foto, das unter einem Verlauf verschwand, weiße Schrift auf goldenem Grund, eine Messgröße, die in Wahrheit eine Konstante war.

Und der zweite, der zeigt, wie leise so etwas ausfällt: Auf einem breiten Format gab das Foto so lange Höhe ab, bis nichts mehr davon übrig war. Die Grafik sah nicht kaputt aus — sie war nur keine Grafik mit Foto mehr.

Die Zusage ist eine andere, und sie ist haltbarer:

Wenn es nicht passt, sagen wir es — statt es still auszuliefern.

Jedes Rendering wird gemessen. Wenn die Leiter greift, steht darunter, was aufgegeben wurde. Wenn es eng wird, steht darunter, dass es eng wird. Und zweiundvierzig Pixelvergleiche stellen sicher, dass eine Änderung an einer Vorlage keine andere unbemerkt verschiebt.

Das ist weniger vollmundig als „perfekte Grafiken, automatisch”. Es ist dafür eine Aussage, die Sie überprüfen können — und bei zweihundert Objekten ist das der einzige Unterschied, der zählt.