Banner skalieren oder komponieren: warum jede Form zählt

Ein Banner in einer Größe zu gestalten und es dann auf alle anderen zu ziehen, spart am Anfang Zeit und kostet sie am Ende doppelt. Dieser Ratgeber zeigt mit etwas Rechnung, warum Skalieren zwischen Seitenverhältnissen scheitert, welche fünf Formen es gibt und was sich ändert, wenn jedes Format für seine Form komponiert wird.

Warum Skalieren scheitert: eine Rechnung

Nehmen wir ein Medium Rectangle in 300 × 250, das zum Superbanner in 728 × 90 werden soll. Es gibt drei Wege, und keiner führt zum Ziel.

1. Auf die Höhe einpassen. Der Faktor ist 90 geteilt durch 250, also 0,36. Das Banner wird 108 Pixel breit, und 620 Pixel des Streifens bleiben leer. Eine Überschrift in 28 Pixeln schrumpft auf rund 10 Pixel, ein Fließtext in 12 Pixeln auf gut 4.
2. Auf die Breite einpassen. Der Faktor ist 728 geteilt durch 300, also gut 2,4. Das Banner wird rund 607 Pixel hoch, und der Streifen zeigt davon nur 90 Pixel, etwa 15 % der Gestaltung.
3. Verzerren. Breite und Höhe werden unabhängig gestreckt. Logo und Schrift verlieren ihre Proportionen, und keine Marke lässt das zu.

Innerhalb desselben Seitenverhältnisses funktioniert Skalieren dagegen: 300 × 250 und 336 × 280 haben beide 6:5, 1080 × 1920 und 1440 × 2560 beide 9:16. Sobald sich das Verhältnis ändert, hilft nur eine neue Anordnung.

Fünf Formen statt 37 Größen

Die gute Nachricht: Sie müssen nicht jede Größe einzeln denken. Nach ihrem Seitenverhältnis fallen alle Formate in fünf Formen, und jede Form hat ihre eigene Komposition.^[1]

Zwei Zuordnungen sind weniger offensichtlich. Das Billboard in 970 × 250 ist mit knapp 3,9:1 noch ein Querformat, kein Streifen, und hat deshalb Platz für ein Bild neben dem Text. Das Halfpage Ad in 300 × 600 ist mit 1:2 ein Hochformat, während der Wide Skyscraper in 160 × 600 bereits eine Säule ist.^[1]

Was in jeder Form wohin wandert

Komponieren heißt: Dieselben Elemente, also Logo, Überschrift, Bild und Button, bekommen in jeder Form eine andere Reihenfolge und ein anderes Gewicht.^[2]

Streifen: eine Lesezeile

Logo, Überschrift und Button stehen in einer Reihe, von links nach rechts gelesen. Für eine Unterzeile ist kein Platz, die Engine lässt sie weg. Statt einer ganzen Szene zeigt der Streifen einen Bildausschnitt, der auch in 90 Pixeln Höhe erkennbar bleibt, und der Button bekommt einen eigenen Platz am Ende der Zeile.^[3]

Querformat: geteilte Fläche

Bild auf der einen Seite, Überschrift und Button auf der anderen. Das Motiv steht auf der vom Text abgewandten Seite, damit kein Text über Gesichtern oder Produkten liegt. Eine kurze Unterzeile hat hier Platz.

Quadrat: klar gestapelt

Überschrift, Bild oder Angebot, Button und Logo folgen in klarer Reihenfolge. Nach dem Bild ist die Überschrift das größte Element; bei 200 bis 300 Pixeln Breite heißt das: kurze, kräftige Wörter.

Hochformat: wie ein Plakat

Das Bild nimmt die eine Hälfte ein, der Text die andere, der Button kommt zuletzt. Die Überschrift darf zwei oder drei Zeilen lang sein, statt auf eine Zeile verkleinert zu werden.

Säule: von oben nach unten

Logo, Überschrift, Bild und Button stehen untereinander, das Auge wandert einmal nach unten. Die Überschrift bricht in kurze Zeilen mit ein oder zwei Wörtern um. Gerade im Deutschen lohnt hier ein kurzes Wort statt eines langen Kompositums, das sonst getrennt werden müsste. Der Button sitzt ganz unten, so breit, wie die Spalte es zulässt.^[4]

Was gleich bleibt

Komponieren heißt nicht, für jedes Format eine neue Idee zu erfinden. Konzept, Bildwelt, Farben und Botschaft bleiben im ganzen Set gleich, damit die Kampagne auf jeder Fläche wiedererkannt wird. Was sich ändert, sind Anordnung, Bildausschnitt, Schriftgröße und die Länge der Textfassung. Das unterscheidet ein komponiertes Set von einer Sammlung von Einzelentwürfen, die zwar in jede Größe passen, aber nicht mehr nach einer Kampagne aussehen.

728 × 90

160 × 600

Die Untergrenze: Mindestschriftgröße

Skalieren scheitert nicht nur an leeren Flächen, sondern an der Lesbarkeit. In Sizewright liegt die Mindestschriftgröße bei 4 % der kürzeren Seite und bei mindestens 10 Pixeln:

Der Unterschied zwischen Display und Social ist gewollt: Ein 1080 Pixel breites Feed-Bild wird auf dem Smartphone verkleinert dargestellt, also muss die Schrift in der Datei entsprechend größer sein. Zurück zur Rechnung oben: Der auf 4 Pixel geschrumpfte Fließtext liegt weit unter jeder dieser Grenzen.

Text in drei Längen

Eine neue Anordnung allein reicht nicht, wenn der Text nicht passt. Deshalb schreibt Sizewright jede Überschrift in drei Längen, kurz, mittel und lang, die optionale Unterzeile ebenfalls in drei Längen und den Button in einer kurzen und einer langen Fassung.^[6] Die Engine setzt den Text in einem echten Browser ein, mit bis zu zehn Versuchen. Passt er nicht, greift sie zuerst zum kurzen Button, dann zu kürzeren Fassungen von Unterzeile und Überschrift, und erst zuletzt lässt sie optionale Zeilen weg. Für jedes Format rendert sie zwei Layout-Varianten und behält die bessere.^[2]

Komponieren mit Sizewright

Sizewright baut jedes Konzept auf einer von zwölf Layout-Familien auf, und jede Familie ist für alle fünf Formen gestaltet.^[6] Wie das aussieht, zeigen die Vorlagen, etwa das Geteilte Feld in jeder Form. Welche 37 Formate dazugehören und wie sie entstehen, steht unter Alle Formate; Maße und Sicherheitszonen jeder Größe finden Sie in der Übersicht der Bannergrößen.