HTML5-mainosten ohje

HTML5 Best Practices | Klikkiseurannat HTML5 aineistossa | Animaatiotyökalut | 3. osapuolen tägit | Tietolähteitä | Aineiston toimitus

 

Jos osaat tehdä websivuja, osaat tehdä myös HTML5 mainoksia. Voit käyttää mitä työkalua haluat, Notepad++,CofeeCup, Sublime, Notepad, jne. HTML5 mainos on kuin HTML-sivu, mutta pieni ja kevyt sellainen. Voit käyttää mainoksen rakentamiseen myös HTML5 animointityökaluja, kuten esimerkiksi Adobe Edge ja Google Web Designer.

Huomioi alla olevat ohjeet mainosta rakentaessasi:

  1. Aineistossa on oltava yksi kokoava html-tiedosto (index.html)
  2. Aineisto voi koostua kansiorakenteesta, jossa esimerkiksi tyylitiedostot ja kuvat sijaitsevat omissa kansioissaan.
  3. HTML5-aineisto tulee toimittaa pakattuna tiedostona (.zip). sisältäen kaikki mainokseen liittyvät tiedostot.
  4. Klikit tulee avautua uuteen selaimeen (_blank).
  5. Käytä mainoskohtaisia uniikkeja tunnisteita, luokkia, muuttujia ja funktioita.
  6. Aineiston tyylimäärittelyjen margin-arvoksi tulee asettaa 0, jotta bannerin ulkoreunoille ei ilmesty ylimääräisiä reunaviivoja.
  7. Käytä mieluiten tuplalainausmerkkejä (").
  8. Huomioi, että mainos julkaistaan median sivulla/sovelluksessa iframen sisällä. Tarkistathan, että klikkiseuranta on tehty ohjeistuksemme mukaisesti.
  9. HTML oletusmerkistö on UTF-8
  10. Tiedostokoon laskeminen: Kaikki mainokseen liittyvät tiedostot - kuvat, skriptitiedostot, fontit, tyylitiedostot - tulee laskea mainoksen tiedostokokoon mukaan.
  11. Pidä tiedostojen määrä järkevänä, jokainen yksittäinen tiedostolataus kuormittaa ja pidentää mainoksen/sivun latausta. Mainoksen ensilatauksen requestien määrä tulee olla 15.
  12. Oletuksena kaikki vanhemmat selaimet, jotka eivät tue HTML5-tekniikoita (kuten IE9 ja sitä vanhemmat versiot) suljetaan pois kampanjasta. Jos kuitenkin haluat näyttää mainoksen myös vanhemmille selaimille toimita HTML5 materiaalin yhteydessä myös backup-kuva, joka on tarkoitettu kohdennettavaksi vanhoille selaimille.
  13. Tarkista aineistosi IAB:n HTML5 validaattorissa: html5.iabtechlab.com
    Toimii myös 3. osapuolien tageilla!

 

HTML5 BEST PRACTICES

  • Kaikki url:t tulee tehdä joko protokollariippumattomasti tai käyttäen https:// -viittausta (SSL)
  • On erittäin tärkeää optimoida mainos pienimpään mahdolliseen kokoon, jotta mainos latautuu mahdollisimman sujuvasti myös hitailla yhteysnopeuksilla ja laitteilla, joissa on pienempi prosessoriteho (mobiililaitteet).
  • Ole järkevä raskaiden tiedostojen suhteen, kuten websivua kehittäessä. Optimoi skriptit, kuvat ja fonttitiedostot.
  • VÄLTÄ jQueryn käyttöä. Pyri käyttämään jQueryn sijaan muita kevyempiä JavaScritp-kirjastoja, esim. Greensock, Vanilla Javascript ja Zepto JavaScript.
  • Vältä kokonaisten fonttitiedostojen käyttöä jotka sisältävät satoja merkkejä, joita mainos ei käytä. Sen sijaan pyri lataamaan ainoastaan tarvittavat merkit. Kannattaa myös harkita tekstin konvertoimista vektoreiksi.
  • Tiedostojen minimoinnilla on suuri merkitys ja se voi parantaa suorituskykyä huomattavasti. Voit minimoida HTML:n, CSS:n ja JavaScriptin itsellesi sopivalla työkalulla, mutta lähetäthän siinä tapauksessa myös alkuperäisen aineiston omassa zip-paketissa, jos aineistoa tarvitsee muokata.
  • Jos teet cross screen mainosta, mainos tulee toteuttaa responsiivisena. Tarkista, että se skaalautuu oikein tarvittaviin mainosmuotoihin ja näyttöihin.

 

Paranna ensilatausta

  • Käytä inline CSS tyylejä ja HTML:ää, jotta mainoksen alkunäkymä latautuisi mahdollisimman nopeasti.
  • Rajoita ensilatauksen riippuvuuksia renderöinnin estäviin .js ja .css tiedostoihin.
  • Lataa interaktiiviset elementit viivästetysti tai toissijaisena latauksena.
  • Raskaat tiedostot tulisi ladata vasta käyttäjän aktivoinnista (esim. video)
  • Vältä kaikkia turhia latauksia.
  • Tehostaaksesi mainoksen latautumista yhdistä tiedostot aina kun mahdollista, kuten JavaScript-kirjastot, HTML, CSS.
  • Parantaaksesi visuaalista ensikokemusta tarkista laite ja yhteysnopeus ja tarjoa optimaalisin vaihtoehto. Näytä esimerkiksi hitaammilla yhteysnopeuksilla kevyempi versio mainoksesta, jotta käyttökokemus olisi mahdollisimman hyvä.

 

Kuvatiedostot

  • Optimoi kaikki kuvat
  • Esilataa kuvat kun tarpeellista
  • Yhdistä kuvat kun mahdollista (sprite sheet)
  • Käytä sprite sheetejä useamman kuvan ja animaation näyttämiseen

 

VÄLTÄ:

  • Mainoksessa ei saa käyttää häiritsevän nopeita/vilkkuvia animaatioita grafiikassa, tekstissä eikä taustan elementeissä.
  • Vältä animaatioita, jotka syövät prosessoritehoja. (20% keskimääräinen prosessoritehon kuormitus hyväksytään, pysyvät 70% piikit hylätään.)
  • Vältä tai vähennä:
    • eval() käyttöä välttääksesi turvallisuusriskit
    • Vältä globaaleja muuttujia
    • luuppien ja ajastimien käyttöä (tyhjennä/peruuta setInterval ja setTimeout heti, kun se on suoritettu)
    •  setInterval
    •  setTimeout
    •  requestAnimationFrame
  • Minimoi DOM yhteydet
  • Vältä jQueryn käyttöä - jQuery ei ole suositeltavaa HTML5 mainoksissa, sillä sen suorituskyky on huono varsinkin mobiililaitteissa. Lisäksi jQuery on tarpeettoman raskas, suurinta osaa kirjaston funktioista ei tarvita. Sen sijaan voit käyttää kevyempiä JS-kirjastoja, kuten GreenSock, Vanilla Javascript tai Zepto JavaScript

 

Huomioi mobiiliaineiston suunnittelussa:

  • Testaa mainos iOS, Android ja Windows Phone alustoilla.
    • Kaikki kolme alustaa ovat tärkeitä Suomen markkinoilla.
    • Huolehdithan, että mainos toimii vähintään iOS9+, Android 4.4+ ja WP 8.1+ alustaversioissa.
    • Ilmoita viimeistään aineiston toimituksen yhteydessä jos mainos toimii vain jollain tietyillä alustoilla tai tietyillä laitteilla.
  • Kaikki aktivoinnit tulisi olla mobiilioptimoituja. Esimerkiksi laskeutusmissivu tulisi olla optimoitu mobiililaitteille - helppo navigointi, luettava sisältö ilman zoomausta.
  • Mainosten optimointi mahdollisimman kevyiksi on välttämätöntä, jotta varmistetaan nopea latautuminen myös hitaammilla yhteysnopeuksilla ja laitteilla joissa on heikompi prosessoriteho.
  • Huomioithan, että mobiiliverkostomme sisältää sivustoja, natiivisovelluksia ja hybridisovelluksia, joten aineiston tulee toimia näissä ympäristöissä. Richmediamainokset tulee olla MRAID-yhteensopivia, jotta ne toimivat oikein natiivisovelluksissa (esim. kampanjasivun avaaminen tulee toteuttaa sovelluksissa mraid.open funktiolla).
    Lue lisää: kuinka käyttää MRAIDia mainoksissa (pdf)

 

Kuinka lisätä klikkiseurannat HTML5 aineistoon?

Alla ohjeet kuinka lisätä aineistoon klikkiseurannat, kun HTML5-aineisto ajetaan suoraan Sanoman järjestelmien kautta.

Sanoma Click API

Lisää seuraava koodin pätkä html-koodisi head-osioon:

HUOM! Voit kopioida koodinpätkän täältä »

 

 

Klikkitagien määrittäminen

Esimerkki 1: Kaksi esimerkkiä clickTagin määrittämisestä jos klikkiseuranta/laskeutumissivun URL lisätään suoraan HTML-koodiin:

<a href="javascript:void(0);" onclick="SanomaClicksApi.openClickUrl('https://yourlinkgoeshere'); return false;">Click here</a>

Esimerkki 2: Esimerkki clickTAGn määrittämisestä jos klikkiseuranta/laskeutumissivun URL määritellään mainospalvelimen puolella:

<a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag('clickTAG'); return false;">Click here</a> 

Esimerkki 3: Esimerkki useamman clickTagin määrittämisestä. Voit käyttää korkeintaan viittä clickTAGian: clickTAG, clickTAG1, clickTAG2, clickTAG3, clickTAG4.
Huomioithan, että mainospalvelin raportoi kaikki clickTagin kokonaisuutena, ei erikseen.

<a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag('clickTAG'); return false;">Click here</a>
<a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag('clickTAG1'); return false;">Click here</a>
<a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag('clickTAG2'); return false;">Click here, too</a>
<a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag('clickTAG3'); return false;">Click here, too</a>
<a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag('clickTAG4'); return false;">Click here, too</a>

 

HTML5 animaatiotyökalut

Voit käyttää mainoksen toteuttamiseen animointityökaluja, kuten esimerkiksi Adobe Edge ja Google Web Designer. Huomioi, että aineistoon tulee sijoittaa clickTAG, jotta mainoksen klikit välittyvät mainospalvelimelle.

Olemme luoneet yksityiskohtaiset ohjeet klikkiseurantojen lisäämiseen. Yleisohjeen lisäksi olemme kasanneet omat ohjeet klikkiseurantojen lisäämiseen Adobe Edgelle ja Google Web Designerille sekä HTML5-materiaaleille, jotka on toteutettu Adobe Flashilla tai käännetty HTML5-muotoon Swiffylla.

HTML5 & kolmannen osapuolen tägit

  • HTML5 mainosten ohjeet koskevat myös tagin takaa ajettavia aineistoja
  • Tagien tulee olla SSL (HTTPS) yhteensopivia.
  • Desktop-kampanjoissa tulee käyttää iframe-tageja
  • On suositeltavaa, että kaikki mainoksessa käytettävät tiedostot, kuten esimerkiksi mainoksessa käytetyt kuvat, JavaScript-kirjastot, fonttitiedostot ja CSS-tiedostot latautuvat kyseisen kolmannen osapuolen toimijan palvelimilta, eivät sijaitse jaetuilla palvelimilla.
  • Kaikki vanhemmat selaimet, jotka eivät tue HTML5-tekniikoita (kuten IE9 ja sitä vanhemmat versiot) suljetaan oletuksena pois kampanjasta. Jos kuitenkin haluat näyttää mainoksen myös vanhemmille selaimille toimita HTML5 materiaalin yhteydessä myös backup-kuvan tagi, joka on tarkoitettu kohdennettavaksi
  • vanhoille selaimille. Selaintunnistus on myös mahdollista tehdä suoraan mainoksen sisällä.
  • 3. osapuolen tagit mobiilissa »

 

Hyödyllisiä tietolähteitä

Selainreferenssejä

  • caniuse.com - Can I Use, laaja tietopaketti mitä HTML5 ja CSS3 ominaisuuksia mikäkin selain tukee 
  • html5please.com - HTML5 Please, tietopaketti eri selainten HTML5 tuesta.
  • html5test.com - HTML5 Test, testaa mitä HTML5 ominaisuuksia selaimesi tukee
  • mobilehtml5.org - Mobile HTML5, mitä HTML5 ominaisuuksia eri mobiilialustat tukevat

JavaScript-kirjastoja

  • vanilla-js.com - Vanilla JavaScript on nopea ja kevyt cross-platform framework tehokkaiden JavaScript applikaatioiden rakentamiseen.
  • zeptojs.com - Zepto Javascript on minimaalinen JavaScript kirjasto moderneille selaimille, laajasti jQuery-yhteensopiva API. Jos jQuery on tuttu, Zepton käyttö on helppoa.
  • greensock.com - GreenSock JavaScript animointikirjasto, yleisesti käytetty JS-pohjaisissa animaatioissa. Tuttu varsinkin ActionScript-kehittäjille.
  • modernizr.com - Modernizr, JavaScript kirjasto, joka havaitsee HTML5 and CSS3 ominaisuudet käyttäjän selaimessa. Mahdollistaa ehdollisen resurssien lataamisen, jotta kokemus on mahdollisimman sulava selaimesta riippumatta.

Kuvien pakkaaminen

  • tinypng.com - TinyPNG, online työkalu PNG- ja JPG-kuvien häviöttömään pakkaamiseen.

Sprite-generaattoreita

Web-fontteja

HTML5-animaatiotyökaluja

Flash swf-tiedostojen konvertointi HTML5-muotoon

 

 

 

HTML5 Best Practices | Klikkiseurannat HTML5 aineistossa | Animaatiotyökalut | 3. osapuolen tägit | Tietolähteitä | Aineiston toimitus