iPad
iPad-kokosivun aineisto-ohjeet
iPad-kokosivu kuvana
Pystyorientaatio
Vaakaorientaatio
Jos mainosaineisto sisältää pelkästään kuvaa, aineiston voi toimittaa png-kuvana tai hyvälaatuisena jpg-kuvana, jolloin aineistoon lisätään automaattisesti koko kuva-alueen kokoinen linkkialue. Pysty- ja vaakakuvien yhteenlaskettu maksimitiedostokoko on 5 MB.
iPad-kokosivu rich media
Pystyorientaatio
- 768 x 1004 px
- Retina-aineiston kuvakoko 1536 x 2008 px
Vaakaorientaatio
- 1024 x 748 px
- Retina-aineiston kuvakoko 2048 x 1496 px
Aineisto kannattaa tehdä responsiiviseksi määrittelemällä elementtien sijainnit suhteellisiksi siten, että mainos toimii sekä iPad- että Android-tabletilla, jolloin aineisto voidaan ajaa kaikilla alustoilla.
Kokosivun mainos näytetään artikkelien välissä, käyttäjä saapuu mainokseen ja poistuu mainoksesta swipellä. Materiaalista tehdään molemmat kokoversiot (Retina ja ei-Retina) kummastakin orientaatiosta. Mainosaineisto voi jatkua alaspäin pituussuunnassa, jolloin käyttäjä scrollaa alas.
Huom. html-toteutuksessa on huomioitava, että retina-aineiston 2x-kuville on määriteltävät koot, esimerkiksi css:llä: background-image: url(background-1536x2008.png); background-size: 768px 1004px;
Aineistojen html:t voivat siis olla identtiset, kunhan kaikille kuvaelementeille on määritelty koot.
Suunnittelussa kannattaa huomioida esimerkiksi painikkeiden ja tekstin koko, jotta elementit eivät ole liian pieniä kosketusnäytölle. Interaktiivisten elementtien kuten painikkeiden suositeltu vähimmäiskoko on 44 x 44 px (Retina-näytöllä 88 x 88 px).
Tekniikka ja tiedostokoot
Kokosivun mainokset toteutetaan HTML, CSS ja Javascript -tekniikoilla. Richie Ads tukee uusimpia HTML5- ja CSS3-ominaisuuksia (esim. audio- ja video- elementit, CSS-animaatiot, yms.). Pieniä poikkeuksia lukuunottamatta Richie Adsin mainosnäkymät toimivat samalla tavalla kuin laitteiden selain. Mainosta voi siis ajatella web-sivuna, joka sisältää kaikki tarvittavat tiedostot paikallisesti.
Kokosivun aineistot toimitetaan zip-tiedostoina. Aineiston index.html -tiedosto tulee olla aineiston juuressa, kaikki muut tiedostot voivat olla kansioissa. Kaikista html-aineistoista toimitetaan sekä Retina että ei-Retina - kokoversiot. Pelkkää kuvaa sisältävät aineistot voidaan toimittaa png-kuvina pelkästään retina-koossa.
Kokosivun aineisto-zipin tiedostokokoraja on 3 megatavua. Retina-version suurempien kuvien takia tiedostokokoraja on 5 megatavua. Mainosaineistot ladataan käyttäjän laitteelle sovellusta käynnistäessä, mikä mahdollistaa verkkobannereita suuremmat tiedostokoot sekä mainosten toiminnan myös offline-käytössä.
Mainoksen testaaminen Richie Previewllä
Mainosaineistoa voi testata oikeassa ympäristössä analytiikkoineen lataamalla
Richie Preview -sovellus App Storesta iPadille tai iPhonelle. Sovellus liitetään ensimmäisellä käyttökerralla omaan Dropbox-tiliin, jonka jälkeen aineistoja voi testata sovelluksella siirtämällä mainokset kansioina Dropboxiin luotuun Apps/Richie Preview iOS -kansioon. Huomaa, että näet sovelluksesta aineistoon tehdyt muutokset lähes reaaliaikaisesti, jos muokkaat aineistoa suoraan Dropbox-kansiosta.
Sovelluksen avulla voit testata myös swipe-eleen toimivuuden, jotta aineisto ei estä käyttäjää pääsemästä seuraavaan artikkeliin sekä mainoksen sisäisen analytiikan tallentumisen.
Gesture event
Käyttäjä poistuu mainoksesta swipella, joten tätä ei voi käyttää mainoksen sisällä liikkumiseen, eikä mainosaineisto saa estää käyttäjää poistumasta mainoksesta. (ÄLÄ käytä esimerkiksi document.ontouchmove = function(e) {e.preventDefault();})
Swipen käyttö pienillä alueilla (esimerkiksi slidereissa tai vastaavissa toteutuksissa) on kuitenkin mahdollista kunhan tämä ei häiritse käyttäjän poistumista mainoksesta.
Mainoksen sisäinen analytiikka
Mainosaineistoissa on mahdollista tallentaa tapahtumatietoja käyttäjän toimista, esim. mainoksen sisäisistä painikkeiden ja videon klikkauksista. Event-tietojen tallennus onnistuu myös offline-tilassa. Jos event-tallennuksia ei lisätä aineistoon, analytiikat saadaan ainoastaan mainosnäytöistä sekä aineiston ulkopuolelle ohjautuvista klikkauksista, joten suosittelemme analytiikkatallennuksen asettamista kaikkiin mainoksen sisäisiin toiminnallisuuksiin.
Aineistoon on liitettävä mainoksen sisäistä analytiikkaa varten RichieORMMA.js -tiedosto (lataa alta). Tiedostoon ei saa tehdä muutoksia, sillä tiedosto saatetaan vaihtaa trafikoinnin yhteydessä uudempaan.
ESIMERKKI 1
Eventin lisääminen esim. mainoksen painikkeeseen.
ESIMERKKI 2
Analytiikka-eventin lisääminen videon starttiin (ensimmäinen play eriteltynä):
Orientaatio
Landscape ja portrait -orientaatiot tehdään samaan mainosaineistoon, ja ne määritellään CSS Media Queryitä käyttäen.
ESIMERKKI
<link rel="stylesheet" media="all and (orientation:portrait)"href="css/portrait.css" /><link rel="stylesheet" media="all and (orientation:landscape)"href="css/landscape.css" />
Linkkimääritys
Mainosaineiston ulkopuolisissa linkityksissä on käytettävä http:n sijaan muotoa richie-modal-browser://www.example.com. Tällöin linkin kohteena oleva sivusto aukeaa mainosnäkymässä. Jos linkkimääritystä ei muokata, sivusto aukeaa suoraan mainosnäkymän sisällä, eikä käyttäjä pääse palaamaan sovelluksen sisältöön.
Mahdollinen mediatoimiston seuranta-URL on liitettävä valmiiksi mainosaineistoon, joten se kannattaa kysyä mediatoimistolta jo etukäteen aineistoa tehtäessä.
Testaaminen selaimessa
Aineistoa voi testata selaimessa ilman virheilmoituksia lisäämällä URLin loppuun: ?richie_browser_mode=1
Videoaineistot
Jos mainosaineisto-zipin tiedostokoko jää alle 3 megatavuun (Retina-versio 5 megatavua), on videotiedosto mahdollista ladata mainoksen mukana laitteelle, ja näin mahdollistaa toisto myös offline-tilassa. Suuremmat videotiedostot on streamattava asiakkaan tai toimiston omalta palvelimelta.
Huomaa, että autoplay on kielletty, eli video voi käynnistyä vasta käyttäjän aloitteesta.
Aineistojen toimitusaika
Valmiiden aineistojen toimitus vähintään 3 arkipäivää ennen kampanjan alkua, jotta aineistojen ja analytiikan toimivuus ehditään testaamaan ja mahdolliset ongelmat selvittämään ajoissa.
Esimerkkiaineistoja iPad-kokosivu
Richie Showcase -sovellus