HTML5 Banner

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.

hinzufügen. Diese Elemente können dann mithilfe von JavaScript erweitert werden, um Interaktivität zu erstellen. Weitere Informationen finden Sie unter diesem Link.

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.

  1. HTML5 Banner
  2. HTML5 Banner Größen & Formate
  3. HTML5 Banner mit Google Web Designer
  4. HTML5 Banner mit Adobe Photoshop
  5. 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 × 200Small Square
240 × 400Vertical Rectangle
250 × 250Square
250 × 360Triple Widescreen
300 × 250Inline Rectangle
336 × 280Large Rectangle
580 × 400Netboard
Skyscraper 
120 × 600Skyscraper
160 × 600Wide Skyscraper
300 × 600Halbseitige Anzeige
300 × 1.050Hochformat
Leaderboard 
468 × 60Banner
728 × 90Leaderboard
930 × 180Top Banner
970 × 90Large Leaderboard
970 × 250Billboard
980 × 120Panorama
Mobil 
300 × 50Mobiles Banner
320 × 50Mobiles Banner
320 × 100Groß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.

AnzeigenumgebungBeim 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öffentlichenIn Google Web Designer:

 

  1. Klicken Sie auf die Schaltfläche Veröffentlichen.
  2. Wählen Sie Lokal veröffentlichen aus.
  3. 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.

HTML5 Banner mit Adobe Photoshop

HTML5 Banner Beispiele & Examples