Teaser Trouble: Es passt nicht!

LAYOUTGEFLÜSTER

Der Anreißer, meist Teaser genannt, ist vom Wesen her kurz. Fachsprache und Amtsdeutsch sind vom Wesen her lang. Die Karambolage ist zwangsläufig. Das Redaktionspersonal fummelt und flucht: Es passt nicht!

Mit Zoom prüfen: Der Text unter der Überschrift hat 205 Zeichen. Für die meisten User ist das zu viel. Nur ganz links passt er – aber das ist keine normale, sondern eine extreme Zoom-Stufe. Die Überschrift ist sehr kurz, das ist gut. Aber auch sie kann plötzlich 2-zeilig werden. Dann bleibt vom Text unten fast nichts mehr übrig.

Im Web-Layout meinen wir mit Teaser Bilder, Texte (Überschrift und/oder zusammenfassender Fließtext) oder eine Kombination davon. Wir haben 3 Formate: Standard, Liste und Karte (Kachel). Letztere ist der Liebling vieler Redaktionsteams.

So erscheinen Teaser oft in grafischer Verpackung, nämlich auf Übersichtsseiten verbunden mit einem Bild und neben anderen Kacheln. Hübsch – aber handwerklich eine harte Nuss. Wir schauen uns Probleme und Lösungen genauer an.

DAS LESEN SIE IN DIESEM BEITRAG

  • Überlange Wörterketten
  • Überlauf: Wenn der Text abbricht
  • Überschrift frisst Unterzeile
  • Kein genutztes Format vergessen
  • Keine Bilderrätsel, bitte – Fotos anpassen
  • Responsive Design verschiebt Maßstäbe
  • Kurz gesagt: So lösen Sie die Probleme
  • Praxishilfen

Überlange Wörterketten

Bild 1. Das Teaser-Format erzwingt falsche Trennungen und hässlichen Zeilenumbruch. Fachjargon und Amtssprache neigen zu überlangen Wortkomposita und Substantivierungen.

Das Wort wird einfach ohne Trennzeichen umbrochen. Woran liegt’s? Silbentrennung gibt es nicht. Typo3 sorgt nur dafür, dass das lange Wort nicht aus dem Kasten läuft.

So hat keines dieser Wörter aus Bild 1 eine Chance, in den vorgesehenen Raum zu passen:

  • Konsultationskindertagesstätten: 31 Zeichen, 10 Silben
  • Führungskräftenachwuchs-Förderung: 33 Zeichen, 9 Silben
  • Sprachfeststellungsprüfungen: 28 Zeichen, 7 Silben
  • Veranstaltungsdokumentationen: 29 Zeichen, 10 Silben
  • Bundesausbildungsförderung: 26 Zeichen, 8 Silben
  • Gesellschaftswissenschaftliche: 30 Zeichen, 8 Silben

Mark Twain würde diese Begriffe glucksend vergnügt in das Sprachalbum schreiben, das er 1878 bei seiner Deutschlandreise führte. Im legendären Essay The Awful German Language spießte er unsere skurrile Neigung zu Wortgebirgsketten auf. „Manche deutschen Wörter sind so lang, sie haben eine Perspektive“, witzelte er. Eigentlich seien das keine Wörter mehr, es seien alphabetische Prozessionszüge, endlose Wörteraufmärsche, bei denen man mit etwas Fantasie die Blasmusik hört und Standarten flattern sieht.

Twains Pointe trifft nirgendwo mehr zu als im Experten-, Juristen- und Amtsdeutsch. Daher sagt der Redaktionsleitfaden: „Auf Behördensprache sollte unbedingt verzichtet werden“. Nicht nur wegen Bürgernähe, Verständlichkeit und Sprachästhetik. Substantivierungen und vielsilbrige Komposita sind schlicht meist zu lang.

Überlauf: Wenn der Text abbricht

In den „Seiteneigenschaften“ geben Sie unter dem Reiter „Metadaten“ den Teaser-Text ein. Technisch sind in der Eingabemaske 250 Zeichen erlaubt. Inhaltlich mag es sinnvoll sein, das auszureizen. Grafisch aber nicht!

