Korrekte Banner-Erstellung

Bei der Banner-Erstellung kommt es neben dem richtigen Einbau des clickTag und einem ansprechenden Design, noch auf weitere Punkte an. Ein wichtiger ist die Auswahl der Banner-Formate. Welche Größen braucht man wirklich und welche nicht? Welche Formate sind am sinnvollsten? Pauschal kann man diese Frage leider nicht beantworten, denn es kommt immer auf die Art der Kampagne an. Soll es eine Desktop- oder eine Mobile-Kampagne werden? Unsere Erfahrung zeigt aber, dass man mit einem Mix unterschiedlicher Formate die besten Ergebnisse erzielt.

Die wichtigsten Banner-Größen im Überblick:

Mobile: Interstitial (320×480), Mobile Leaderboard (300×50/320×50)
IAB: Wide Skyscraper (160×600), Medium Rectangle (300×250), Leaderboard (728×90)
High-Impact:Half Page Ad (300×600), Billboard (970×250)
Native Ads: a. 1200×627

Welche Banner-Arten gibts es?

Es gibt zwei Arten von Bannern – animierte und statische. Animationen kann man mit HTML5/CSS3 und GIF erstellen. Von Flash-Animation wird abgeraten, da diese auf Mobil-Geräten kaum unterstützt werden. Statische Banner sind meist im GIF (nicht animiert), JPG oder PNG Format.

Animierte HTML5-Banner:

Jeder Ad Server/Banner-Plattform arbeitet mit unterschiedlichen Spezifikationen/Richtlinien, wie Banner gestaltet und aufgebaut sein müssen. Werden diese nicht eingehalten oder ignoriert wird die Kampagne nicht richtig ausgespielt oder die Banner können im schlimmsten Fall gar nicht erst hochgeladen werden. Wir, die esc mediagroup, arbeiten mit MediaMath und Adspirit. Folgende Kriterien sind für uns wichtig:

Aufbau:

Die Gesamte ZIP-Datei (Bilder, CSS, JS und HTML) darf pro Banner-Format max. 2MB groß sein. Die ganze Animation darf nicht länger als 30 Sek dauern und max. 2x loopen/wiederholt werden (dabei dürfen die 30 Sek aber nicht überschritten werden).

Hinterlegen Sie im Header immer die Maße des Banners. Am besten so:und achten Sie darauf, dass ein CTA-Button (Call to Action) vorhanden ist. Der User muss wissen, was er machen soll! Sollten Sie einen weißen Hintergrund verwenden, legen Sie unbedingt eine Border/einen Rand um das Banner, da es sich sonst ggf. nicht deutlich genug von der Webseite abgrenzt, in der es eingebunden wird. Das könnte zu Ausspielungsproblemen führen.

Zusammengefasst heißt das:

Max Größe ZIP 2 MB
2x Loopen – Max 30 Sek.
Bannermaße hinterlegt?
CTA vorhanden?
Rahmen um Banner nötig?

Ordnerstruktur:

Achten Sie darauf, dass Sie Dateinamen ohne Umlaute, Sonder- und Leerzeichen wählen. Ggf. kann die DSP diese sonst nicht richtig lesen. Die index.html Datei muss im root-verzeichnis des Banners liegen. Weitere Ordner wie „images/img“, „css“ oder „javascript/js“ sind in Ordnung (achten Sie nur darauf, dass die Verlinkung aus index.html korrekt ist!).

Zusammengefasst heißt das:

Dateiname OHNE Umlaute, Sonder- und Leerzeichen
html im root-Verzeichnis
Ordner wie „images/img“, „css“ oder „javascript/js“ i.O.

clickTag:

Die größte Herausforderung bei der korrekten HTML5-Banner-Erstellung ist wohl das clickTag. Hier kommt es auf vor allem auf den richtigen Einbau der Script-Datei aber auch des a-Tags an. Achten Sie auch unbedingt auf die Groß- und Kleinschreibung des Tags!

Je nach DSP gelten hier unterschiedliche Anforderungen. Nach Kampagnen Planung bekommen Sie diese aber im Detail von uns mitgeteilt.

HTML-Code:

Der HTML-Code eines Banners (300×600) würde also ca. so aussehen:

<!doctype html>

<html>

<head>

<meta charset=“utf-8″>

<title>Josera 300×600</title>

<meta name=“ad.size“ content=“width=300,height=600″>

<meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>

<link href=“css/style.css“ rel=“stylesheet“ type=“text/css“ />

</head>

<body style=“margin:0;padding:0;“>

<script type=“text/javascript“>[clickTAG Script]</script>

<!– Banner HTML –>

<div>

<a href=“#“ onclick=“window.open(clickTAG, ‚_blank‘);“>

