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.

image anzeigen
image anzeigen
image anzeigen
image anzeigen
30 sekunden dauern
30 sekunden dauern
html5 maker
html5 maker
html5 maker
banner erstellen
banner erstellen
banner erstellen

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 & Leaderboards sind Querformat Display Anzeigen

  • 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

A Ad
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.

Im Wesentlichen ist Canvas eine Bitmap-Rendering-Engine, und die Zeichnungen sind endgültig und können nicht in der Größe geändert werden. Darüber hinaus sind auf Canvas gezeichnete Objekte nicht Teil des DOM der Webseite.

Innerhalb einer Webseite können Sie Canvas-Elemente mithilfe des Tags 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 × 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:

  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