So erstellen Sie eine interaktive HTML5-Anzeige in 10 Minuten
Mit dem Ende von Flash wurde die Verantwortung für interaktive Anzeigen an HTML5 weitergegeben. Hier erfahren Sie, wie Sie in nur 10 Minuten eine interaktive HTML5-Anzeige erstellen.
Heute möchten wir Ihnen zeigen, wie Sie eine interaktive HTML5-Werbebanner erstellen können.
Das war ein Projekt, für das wir gearbeitet haben Carlsberg eine Weile zurück, die wir für Designer und Programmierer, die an Front-End-Design-Arbeiten interessiert sind, für nützlich halten können.
Carlsberg ist eine globale Biermarke mit mehreren Milliarden Dollar, die weltweit über 40.000 Menschen beschäftigt. Neben der Hausmarke Carlsberg sind auch andere Marken wie Tuborg, Somersby (Apfelwein), Kronenbourg und Dali Beer (eine schnell wachsende Marke in Asien) beheimatet.
Was ist eine interaktive Anzeige?
Lass uns eine kurze Zusammenfassung machen. Früher hatten wir Textanzeigen, bei denen es sich im Grunde um einen kurzen Texttext mit einem Link zur Seite, zum Produkt oder zum Dienst des Werbetreibenden handelte.
Als nächstes kamen statische Werbebanner. Dies sind typischerweise statische Bilder. Sie sind überzeugender als Textanzeigen, weil Bilder mehr als tausend Worte wert sind. Die Hauptformate kommen in einer 300 × 250 Pixel (Box), 728 × 90 (Breite) oder 90 × 728 (Wolkenkratzer).
Dann Flash-Technologie mitspielen auf dem Desktop-Browser. Flash war revolutionär, weil es eine Welle von animierten Werbebannern und interaktiven Anzeigen ermöglichte. Animierte Anzeigen fesseln die Aufmerksamkeit der Nutzer, was zu höheren Klickraten (Click-through-Raten - CTR) führt. Die Spieler könnten sogar ein Mikrospiel spielen, indem sie etwas schießen oder einen Ball in den Ring werfen.
Im Jahr 2010 überzeugte Apple die Welt von den Vorteilen des Umstiegs auf HTML5, und mit Riesen, darunter auch Google, ging die Flash-Technologie schnell zurück.
Ad-Technologie-Unternehmen sehen das enorme Wachstumspotenzial im mobilen Bereich und begannen daher, HTML5 in einen neuen, plattformübergreifenden Anzeigenblock zu implementieren. Diese Einheit wird als interaktive HTML5-Anzeige bezeichnet und von neuen Industriestandards wie MRAID, MRAID2 und ähnlichen unterstützt.
Kurz gesagt, eine interaktive HTML5-Anzeige ist eine Anzeige, die jetzt auf Smartphones, Tablets und Desktop-Browsern funktioniert.
Also, was ist das Carlsberg Ad über?
Hier ist ein Link zu Video zeigt die interaktive Anzeige, die auf einem iPhone läuft:
Ziel dieser interaktiven Anzeige ist es, das Bewusstsein für das World Rugby Sevens Tournament, ein jährliches Rugby-Event in Hongkong, zu stärken. Die besten der besten Teams aus der ganzen Welt konkurrieren jährlich um den Hauptpreis. Carlsberg ist einer der Hauptsponsoren.
Die Anzeigenerfahrung ist einfach. Benutzer sehen eine glühende Carlsberg-Bierflasche. Eine Nachricht fordert den Benutzer auf, auf die leuchtende Flasche zu tippen.
Beim Antippen spielt eine kurze Animation eines Rugbyspielers mit einem eiskalten Eimer Carlsberg Biere.
Ein lustiger Markenslogan erscheint: "Bist du Bier bereit?"
Nutzer können dann auf den Link "Auf Facebook finden" tippen, um weitere Informationen auf der Seite des Werbetreibenden zu finden.
Zurück zu unserer regulären Programmierung
Eine interaktive HTML5-Anzeige besteht aus 5 Hauptelementen:
- index.html (Haupteinstieg)
- main.js (das Javascript, das die Logik enthält)
- main.css (das CSS-Stylesheet)
- Vermögenswerte (visuelle Vermögenswerte)
- der Outbound-Link (zu dem die Anzeige Nutzer führen soll)
Beginnen wir mit dem Erstellen der Anzeige ...
Teil 1: index.html
Die index.html besteht aus Standard-HTML-Deklarationen.
Sieh den Stift Carlsberg Interactive Ad Demo - index.html von Ben Chong ( @marketjs ) auf CodePen .
Hier kommt es auf das Meta-Viewport und die Verknüpfung zu main.css und main.js an
Wie Sie sehen können, ist es ziemlich einfach. Nichts Außergewöhnliches.
Teil 2: main.js (Das Fleisch und die Knochen)
Die Datei main.js ist eine JavaScript-Datei, die die gesamte Interaktion mit der Anzeige steuert.
Sieh den Stift Carlsberg Interactive Ad Demo - main.js von Ben Chong ( @marketjs ) auf CodePen .
Ganz oben fügen wir jQuerys gesamtes minimiertes JS ein. Beachten Sie, dass Sie die neueste Version von jQuery verwenden können http://jquery.com/
jQuery wird für die meisten der von uns verwendeten DOM-Manipulationstechniken hilfreich sein.
Als Nächstes erstellen wir eine einfache bildbasierte Vorladungsfunktion.
Wir laden eine Reihe grafischer Assets im Zusammenhang mit der Anzeige hoch.
Nun zur Logik. Wenn die Anzeige geladen wird , werden Sie feststellen, dass wir zwei divs erstellen, die als scene1 und scene2 bezeichnet werden .
scene1 enthält das Div der leuchtenden Flasche. Wenn es angeklickt wird, geht es über die Funktion gotoScene2 zu scene2 über
scene2 selbst enthält den Slogan div, der auf die Facebook-Seite von Carlsberg umleitet, wenn er angetippt wird.
Das ist es im Grunde. Sehr einfache Logik wird benötigt.
Teil 3: main.css (Das Stylesheet)
Die main.css-Datei enthält alle CSS-bezogenen Stile.
Sieh den Stift Carlsberg Interactive Ad Demo - main.css von Ben Chong ( @marketjs ) auf CodePen .
In diesem Beispiel haben wir einige der coolen Animationen, die Sie über CSS sehen, gemacht
Zum Beispiel verwendet die glühende Bierflasche den Blinkerwert aus der Eigenschaft -webkit-animation
Wir fügen auch einige Standardalgorithmen hinzu, die die Benutzer gerne mögen, wie zum Beispiel bounceIn und bounceOut
Teil 4: Visuelle Assets
Interaktive Anzeigen erfordern lustige visuelle Effekte, die markenbezogen sind. Daher ist es ratsam, mit einem Designer an interaktiven HTML5-Anzeigen zu arbeiten.
In unserem Fall verwendeten wir: Der leere grüne Hintergrund; Die Flasche; Der Hintergrund mit dem Rugbymann, der einen kalten Eiseimer Biere hält; Die Call-to-Action-Grafik.
Teil 5: Call to Action (CTA)
Dies sind die wichtigsten Bestandteile einer interaktiven Anzeige. Der Call-to-Action muss so gestaltet sein, dass Nutzer sich durchklicken wollen, um mehr zu erfahren.
Es muss eine überzeugende Botschaft sein, die an die Neugier des Benutzers anknüpft.
Zusammenfassung
Wir hoffen, dass dieser Artikel für die Community nützlich ist. Wie Sie sehen können, ist diese interaktive Anzeige sehr einfach zu erstellen und dauert nicht länger als 10 Minuten, um sich zusammenzusetzen.
Klick hier um die Projektdateien und den Quellcode herunterzuladen.