HTML5 Banner ermöglichen dynamische Inhalte und komplexe Animationen für Ihre Display Werbung und Bildanzeigen bereitzustellen. Das Spektrum der Möglichkeiten Ihrer HTML5-Banner mit Google Adwords und HTML5 ist heute schon sehr umfangreich und erlaubt Werbetreibenden unterschiedliche Zielgruppen auf unterschiedlichen Plattformen mit performantem Rich-Media Werbeanzeigen anzusprechen.

HTML5-Anzeigen sind der Ersatz für Flash-basierte Anzeigen, die Designer häufig erstellen, wenn sie Animationen oder Interaktivität in ihrem Creative verwenden möchten. Flash wurde von Anfang der 2000er Jahre bis 2016 intensiv genutzt. Die Flash-Unterstützung begann nach 2010 beträchtlich zu sinken, da mobile Betriebssysteme wie Apples iOS Flash nicht unterstützten und Googles Android nur eine begrenzte Unterstützung hatte.

HTML5 Banner ermöglichen Animationen und interaktive Inhalte, sind aber auch reaktionsschnell / anpassungsfähig, was bedeutet, dass Ihr Creative in jedem Browser, Betriebssystem oder Gerät gut aussieht. Da HTML5-Anzeigen auf HTML5-Code basieren, kann jedes Gerät, das HTML5 rendern kann, auch Ihre Anzeige rendern.

Ein HTML5 Banner besteht aus mehreren Dateien – einschließlich der Bildkomponenten, der Videokomponente sowie der .html-Quelldatei. Die .html-Datei verknüpft die Quellen von Bildern und Videos und kann den gesamten Code enthalten, der für die Animation, responsive / adaptive Design-Funktionen von HTML5-Anzeigen benötigt wird.

Was sind die Vorteile der Verwendung von HTML5 über Flash oder statische Bilder? HTML5-Anzeigen können so erstellt werden, dass sie alle Browser und Betriebssysteme unterstützen und perfekt in nativen Apps laufen.

Google Adwords Display Formate

HTML5 Banner Größen Übersicht

Standard Banner Ads

AdBundle
Banderole Ad
Baseboard Ad
Billboard Ad
Expandable
Floor Ad
HalfPage Ad
Layer Ad
Maxi Ad
Medium Rectangle
Sidebar Ad
Skyscraper
Sticky Maximum Skyscraper
Superbanner
Tandem Ad
Wallpaper
Wide Skyscraper

Reactangles & Square

Quadratische Anzeigen im Google Display Netzwerk

Square: 250 x 250
Small Square: 200 x 200
Inline Rectangle: 300 x 250
Large Rectangle: 336 x 280

Skyscraper

Skyscraper sind hochformatige Anzeigen im Google Display Netzwerk

Skyscraper: 120 x 600
Wide Skyscraper: 160 x 600
Half Page: 300 x 600

Banner & Leaderboard

Banner & Leaderboards sind Querformat Display Anzeigen

Banner

Banner: 468 x 60
Half-Banner: 234 x 60
Mobile Banner: 480 x 32
Large Mobile Banner: 320 x 100
Top Banner: 930 x 180

Leaderboard

Panorama: 980 x 120
Billboard: 970 x 250
Large Leaderboard: 970 x 90
728 x 90: Leaderboard
320 x 50: Mobile Leaderboard

Portrait: 300 x 1.050
Triple Widescreen: 250 x 360
Netboard: 580 x 400

Ad Specials

Bracket Ad – extended
Content Wallpaper
Dynamic Fireplace
Dynamic Wallpaper
Fireplace
Fireplace + Layer
Floor Ad XXL
Fullscreen Interstitial
Fullscreen Interstitial + Reminder
Homepage Event
Homepage Event XXL
Pushdown Ad
Sidekick Ad
Sticky Fireplace
Sticky Wallpaper
Understitial
Wallpaper + Pushdown Ad
Wallpaper + Sidekick Ad
Video Ads
InFlow Ad
PreRoll/PostRoll Video Ad bis 30 Sek

