Tietoisku HTML5-banneriaineistoista

HTML5 (Hypertext Markup Language) tarjoaa mainostajalle mahdollisuuden tehdä näyttäviä, toiminnallisia mainosmuotoja desktopiin, mobiiliin ja tablettiin. Toiminnallisilla mainoksilla on huomattavasti positiivisempi brändimielikuva verrattuna staattisiin bannereihin ja niihin reagoidaan klikkaamalla myös herkemmin kuin perinteisiin still-bannereihin. HTML5-bannereiden avulla saat täydet tehot irti ostetusta mainospaikasta.

Avainsanat:

Bannerituotanto, Digitaalinen markkinointi, HTML5

Animoidut bannerit ovat vetovoimaisia

Banneriaineistot voidaan toimittaa kuva- (png, gif ja jpg) tai HTML5 -muodossa. Suosittelemme vahvasti animoitujen ja toiminnallisten aineistojen tekemistä HTML5 -muotoon.

Periaatteessa animaatiota sisältävien bannereiden tekeminen on helppoa. Varsinainen haaste voi tulla kuitenkin vastaan, kun banneri on valmis ja se julkaistaan, miten banneri saadaan toimimaan erilaisten mainosjärjestelmien kanssa. Oikein tehdyt HTML5-bannerit saadaan toimimaan hyvin erilaisten mainosjärjestelmien kanssa.

HTML5-aineiston ensilatauksen maksimikoko tuplasti suurempi verrattuna perinteisen kuva-aineiston maksimikokoon. Esimerkiksi boksi 300×250 px jpg/png-kuvatiedoston maksimikoko on 40 kt, kun taas vastaavan HTML5- aineiston ensilatauksen maksimikoko on yleensä 80-100 kt. Tämä mahdollistaa toiminnallisuuksien helpomman upottamisen banneripintaan ilman, että bannerista tulee liian raskas.

Miksi toiminnalliset HTML5-bannerit?

Huomattavasti positiivisempi brändimielikuva
Toiminnallisia bannereita klikataan herkemmin
Täydet tehot irti ostetusta mainospaikasta
HTML5-aineiston ensilataus voi olla painoltaan jopa tuplasti suurempi verrattuna kuva-aineistoon
Erotu kilpailijoistasi, harva ymmärtää hyötyjä tai osaa tuottaa HTML5-aineistoja
Oikein tehdyt HTML5-bannerit saadaan toimimaan hyvin erilaisten mainosjärjestelmien kanssa

HTML5 esimerkkitoteutuksia – Klikkaa ja katso!

HTML5 aineisto-ohjeet

HTML5-bannerit ovat käytännössä sivuun linkitettyjä omia HTML-sivuja. Ne eivät saisi hidastaa eikä häiritä isäntäsivun toimintaa. Aineisto-ohjeissa kerrotaan, millaisia JavaScript kirjastoja saa käyttää tai mitä funktioita ei pitäisi käyttää. Miten linkit tehdään ja kaikkea vastaavaa teknistä. Aineisto-ohjeet kattavat periaatteet, joita bannereiden on noudatettava. Selkeitä käytännön ohjeita HTML5-bannereiden tekoon ei ole juurikaan tarjolla. HTML5 aineistoja ei kovinkaan moni osaa vielä tehdä, minkä vuoksi hyvin usein mainostajat joutuvat kääntymään taitavan graafikon puoleen.

IAB on laatinut yleiset HTML5-ohjeet.

Lataa tästä HTML5 -aineisto-ohje Google AdManageriin.

Haluatko kuulla lisää?

Ota yhteyttä artikkelin kirjoittaneeseen ammattilaiseen.

Anna-Maria Hokkanen

Design Team Lead

Tutustu myös blogeihimme aiheesta

Mitä on Googlen Display-mainonta?

Google Display -mainonta on Googlen Display-verkostossa näkyvää bannerimainontaa. Kustannustehokas mainosmuoto tavoittaa laajoja yleisöjä ja vie viestisi tehokkaasti perille.

Google bannerimainonnan hyödyt

Googlen bannerimainonta eli Display-mainonta sopii moneen. Se on hyvä tapa mainostaa visuaalisin keinoin, tavoittaa laajasti, kohdennetusti ja mitattavasti.

Tärkeimmät vinkit bannerien tekemiseen

Näillä vinkeillä ja huomioilla onnistut tekemään toimivat ja tyylikkäät bannerit. Opi ja poimi tärkeimmät vinkit bannerien tekemiseen.

Vinkkejä toimivan mainosviestin kirjoittamiseen bannerimainonnassa

Tiedätkö millainen on toimiva ja tehokas mainosviesti bannerimainonnassa? Lue blogistamme vinkit hyvän banneriviestin kirjoittamiseen!

Millainen on toimiva bannerimainos?

Millainen on toimiva bannerimainos? Toimivuuteen vaikuttaa bannerin selkeä ulkoasu ja toimiva mainosteksti. Lue blogi ja opi aiheesta lisää.