ipad-mainokset Yleisiä ohjeita ja tekniikka lyhyesti

Transkriptio

1 ipad-mainokset Yleisiä ohjeita ja tekniikka lyhyesti

2 Koko sivun ipad-mainoksissa yhdistyvät uusien teknologioiden ja printtimainonnan parhaat ominaisuudet: Koko sivun mainos ei keskeytä, vaan rikastaa lukukokemusta. Mainos on helppo ohittaa, jos se ei kiinnosta, joten mainosta ei koeta ärsyttävänä. Mainoksen näkevä käyttäjä on jo valmiiksi mainostajan kampanjasivustolla. Mainoksissa on tutkimusten perusteella hyvät huomioarvot ja statistiikan perusteella loistavat engagement-tulokset.

3 Richie-mainosjärjestelmän toimintaperiaate poikkeaa perinteisestä verkkomainonnasta ja mahdollistaa paljon enemmän: Mainokset ladataan käyttäjän laitteille etukäteen, mikä mahdollistaa suuret aineistokoot ja näyttävät rich media -toteutukset. Esilatauksen ansiosta mainokset toimivat myös ilman verkkoyhteyttä, samoin analytiikka. Mainos näytetään mainosnäkymässä välittömästi ilman latausviivettä.

4 HTML5-tekniikka Mainokset toteutetaan HTML, CSS ja Javascript -tekniikoilla. Richie tukee uusimpia HTML5- ja CSS3-ominaisuuksia (esim. audio- ja video-elementit, CSS-animaatiot, yms.). Myös lomakkeet ovat mahdollisia. Mainos näytetään sovelluksen sisäisessä selainnäkymässä (UIWebView), joten mainosnäkymä toimii samoin kuin Safarissa. Mainoksesta toteutetaan sekä pysty- sekä vaakaorientaatiot, ja ne määritellään CSS Media Queryitä käyttäen samaan aineistoon. Mainos on siis näytön leveyden mukaan responsiivinen.

5 Hyvä tietää Richie-mainosten tekniikasta Mainoksesta näytetään ensin ns. default-kuva noin sekunnin verran, jotta mainoksen HTML ehtii piirtymään mainosnäkymään. Tämä kannattaa huomioida animointeja suunnitellessa ja toteuttaessa. Linkki mainoksesta ulos on määriteltävä sijaan muotoon richiemodal-browser. Muussa tapauksessa linkki avautuu mainosnäkymässä. Mainoksen tekijän on lisättävä mainoksen sisäistä analytiikkaa varten Javascriptillä eventit painikkeisiin. Tätä varten aineistoon on lisättävä RichieORMMA.js-tiedosto, jota kutsutaan eventin tallennuksessa. Aineisto toimitetaan zip-tiedostona, jossa index.html on oltava aineiston juuressa. Aineisto-zip voi sisältää JavaScript-kirjastoja (vältä tosin käyttöä aina kun pystyt). Aineisto ladataan käyttäjän laitteelle, joten älä sisällytä siihen esim. asiakkaan fonttitiedostoja, ellei niihin ole julkaisulupaa. Aineisto-ohjeet:

6 Retina Mainosten Retina-kuva-aineistojen koot ovat 1536 x 2008 px ja 2048 x 1496 px. Retina-näytöllä 1 piste on 2 pikseliä, joten kuvien pitää olla kaksi kertaa suurempia kuin niille määritelty pikselikoko. Kaikille kuville pitää aineistossa määritellä pikselikoko. Esim. taustakuville määritellään background-imagen koko. Aineistot toimitetaan erillisinä. Retina-versio trafikoidaan vain niille käyttäjille, joilla on Retina-iPad, jotta vanhemman laitteen omistajat eivät joudu lataamaan suurempia tiedostoja. Huomioitava, että tällä hetkellä yli 2 megapikselin jpg-kuvissa ja yli 3 megapikselin png-kuvissa selain skaalaa kuvat automaattisesti pienemmiksi. Laajat kuvat on siis rakennettava useista osista. Tähän tulossa luultavasti muutos ios6:ssa. Lisätietoa Safari Image Delivery Best Practices (developer.apple.com)