Werberichtlinien für HTML5 Banner in Google Adwords

Was ist HTML5 Canvas?

Canvas ist ein neues Element in HTML5, das APIs bereitstellt, mit denen Sie Grafiken, Diagramme, Bilder und Animationen dynamisch generieren und rendern können. Durch das Vorhandensein der Canvas-API für HTML5 wird die HTML5-Plattform durch zweidimensionale Zeichenfunktionen gestärkt. Diese Funktionen werden auf den meisten modernen Betriebssystemen und Browsern unterstützt.

Der neue HTML5-Canvas-Dokumenttyp

Mit können Sie ein HTML5-Canvas-Dokument mit umfangreichen Grafiken, Grafiken, Animationen usw. erstellen. Ein neuer Dokumenttyp (HTML5 Canvas) wurde zu Animate hinzugefügt, der native Unterstützung für die Erstellung von umfangreichen und interaktiven HTML5-Inhalten bietet. Das bedeutet, dass Sie die herkömmliche Animationszeitleiste, den Arbeitsbereich und die Tools zum Erstellen von Inhalten verwenden können, aber eine HTML5-Ausgabe erstellen können. Mit ein paar einfachen Klicks können Sie ein HTML5-Canvas-Dokument erstellen und eine voll funktionsfähige Ausgabe generieren. Zu guter Letzt sind die Dokument- und Veröffentlichungsoptionen in Animate so voreingestellt, dass HTML5-Ausgaben generiert werden.

ist in CreateJS integriert, das über HTML5 interaktive Inhalte in offenen Webtechnologien ermöglicht. Wir generiert HTML und JavaScript für Inhalte (einschließlich Bitmaps, Vektoren, Formen, Sounds, Tweens usw.), die auf der Bühne erstellt wurden. Die Ausgabe kann auf jedem Gerät oder Browser ausgeführt werden, der HTML5 Canvas unterstützt.

Animieren und die Canvas-API

Animate veröffentlicht in HTML5, indem die Canvas-API verwendet wird. Animate überträgt Objekte, die auf der Bühne erstellt wurden, nahtlos in ihre Canvas-Pendants. Durch die Bereitstellung einer 1-zu-1-Zuordnung von Animate-Features zu den APIs in Canvas können Sie mit Animate komplexe Inhalte in HTML5 veröffentlichen.

HTML5 Banner
HTML5 Banner Größen & Formate
HTML5 Banner mit Google Web Designer
HTML5 Banner mit Adobe Photoshop
HTML5 Banner Beispiele & Examples

Weiterführende Links

AMP Ads & AMP Banner
HTML5 Banner Tutorial

HTML5 Banner

Die Technologie HTML5 und CSS3

HTML5-Anzeigen ermöglichen auch responsive / adaptive Designs und sind berührungsempfindlich. Das bedeutet, dass Sie mit einem Touch-fähigen Gerät ein Creative erstellen können, mit dem Sie interagieren können. HTML5-Anzeigen verfügen über 3D-Funktionen (über WebGL) und unterstützen dynamische Inhaltskomponenten.

So erstellen Sie HTML5-Anzeigen

HTML5-Anzeigen erfordern traditionell, dass ein Entwickler den Code selbst schreibt. Dies kann jedoch zeitaufwendig sein. Designer können Design-Tools verwenden, um HTML5-Creatives zu erstellen, die die Notwendigkeit für manuelle Codierung reduzieren oder eliminieren. Wenn Sie Schwierigkeiten haben, HTML5-Anzeigen ohne Entwickler zu erstellen oder HTML5-Creatives effizient zu skalieren, melden Sie sich für eine kostenlose Testversion von Flexitive an. Mit Flexitive Design Cloud können Designer und Entwickler HTML5-Anzeigen schneller erstellen, indem sie eine Drag & Drop-Schnittstelle verwenden, die keine Codierung erfordert. Flexitive optimiert automatisch Bilder, Größen und Code, um mit den kleinstmöglichen Dateigrößen das Creative der höchsten Qualität zu erstellen. Es ist im Chrome-Browser verfügbar (das Gleiche gilt für Mac oder Windows) und ist Cloud-basiert, sodass Designer immer die neueste Version verwenden.

