Responsiiviset mainokset

Transcript

1. Responsiiviset mainokset
2. Kehitämme 12 hengen tiimillä huipputasoisia digijulkaisemiseen, rich media -mainontaan, analytiikkaan ja lukijamarkkinointiin.
3. Olemme kehittäneet Richie Ads -mainosjärjestelmän sekä Maggio-julkaisualustan. ! Richie Ads • Toiminnallisiin rich media -mainoksiin suunniteltu mainosalusta • Kaikille alustoille (iOS, Android, WP, Win8, HTML5) • Mainosten taustalataus mahdollistaa aineistojen suuret tiedostokoot • Mainokset tuotetaan digitoimistoissa HTML5-tekniikalla ! ! Maggio • Taitetulle sisällölle suunniteltu julkaisualusta, jossa Richie Ads aina sisäänrakennettuna • iOS, tulossa näinä viikkoina Android ja HTML5
4. Richie Ads -mainosjärjestelmällä on julkaistu 
 yli 10 000 responsiivista HTML5-mainosta. 
 Jokainen Richie Ads -mainosaineisto on responsiivinen HTML5-sivusto.
5. Responsiivisuus on webin minimistandardi. Erillisten mobiilisivustojen määrä vähenee responsiivisten sivustojen myötä.
7. @media screen and (max-device-width: 767px) Responsiivinen sivu mukauttaa sisällön päätelaitteen leveyden mukaan. Tämä tehdään käyttäen CSS:n media queryjä. ! Esimerkiksi = kaikki iPadin pystyorientaatiota kapeammat näyttöleveydet
8. Selainten leveyksiä on lukematon määrä, mutta yksinkertaisimmillaan voidaan valitaan esimerkiksi kolme break pointtia, joihin design ja html optimoidaan. Mobiili Tablet Desktop 767 px ja alle 768–1024 px 
 (skaala laaja) 1025 px ja yli
9. Visuaalisen asettelun lisäksi elementtejä on mahdollista piilottaa ja lisätä eri selainkokoihin. Sisältö voi olla täysin erilainen eri leveyksillä (tosin huomioitava suorituskyky).
10. Responsiivisen sivuston tekniikassa ei ole mitään mystistä. Tekniikka on samaa html:ää kuin ennenkin. ! Designin monimutkaisuus ja break pointien määrä vaikuttavat eniten työmäärään. Jokaista leveyttä voi optiomoida loputtoman paljon niin halutessaan. Vaihtoehtoisesti työn voi tehdä erittäin kevyesti, jolloin responsiivisuus ei nosta juurikaan työmäärää.
11. Käytämme itse tätä yleisintä frameworkiä, 
 usein myös mainoksissa:
 http://getbootstrap.com
12. Responsiivisen mainoksen tai sivuston suunnittelu alkaa tehokkaimmin suoraan html:n tekemisestä. Perinteisen staattisen leiskan sijaan korostuu entistä enemmän miten saitti tai mainos toimii, joten staattisen visusuunnittelun sijaan kannattaa mennä suoraan toteutukseen.
13. Miksi responsiivisuuden pitäisi kiinnostaa?
14. Saitti tehdään nykyään lähes aina responsiiviseksi 
 – eri laitteiden ja selainten tukeminen on mainostajien ja web-kehittäjien arkea. ! HTML5 on yleisimmin käytetty tekniikka kaikessa digitaalisessa markkinoinnissa (paitsi desktopin display- mainonnassa).
15. Responsiivinen kampanjasaitti iPad-mainoksena. Mainoksessa ei ollut yhtäkään linkkiä, koska sisältö oli jo suoraan mainoksessa. (toimisto TBWA)
16. Case Stockmann Herkku: 
 Mainospohja tehty alusta asti responsiiviseksi, jolloin tablettisovellusmainos toimii myös mobiili-ländärinä. http://stockmann.campaigns.richie.fi
17. ! ! ! Uudet päätelaitteet ja responsiiviset saitit ovat mahdollisuus kehittää digimainostuotteet puhtaalta pöydältä. ! ! !
18. Perinteisen display-mainonnan ongelmat (kärjistetysti): ! • Käyttäjää ei kiinnosta • Mainos häiritsee lukemista tai sitä ei edes huomaa • Suunnittelijaa ei kiinnosta • Sivulatausten metsästäminen johtaa klikkihuoraamiseen ja käyttökokemuksen heikentämiseen • Targetointi on huonojen tulosten osaoptimointia • Bulkista ei saa rahaa – bannerivilinästä ei olla halukkaita maksamaan • Mainosverkostot vetivät hinnat alas • Flash on kuollut teknologia !
19. K Y L L Ä , F L A S H O N K U O L L U T T E K N O L O G I A . E N D O F D I S C U S S I O N .
20. Tulevaisuudessa digitaalisten tuotteiden mainosrahat eivät tule standardibulkkimainoksista, vaan käyttäjäystävällisistä, sisältöön sovitetuista mainosmuodoista.
21. Vox Median Aquarium -responsiivinen mainoskonsepti:
 http://aquarium.voxmedia.com/siren/
22. Polygonin simppeli mainos scrollaavan 
 sisällön välissä:
 http://www.polygon.com/a/ps4-review/controller
23. Vox Median muut esimerkit:
 http://www.voxmedia.com/media-kit/ad-products
24. Mainospaikan täyttämisestä ajatus tulisi muuttaa siihen, kuinka mainostajan konsepti voidaan tuoda median käyttötilanteisiin parhaalla mahdollisella tavalla. ! Monet mainostajat kehittävät hyvinkin laajoja palveluita, joiden osien hyödyntäminen suoraan mainoksessa olisi parasta markkinointia, ja hyvä syy maksaa mediasta.
25. Valmiita, kaikille sopivia ratkaisuita ei ole: mainosmuotojen kehittäminen vaatii ennenkaikkea kokeilua ja tekemistä – kädet saveen. ! Lean-ajattelu ja ketterän kehityksen menetelmät leviävät myös suurten yritysten markkinointiosastoille, jatkossa varmasti vahvemmin myös kiinteämmäksi osaksi mainonnan arkipäivään koko prosessia myöten.
26. MUTTA ! HTML5 on digialan standardi, mutta ei pelasta maailmaa. Responsiivisuuden suurin ongelma on laitteiden suorituskyky – HTML5-sivustototeutus ei välttämättä koskaan pääse natiivisovelluksen tasolle, koska html:n renderöinti hidasta, myös tehokkaalla laitteella. Tämä on huomioitava myös mainosten toteutuksessa. ! Tavallisen sivuston latausajasta vain 1/3 menee sivuston tiedostonsiirtoon, 2/3 ajasta kuluu renderöintiin, layoutin ja Javascriptin käsittelyyn.
27. Executive summary ! • Responsiivisuus on verkon standardi ja mainostajien arkipäivää • Perinteinen display-mainonta on ollut jo pitkään tiensä päässä • Responsiivisuus on mahdollisuus miettiä verkkomainonta puhtaalta pöydältä • Median tulee kehittää uusia, käyttäjäystävällisiä mainosmuotoja, jotka ovat luonteva osa sisältöä • HTML5:n suurimpana rajoitteena on suorituskyky
28. Linkkejä ! http://www.voxmedia.com/media-kit/ad-products http://www.polygon.com/a/ps4-review/camera http://support.richie.fi/article/15-supporting-both-portrait-and-landscape-orientations http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/ http://getbootstrap.com http://www.responsinator.com http://responsivedesignchecker.com/ ! ! ! ! !
29. 
 Leena Saarinen leena@richie.fi http://www.richie.fi puh. 040 560 3709 ! ! ! !