Interaktiivisen HTML5-mainoksen rakentaminen 10 minuutissa
Flashin kuolemalla vastuu vuorovaikutteisista mainoksista siirrettiin HTML5: een. Tässä opimme rakentamaan vuorovaikutteisen HTML5-mainoksen vain 10 minuutissa.
Tänään haluaisimme osoittaa, miten voit luoda vuorovaikutteisen HTML5-bannerimainoksen.
Tämä oli hanke, jota teimme Carlsberg jonne taas, mikä mielestämme voi olla hyödyllistä suunnittelijoille ja ohjelmoijille, jotka ovat kiinnostuneita etupään suunnittelutyöstä.
Carlsberg on monen miljardin dollarin globaali olutmerkki, joka työllistää yli 40 000 ihmistä eri puolilla maailmaa. Kotitalouksien Carlsberg-brändin ohella heillä on myös muita merkkejä, kuten Tuborg, Somersby (siideri), Kronenbourg ja Dali Beer (nopeasti kasvava brändi Aasiassa).
Mikä on interaktiivinen mainos?
Tehdään nopea kertaus. Vanhoina päivinä meillä oli tekstimainoksia, jotka ovat pohjimmiltaan lyhytsanoman teksti, jossa on linkki mainostajan sivulle, tuotteelle tai palvelulle.
Seuraavaksi tuli staattisia bannerimainoksia. Nämä ovat tyypillisesti staattisia kuvia. Ne ovat houkuttelevampia kuin tekstimainokset, koska kuvat ovat tuhannen sanan arvoisia. Päämuodot ovat 300 × 250 pikseliä (laatikko), 728 × 90 (leveä) tai 90 × 728 (pilvenpiirtäjä).
Sitten Flash-tekniikka peli pitkin työpöydän selaimella. Flash oli vallankumouksellinen, koska se mahdollisti animoitujen bannerimainosten aallon sekä vuorovaikutteiset. Animoidut mainokset kiinnittävät käyttäjän huomion, mikä johtaa korkeampiin napsautussuhteisiin (CTR). Pelaajat voivat jopa pelata mikro-peliä, kuten ammunta jotain, tai heittää palloa vanne.
Vuonna 2010 Apple vakuuttui maailman hyvyydestä siirtyä HTML5, ja jättiläisiä, mukaan lukien Google seuraava puku, Flash-teknologia hidastui nopeasti.
Ad teknologiayritykset näkevät mobiililaitteiden valtavaa kasvupotentiaalia, ja siksi aloitti HTML5: n toteuttamisen uudeksi monialayksikkäiseksi mainosyksiköksi. Tätä yksikköä kutsutaan HTML5-interaktiiviseksi mainokseksi, jota tukevat uudet alan standardit, kuten MRAID, MRAID2 ja niin edelleen.
Pitkä tarina lyhyt, interaktiivinen HTML5-mainos on mainos, joka toimii nyt älypuhelimissa, tablet-laitteissa ja työpöytäselaimissa.
Joten mitä tämä Carlsberg-mainos on?
Tässä on a linkki videolle , joka näyttää iPhonessa toimivan interaktiivisen mainoksen:
Tämän interaktiivisen mainoksen tavoitteena on saada tietoinen World Rugby Sevens Tournamentista, vuotuisesta rugby-tapahtumasta, joka tapahtuu Hongkongissa. Parhaat maailman parhaat joukkueet kilpailevat vuosittain voittaakseen pääpalkinnon. Carlsberg on yksi tärkeimmistä sponsoreista.
Mainoskokemus on yksinkertainen. Käyttäjät näkevät hehkuvan Carlsberg-olutpullon. Viesti kysyy käyttäjältä napauttamalla hehkuvaa pulloa.
Kun napautat sitä, lyhyt animaatio pelaa rugby-soittimesta, jossa on kylmä, jäätynyt kauha Carlsberg-oluista.
Hauska merkki-iskulauseke ilmestyy: "Oletko valmis olutta"?
Käyttäjät voivat sitten napauttaa "Löydä meidät Facebookissa" -linkin vieressäsi mainostajan sivulta saadaksesi lisätietoja.
Takaisin säännölliseen ohjelmointiimme
Vuorovaikutteinen HTML5-mainos koostuu viidestä pääelementistä:
- index.html (päätietopiste)
- main.js (javascript, joka sisältää logiikan)
- main.css (CSS-tyylitaulukko)
- varat (visuaaliset varat)
- lähtevä linkki (jossa mainoksen pitäisi ottaa käyttäjät)
Aloitetaan mainoksen rakentaminen ...
Osa 1: index.html
Index.html koostuu tavallisista HTML-ilmoituksista.
Katso kynä Carlsberg Interactive Ad Demo - index.html esittäjä (t): Ben Chong ( @marketjs ) päällä CodePen .
Tärkeintä tässä ovat meta-näkymäportti ja linkitys main.css: hen ja main.js: hen
Kuten näette, se on melko yksinkertainen. Ei mitään tavallisesta.
Osa 2: main.js (liha ja luut)
Main.js on Javascript-tiedosto, joka ohjaa vuorovaikutusta mainoksen kanssa.
Katso kynä Carlsbergin interaktiivinen mainosdemo - main.js esittäjä (t): Ben Chong ( @marketjs ) päällä CodePen .
Ylhäältä lisätään jQuerin koko minified JS. Huomaa, että voit käyttää viimeisintä jQuery-versiota http://jquery.com/
jQuery auttaa useimpia käyttämiäsi DOM-manipulointitekniikoita.
Seuraavaksi luodaan yksinkertainen kuvapohjainen esikuormitustoiminto.
Esitämme esiladat mainoksen yhteydessä graafisia varoja.
Nyt logiikkaan. Kun mainos ladataan, huomaat, että luomme 2 div, nimeltään scene1 ja scene2 .
scene1 sisältää hehkuvan pullon div. Kun sitä napsautetaan, se siirtyy kohtaukseen2 gotoScene2-toiminnon kautta
scene2 itse sisältää tagline-div, joka ohjaa Carlsbergin Facebook-sivulle, kun se on käytetty.
Se on pohjimmiltaan se. Hyvin yksinkertaista logiikkaa tarvitaan.
Osa 3: main.css (tyylitaulukko)
Main.css-tiedosto sisältää kaikki CSS-tyyppiset tyylit.
Katso kynä Carlsbergin interaktiivinen mainosdemografia - main.css esittäjä (t): Ben Chong ( @marketjs ) päällä CodePen .
Tässä esimerkissä teimme joitain viileitä animaatioita, joita näet CSS: n kautta
Esimerkiksi hehkuva olutpullo käyttää blinker- arvoa -webkit-animaatioominaisuudesta
Lisäsimme myös muutamia tavallisia algoritmeja, joita käyttäjät haluavat rakastaa, kuten bounceIn ja bounceOut
Osa 4: Visuaaliset varat
Interaktiiviset mainokset edellyttävät kauniita visuaalisia grafiikoita. Siksi on suositeltavaa työskennellä suunnittelijan kanssa vuorovaikutteisilla HTML5-mainoksilla.
Meidän tapauksessamme käytimme: tyhjä vihreä tausta; Pullo; Taustalla rugby-mies, jolla on kylmä jäähäntä oluita; Toimintahaaste.
Osa 5: Call To Action (CTA)
Tämä on tärkeä osa vuorovaikutteista mainosta. Toimintapyyntö on suunniteltava niin, että käyttäjät todella haluavat napsauttaa läpi saadakseen lisätietoja.
Sen on oltava vaikuttava viesti, joka liittyy käyttäjän uteliaisuuteen.
Yhteenveto
Toivomme, että tämä artikkeli on hyödyllinen yhteisölle. Kuten näette, tämä interaktiivinen mainos on todella helppo rakentaa ja kestää enintään 10 minuuttia aikaa koota itsesi.
Klikkaa tästä ladata projektitiedostot ja lähdekoodi.