Banner in der E-Mail-Signatur: Formate, Dateigröße und Best Practices

Das Banner ist der Teil der Signatur, der eine zeitlich begrenzte Botschaft transportiert: eine Veranstaltung, eine Stellenausschreibung, eine Neuheit. Technisch gelten ähnliche Vorgaben wie beim Logo, gestalterisch aber die eines Werbemittels, das nur eine Sekunde lang wahrgenommen wird.

Die Abmessungen

Die Breite des Banners wird durch die Breite der Signatur begrenzt – und diese wiederum durch mobile Bildschirme.

Ein höheres Banner drängt sich in die Nachricht und wirkt wie eine Werbeanzeige. Ein Banner, das schmaler ist als die Signatur, erzeugt einen unschönen Versatz: Richten Sie seine Breite an der des Signaturblocks aus.

Wie beim Logo wird in doppelter Größe exportiert – 1.200 × 200 px für eine Anzeige in 600 × 100 –, und die Abmessungen werden über die HTML-Attribute width und height festgelegt. Andernfalls zeigt Outlook das Bild in seiner Originalgröße an. Details dazu finden Sie unter HTML-E-Mail-Signatur.

Die Dateigröße

Bleiben Sie unter 60 KB für ein statisches Banner und unter 150 KB für ein animiertes GIF.

Es geht dabei nicht um Bandbreite, sondern um die wahrgenommene Darstellung. Bilder in einer E-Mail laden nach dem Text: Ein schweres Banner erscheint verspätet, und der Empfänger sieht unter der Signatur zunächst einen leeren Rahmen. Das wirkt wie eine schlecht gebaute Nachricht.

Eine verlustfreie PNG-Komprimierung halbiert die Dateigröße meist ohne sichtbaren Unterschied. Für ein fotografisches Motiv ist JPEG mit Qualität 80 ein guter Kompromiss.

Die Gestaltungsregeln

Eine einzige Botschaft. Das ist die am häufigsten gebrochene Regel. Ein Banner, das eine Messe und ein Whitepaper und eine offene Stelle ankündigt, vermittelt nichts davon. Wenn Sie drei Botschaften haben, planen Sie drei aufeinanderfolgende Kampagnen.

Eine kurze Überschrift. Fünf bis acht Wörter. In der tatsächlichen Anzeigegröße – die der E-Mail-Client oft noch verkleinert – wird eine lange Überschrift unleserlich.

Eine eindeutige Handlungsaufforderung. „Jetzt anmelden“, „Angebote ansehen“, „Bericht herunterladen“. Die Formulierung muss sagen, was beim Klick passiert.

Ausreichender Kontrast. Das Banner wird in einer Sekunde erfasst, manchmal auf einem Smartphone im Freien. Dunkler Text auf hellem Grund oder umgekehrt – aber kein Grau auf Grau.

Luft um den Text. Ein Innenabstand von mindestens 16 px. Text, der am Rand klebt, wirkt versehentlich.

Die klickbare Fläche

Das gesamte Banner muss klickbar sein, nicht nur der Bereich, der wie ein Button aussieht. Es handelt sich um ein Bild, das in einen Link eingebettet ist:

<a href="https://beispiel.de/messe" style="display:block;text-decoration:none">
  <img src="https://cdn.beispiel.de/banner@2x.png"
       width="600" height="100"
       alt="Vivatech – Halle 2, Stand B34. Jetzt Termin vereinbaren."
       style="display:block;border:0;width:600px;height:100px" />
</a>

Zwei Details sind wichtig. Das Attribut alt muss die Botschaft und die Aktion beschreiben: Das sieht ein Empfänger, dessen Client Bilder blockiert, und das liest ein Screenreader vor. Und border:0 entfernt den blauen Rahmen, den manche Clients um verlinkte Bilder legen.

Gut zu wissen: Verwenden Sie für jede Kampagne eine eigene, nachverfolgbare Ziel-URL. Sonst können Sie den Traffic nicht dem richtigen Banner zuordnen – siehe ROI messen.

Sonderfall Animation

Ein animiertes GIF zieht mehr Aufmerksamkeit auf sich, doch manche Outlook-Versionen zeigen nur das erste Bild an. Daraus folgt eine unumstößliche Regel: Die Kernbotschaft muss im ersten Bild stehen, die Animation dient nur der Ergänzung.

Das Thema, einschließlich Dateigröße und Anzahl der Wiederholungen, behandelt der Artikel animiertes Banner in der Signatur.

Was ein gutes Banner von guter Werbung unterscheidet

Ein Unterschied in der Tonalität verdient Beachtung. Das Banner erscheint unter der Signatur einer Person, in einer geschäftlichen Nachricht an jemanden, der diese Person kennt. Ein aufdringlicher Werbeton wirkt dort deplatziert und fällt auf den Absender zurück.

Am besten funktionieren Banner, die weniger nach Werbung als nach nützlicher Information aussehen: ein Messetermin, eine offene Stelle, ein verfügbarer Bericht. Saisonale Formate finden Sie in 12 Ideen für Signaturkampagnen, den allgemeinen Rahmen des Kanals unter E-Mail-Signatur-Marketing.

Prüfen Sie schließlich die Darstellung vor dem Ausrollen. Ein Banner, das im Designtool perfekt aussieht, kann in einem E-Mail-Client beschnitten oder skaliert erscheinen: Die Vorschau für mehrere Clients im Editor erspart Ihnen die böse Überraschung, nachdem die Signatur an dreihundert Personen gegangen ist.