Hur man bygger en interaktiv HTML5-annons om 10 minuter
Med förlusten av Flash skickades ansvaret för interaktiva annonser till HTML5. Här lär vi oss att bygga en interaktiv HTML5-annons på bara 10 minuter.
Idag vill vi visa hur man bygger en interaktiv HTML5-bannerannons.
Detta var ett projekt vi gjorde för Carlsberg ett tag tillbaka, som vi tycker kan vara till nytta för designers och programmerare intresserade av front-end designarbete.
Carlsberg är ett globalt ölmärke med flera miljarder dollar, som sysselsätter över 40 000 människor runt om i världen. Förutom hushållets Carlsberg-märke finns även andra märken som Tuborg, Somersby (cider), Kronenbourg och Dali Beer (ett snabbt växande varumärke i Asien).
Vad är en interaktiv annons?
Låt oss göra en snabb omgång. Förr i tiden hade vi textannonser, som i grund och botten är en kort textblurb med en länk till annonsörens sida, produkt eller tjänst.
Därefter kom statiska bannerannonser. Dessa är typiskt statiska bilder. De är mer övertygande om textannonser eftersom bilder är värda tusen ord. Huvudformaten kommer i 300 × 250 pixlar (box), 728 × 90 (bred) eller 90 × 728 (skyskrapa).
Sedan, Flash-teknik spel tillsammans på skrivbordet webbläsaren. Flash var revolutionerande, eftersom det möjliggjorde en våg av animerade bannerannonser, såväl som interaktiva. Animerade annonser fängslar användarens uppmärksamhet vilket resulterar i högre klickfrekvenser (CTR). Spelare kan till och med spela ett mikrospel som skjuter någonting, eller kasta en boll i bandet.
Under 2010 övertygade Apple världen om fördelarna med att byta till HTML5, och med giganter, inklusive Google efterföljande, minskade Flash-tekniken snabbt.
Annonsteknikföretag ser den enorma tillväxtpotentialen i mobilen, och började därför implementera HTML5 i en ny annonsplattformsadministrativ enhet. Den här enheten kallas den interaktiva annonsen HTML5, som stöds av nya branschstandarder som MRAID, MRAID2 och så vidare.
Lång historia kort, en interaktiv HTML5-annons, är en annons som nu fungerar på smartphones, surfplattor och surfplattor.
Så vad är det här Carlsberg-annonsen om?
Här är en länka till video , som visar den interaktiva annonsen som körs på en iPhone:
Målet med denna interaktiva annons är att öka medvetenheten om World Rugby Sevens Tournament, en årlig rugbyhändelse som händer i Hong Kong. De bästa av de bästa lagen från hela världen konkurrerar årligen för att vinna topppriset. Carlsberg är en av huvudsponsorerna.
Annonsupplevelsen är enkel. Användare ser en glödande Carlsberg ölflaska. Ett meddelande ber användaren att trycka på den glödande flaskan.
När han knackar på det spelar en kort animation av en rugbyspelare som bär en kall ispanna med Carlsberg öl.
Ett roligt märkesparoge visas: "Är du öl redo"?
Användare kan sedan klicka på länken "Hitta oss på Facebook" för att besöka annonsörens sida för mer information.
Tillbaka till vår regelbundna programmering
En interaktiv HTML5-annons består av 5 huvudelement:
- index.html (huvudingångspunkten)
- main.js (javascript som innehåller logiken)
- main.css (CSS-stilarket)
- tillgångar (visuella tillgångar)
- Utgående länk (där annonsen ska ta användarna till)
Låt oss börja bygga annonsen ...
Del 1: index.html
Index.html består av standard HTML-deklarationer.
Se pennan Carlsberg Interactive Ad Demo - index.html av Ben Chong ( @marketjs ) på CodePen .
Vad som är viktigt här är meta viewporten och länken till main.css och main.js
Som du kan se är det ganska enkelt. Inget ovanligt.
Del 2: main.js (kött och ben)
Main.js är en Javascript-fil som driver all interaktion med annonsen.
Se pennan Carlsberg Interactive Ad Demo - main.js av Ben Chong ( @marketjs ) på CodePen .
Överst lägger vi in jQuerys hela förminskad JS. Observera att du kan använda den senaste versionen av jQuery från http://jquery.com/
jQuery kommer att vara till hjälp för de flesta DOM-manipuleringsteknikerna vi använder.
Därefter skapar vi en enkel bildbaserad preload-funktion.
Vi förinstallerar en massa grafiska tillgångar relaterade till annonsen.
Nu vidare till logiken. När annonsen laddas upp märker vi att vi skapar 2 div, kallad scene1 och scene2 .
scen1 innehåller div av den glödande flaskan. När den är klickad övergår den till scene2 via gotoScene2-funktionen
scen2 innehåller sig själva tagline div, som omdirigerar till Facebook-sidan av Carlsberg, när den tappas.
Det är i princip det. Mycket enkel logik behövs.
Del 3: main.css (Stylesheet)
Main.css-filen innehåller alla CSS-relaterade format.
Se pennan Carlsberg Interactive Ad Demo - main.css av Ben Chong ( @marketjs ) på CodePen .
I det här exemplet gjorde vi några av de fina animationerna du ser via CSS
Till exempel använder den glödande ölflaskan blinkersvärdet från egenskapen -webkit-animering
Vi lägger också till några standardalgoritmer som användarna brukar älska, till exempel studsa och spola ut
Del 4: Visual Assets
Interaktiva annonser kräver roliga bilder som är varumärkesrelaterade. Det är därför lämpligt att arbeta med en formgivare på interaktiva HTML5-annonser.
I vårt fall använde vi: Den tomma gröna bakgrunden; Flaskan; Bakgrunden med rugbymanen som håller en kall ishink öl; Call-to-Action-grafiken.
Del 5: Call to Action (CTA)
Det här är de viktigaste delarna till en interaktiv annons. Uppmaningen till handling måste utformas så bra att användarna faktiskt vill klicka igenom för att få reda på mer.
Det måste vara ett övertygande meddelande som knyter till användarens nyfikenhet.
Sammanfattning
Vi hoppas att den här artikeln är användbar för samhället. Som du kan se är den här interaktiva annonsen lätt att bygga och tar inte mer än 10 minuter att montera dig själv.
Klicka här för att ladda ner projektfiler och källkod.