Slik bygger du en interaktiv HTML5-annonse i 10 minutter
Med bortfallet av Flash ble ansvaret for interaktive annonser sendt til HTML5. Her lærer vi hvordan du bygger en interaktiv HTML5-annonse på bare 10 minutter.
I dag vil vi gjerne demonstrere hvordan du bygger en interaktiv HTML5-bannerannonse.
Dette var et prosjekt vi gjorde for Carlsberg en stund tilbake, som vi tror kan være nyttig for designere og programmerere interessert i front-end design arbeid.
Carlsberg er et globalt ølmerk med flere milliarder dollar, som sysselsetter over 40 000 mennesker over hele verden. I tillegg til husholdningenes Carlsberg-merke huser de også andre merker som Tuborg, Somersby (cider), Kronenbourg og Dali Beer (et raskt voksende merkevare i Asia).
Hva er en interaktiv annonse?
La oss gjøre en rask omtale. I gamle dager hadde vi tekstannonser, som i utgangspunktet er en kort tekstforklaring med en link til annonsørens side, produkt eller tjeneste.
Deretter kom statiske bannerannonser. Disse er vanligvis statiske bilder. De er mer overbevisende om tekstannonser, fordi bilder er verdt tusen ord. Hovedformatene kommer i en 300 × 250 piksler (boks), 728 × 90 (bred) eller 90 × 728 (skyskraper).
Deretter, Flash-teknologi spill sammen på skrivebordet nettleseren. Flash var revolusjonerende, fordi det aktiverte en bølge av animerte bannerannonser, så vel som interaktive. Animerte annonser fanger brukeroppmerksomhet som resulterer i høyere klikkfrekvenser (CTR). Spillere kan til og med spille et mikrospill som skyter noe, eller kaster en ball inn i bøylen.
I 2010 overbeviste Apple verdenen med fordelene ved å bytte til HTML5, og med giganter, inkludert Google etterfølgende, ble Flash-teknologien raskt avvist.
Annonseteknologibedrifter ser det store vekstpotensialet i mobil, og begynte dermed å implementere HTML5 i en ny, annonseformet annonseenhet. Denne enheten kalles den interaktive HTML5-annonsen, støttet av nye bransjestandarder som MRAID, MRAID2 og så videre.
Lang historie kort, en interaktiv HTML5-annonse, er en annonse som nå fungerer på smarttelefoner, nettbrett og nettlesere.
Så hva er dette Carlsberg-annonsen om?
Her er en lenke til video , som viser den interaktive annonsen som kjører på en iPhone:
Målet med denne interaktive annonsen er å drive bevissthet om World Rugby Sevens Tournament, en årlig rugbyhendelse som skjer i Hong Kong. Det beste av de beste lagene fra hele verden konkurrerer årlig for å vinne toppprisen. Carlsberg er en av hovedsponsorene.
Annonseopplevelsen er enkel. Brukere ser en glødende Carlsberg ølflaske. En melding ber brukeren å trykke på den glødende flasken.
Ved å trykke på den, spiller en kort animasjon av en rugby-spiller som bærer en kald, isbøtte med Carlsberg-øl.
Et morsomt merkeparametre vises: "Er du klar for øl?"
Brukere kan da trykke på koblingen Finn oss på Facebook for å besøke annonsørens side for mer informasjon.
Tilbake til vår ordinære programmering
En interaktiv HTML5-annonse består av 5 hovedelementer:
- index.html (hovedinngangspunkt)
- main.js (javascript som inneholder logikken)
- main.css (CSS-stilarket)
- eiendeler (visuelle eiendeler)
- Utgående kobling (hvor annonsen skal ta brukere til)
La oss begynne å bygge annonsen ...
Del 1: index.html
Indeksen.html består av standard HTML-deklarasjoner.
Se pennen Carlsberg Interactive Ad Demo - index.html av ben chong @marketjs ) på CodePen .
Det som betyr noe her er meta-visningsporten, og koblingen til main.css og main.js
Som du kan se, er det ganske enkelt. Ingenting utenom det vanlige.
Del 2: main.js (The Meat And Bones)
Main.js er en Javascript-fil som driver all interaksjon med annonsen.
Se pennen Carlsberg Interactive Ad Demo - main.js av ben chong @marketjs ) på CodePen .
På toppen legger vi inn jQuery's fullverdige JS. Merk at du kan bruke den nyeste versjonen av jQuery fra http://jquery.com/
jQuery vil være nyttig for de fleste DOM-manipulasjonsteknikker vi bruker.
Deretter oppretter vi en enkel bildebasert forhåndsbelastningsfunksjon.
Vi laster inn en masse grafiske eiendeler knyttet til annonsen.
Nå, videre til logikken. Når annonsen laster, vil du legge merke til at vi lager 2 div, kalt scene1 og scene2 .
scene1 inneholder div av den glødende flasken. Når den klikkes på, overgår den til scene2, via gotoScene2-funksjonen
scene2 i seg selv inneholder tagline div, som omdirigerer til Facebook siden av Carlsberg, når tappet.
Det er egentlig det. Svært enkel logikk er nødvendig.
Del 3: main.css (stilarket)
Main.css-filen inneholder alle CSS-relaterte stiler.
Se pennen Carlsberg Interactive Ad Demo - main.css av ben chong @marketjs ) på CodePen .
I dette eksemplet gjorde vi noen av de kule animasjonene du ser via CSS
For eksempel bruker den glødende ølflasken blinkerverdien fra egenskapen -webkit-animasjon
Vi legger også til noen standardalgoritmer som brukere har en tendens til å elske, for eksempel bounceIn og bounceOut
Del 4: Visuelle eiendeler
Interaktive annonser krever morsomme bilder som er merkevarerelaterte. Derfor anbefales det å jobbe med en designer på interaktive HTML5-annonser.
I vårt tilfelle brukte vi: Den tomme grønne bakgrunnen; Flasken; Bakgrunnen med rugbymannen som holder en kald isbøtte med øl; Ring til handling grafikk.
Del 5: Call to Action (CTA)
Dette er de viktigste delene til en hvilken som helst interaktiv annonse. Oppfordringen til handling må utformes for godt, at brukerne faktisk vil klikke gjennom for å finne ut mer.
Det må være en overbevisende melding som knytter til brukerens nysgjerrighet.
Sammendrag
Vi håper denne artikkelen er nyttig for fellesskapet. Som du kan se, er denne interaktive annonsen veldig enkel å bygge og tar ikke mer enn 10 minutter å samle seg selv.
Klikk her å laste ned prosjektfilene og kildekoden.