Yhteydenottopyyntö

Haluan että minuun otetaan yhteyttä

Puhelimitse
Sähköpostitse

Kiitos yhteydenotostasi.

Myyjämme ottaa sinuun yhteyttä mahdollisimman pian.
Sulje ikkuna

Tabletin aineisto-ohjeet

 
 
Tablet kokosivu

Responsiivinen multiplatform-kokosivu iPad, Android- ja Windows-tablet
 
 
Kokosivun tablet-aineisto on mahdollista tehdä responsiivisesti siten, että sama aineisto toimii iPadillä ja Android-tableteilla. Aineisto tehdään vastaavaan tapaan kuin mikä tahansa responsiivinen verkkosivusto halutuilla breakpointeilla huomioiden Richie Ads -mainosjärjestelmän vaatimat linkkimääritykset sekä mainoksen sisäisen analytiikan tallennukset.
 
Suunnittelussa kannattaa huomioida iPadin ja Android-tablettien erilainen kuvasuhde:
  • iPad: 1536 x 2008 px ja 2048 x 1496 px
  • Android: 2560 x 1600 px ja 1600 x 2560 px
 
Helpoin tapa on suunnitella aineisto siten, että Android-versioon jätetään turva-aluetta esimerkiksi taustaväriä tai taustakuvaa jatkamalla, jota ei näytetä iPadin näytöllä. Katso myös esimerkkiaineistot ja tarkemmat alustakohtaiset ohjeet.
 

Esimerkkiaineistot tablet kokosivu
  • Responsiivinen aineisto, jossa Android-tabletin taustakuva cropataan iPadin näytöllä. Aineiston kuviin on merkitty turva-alueet.
     
  • Responsiivinen mainosaineisto lisätietonäkymin. Aineisto on tehty käyttäen Bootstrap-pohjaa.
     
Richie Showcase -sovellus
 
Esimerkkejä aiemmista mainostoteutuksista voit katsella Richie Showcase iPad-sovelluksesta, joka on ladattavissa App Storesta. Kaikki Showcase-sovelluksen iPad-mainoksissa olevat toiminnallisuudet ovat toteutettavissa myös muiden alustojen mainoksiin.
 
 
iPad
 
iPad-kokosivun aineisto-ohjeet
 
 
 
iPad-kokosivu kuvana
 
Pystyorientaatio
  • 1536 x 2008 px (retina)
Vaakaorientaatio
  • 2048 x 1496 px (retina)
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
 
Esimerkkejä aiemmista mainostoteutuksista voit katsella Richie Showcase iPad-sovelluksesta, joka on ladattavissa App Storesta. Kaikki Showcase-sovelluksen iPad-mainoksissa olevat toiminnallisuudet ovat toteutettavissa myös muiden alustojen mainoksiin.
 
 
 
Android tablet
 
Android-kokosivun aineisto-ohjeet
 
 
Android tablet -kokosivu
 
Pystyorientaatio
  • 1600 x 2560 px
Vaakaorientaatio
  • 2560 x 1500 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ä. Mainosaineisto voi jatkua alaspäin pituussuunnassa, jolloin käyttäjä scrollaa alas.
 
Html-toteutuksessa on huomioitava, että aineisto on tehtävä skaalautuvaksi erikokoisille näytöille määrittelemällä kuvat ja html-elementit suhteellisiksi.
 
Toiminnallisuudet ja mainoksen sisäinen analytiikka toimivat oikein kun index.html tiedoston <head> osioon lisätään  <script src="mraid.js"></script>
 
 
Tekniikka ja tiedostokoot

Kokosivun mainokset toteutetaan HTML, CSS ja Javascript -tekniikoilla. Richie tukee uusimpia HTML5- ja CSS3-ominaisuuksia (esim. audio- ja video- elementit, CSS-animaatiot, yms.). Pieniä poikkeuksia lukuunottamatta Richien mainosnäkymät toimivat samalla tavalla kuin laitteen selain. Laitteen selain on siten paras tapa testata mainostoteutuksia.
 
Kokosivun aineistot toimitetaan zip-tiedostoina. Aineiston index.html-tiedosto tulee olla aineiston juuressa, kaikki muut tiedostot voivat olla kansioissa.
 
Kokosivun aineisto-zipin 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ä. Pelkkää kuvaa sisältävät aineistot voidaan toimittaa jpg- tai png-kuvina.
 
 
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" />
 
Video mainoksessa
 

Videotiedosto mahdollista ladata mainoksen mukana laitteelle, ja näin mahdollistaa toisto myös offline-tilassa, jos aineisto-zipin yhteenlaskettu tiedostokoko jää alle 5 MB:n (mobiilissa 3 MB).

Suuremmat videotiedostot on streamattava asiakkaan/digitoimiston omalta palvelimelta.

Huomaa, että autoplay on kielletty, eli video voi käynnistyä vasta käyttäjän aloitteesta.

