Bitte beachten Sie folgende Punkte:
1. Legen Sie bitte pro Banner nur eine Ordnerebene im Projektordner an
2. Die Banner sollten der Benennung
"Kunde_Kampagennummer/Kampagnenname/
Datum_Werbemittelbezeichnung_Pixelgröße“ entsprechen.
Der mittlere Teil kann dabei variabel gestaltet werden:
Kunde_XY_Rabattaktion_Dezember_SKY_160x600
Kunde_XY_Herbst2021_BB_970x250
3. Folgende Abkürzungen sind für die Werbemittelbezeichnungen zu beachten:
Abkürzung | Bezeichnung | Maße |
BB | Billboard | 970px x 250px |
MR | Medium Rectangle | 300px x 250px |
SB | Superbanner | 728px x 90px |
SKY | Skyscraper | 160px x 600px |
Für alle Werbemittel gilt eine maximale Dateigröße von 200kb. Handelt es sich um Werbemittel mit einem Logocontainer, verringert sich die Dateigröße auf 100 kb.
Bei Fragen zu weiteren Formaten kommen Sie gerne auf uns zu.
4. Spezifikationen zum Bannerinhalt
Legen Sie als Sprache „Deutsch“ in der HTML Datei fest:
< html lang= "de" >
Legen Sie die Meta Ad Size im <head> der HTML Datei fest
<meta name="ad.size" content= "width=X, height=Y">
Die Elemente des Banners werden im <body> der HTML Datei in einem umschließenden Content-<div> deklariert. Dafür können Klassen sowie IDs verwendet werden.
Bei der Benennung der Elemente sollte darauf geachtet werden, dass eindeutige Bezeichnungen gewählt werden, durchgängig Kleinbuchstaben, sowie keine Umlaute und Sonderzeichen verwendet werden. Um zu verhindern, dass Elemente des Banners Probleme auf der ausgespielten Website verursachen, kann ein individuelles Präfix vor jeden Namen angestellt werden, um Namensdopplungen zu verhindern. Anstelle der einfachen Bezeichnung „id=‘logo‘“, könnte bei-
spielsweise „id=‘kunde _logo‘“ verwendet werden.
Auf internal und inline CSS sollte in der HTML Datei verzichtet werden.
Im an das Content-<div> anschließenden Script-Teil, sollen die zuvor deklarierten Elemente des Banners mit JavaScript animiert werden. In Ausnahmefällen können dazu ebenfalls die CSS-Animationen verwendet werden. Externe Libraries oder Frameworks können, nach Absprache, zusätzlich im Banner genutzt werden.
Die Banneranimation darf eine Laufzeit von 30 Sekunden nicht überschreiten. Zum Reglementieren der Laufzeit kann eine If-Anweisung verwendet werden, die sich an einer Zählervariable orientiert. Die Banneranimation kann in Loops mehrfach ablaufen, sofern die maximale Laufzeit nicht überschritten wird. Dabei sollte darauf geachtet werden, dass die CSS-Eigenschaften aller Elemente zurückgesetzt werden, bevor der Banner erneut startet. Dies kann Beispielsweise über
„logo.removeAttribute(‘style‘);“ umgesetzt werden.
Ein möglicher Aufbau mit Loop und Zählervariable wäre hierbei im Auszug:
var loop_counter = 0;
animateLoop();
function animateLoop(){
Banneranimation
If (loop_counter < 1) { → an dieser Stelle stoppt der Banner nach einem Durchlauf
Banneranimation
loop_counter++;
animateLoop();
}
}
5. Spezifikationen zu den Parametern
Im Content-<div> muss jeweils ein Parameter für den Kunden und dessen Standort bereitgestellt werden. Dieser wird später im Buchungsprozess über das System mit den Daten der Kunden befüllt. Der jeweilige Parameter wird dabei im Code in geschweiften Klammern angegeben und darf keine Großbuchstaben enthalten. Er kann anschließend über die externe CSS-Datei verändert werden. Neben dem Standort des Kunden könnte zusätzlich der Name des Kunden oder das Logo eingebaut werden. Ein solcher Code für den Standort, den Kundennamen und das Logo des Kunden könnte folgender Ansicht entsprechen:
<div id="city_container">
<span id="city"> {{city}} </span>
</div>
<div id="customer_container">
<span id="customer">
{{customer}}
</span>
</div>
<div id="logo_container">
<img id="logo" data-param-name="logo" src="logo.png">
<div/>
⚠️ Der Zusatz data-param-name=”parametername” muss zwingend in den Logo-Parameter eingebaut werden, da unser System nur damit weiß, dass das Logo bzw. eine Bilddatei getauscht werden soll. „parametername„ muss hier entsprechend angepasst werden.
Beim Logo-Parameter muss in der CSS-Datei folgendes berücksichtigt werden:
Der umschließende Logo-Container hat zu Beginn der Banneranimation für gewöhnlich die volle Breite und Höhe* des Banners. (Höhe* = Bannerhöhe – die Höhe des City-Containers)
Es muss angegeben werden, dass sich das Logo in diesem Bereich horizontal sowie vertikal mittig positioniert (display: flex; justify-content: center; align-items: center;). Dazu muss beim Logo-Parameter ergänzt werden „display: block“.
Margin-left und margin-right werden beim Logo auf “auto” gesetzt.
Das Logo muss eine maximale Breite und Höhe besitzen, die nicht größer sein darf, als der Logo-Container selbst. Diese muss gegebenenfalls in der Animation verändert werden, wenn die Größe des Logo-Containers kleiner wird, als die max. Höhe und Breite des Logos.
Untenstehend ein Beispiel für den Code des Logo-Parameters:
HTML:
<div id="ax_logo_container">
<img id="ax_logo" data-param-name="logo" src="logo.png"
</div>
CSS:
#ax_logo_container {
position: absolute;
left: 20px;
top: 0px;
width: 930px;
height: 210px;
display: flex;
justify-content: center;
align-items: center;
}
#ax_logo {
max-width: 210px;
max-height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
Beim City-Parameter muss in der CSS-Datei folgendes berücksichtigt werden:
Der umschließende City-Container hat zu Beginn der Banneranimation für gewöhnlich die volle Breite des Banners. Die Höhe ist durch das Design und die Gestaltung des Banners definiert.
Es muss angegeben werden, dass sich die Standortangabe in diesem Bereich horizontal sowie vertikal mittig positioniert (display: flex; justify-content: center; align-items: center;). Dazu muss bei dem City-Parameter ergänzt werden „display: block“.
Die gängigen Angaben zur Schrift werden beim City-Container definiert (font-family, font-size, color, font-weight,…). Hier können gerne eigene Schriftarten definiert werden.
Padding-left und padding-right können ebenfalls angegeben werden, um zu verhindern, dass lange Städtenamen den Rand des Containers, und damit des Banners, erreichen.
Die Schriftgröße sollte nicht zu groß angesetzt werden, da berücksichtigt werden muss, dass auch sehr lange Städtenamen vorkommen können, die mit demselben Platz auskommen müssen. Auch unter der Voraussetzung, dass sich der City-Bereich im Laufe der Banneranimation verkürzen kann.
Im City-Container kann zusätzlich die Angabe „hyphens: auto;“ gesetzt werden, um logische Umbrüche bei langen Städtenamen zu unterstützen.
Untenstehend ein Beispiel für den Code des City-Parameters:
HTML:
<div id="ax_city_container">
<span id="ax_city">{{city}}</span>
</div>
CSS:
#ax_city_container {
position: absolute;
bottom: 0px;
left: 0 px;
width: 970px;
height: 40 px;
background-color: #dc676c
color: white;
font-size: 15px;
text-aling: center;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 1px 1px 1px #00000029;
}
#ax_city {
display: block;
}