Drastisch warnt der Redaktionsleitfaden: „Achtung: Bei der Darstellung in Karten sind nur deutlich weniger Zeichen im Frontend sichtbar. Bitte hier überprüfen.“

Wer es nicht tut, verursacht Phänomene wie in Bild 2. Davon gibt es im Bildungsportal viele. Bei Textüberlauf setzt Typo3 den Dreipunkt „…“ Man denkt, der Text wird doch auf einer Folgeseite weiter zu lesen sein. Nein! Er wird nirgendwo sonst angezeigt. Überlange Teaser-Texte sind also sinnlos.

Merke auch: Das System passt die Anzeige flexibel an die Browser-Einstellungen beim Nutzer an. Je nach Gerät, Schriftgröße und Fensterbreite wird mal mehr, mal weniger Text angezeigt. Darum sollte die Redakteurin zoomen und prüfen, wie der Text fällt, wenn sie die Darstellung mit STRG + Mausrad größer und kleiner werden lässt.

Überschrift frisst Unterzeile

Zum Check muss auch gehören, ob Überschrift und Teaser-Text sich beißen. Denn: In Kacheln teilen sich Überschrift und Teaser-Text den Platz. Je länger die Überschrift ist, desto kürzer ist der Text darunter. Bild 2 zeigt einige Kacheln, die 3 oder gar 4 Zeilen umfassen, Dachzeile eingeschlossen.

Bild 2. Zu lange Wörter, zu viele Zeilen – und der Text läuft über. Er bricht ab mit dem Dreipunkt „…“ Die Aussage ist nicht vollständig. Manchmal geht der Kern verloren.

Was lässt sich hier verbessern? Erstens: Überschrift und Text sollten nicht exakt dasselbe sagen. Das vergeudet den Platz.

  • Wenn sie in einer Karte (Kachel) gemeinsam erscheinen sollen, schreiben Sie getrennte, unterschiedliche Aussagen: ergänzen, nicht verdoppeln!
  • Denken Sie Überschrift und Platz also zusammen. Leider setzt unser Typo3 dafür keine Anreize: In den „Seiteneigenschaften“ werden Überschriften (Seitentitel) und Teaser-Text in verschiedenen Reitern eingegeben („Allgemein“ und „Metadaten“).

Zweitens: Lange Wörter sind unwirtschaftlich: Sie verschlingen unnötig Platz, weil sie große Lücken und Zeilenumbruch erzwingen.

  • Sie sehen in Bild 2 im linksbündigen Flattersatz viel Weißraum – also große Lücken bis zum Zeilenende. Wenn der Textlauf das Ende erreicht, wird ein Wort, das nicht mehr hineinpasst, in die nächste Zeile geschoben. Silbentrennung ist in Typo3 unmöglich.
  • Flattersatz ohne Silbentrennung wie in Typo3 nennen Profis den „englischen Flattersatz“. Dieser Satzstil war für die deutsche Sprache schon immer ein Problem. Die Flatterzone ist viel größer als z. B. bei Englisch, Spanisch oder Französisch mit kürzeren Wörtern.
  • Merke: In eine Flattersatz-Zeile passen mehr kurze Wörter als lange Wörter, selbst wenn die Zeichenanzahl identisch ist!
Bild 3. In den „Seiteneigenschaften“ enthält der Reiter „Metadaten“ den Teaser-Text. Es sind weit weniger Zeichen als die erlaubten 250, nämlich nur 162 und 153. Trotzdem bricht in der Kachel-Anzeige (links) der Text ab, der Rest der beiden Beschreibungssätze ist nirgendwo mehr sichtbar. Die 3-Zeilen-Überschriften verdrängen das letzte Drittel der Sätze. Außerdem sind die Inhalte von Überschriften und angezeigtem Teaser-Texten quasi identisch – und ganz oben drüber steht ein weiteres Mal „Weiterbildung Niederdeutsch“.

Kein genutztes Format vergessen

Wenn Ihre Seite auf mehreren Übersichtsseiten angepriesen wird und dabei mehrere Darstellungsvarianten Verwendung finden, müssen Sie alle genutzten Formate überprüfen.

Das Beispiel in Bild 4 zeigt: Was in einer Variante locker passt, läuft in der Enge einer anderen über. Optimieren Sie den Text für die engste Variante.