7 Muista tehdessä Laite on hidas Laitteella on vähän tehoa ja muistia, joten VÄLTÄ JQueryä aina kun mahdollista. Käytä CSS:ää aina kun mahdollista, esim. animoinneissa....mutta selain on kehittynyt Voit käyttää kerrankin kaikkia uusimpia WebKit HTML5-ominaisuuksia. Absoluuttiset koot Näytön koko on tiedossa, joten kaikki elementtien sijainnit voi määritellä pikselilleen. Voi oikoa Mainokseen ei tarvitse tehdä täydellistä semanttista HTML:ää esim. esteettömyyden tai hakukoneiden takia. Elementit voi toteuttaa laajoina kuvina, eikä niitä tarvitse automaattisesti pilkkoa erikseen. Huomioi swipe Mainokseen tullaan ja siitä poistutaan swipellä. Mainos ei saa estää käyttäjää poistumasta swipellä, joten älä käytä sitä mainoksen elementeissä muuten kuin hyvin rajatulla alueella. Käyttäjä ehtii myös poistua mainoksesta näkemättä sisältöä, jos sisällön animoinnissa on viivettä.

8 Työkalut, lisätiedot ja testaus Desktopilla ios Simulator, Safarin Web Inspector + User Agent ipadillä Piilota Safarin User Interface HTML:ssä ja tallenna Home Screeniin <meta name="apple-mobile-web-app-capable" content="yes" /> Safari Dev Center Aineisto-ohjeet Testisovellus kehittäjille Tulossa Richieltä...

9 Ajatuksia suunnitteluun Mainos voi olla jo itsessään kampanjasaitti Rikkain mahdollinen luova toteutus syntyy, kun mahdollisimman suuri osa mainoskonseptista toteutetaan itse mainoksessa. Ajattele mainosnäyttöä kävijänä verkkosivustolla. Eläydy median käyttötilanteisiin Käyttäjä näkee pelkästään koko sivun mainoksen, joten käyttäjän huomiosta ei tarvitse kilpailla muun sisällön tai mainoksen kanssa. Et tarvitse tarpeetonta, konseptiin kuulumatonta vilkettä ja välkettä, vaan voit mennä suoraan asiaan jo mainoksessa. Kerro tarina Hyödynnä tarvittaessa median mahdollistama rikas tarinankerronta: animoinnit, liikkuva kuva ja ääni ovat mahdollisia. Älä hylkää automaattisesti pitkää tekstiä, koska käyttäjät ovat sovelluksessa lukemassa. Muista myös, että hyvä still-kuvatotetus voi kertoa konseptin parhaalla mahdollisella tavalla. Intuitiivisuus ja selkeys Käyttäjä ei halua opetella mainoksen käyttöä. Älä kikkaile pelkästään sen takia, että se on teknisesti mahdollista. Monimutkaisissa, useita näkymiä sisältävissä toteutuksissa tarvitaan myös hyvää käyttöliittymäsuunnittelua. Aktivoi ja ohjaa ostopaikkaan Mieti, mitä haluat käyttäjän tekevän mainoksessa ja viesti se selkeästi. Muista, että ipad-käyttäjät ovat alttiita heräteostoksille.

10 Richie Oy kehittää digitaalisia julkaisuratkaisuja. Richien päätuotteet ovat rich media -mainonnan mahdollistava Richie-mainosjärjestelmä sekä erityisesti aikakauslehtien ipad-julkaisuun suunniteltu Maggiojulkaisualusta. Mainosjärjestelmä on käytössä useissa suomalaisissa sovelluksissa, mm. Helsingin Sanomat, ipad, iphone Ilta-Sanomat iphone MTV3 Juuri Nyt ipad, iphone, WP7 Talouselämä ipad Taloussanomat ipad, iphone Etelä-Saimaa ipad Kymen Sanomat ipad Kouvolan Sanomat ipad

11 Showcase Richie Showcase on ipad-sovellus, joka esittelee parhaat ja tuoreimmat Richie-mainostoteutukset. Jos haluat sovelluksen omalle ipadillesi, ota yhteyttä osoitteesta