Muistathan lisätä videon starttiin analytiikka-event esimerkkiohjeillamme. Huomaa, että embedded Youtube-videoista ei tallennu analytiikkaa Richie Adsin kampanjaraportille.
 
Esimerkkejä

Ohessa muutamia esimerkkiaineistoja, joita voit käyttää mainosten pohjana kuvia ja tekstiä vaihtamalla. Huomaa, että mainospohjat ovat vain esimerkkejä, voit aina tehdä omanlaisiasi käyttäen haluamiasi työkaluja. Testaa aina toteutuksesi Richie Preview -sovelluksilla.
 
 
Video ad example
Video ad example for tablet and mobile (zip)
Blog article
Responsve Bootstrap blog article template for native
advertising full page ads (tablet and mobile). Lataa tästä.

 
 
Richie Showcase -sovellus
 
Esimerkkejä aiemmista mainostoteutuksista voit katsella Richie Showcase iPad-sovelluksesta, joka on ladattavissa App Storesta. Kaikki Showcase-sovelluksen iPad-mainoksissa olevat toiminnallisuudet ovat toteutettavissa myös muiden alustojen mainoksiin.
 
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.
 
 
Ilmoitusliitteet
 
Tablettisovellusten ilmoitusliitteiden aineisto-ohjeet.
 
 

Ilmoitusliitteet
  •     Ilmoitusliitteen aineisto on hyvälaatuinen pdf-tiedosto (tallennettuna sivuittain, ei aukeamittain)
  •     resoluutio mieluiten vähintään 288 ppi (web-resoluution kuvanlaatu ei riitä)
  •     värit mieluiten rgb-muodossa
  •     ilman leikkuumerkkejä
 
 
Linkit
  • mahdolliset linkit verkkosivustolle lisätään pdf-aineistoon esim. Acrobat Pro -ohjelmalla (Add or Edit link -toiminto -> Invisible Rectangle -> Link Action “Open a Web Page”)
  • linkkeihin verkkosivustolle kannattaa lisätä omat seurannat (esim. lyhyt-urlit), joista klikkauksia on mahdollista seurata, koska liitteen kautta klikkanneet näkyvät verkkosivuston seurannassa kävijöinä ilman lähdettä
 
Aineistotoimitus
 

Liitteen tiedostokoosta tulee todennäköisesti suuri, joten aineisto kannattaa siirtää linkin taakse esimerkiksi Dropboxiin tai Wetransfer.comiin ja toimittaa tieto linkistä median ilmoittamaan aineisto-osoitteeseen.

 
 
HS iPad työpaikat
 
 
  • koko 1436x1436px (Retina-aineisto)
  • aineisto toimitetaan hyvälaatuisena png-kuvana
  • työpaikkailmoituksesta on koko alueen kokoinen linkki haluttuun verkko-osoitteeseen
     
 
Cross-screen ratkaisut
 
 
Cross-screen Videoparaati
 
 
Tärkeä huomioida
  • Videomainos käynnistyy mobiililaitteissa klikistä ja desktopissa mouseoverista
  • Videomainoksesta koostetaan banneriin 5 sekuntia kestävä esikatselu. Asiakas voi vaikuttaa esikatselun sisältöön
  • Katsojan käynnistämän mainoksen kestoa ei ole rajoitettu
  • Mainosnäytöt jaetaan eri päätelaitteisiin käytön mukaan
     
Kampanjaseuranta
  • Sanoma mittaa impressiot, videokäynnistykset ja klikit ulkoisille sivustoille. 
  • Asiakkaan seurannat voidaan asettaa impressioiden ja klikkien mittaamiseen.
     
Tarvittavat materiaalit tuotantoa varten
  • Spotin SG-koodi tai videotiedosto (mov, mp4)
  • Kuvamateriaalia ja logo  
 
Aineiston toimitus
 
 
 
 
Transformer
 
 
 
Mainosmuoto Leveys x Korkeus Kilotavurajoitteet
Transformer 600 x 600 px / kuva 65 kt / kuva
 
 
 
Kuvat
  • 5-10 kuvaa, koko 600x600 px, 65kt / kuva
  • Tiedostomuoto: JPG, PNG
 
Seurannat
  • Sanoma raportoi impressiot, klikit ja pyyhkäisyt
  • Jokaisessa kuvassa voi olla oma URL/klikkiseuranta.
  • Mainoksessa voi käyttää 3. osapuolen impressio- ja klikkiseurantoja
 
Aineiston toimitus

Lisätiedot
  • Tämä mainosmuoto toimii useimmissa älypuhelimissa. Laitteissa, jotka eivät tue 3D-efektiä, mainos näytetään Sliderina.
 
 
 
 
Lisätiedot
 
Tarkemmat aineisto-ohjeet: sanoma-fi.richie.fi/ipad
 
Tekniset lisätiedot: aineisto (a) richie.fi
 
Muut lisätiedot: Johannes Hocksell, johannes.hocksell (a) sanoma.fi , puh. 040 668 3696