Come creare un annuncio HTML5 interattivo in 10 minuti
Con la scomparsa di Flash, la responsabilità per gli annunci interattivi è stata passata a HTML5. Qui apprendiamo come creare un annuncio HTML5 interattivo in soli 10 minuti.
Oggi vorremmo dimostrare come creare un banner pubblicitario HTML5 interattivo.
Questo è stato un progetto per il quale abbiamo fatto Carlsberg qualche tempo fa, che pensiamo possa essere utile per designer e programmatori interessati al lavoro di progettazione front-end.
Carlsberg è un marchio di birra globale multimiliardario che impiega oltre 40.000 persone in tutto il mondo. Oltre al marchio Carlsberg della famiglia, ospitano anche altri marchi come Tuborg, Somersby (sidro), Kronenbourg e Dali Beer (un marchio in rapida crescita in Asia).
Che cos'è un annuncio interattivo?
Facciamo un breve riassunto. In passato disponevamo di annunci di testo, che sono fondamentalmente un breve testo con un link alla pagina, al prodotto o al servizio dell'inserzionista.
Poi sono arrivati gli annunci banner statici. Queste sono in genere immagini statiche. Sono più convincenti degli annunci di testo, perché le immagini valgono più di mille parole. I formati principali sono 300 × 250 pixel (riquadro), 728 × 90 (ampio) o 90 × 728 (grattacielo).
Quindi, gioco di tecnologia Flash lungo sul browser desktop. Flash era rivoluzionario, perché abilitava un'ondata di banner pubblicitari animati, oltre a quelli interattivi. Gli annunci animati attirano l'attenzione degli utenti con conseguente aumento delle percentuali di clic (CTR). I giocatori possono persino giocare a un micro-gioco come sparare a qualcosa o lanciare una palla nel canestro.
Nel 2010, Apple ha convinto il mondo delle virtù del passaggio a HTML5 e, con giganti che includevano anche Google, la tecnologia Flash è rapidamente diminuita.
Le aziende di tecnologia pubblicitaria vedono l'enorme potenziale di crescita nei dispositivi mobili e hanno quindi iniziato a implementare HTML5 in una nuova unità pubblicitaria multipiattaforma. Questa unità è chiamata pubblicità interattiva HTML5, supportata da nuovi standard di settore come MRAID, MRAID2 e così via.
Per farla breve, un annuncio HTML5 interattivo, è un annuncio che ora funziona su smartphone, tablet e browser desktop.
Allora, qual è l'annuncio di Carlsberg?
Ecco un link al video , mostrando l'annuncio interattivo in esecuzione su un iPhone:
L'obiettivo di questo annuncio interattivo è di far conoscere il torneo World Rugby Sevens, un evento annuale di rugby che si tiene ad Hong Kong. I migliori tra i migliori team di tutto il mondo si sfidano ogni anno per vincere il primo premio. Carlsberg è uno dei principali sponsor.
L'esperienza pubblicitaria è semplice. Gli utenti vedono una bottiglia di birra Carlsberg incandescente. Un messaggio chiede all'utente di toccare la bottiglia luminosa.
Al tocco, una breve animazione riproduce un giocatore di rugby con un secchio ghiacciato e freddo di birre Carlsberg.
Un divertente slogan del marchio appare: "Sei pronto per la birra"?
Gli utenti possono quindi toccare il link "Trovaci su Facebook" per visitare la pagina dell'inserzionista per ulteriori informazioni.
Torna alla nostra programmazione regolare
Un annuncio HTML5 interattivo è composto da 5 elementi principali:
- index.html (punto di ingresso principale)
- main.js (il javascript che contiene la logica)
- main.css (il foglio di stile CSS)
- attività (risorse visive)
- il link in uscita (dove l'annuncio dovrebbe portare gli utenti)
Iniziamo a costruire l'annuncio ...
Parte 1: index.html
Index.html è costituito da dichiarazioni HTML standard.
Vedi la penna Demo dell'annuncio interattivo Carlsberg - index.html di Ben Chong ( @marketjs ) sopra CodePen .
Ciò che importa qui sono la meta viewport e il collegamento a main.css e main.js
Come puoi vedere, è abbastanza semplice. Niente di straordinario.
Parte 2: main.js (The Meat And Bones)
Main.js è un file Javascript che guida tutte le interazioni con l'annuncio.
Vedi la penna Carlsberg Interactive Ad Demo - main.js di Ben Chong ( @marketjs ) sopra CodePen .
Nella parte superiore, inseriamo l'intero JS minisito di jQuery. Si noti che è possibile utilizzare l'ultima versione di jQuery da http://jquery.com/
jQuery sarà utile per la maggior parte delle tecniche di manipolazione DOM che usiamo.
Successivamente, creiamo una semplice funzione di precaricamento basata sull'immagine.
Precariciamo un gruppo di risorse grafiche correlate all'annuncio.
Ora, sulla logica. Quando l'annuncio si carica, noterai che creiamo 2 div, chiamati scene1 e scene2 .
scene1 contiene il div della bottiglia luminosa. Quando viene cliccato, passa a scene2, tramite la funzione gotoScene2
lo stesso scenario2 contiene il tagline div, che reindirizza alla pagina Facebook di Carlsberg, quando viene toccato.
Questo è fondamentalmente. È necessaria una logica molto semplice.
Parte 3: main.css (The Stylesheet)
Il file main.css contiene tutti gli stili relativi ai CSS.
Vedi la penna Demo dell'annuncio interattivo Carlsberg - main.css di Ben Chong ( @marketjs ) sopra CodePen .
In questo esempio, abbiamo fatto alcune delle fantastiche animazioni che vedete tramite CSS
Ad esempio, la bottiglia di birra luminosa utilizza il valore del lampeggiante dalla proprietà di animazione -webkit
Aggiungiamo anche alcuni algoritmi standard che gli utenti tendono ad amare, come bounceIn e bounceout
Parte 4: risorse visive
Gli annunci interattivi richiedono immagini divertenti correlate al marchio. Quindi, è consigliabile lavorare con un designer su annunci HTML5 interattivi.
Nel nostro caso abbiamo usato: lo sfondo verde vuoto; La bottiglia; Lo sfondo con l'uomo di rugby che regge un secchiello per il ghiaccio freddo di birre; La call to action grafica.
Parte 5: Call To Action (CTA)
Questa è la parte più importante di qualsiasi annuncio interattivo. L'invito all'azione deve essere progettato in modo tale da consentire agli utenti di fare clic per scoprire di più.
Deve essere un messaggio avvincente che si lega alla curiosità dell'utente.
Sommario
Speriamo che questo articolo sia utile per la comunità. Come puoi vedere, questo annuncio interattivo è davvero facile da costruire e non richiede più di 10 minuti per assemblare te stesso.
Clicca qui per scaricare i file di progetto e il codice sorgente.