Hoe u in 10 minuten een interactieve HTML5-advertentie maakt
Met de dood van Flash werd de verantwoordelijkheid voor interactieve advertenties doorgegeven aan HTML5. Hier leren we hoe we een interactieve HTML5-advertentie kunnen maken in slechts 10 minuten.
Vandaag willen we laten zien hoe u een interactieve HTML5-banneradvertentie kunt bouwen.
Dit was een project waarvoor we het deden Carlsberg een tijdje terug, waarvan we denken dat het nuttig kan zijn voor ontwerpers en programmeurs die geïnteresseerd zijn in front-end designwerk.
Carlsberg is een multibiljard dollar, wereldwijd biermerk dat wereldwijd meer dan 40.000 mensen tewerkstelt. Naast het huismerk Carlsberg huisvesten ze ook andere merken zoals Tuborg, Somersby (cider), Kronenbourg en Dali Beer (een snelgroeiend merk in Azië).
Wat is een interactieve advertentie?
Laten we snel een samenvatting maken. Vroeger hadden we tekstadvertenties, die in feite een korte tekst-blurb zijn met een link naar de pagina, het product of de service van de adverteerder.
Vervolgens kwamen statische banneradvertenties. Dit zijn typisch statische afbeeldingen. Ze zijn boeiender dan tekstadvertenties, omdat afbeeldingen meer dan duizend woorden waard zijn. De hoofdformaten zijn er in een 300 x 250 pixels (doos), 728 x 90 (breed) of 90 x 728 (wolkenkrabber).
Vervolgens speelt Flash-technologie mee in de desktopbrowser. Flash was revolutionair, omdat het een golf van geanimeerde banneradvertenties mogelijk maakte, evenals interactieve. Geanimeerde advertenties boeien de aandacht van de gebruiker, wat resulteert in hogere klikfrequenties (CTR). Spelers kunnen zelfs een microspel spelen zoals iets schieten of een bal in de borduurring gooien.
In 2010 overtuigde Apple de wereld van de deugden van overstap naar HTML5, en met reuzen waaronder Google volgde, nam Flash-technologie snel af.
Advertentietechnologiebedrijven zien het enorme groeipotentieel in mobiel en zijn daarom begonnen HTML5 in een nieuw, platformonafhankelijk advertentieblok te implementeren. Deze eenheid wordt de HTML5-interactieve advertentie genoemd, ondersteund door nieuwe industriestandaarden zoals MRAID, MRAID2 en dergelijke.
Lang verhaal kort, een interactieve HTML5-advertentie, is een advertentie die nu werkt op smartphones, tablets en desktopbrowsers.
Dus wat is deze Carlsberg-advertentie?
Hier is een link naar video , met de interactieve advertentie die op een iPhone wordt uitgevoerd:
Het doel van deze interactieve advertentie is om bekendheid te geven aan het World Rugby Sevens Tournament, een jaarlijks rugbyevenement dat plaatsvindt in Hong Kong. De beste van de beste teams van over de hele wereld strijden jaarlijks om de hoofdprijs te winnen. Carlsberg is een van de hoofdsponsors.
De advertentie-ervaring is eenvoudig. Gebruikers zien een gloeiende Carlsberg-bierfles. Een bericht vraagt de gebruiker om op de gloeiende fles te tikken.
Als je erop tikt, speelt een korte animatie van een rugbyspeler met een koude ijsemmer van Carlsberg-bieren.
Er verschijnt een slogan van een leuk merk: "Ben je bier klaar"?
Gebruikers kunnen vervolgens op de link 'Vind ons op Facebook' klikken om de pagina van de adverteerder te bezoeken voor meer informatie.
Terug naar onze regelmatige programmering
Een interactieve HTML5-advertentie bestaat uit 5 hoofdelementen:
- index.html (hoofdinvoerpunt)
- main.js (het javascript dat de logica bevat)
- main.css (de CSS-stylesheet)
- activa (visuele activa)
- de uitgaande link (waar de advertentie gebruikers naartoe moet brengen)
Laten we beginnen met het maken van de advertentie ...
Deel 1: index.html
De index.html bestaat uit standaard HTML-verklaringen.
Zie de pen Carlsberg Interactive Ad Demo - index.html door Ben Chong ( @marketjs ) aan CodePen .
Het gaat hier om de meta-viewport en de koppeling naar main.css en main.js
Zoals je ziet, is het vrij eenvoudig. Niets bijzonders.
Deel 2: main.js (The Meat And Bones)
De main.js is een Javascript-bestand dat alle interactie met de advertentie bestuurt.
Zie de pen Carlsberg Interactive Ad Demo - main.js door Ben Chong ( @marketjs ) aan CodePen .
Aan de bovenkant voegen we jQuery's gehele geminimaliseerde JS in. Merk op dat u de nieuwste versie van jQuery kunt gebruiken http://jquery.com/
jQuery is nuttig voor de meeste DOM-manipulatietechnieken die we gebruiken.
Vervolgens maken we een eenvoudige, op afbeeldingen gebaseerde preload-functie.
We laden een reeks grafische elementen vooraf aan de advertentie.
Nu, op de logica. Wanneer de advertentie wordt geladen, ziet u dat we 2 divs maken, scene1 en scene2 .
scene1 bevat de div van de gloeiende fles. Wanneer erop wordt geklikt, gaat het over naar scene2, via de functie gotoScene2
scene2 zelf bevat de tagline div, die doorverwijst naar de Facebook-pagina van Carlsberg.
Dat is het eigenlijk. Er is heel eenvoudige logica nodig.
Deel 3: main.css (The Stylesheet)
Het bestand main.css bevat alle CSS-gerelateerde stijlen.
Zie de pen Carlsberg Interactive Ad Demo - main.css door Ben Chong ( @marketjs ) aan CodePen .
In dit voorbeeld hebben we enkele van de coole animaties gedaan die je via CSS ziet
De gloeiende bierfles gebruikt bijvoorbeeld de waarde voor knipperlichten van de eigenschap -webkit-animatie
We voegen ook een paar standaardalgoritmen toe waarvan gebruikers houden, zoals bounceIn en bounceOut
Deel 4: Visuele activa
Interactieve advertenties vereisen leuke visuals die gerelateerd zijn aan het merk. Daarom is het raadzaam om met een ontwerper samen te werken aan interactieve HTML5-advertenties.
In ons geval hebben we gebruikt: de lege groene achtergrond; De fles; De achtergrond met de rugbyman die een koude ijsemmer van bieren houdt; De grafische weergave van oproep tot actie.
Deel 5: Call To Action (CTA)
Dit zijn de belangrijkste onderdelen van een interactieve advertentie. De call-to-action moet goed zijn ontworpen, dat gebruikers echt willen doorklikken om meer te weten te komen.
Het moet een overtuigend bericht zijn dat aansluit bij de nieuwsgierigheid van de gebruiker.
Overzicht
We hopen dat dit artikel nuttig is voor de gemeenschap. Zoals u kunt zien, is deze interactieve advertentie heel eenvoudig te bouwen en duurt het niet meer dan 10 minuten om zelf te monteren.
Klik hier om de projectbestanden en de broncode te downloaden.