Was sind die Herausforderungen bei der Erstellung von HTML5-Anzeigen?

HTML5-Funktionen können je nach Browser und deren Versionen variieren. Das bedeutet, dass Sie Ihre Designs in verschiedenen Browsern testen müssen, um sicherzustellen, dass sie wie erwartet aussehen und funktionieren. HTML5-Design-Tools wie Flexitive reduzieren oder eliminieren die Notwendigkeit, jeden einzelnen Browser zu testen, da unser Entwicklungsteam sicherstellt, dass die Funktionen in jedem Browser funktionieren und der Code bei Bedarf automatisch angepasst wird.

Können Sie andere HTML5-Komponenten erstellen?

Ja, HTML5 beschränkt sich nicht auf das Erstellen von Anzeigen. Sie können auch responsive HTML5-Webkomponenten wie Kopfzeilen, Fußzeilen und Seitenleisten erstellen. Auch diese können sich an alle Bildschirmgrößen und -auflösungen anpassen, sodass sie auf Mobilgeräten und Desktops gut aussehen.

HTML5 Banner Größen & Formate

Übersicht aller verfügbaren HTML5 Banner Größen und Dateiformate

Unterstützte Anzeigengrößen
Quadratisch und rechteckig
200 × 200	Small Square
240 × 400	Vertical Rectangle
250 × 250	Square
250 × 360	Triple Widescreen
300 × 250	Inline Rectangle
336 × 280	Large Rectangle
580 × 400	Netboard
Skyscraper
120 × 600	Skyscraper
160 × 600	Wide Skyscraper
300 × 600	Halbseitige Anzeige
300 × 1.050	Hochformat
Leaderboard
468 × 60	Banner
728 × 90	Leaderboard
930 × 180	Top Banner
970 × 90	Large Leaderboard
970 × 250	Billboard
980 × 120	Panorama
Mobil
300 × 50	Mobiles Banner
320 × 50	Mobiles Banner
320 × 100	Großes mobiles Banner
Unterstützte Dateigröße	Maximal 150 KB
Dateityp	.zip In der ZIP-Datei müssen die HTML-Dateien für die Anzeige sowie ggf. Dateien mit den folgenden Dateitypen enthalten sein: .css .js .html .gif .png .jpg .jpeg .svg

HTML5 Banner mit Google Web Designer

HTML5-Anzeigen für AdWords, die mit Google Web Designer erstellt wurden, dürfen nur folgende Komponenten verwenden:

Interaktionsfläche
iFrame
Swipe-Galerie
Karussell-Galerie
360°-Galerie
Galerienavigation
Bildschaltfläche
Sprite Sheet

Weitere Einschränkungen von AdWords für HTML-Anzeigen finden Sie in den AdWords-Werberichtlinien.

Anzeigenumgebung	Beim Erstellen Ihrer Anzeige in Google Web Designer müssen Sie „AdWords“ als Anzeigenumgebung auswählen.
Unterstützte Komponenten	Interaktionsfläche iFrame Swipe-Galerie Karussell-Galerie 360°-Galerie Galerienavigation Bildschaltfläche Spritesheet
Für AdWords veröffentlichen	In Google Web Designer: Klicken Sie auf die Schaltfläche Veröffentlichen. Wählen Sie Lokal veröffentlichen aus. Laden Sie die soeben erstellte ZIP-Datei in AdWords hoch.
Einschränkungen	Erweiterbare Anzeigen werden nicht unterstützt. Alle Bilder in HTML5-Anzeigen müssen lokal gespeichert (keine verknüpften Bilder) und in der ZIP-Datei enthalten sein. Es werden nur Google-Webschriftarten unterstützt. Andere Webschriftarten werden nicht unterstützt. Bei Umgebungszielaktionen werden Timer und mehrere Exits nicht unterstützt. Bei HTML5-Anzeigen werden keine lokalen Speichermethoden unterstützt.