Banner Inhalt / HTML Code

</a>

</div>

<!– Banner HTML ENDE –>

</body>

</html>

Zusammengefasst heißt das:

Dateiname OHNE Umlaute, Sonder- und Leerzeichen
html im root-Verzeichnis
Ordner wie „images/img“, „css“ oder „javascript/js“ i.O.
Max Größe ZIP 2 MB
2x Loopen – Max 30 Sek.
Bannermaße hinterlegt?
CTA vorhanden?
Rahmen um Banner nötig?

Fallback:

Zu HTML5-Bannern gehören immer auch Fallbacks. Diese werden, wie der Name schon sagt, im Notfall angezeigt. Wenn also der HTML5-Banner aus irgendeinem Grund nicht geladen werden kann, wird anstatt einer leeren Fläche das Fallback angezeigt. Da es meist eine statische Alternative ist, werden meist JPG oder PNG Banner verwendet. Hier ist zu beachten, dass die Dateigröße und der Name die der HTML5-Datei entspricht und NICHT größer als 110KB ist. Legen Sie das Fallback NICHT in den ZIP-Ordner des HTML5 Banners, sondern bitte separat ab!

Zusammengefasst heißt das:

Nur bei HTML5-Banner nötigt
Format: GIF, JPG oder PNG
Max 110KB
Identischer Dateiname und Format wie HTML5-Banner
- zip (HTML5-Banner)
- jpg (Fallback)
Fallback liegt NICHT im HTML5-Banner-Zip sondern separat!

Animierte GIF-Banner:

Auch hier hat natürlich jeder Ad Server seine eigenen Richtlinien. Dennoch werden diese überall ähnlich sein. Animierte GIF-Banner dürfen, wie die HTML5-Banner nicht länger als 30 Sek animieren und nicht mehr als 2 Wiederholungen/Loops haben. Aber sie dürfen NICHT größer als 110KB sein! Achten Sie hier auch auf einen aussagekräftigen CTA und fügen Sie ggf. eine Kontur um das Banner, falls der Hintergrund zu hell ist.

Zusammengefasst heißt das:

Max Größe 110KB
2x Loopen – Max 30 Sek.
CTA vorhanden?
Rahmen um Banner nötig?

Statische GIF/JPG/PNG-Banner:

Statische Banner dürfen wie animierte GIF-Banner nur 110KB groß sein. Da diese nicht animieren, müssen Sie hier die Animationskriterien nicht beachten. Sie sollten aber auch hier auf einen CTA und ggf. eine Border achten.

Zusammengefasst heißt das:

Max Größe 110KB
CTA vorhanden?
Rahmen um Banner nötig?

Native Ads / Bild-Text-Kombination

Wie der Name schon sagt, handelt es sich hier um eine Kombination aus einem Bild und dem passenden Text dazu. Diese Anzeigen integrieren sich optisch in die eingebundene Webseite und werden auf den ersten Blick nicht als reine Werbeblocks war genommen. Natürlich sind diese Anzeigen als Werbung gekennzeichnet. Für diese Anzeigen werden Bild- und Text-Material gesondert benötigt. Auf dem (Titel-)Bild sollten Logos, Texte und detailreiche Darstellungen im vermieden werden. Auch darf KEIN CTA vorhanden sein. Benennen Sie die Datei OHNE Umlaute, Sonder- und Leerzeichen. Die Dateigröße darf 200KB nicht übersteigen und sollte im JPG oder PNG Format geliefert werden.

Zusammengefasst heißt das:

Max Größe 200KB
Dateiname OHNE Umlaute, Sonder- und Leerzeichen
Kein CTA!
Logos, Text und detailreiche Darstellungen im Bildmaterial vermeiden

Folgende Abmaße werden bei den Bildern benötigt:

1200×627 (am wichtigsten)
500×500
640×480
640×360
712×400

Die Texte sollten folgende längen aufweisen:

Titel-Text: Max. 50 Zeichen, empfohlen 25 Zeichen
Body-Text: Max. 100 Zeichen, empfohlen 70 Zeichen
„Sponsored by“ (Welche Marke wirbt hier?): Max. 25 Zeichen

Fazit:

Beim Design und in der Kreation Ihrer Banner ist Ihnen keine Grenze gesetzt. Lediglich bei der Umsetzung sollten Sie auf ein paar Details achten. Scheuen Sie sich nicht uns anzusprechen, sollten Sie Fragen dazu haben! Auch unterstützen wir sie gern sowohl beim Design/bei der Kreation, als auch bei der Umsetzung/Programmierung der Banner. Wir erstellen Ihnen dazu jeder Zeit gern ein individuelles Angebot. Fragen Sie hier an.

Mehr zu diesem Thema