Med bortfaldet af Flash blev ansvaret for interaktive annoncer sendt til HTML5. Her lærer vi, hvordan du opbygger en interaktiv HTML5-annonce på bare 10 minutter.

I dag vil vi gerne vise, hvordan du opbygger en interaktiv HTML5 bannerannonce.

Dette var et projekt, vi gjorde for Carlsberg et stykke tid tilbage, som vi mener kan være nyttigt for designere og programmører interesseret i front-end design arbejde.

Carlsberg er et globalt ølmærke med flere milliarder dollar, der beskæftiger over 40.000 mennesker over hele verden. Udover husholdningen Carlsberg mærke huser de også andre mærker som Tuborg, Somersby (cider), Kronenbourg og Dali Beer (et hurtigt voksende mærke i Asien).

Hvad er en interaktiv annonce?

Lad os lave en hurtig omgang. I gamle dage havde vi tekstannoncer, som i grunden er en kort tekstblurb med et link til annoncørens side, produkt eller tjeneste.

Herefter kom statiske bannerannoncer. Disse er typisk statiske billeder. De er mere overbevisende for tekstannoncer, fordi billeder er tusind ord ordentligt. De vigtigste formater kommer i en 300 × 250 pixel (boks), 728 × 90 (bred) eller 90 × 728 (skyskraber).

Så, Flash-teknologi spil sammen på skrivebordet browser. Flash var revolutionerende, fordi det aktiverede en bølge af animerede bannerannoncer, såvel som interaktive. Animerede annoncer fanger brugerens opmærksomhed, hvilket resulterer i højere klikfrekvenser (CTR). Spillere kan endda spille et micro-spil, der skyder noget eller kaster en bold ind i bøjlen.

I 2010 overbeviste Apple verdenen med fordelene ved at skifte til HTML5, og med giganter, herunder Google efterfølgende, faldt Flash-teknologien hurtigt.

Annonceteknologibedrifter ser det enorme vækstpotentiale i mobil og begyndte derfor at implementere HTML5 i en ny annonceenhed på tværs af platformen. Denne enhed kaldes den interaktive HTML5-annonce, der understøttes af nye industristandarder som MRAID, MRAID2 og så videre.

Lang historie kort, en interaktiv HTML5-annonce, er en annonce, der nu fungerer på smartphones, tablets og desktopbrowsere.

Så hvad er denne Carlsberg annonce om?

Her er en link til video , der viser den interaktive annonce, der kører på en iPhone:

carlsberg

Målet med denne interaktive annonce er at drive bevidsthed om World Rugby Sevens Tournament, en årlig rugby begivenhed, der sker i Hong Kong. De bedste af de bedste hold fra hele verden konkurrerer årligt for at vinde topprisen. Carlsberg er en af ​​hovedsponsorerne.

Annonceoplevelsen er enkel. Brugere ser en glødende Carlsberg ølflaske. En meddelelse beder brugeren at trykke på den glødende flaske.

Ved at trykke på den spiller en kort animation af en rugby-spiller, der bærer en kold, ispand af Carlsberg-øl.

Et sjovt mærkeord er: "Er du klar til øl?"

Brugere kan derefter trykke på linket "Find os på Facebook" for at besøge annoncørens side for at få flere oplysninger.

Tilbage til vores regelmæssige programmering

En interaktiv HTML5-annonce består af 5 hovedelementer:

  1. index.html (hovedindgangspunkt)
  2. main.js (javascript, der indeholder logikken)
  3. main.css (CSS stilark)
  4. aktiver (visuelle aktiver)
  5. den udgående link (hvor annoncen skal tage brugerne til)

Lad os begynde at bygge annoncen ...

Del 1: index.html

Index.html består af standard HTML-erklæringer.

Se pennen Carlsberg Interactive Ad Demo - index.html af ben chong @marketjs ) på CodePen .

Det der betyder noget her er meta viewporten, og linket til main.css og main.js

Som du kan se, er det ret simpelt. Intet ud over det sædvanlige.

Del 2: main.js (The Meat And Bones)

Main.js er en Javascript-fil, der driver hele interaktionen med annoncen.

Se pennen Carlsberg Interactive Ad Demo - main.js af ben chong @marketjs ) på CodePen .

Øverst placerer vi jQuery's hele minificeret JS. Bemærk, at du kan bruge den nyeste version af jQuery fra http://jquery.com/

jQuery vil være nyttigt for de fleste DOM manipulationsteknikker vi bruger.

Dernæst opretter vi en simpel billedbaseret preload-funktion.

Vi preload en masse grafiske aktiver relateret til annoncen.

Nu videre til logikken. Når annoncen laster, vil du bemærke, at vi opretter 2 divs, kaldet scene1 og scene2 .

scene1 indeholder div af den glødende flaske. Når den klikkes på, overgår den til scene2, via gotoScene2-funktionen

scene2 i sig indeholder tagline div, som omdirigerer til Facebook siden af ​​Carlsberg, når de tappes.

Det er dybest set det. Meget enkel logik er nødvendig.

Del 3: main.css (stilarket)

Main.css-filen indeholder alle CSS-relaterede stilarter.

Se pennen Carlsberg Interactive Ad Demo - main.css af ben chong @marketjs ) på CodePen .

I dette eksempel gjorde vi nogle af de seje animationer, du ser via CSS

For eksempel bruger den glødende ølflaske blinkerværdien fra egenskaben -webkit-animation

Vi tilføjer også et par standardalgoritmer, som brugerne har en tendens til at elske, såsom bounceIn og bounceOut

Del 4: Visuelle aktiver

Interaktive annoncer kræver sjove billeder, der er brandrelaterede. Derfor er det tilrådeligt at arbejde med en designer på interaktive HTML5-annoncer.

dele

I vores tilfælde brugte vi: Den blanke grønne baggrund; Flasken; Baggrunden med rugby mand med en kold isspand øl; Opkald til handling grafik.

Del 5: Call to Action (CTA)

Dette er de vigtigste dele til enhver interaktiv annonce. Opkaldet til handling skal udformes for godt, at brugerne rent faktisk ønsker at klikke igennem for at finde ud af mere.

Det skal være en overbevisende besked, der binder brugerens nysgerrighed.

Resumé

Vi håber, at denne artikel er nyttig for samfundet. Som du kan se, er denne interaktive annonce virkelig nem at bygge og tager ikke mere end 10 minutter at samle dig selv.

Klik her at downloade projektfilerne og kildekoden.