Was flackert da so auf meinem Bildschirm? Ist es ein Vogel? Ein Flugzeug? Nein, es ist ein programmatischer HPA-Banner mit variablem CTA und loopy Animation. Und weil sie so klickstark sind, gibt es kaum ein Monat, in dem wir sie nicht produzieren – sowohl below the line als auch direkt für dich.
Auch, wenn HTML-Banner für viele Kreative das red-headed stepchild im Werbemittelmix sind, braucht es sie in jeder umfassenden Online-Kampagne. Diese Kombination aus Kreativität und Technik ist genau der Ort, an dem wir uns wohl fühlen.
[Overlay für „red headed stepchild“: Übrigens: wir haben natürlich nichts gegen Rothaarige. Am liebsten arbeitet unsere Kollegin Melli an HTML-Bannern – genug gesagt?]
Was sind HTML-Banner?
HTML-Banner oder „Online-Banner“ sind digitale Werbemittel, die mit HTML5, CSS und JavaScript erstellt werden. Sie werden nach einheitlichem technischen Standard umgesetzt und lassen sich auf jeder Website (Mobile/Desktop) einbinden. Für schnelle Ladezeiten wird ihre Dateigröße stark begrenzt, was durch Komprimierung der einzelnen Files möglich ist. Größere Bilder und Videos können in der Anzeige auch extern nachgeladen werden.
Die korrekte Verlinkung mit den Zielseiten der Online-Kampagnen erfolgt durch das Setzen von Clicktags. Diese erlauben, dass die Klicks getrackt werden können und so die Performance der Kampagne gemessen wird. Am häufigsten werden Google ClickTags oder IAB ClickTags gesetzt.
Welche Formate sind für HTML-Banner typisch?
- Medium Rectangle: 300×250 Pixel
- Leaderboard: 728×90 Pixel
- Skyscraper: 160×600 Pixel
- Side Bar: 300×600 Pixel
- Half Page Ad: 300×600 Pixel
- Mobile Understitial: 300×600 Pixel
- Mobile: 320×50 Pixel
- Responsive: unterschiedlich, im Seitenverhältnis skalierbar
- Dynamisch: nicht proportionales Skalieren mit Mindestbreite
Zusätzlich gibt es unzählige Sonderformate, die teilweise richtig coole Site-Overhauls ermöglichen. Ein gutes Beispiel dafür war eine komplette Übernahme der Website derStandard als „tierhaltungsstandard“ für die AMA.
Worauf muss man bei der Umsetzung von HTML-Bannern achten?
HTML5 in IAB-Standard, 3 Loops á 10 Sekunden mit maximal 150kb? Check. Ja, das klingt erst mal verwirrend. Mit unserem jahrelang etablierten Workflow setzen wir Banner mit klarer Struktur um. Das bedeutet:
- Verwendete Assets (z.B. Bilder) effiziente komprimieren
- Schriften optimal als SVG einsetzen
- Auf Dateigrößen und Dauer von Animationen achten
- Clicktags korrekt implementieren
- Sonderfälle, beachten – zum Beispiel, dass der Browser Safari SVGs gerne mal falsch anzeigt.
Was bieten wir an?
Kreation
- Wenn wir sowieso deine Online-Kampagne kreieren, sind HTML-Banner ziemlich sicher ein Teil davon. Animationen, Videointegration und Audio: been there, done that. Gerne auch für dich.
- Du hast schon eine Agentur? Dann setzen wir deine Online-Banner als below the line Agentur entweder auf Basis bestehender Creatives um oder erstellen dir ein Konzept auf Basis deiner Sujets.
Programmierung
- Ganz einfach: wir produzieren die Banner so, wie sie laut Creative sein sollen. Effizient, nach IAB-Spezifikationen (IAB-Clicktag), für den Einsatz im Google Netzwerk (Google Clicktag) oder einfach als GIFs.
- Du brauchst komplexe Videobanner, integrierte Close-Buttons oder optionale Audio-Integration? Liefern wir gerne.
Projektmanagement
- 12 Sujets, 7 verschiedene Formate, insgesamt 84 Mutationen und das Ganze für 14 verschiedene Anbieter? Ahja, und bitte nach IAB-Standard und auch für Google-Spezifikationen. Wenn dir das zu viel war, bist du genau richtig bei uns. Wir haben viel Erfahrung damit, die Anforderungen großer Mediapläne zu managen.
- Gutes Projektmanagement in Projekten mit HTML-Bannern heißt, dass du uns gar nicht spürst.
Welche Projekte haben wir umgesetzt?
Zwischen 2020 und 2025 haben wir ca. 60 Banner-Projekte mit insgesamt über 500 verschiedenen Mutationen umgesetzt – teils direkt für unsere Kund:innen oder für Media-Agenturen.
Darunter waren etwa Banner für die jährlichen Schwerpunkte der sBausparkasse, für Kampagnen der Wirtschaftskammer Österreich, für die Podcast Awards von Ö3 oder für Lidl Österreich.
Hotline
Du bist so weit gekommen, jetzt kannst du uns auch gleich anschreiben. Schreib uns eine Mail. Oder ruf uns direkt an!
Was bietet wir nicht an?
Wir hosten Banner nicht selbst und bieten keine direkte Ausspielung von HTML-Bannern an. Wir sind keine Mediaagentur, vermitteln aber gerne Kontakte zu unseren Partnern im Media-Bereich.
Warum bieten wir kein Banner-Hosting an?
Online-Kampagnen mit klickstarken HTML-Bannern brauchen ein starkes Hosting. Das erfolgt meist über ein Content-Delivery-Network (CDN) für das man einen leistungsfähigen Server benötigt, der auf rasche externe Ladezeiten spezialisiert ist. Dafür vermitteln wir gerne Mediaagenturen als Ansprechpartner oder übernehmen die Abstimmung direkt.
Wie setzen wir HTML-Banner um?
- Korrektes Programm: Wir nutzen den Google Web Designer (Freeware-HTML-Editor von Google).
- Abstimmung der Spezifikationen: Zuerst werden die Spezifikationen festgelegt: die technologische Basis, ob der Banner responsive umgesetzt wird, ClickTag-Informationen, Bannerformate, Dateigröße (Standard: 150KB).
- Layout: Design der Schritte des Banners inklusive Beschreibung der Animation.
- Assets vorbereiten: Da es eine maximale Dateigröße gibt, die sehr gering ist (Standard: 150KB), müssen die Assets eine möglichst geringe Dateigröße haben. Wir verwenden (wenn möglich) immer SVGs, da die scharf sind und wenig KB haben.
- Technische Umsetzung: Sobald die Assets fertig exportiert sind, kann der Banner im Google Web Designer aufgebaut werden und die Animation mithilfe von Keyframes erstellt werden.
- Bildschirmaufnahme oder Testseite: Damit unsere Kunden die Banner vorab sehen können laden wir sie auf unsere Klickdrauf-Seite oder machen eine Bildschirmaufnahme.
- Export der fertigen Banner: Alle Bannerformate werden als ZIPs exportiert und an die Media-Agentur weitergegeben.
Das könnte dich interessieren
Web-Projekte bei k25
Websites, Tools, Portale, Shops. Als Digitalagentur bieten wir fast jede Art von Web-Lösung an, die du dir vorstellen kannst. Handgemacht mit KI-Power. Bestätigt durch langjährige Partnerschaften.
Der Webshop der Babypflege-Marke Gut gemacht
Wie verkauft man hochwertige Babypflege online? Sicher nicht mit Countdown-Timern und blinkenden Rabatt-Bannern. Unser Ansatz: mit Vertrauen. Für die Wiener Pflegemarke Gut gemacht haben wir eine Website samt Webshop entwickelt, die die liebevoll gestalteten Produkte erfolgreich an die Mamas und Papas bringt.
Below the line
Below the Line ist alles, das im Marketing-Alltag und rund um Kampagnen anfällt: Werbemittel, Adaptionen und Speziallösungen. Schnell, sauber und CD-sicher umgesetzt. Bei k25 bekommst du genau das – ohne “müssen wir erst konzeptionell denken”.
Für Marketingverantwortliche | Executive
Du liest das hier wahrscheinlich zwischen zwei Meetings, einen pre-made Pastasalat in der Hand, der besser aussieht als er schmeckt. Der vierte Kaffee des Tages steht daneben und ist schon kalt. Die Teams-Notifications stapeln sich. We’re here to help!
