...
Auf einem Blick
| Anlieferungsformat | Einzelne HTML Datei + zusätzliche Bilder/Videos |
| 3rd-Party-Tracking | erlaubt |
| Videoformate | H264/mp4 und VP8/WebM |
| Video Dateigröße | max. 5 MB |
| Video,- und Audiostart | nur nach expliziter Benutzeraktion |
| Vorlaufzeit | 5 Werktage bzw. 10 Werktage bei mobilen HTML5-Formaten |
...
- Liefern Sie das HTML5-Werbemittel als index.html, mit vollständigem HTML-Syntax (Doctype Definitionen, <head>, <body>, etc.) an.
- Alle Es sollten so viele Inhalte (Skripte, CSS, etc.) sollten soweit wie möglich in der index.html direkt eingebunden sein, und nicht anstatt in separate separaten Dateien ausgelagert werden.Benutzen Sie auf keinen Fall Unterordner für weitere Dateien (Images, XMLs, etc.) oder relative Verlinkung auf diese Dateien. Legen Sie alle Dateien im gleichen Ordner wie die index.html ab.zu werden.
- Beim Nachladen von externen Ressourcen stellen Sie sicher, dass diese serverseitig für Cross-Domain-Zugriffe freigeben sind (CORS).
- Benutzen Sie eine alternative Grafik als Ersatz des Werbemitttels, für Browser die HTML5 nicht vollständig unterstützen.
- Die Orientierung des anzeigenden Gerätes sollte berücksichtigt werden und das Werbemittel für Darstellungen in "Landscape" und "Portrait" optimiert sein.
- Das Tracking/Zählen von Benutzeraktionen (außer Klicks) durch einen separaten Server muss durch den Werbemittelersteller erfolgen.
|
...
- Verwenden Sie kleine, kompakte JS-Frameworks. Größere Bibliotheken wie jQuery sind in der Regel unnötig und erhöhen die Datenlast des Werbemittels exponentiell.
- Verkleinern Sie ihren finalen JS-Code so weit wie möglich. Benutzen Sie Minifier oder ähnliche Tools, so dass Ihr Werbemittel so schnell wie möglich zum Betrachter übertragen werden kann.
- Vermeiden Sie Logs (z.B. console.log oder etc.) und eventuelle Fehler, um die Performance ihres Werbemittels zu optimieren und die Browserkonsole nicht zu überladen.
|
Klickmessung
...
Sie haben die Möglichkeit, Klicks auf Verlinkung zu externen Seiten durch den Ströer Digital AdServer messen zu lassen. Dafür muss in dem HTML5-Werbemittel eine dynamische Zuweisung der Link-URLs ermöglicht werden.
Bei Ausspielung des Werbemittels werden die vollständigen URLs von Ströer in das Werbemittel eingefügt und bei Klick des Benutzers gemessen.
Während der Entwicklung des Werbemittels lassen sich die Verlinkungen URL-encoded (encodeURIComponent() ) per GET-Parameter an das Werbemittel übergeben.
...
- Entfernen Sie nicht mehr benötigte GIFs (z.B. eine Ladeanimation) komplett aus dem HTML-Baum, anstatt das Bild nur zu verstecken. Versteckte GIF-Animationen belasten weiterhin den Browser.
Benutzen Sie die Animationsmöglichkeiten von CSS3 (Animation, Keyframe, Translate, etc.).  Verwenden Sie auf keinen Fall Animationen durch JavaScript' s setInterval() oder setTimeout().
JavaScript-Animationen sollten grundsätzlich die requestAnimationFrame-API des Browsers benutzen. Weitere Informationen zu requestAnimationFrame() finden Sie hier.
|
...
- Für eine optimale Bildanzeige auf allen Geräten, sollten alle Bilder, soweit sinnvoll, für HDPI angepasst sein.
- Um trotz HDPI die Datenlast des Werbemittels gering zu halten, eignen sich die Formate Progressive JPEG / Progressive PNG, SVG oder WebP (eingeschränkter Browsersupport). Die Formatwahl ist jedoch nicht eingeschränkt und dem Entwickler freigestellt.
- Um einzelne Bilderversionen an das jeweils richtige Device bzw. zur jeweils passenden Pixeldichte zu liefern, empfiehlt sich die Verwendung von CSS3 image-set() oder <img>'s srcset Element (Browsersupport beachten).
- Gehen Sie sparsam mit dem Auslösen von Serveranfragen (requests) für kleinere Bilder um. Falls Sie viele kleinere Bilddateien verwenden wollen (Icons, Logos), sollten diese entweder als CSS-Sprites oder direkt im HTML als DataURI geladen werden.
- Videos müssen als H264/mp4, sowie als VP8/WebM zur Verfügung gestellt werden und darf 5 MB nicht überschreiten. Benutzen Sie bei der Integration von Videos die Video-API des Browsers.
- Bei Videos dürfen im Werbemittel darf der Sound nur nach expliziter Aktion des Benutzers gestartet werden (Klick auf einen "PlaySound an" Button, Klick zur Expansionetc.).
|
HTML5 auf mobilen Geräten
...