Anzeige

Technische Daten
HTML5

HTML5 Ads setzen sich zusammen aus einzelnen Website-Elementen, die zusammenspielen. Dazu gehören HTML-Dateien, CSS-Dateien, Javascript-Dateien, Bilder, Video etc. Im Unterschied zu Flash-Ads werden all diese Einzelteile nicht in einem einzelnen, ausführbaren Element zusammengepackt. Es sind deshalb gesonderte Anforderungen zu beachten.

Text: Anonymous User

8. November 2018

Anzeige

1. Vorbemerkung

Der Verlag Werben & Verkaufen liefert HTML5-Ads standardmäßig innerhalb eines Friendly iFrames aus. Die Verlinkung der Ads erfolgt mithilfe eines zusätzlichen Click-Layers. Sollen Ads interaktive Elementen enthalten (z.B. verschiedene Click-Optionen, Formulare, spielerische Interaktionen, o.ä.), dann ist Rücksprache mit dem Verlag über eine Direktintegration zu halten.

2. Dateigröße

Für ein optimales Nutzererlebnis ist es erforderlich, die Lade- und Renderingzeiten der Ads so gering wie möglich zu halten. Deshalb müssen HTML5 Ads so klein wie möglich gehalten werden und aus möglichst wenigen Einzelelementen bestehen (Reduktion von HTTP-Requests). Grafiken und Videos aber auch CSS- und Javascript-Bibliotheken müssen bestmöglich komprimiert sein. Lokale CSS- und Javascript-Bibliotheken sind immer in minimierter Form einzusetzen. Beim Einsatz kleinteiliger Layouts mit vielen Icons müssen, wo möglich, Sprites genutzt werden.

Folgende Kompressions-Tools sind Empfehlungen, aber es gibt zahlreiche Alternativen:

Die folgenden Dateigröße sind das Maximum und beziehen sich auf das komplette Ad inkl. aller Ressourcen:

2.1. Maximalgröße initial:

  • Desktop: 100 KB
  • Mobile: 40 KB 


2.2. Maximalgröße für automatisch nachladende Inhalte

  • Desktop: 150 KB
  • Mobile: 100 KB

2.3. Maximalgröße für nachladende Inhalte, die eine Nutzerinteraktion erfordern (z.B. Video-Stream o.ä.)

  • Desktop: 10 MB
  • Mobile: 3 MB

3. Datenstruktur und Datenanlieferung

Alle Einzel-Dateien müssen im selben Ordner liegen. Auf Unterordner muss verzichtet werden. Die Haupt-Datei ist mit index.html zu benennen. Alle Pfade auf weitere Ressourcen sind relativ zur Haupt-Datei und zueinander zu setzen. Die Ausnahme sind extern eingebundene Ressourcen, wie Javascript-Bibliotheken, Web-Fonts o.ä., die absolut referenziert werden müssen. Die Anlieferung eines vollständigen HTML5 Ads muss in einem .zip Archiv erfolgen. Dieses Archiv enthält alle erforderlichen Bestandteile mit Ausnahme von extern eingebunden Ressourcen. Außerdem muss die Landingpage URL separate angeliefert werden.

4. Coding und Bibliotheken

4.1. document.write

document.write darf nicht genutzt werden. Alle Ads werden asynchron geladen und ausgeführt. Es sind alternative DOM Operationen, wie appendChild() zu nutzen, ausgeführt über den document.onload Handler.

4.2. Code-Kompression

Das HTML-Dokument des Ads darf maximal 4.500 Zeichen enthalten. Größere Stylesheets und Javascripts sind in separate Dokumente auszulagern. CSS- und Javascript-Bibliotheken sind in minimierter Form einzusetzen. Die Kompression eigener Scripte ist ebenfalls empfohlen (Tool-Empfehlungen siehe oben).

5. Browser Kompatibilität

Die Webseiten des Verlags Werben & Verkaufen verhalten sich voll responsive. Dieses Verhalten wird über CSS3 Media-Queries und Javascript realisiert. Bei der Entwicklung von Tablet- und Smartphone-Ads muss deshalb beachtet werden, dass das Ad mit einer flexiblen Breite umgehen kann. Es findet eine automatische Skalierung des Ad-Slots auf 100% statt. Der Verlag Werben & Verkaufen unterstützt mit seinen Websites den Internet Explorer ab der Version 11. Für den Fall, dass ein Ad nicht auf allen Browsern einwandfrei funktioniert, muss ein JPG/GIF Fallback als ein Teil des Ads eingeplant werden.

Fehlender Browser-Support muss dem Verlag Werben & Verkaufen mitgeteilt werden. Der Verlag behält sich das Recht vor, die Auslieferung auf einen kompatiblen Browser zu beschränken.
->  Alle HTML5-Ads müssen UTF-8 kompatibel sein.

6. Animation

Animationen sind grundsätzlich möglich. Bei der Erstellung muss jedoch beachtet werden, dass Animationen die CPU und die GPU des Clients stark beanspruchen können. Deshalb muss auf zahlreiche parallele und sich überlappende Animationen mit transparenten Grafiken muss verzichtet werden.

7. Videos

Videos können per HTML5 Video-Tag <video></video> in ein Ad integriert werden. Video Ads müssen ein Vorschau-Bild mitbringen. Autoplay ist erlaubt, sofern das Video keinen Ton enthält oder wenn der Ton stumm geschalten ist (Attribut „muted“ im Video-Tag). Damit auf iOS Autoplay korrekt funktioniert benötigt das Video-Tag zusätzlich das Attribut „playsinline“.

Die Dateigröße und die Qualität von Videos muss optimiert und dafür geeignet sein, in einer Serverumgebung gestreamt zu werden. Jedes Video muss im Format H.264/MP4/AAC zur Verfügung gestellt werden. Für optimale Kompatibilität empfiehlt sich zusätzlich eine Version im Format VP8/VP9/WebM.

Anzeige