Bild 4. Passt, passt, passt nicht. Der Teaser-Text der Metadaten ist identisch. Aber die Darstellung wechselt, und der Platz kann schrumpfen.

Keine Bilderrätsel, bitte – Fotos anpassen

Das Foto muss immer erkennbar bleiben. Wenn Sie die Kombination aus Foto und Bauchbinde benutzen, darf der Textbalken den Bildmotivkern nicht verdecken. Jedenfalls nicht so sie in den Beispielen in Bild 5.

Bild 5. Bauchbinde verdeckt das Bildmotiv: Texte sind zu kürzen, Fotos zu beschneiden oder anders zu platzieren

3- oder gar 4-zeilige Überschriften (einschließlich Dachzeile) sind fast immer Übeltäter. Sie verschlingen bis zu 60% des Platzes. Sie schieben sich unweigerlich in die Mitte des Bildes. Wer das Foto ansieht, fragt sich: Was wird hier überhaupt dargestellt? Allerdings können auch 2-Zeiler, ja selbst 1-Zeiler die wesentliche Bildaussage überdecken.

Bild 6. Links: Textbalken verdeckt das halbe Gesicht und den ganzen Chanukka-Leuchter. Rechts das volle Motiv.

Das Foto muss zusammen mit der Text-Bauchbinde funktionieren. Tut es das nicht, müssen Sie den sichtbaren Bildausschnitt verschieben, neu platzieren oder anders schneiden. Oder ein ganz anderes Bild wählen. Oder eine andere Teaser-Darstellung verwenden, die für die Bild-Text-Kombination besser geeignet ist.

Responsive Design verschiebt Maßstäbe

Vergessen Sie auch nicht unser Responsive Design. Das bedeutet: Die Darstellung Ihrer Seite passt sich Bildschirmgrößen, Anzeige-Einstellungen der User und den verwendeten Endgeräten an. Erhöht eine Nutzerin zum Beispiel die Textgröße, verringert sich der Anteil des sichtbaren Fotos.

Responsive Design: Identisches Element, unterschiedliche Darstellung, wechselnder Textumbruch, unterschiedliche Foto- und Textanteile
Mit Zoom prüfen: Der Text unter der Überschrift hat 205 Zeichen. Für die meisten User ist das zu viel. Nur ganz links passt er – aber das ist keine normale, sondern eine extreme Zoom-Stufe. Die Überschrift ist sehr kurz, das ist gut. Aber auch sie kann plötzlich 2-zeilig werden. Dann bleibt vom Text unten fast nichts mehr übrig.

Kurz gesagt: So lösen Sie die Probleme

  • Kurze Wörter, höchstens 4 Silben pro Wort. Nutzen Sie einen Zeichen- und Silbenzähler
  • Verben statt Substantive: Aus „Führungskräftenachwuchsförderung“ wird „Führungsnachwuchs fördern“
  • Falls lange Wörter nötig sind, händisch trennen und koppeln: „Veranstaltungs-Dokumentation“. Das zweite Wort beginnt groß, weil es getrennte Wörter sind, nicht getrennte Silben.
  • Wagen Sie den Eingriff in Fachbegriffe. „Konsultations-Kita“ ist in einer Überschrift OK. Statt „Gesellschaftswissenschaften“ geht auch „Gesellschafts-Fächer“. Für die korrekte Langform ist Platz im Haupttext der Seite.
  • Gängige (!) Abkürzungen dürfen allein stehen: „BAföG“ kennt jeder.
  • Dachzeilen nur, wenn sie wirklich nötig sind
  • Bild und Text müssen zusammen funktionieren. Passen Sie das Bild oder den Text an. Oder beides. Fotos können anders platziert, beschnitten oder ausgetauscht werden.
  • Überschriften und Teaser-Text zusammendenken. Sie ergänzen sich – sie haben getrennte, nicht identische Aussagen. Bei Karten (Kacheln) besonders wichtig!
  • Folgen Sie den Tipps zur Wortlänge bei Wortliga und Texterclub

Praxishilfen

Wortlängen managen

Nachschlagen

Beitrag aktualisiert am 30.10.2025

, , , , , , ,