Daniliants Ventures auttoi meitä puhuttelemaan kansainvälisen taidenäyttelyn kohdeyleisöä laskeutumissivun avulla visuaalisesti ja teknisesti niin, että sivustolla on käyttöä myös näyttelyn jälkeen. Staattinen sivuston sisällönhallintajärjestelmä Hugo on miellyttävä käyttää. Omaa työtämme helpotti Daniliants Venture tekninen tulokulma, jonka avulla saavutimme miellyttävän asiakaskokemuksen ja yleisön oikeantyyppisen kohdentamisen.
Seuraavassa esittelemme jopa tavallista tarkemmin ja perinpohjaisemmin erittäin mielenkiintoisen casen. Tässä vuoteen 2017 ajoittuneessa projektissa on kyse Suomessa erittäin harvinaislaatuisesta taidenäyttelystä ja sen esiintuonnista ( noiseoftime.merikeskusvellamo.fi . Näyttelyn arvoa omalta osaltaan lisää se, että näyttelypaikka ja itse rakennus, vuonna 2008 avattu Merikeskus Vellamo, on voittanut lukuisia matkailu- ja rakennusalan palkintoja. Sekä näyttelyn että näyttelypaikan erikoisuus ja upeus haluttiin tuoda esille verkossa, mutta ei perinteiseen tapaan vaan täysin uusilla keinoilla.
Kotkassa sijaitseva Merikeskus Vellamo, jossa toimivat muiden muassa Suomen merimuseo, Kymenlaakson museo, Tietokeskus Vellamo ja Kotkan kulttuuri- ja tapahtumapalvelut, otti taannoin yhteyttä Daniliants Ventures aloitettuaan yhteistyön Erarta-museon kanssa. Erarta on yksi suurimmista venäläisistä nykytaiteeseen keskittyneistä museoista ja koko Venäjän suurin yksityinen nykytaiteen museo. Merikeskus Vellamon ja Erartan yhteistyön myötä Vellamoon oli tulossa Erartasta taideteoksia näyttelyä Noise of Time varten, joka on yleisölle avoinna Kotkassa 29.9.-26.11.2017. Näyttely on Erartan ensimmäinen Suomessa.
Uudenlainen konsepti Noise of Time -taidenäyttelylle
Merikeskus Vellamo lähestyi Daniliants Ventures, koska Noise of Time -näyttely haluttiin tuoda esiin täysin uusin keinoin. Voisi jopa käyttää sanaa mahtavasti, sillä olihan nyt tulossa uniikki ja mielenkiintoinen näyttely, jossa tarjolla olisi Suomessa harvemmin nähtäviä taideteoksia. Taidenäyttelylle haluttiin mahdollisimman paljon näkyvyyttä kustannustehokkaasti. Perinteiseen tapaan toimittaessa Vellamon verkkosivuille olisi lisätty uusi alasivu näyttelylle, mutta tällä kertaa tähän ei tyydytty. Sen sijaan mietittiin, miten saada näkyvyyttä ja kävijöitä sekä sitä, miten asiat voisi tehdä niin sanotusti isommin.
Daniliants Ventures tehtävä oli luoda konsepti markkinointiin ja näkyvyyden parantamiseen. Ehdotuksemme ja ratkaisumme asiakkaan heittämään haasteeseen oli tehdä ihan oma laskeutumissivu (englanniksi landing page). Tämä taidenäyttelyn ikioma laskeutumissivu eli ländäri olisi täysin tavallisuudesta poikkeava, pysäyttäisi sivulle saapuvan henkilön miettimään ja antaisi mielikuvan oikeasti katsomisen arvoisesta näyttelystä. Olennaista olisi myös monikielisyys, sillä haluttiin herätellä ja houkutella näyttelylle sekä suomalaisia että venäläisiä kävijöitä, koska Kotka on lähellä Venäjää. Tottahan toki sivun tulisi olla myös englanniksi, jotta muutkin kuin suomen- ja venäjäntaitoiset voisivat lukea näyttelystä ja kiinnostuisivat siitä.
Ehdotuksemme oli siis luoda asiakkaan toimittaman sisällön ympärille hyvin visuaalinen ländäri, jolla olisi täysin oma design ja joka sisältäisi animaatiota, synnyttäisi mielenkiintoa näyttelyä kohtaan ja aikaansaisi kävijöissä wow-reaktion.
Markkinointiapuna Google AdWords, Facebook ja myös Yandex
Suunnittelimme Google-mainonnan toteutettavaksi siten, että käytetään hyväksi uudelleenmarkkinointi- eli remarketing-yleisöä. Kun henkilö tulee Merikeskus Vellamon sivustolle, hän menee automaattisesti remarketing-yleisöön sekä Facebookissa että Google AdWordsissa. Tämä mahdollistaa henkilön tietojen tavoittelun muissa kanavissa. Käytännössä homma toimii niin, että kun halutaan promota Noise of Time -ländäriä, voidaan mainonta kohdentaa niille, jotka ovat jo käyneet Merikeskus Vellamon sivuilla. Todennäköisesti juuri he ovat jatkossakin tulossa käymään uudelleen.
Google AdWordsin lisäksi suunnittelimme ottavamme hyödyn irti myös Facebookista. Facebookissa voidaan luoda niin sanottu Lookalike Audience (samankaltaisuuteen perustuva kohderyhmä) eli yleisö, joka muistuttaa tietynlaista yleisöä. Käytännössä remarketing-dataa voidaan hyödyntää kohdistamalla mainonta niille, jotka muistuttavat Merikeskus Vellamon verkkosivustolla vierailevia käyttäjiä.
Kaiken aikaa tehtäisiin hakukonemainontaa ja display-mainontaa sekä uudelleenmarkkinointia Facebookissa ja Google AdWordsissa. Yandexia, Venäjän suurinta hakukonetta, ei sitäkään unohdettaisi vaan sitä hyödynnettäisiin pienimuotoisesti, koska maantieteellisesti katsottuna Kotka on niin lähellä Venäjää.
Google AdWords
Google AdWords -mainonnassa käytetään tekstimainoksia, jotka näkyvät, kun nettikäyttäjä etsii jotain taiteeseen tai museoihin liittyvää. Tekstimainoksilla pyritään saamaan ihmisiä laskeutumissivulle eli ländärille, kun he etsivät jotain aiheeseen liittyvää ja ovat näin mahdollisesti näyttelystä kiinnostuneita. Tekstimainosten vastapainoksi animoituja HTML5-bannereita käytetään avuksi remarketing-mainonnassa.
Myös Google AdWordsin display-verkon ja muiden sivustojen kautta saadaan näkyvyyttä. Mainokset kohdennetaan siten, että toisella sivustolla mainoksen näkevä henkilö on joko haluttuun kohderyhmään kuuluva (intressit taide tai moderni taide) tai hän on sellaisella sivustolla, jonka teema liittyy tavalla tai toisella taiteeseen.
- Remarketing (mainostetaan näyttelyä jo olemassa oleville Vellamo-kävijöille)
- SEM-mainonta (mainostetaan näyttelyä museoista kiinnostuneille)
- Display-mainonta (animoidut bannerit, sijoitetaan teemasivustoille Google AdWordsin display-verkon kautta)
Facebook-mainonnan aloittamisen ja myös mainosten tekemisen helppouden ansiosta monet yritykset turvautuvat Facebook-mainontaan aina, kun ne haluavat lisää kävijöitä sivustolleen tai lisää tykkääjiä. Suurin osa Facebook-mainonnasta on aika perusmainontaa – kuva, teksti ja linkki.
Facebookin osalta haasteena oli se, että Merikeskus Vellamo teki jo mainontaa ja sisällön buustausta Facebookissa. Kotkan alueella monet olivat jo nähneet paljon heidän päivityksiään ja mainoksiaan. Koska halusimme uusien mainosten herättävän huomiota ja aikaansaavan hyviä tuloksia, varsinkin Kotkan alueella, täytyi tehdä jotain uutta ja erilaista. Halusimme hyödyntää Facebookin vähemmän käytettyjä mainosformaatteja, joista yksi on Facebook Canvas. Se mahdollistaa hyvin interaktiivisen mainoksen luonnin Facebookin mobiilikäyttäjille.
Normaalisti henkilö näkee uutisvirrassa mainoksen, klikkaa mainosta ja siirtyy mainostajan sivulle. Tämä on se perinteinen tapa. Päädyimme käyttämään Facebook Canvasta eli perussivumainoksia, koska näillä vuorovaikutteisilla mobillimainoksilla ja koko näytön kokemuksilla mahdollisuuksia on paljon enemmän.
Facebook Canvaksen avulla on mahdollista tehdä uutisvirrassa näkyvä mainos, jonka sisällä oleva video käynnistyy automaattisesti. Myös muut kuvaelementit ovat käytettävissä. Kun videota tai muuta kuvaelementtiä klikataan, avautuu niin sanottu canvas-elementti, joka peittää koko näytön. Canvaksen sisällä voidaan käyttäjälle tarjota informaatiota monessa muodossa ja tuoda näkyviin erilaisia toimintoja (esimerkiksi ”Osta lippu”). Erilaiset interaktiiviset elementit, kuten kuvakarusellit, videot, äänet ja panoraamat, ovat mahdollisia.
Suunnittelemassamme canvas-mainoksessa oleva video lähtee pyörimään, kun mainoksen näkevä käyttäjä klikkaa mainosta ja canvas avautuu. Video sisältää mielenkiintoa herättäviä ääniä. Näytön peittävä mainos, jota voi vierittää eli skrollata, kertoo monipuolisesti näyttelystä. Käyttäjän ei tarvitse siirtyä toiselle verkkosivustolle vaan hän näkee kaiken olennaisen suoraan mainoksesta, jolloin kokemus on positiivinen. Näin saavutetaan erittäin hyviä tuloksia Facebook-mainonnassa.
Facebook Canvasta käytetään, jotta saadaan näkyvyyttä Facebookissa sellaisilla alueilla, joilla voi olla potentiaalisia museokävijöitä. Facebookin avulla tehdään myös remarketingia. Mainonta kohdennetaan henkilöihin, joita kiinnostaa taide.
- Remarketingia (mainostetaan näyttelyä jo olemassa oleville Vellamo-kävijöille)
- Yleistä mainontaa (mainostetaan näyttelyä museoista kiinnostuneille)
Yandex
Koska ländäri on tehty myös venäjän kielellä, Yandexin kautta näyttelyn olemassaolosta kerrotaan venäläisille. Koska Suomen rajaa lähellä olevissa venäläiskaupungeissa ei ole tarpeeksi kohderyhmään kuuluvia ihmisiä, mainontaa tehdään myös Suomen sisälle. Tällöin taidemuseota lähellä asuvat venäläiset, jotka käyttävät Yandexia ja venäjänkielisiä sivustoja, näkevät mainoksia. Näin voidaan kätevästi tavoitella venäjänkielisiä, Venäjä-taustaisia tai venäläisiä ihmisiä Suomen sisällä, jotka käyttävät Yandexia hakukoneena ja venäläisiä sivustoja. Suomessa lähellä Merikeskus Vellamoa asuvat venäläiset näkevät bannereita, jotka on tehty ja kohdennettu näkymään juuri heille.
- Mainostetaan näyttelyä venäläisille, jotka ovat kiinnostuneita Kotkasta
- Mainostetaan venäläisille, jotka asuvat lähellä Kotkaa
Tuloksena monikielinen ländäri näyttävillä efekteillä höystettynä
Kun toimitimme asiakkaalle designit ja ehdotukset sekä kävimme ne yhdessä läpi, saimme palautetta, jonka pohjalta projektissa edettiin seuraavaan vaiheeseen eli tekniseen toteutukseen. Suunnitelmista alkoi tulla totta. Sehän tässä juuri olikin mielenkiintoista, sillä kaikki mahdollinen ideoitiin ja luotiin itse, joten tämän kaiken toteutuminen oli mielenkiintoista tekijöille itselleenkin.
Kun Noise of Time -näyttelyn laskeutumissivun lataa, käynnistyy animaatio, joka herättelee kävijää ja pysäyttää miettimään, mikä juttu tämä oikein on. Animaatiossa ikään kuin maalauspensselillä maalataan kävijän näyttö mustaksi. Tällä halutaan saada huomiota ja kävijä keskittymään olennaiseen.
Myös tekstissä on käytössä erikoisefekti. Teksti liikkuu oudolla tavalla ja herättää mielenkiintoa. Mitä ihmettä nyt tapahtuu? Se selviää itse tekstistä, joka kertoo lyhyesti, mistä on kyse. Kävijää kehotetaan vierittämään eli skrollaamaan sivua alaspäin ja jatkamaan eteenpäin. Kaiken aikaa taustalla näkyy Kotka Vellamo Art.
Kun henkilö skrollaa, paljastetaan kaikki perusasiat. Selviää, mikä näyttely on kyseessä ja missä se on nähtävissä. Näyttelyyn haluava voi heti ostaa lipun netistä.
Kun kävijä klikkaa ”Osta lippu” tai ”Lue lisää”, kaikki tapahtumat nauhoittuvat Google Analyticsin. Analytiikka ja konversioseuranta ovat käytössä. Näin voidaan seurata, miten tehokkaita eri mainoskampanjat ovat olleet. On mahdollista laskea, mikä jakelukanava Facebookista, Yandexista ja Googlesta on ollut tehokkain.
Käytettävyyteen on panostettu. Suurikokoisesta valikosta pääsee kätevästi tärkeisiin osioihin ja tietoihin, joita laskeutumissivu sisältää.
Käyttäjä voi vaihtaa kieltä ja tutustua näyttelyyn parhaiten ymmärtämällään kielellä. Ländäri on teknisesti toteutettu niin, että kieliä voidaan lisätä tarpeen mukaan.
Kun skrollataan lisää alaspäin, tulee näkyviin esimerkkejä taideteoksista. Kerrotaan lyhyesti näyttelystä. Sosiaalisen median jakonappien avulla ihmiset toivottavasti jakavat hyvää sanomaa myös somessa.
Halusimme myös tuoda näyttelyn lähemmäksi sivuston vierailijaa ja sen takia yhteistyössä museon henkilökunnan kanssa loimme interaktiivisen panoraamaelämyksen sivustolle. Sen avulla on mahdollista tutustua näyttelyyn jo sivustolla.
Koska esillä on venäläistä taidetta ja sivulla mahdollisesti venäläisiä kävijöitä, perinteisten jakonappien lisäksi on myös VK-nappi. VK (aiemmin VKontakte) on suosituin sosiaalinen sivusto Venäjällä ja sen lähimaissa, minkä takia halusimme tehdä helpoksi jakaa tietoa senkin kautta.
Lyhyen näyttelykuvauksen myötä siirrytään päätaideteoksiin, joita halutaan korostaa. Lisäksi osa teoksista löytyy kollaasista, josta voi lukea teosten nimet ja tekijät. Kaikin tavoin pyritään antamaan mahdollisimman hyvä yleiskuva siitä, mitä näkisi, jos tulisi näyttelyyn.
Näyttelyn lisäksi on kerrottu Merikeskus Vellamosta ja sen arkkitehtuurista. Halusimme korostaa sitä, miten upea itse rakennus on. Varsinkin he, jotka eivät ole ikinä käyneet Vellamossa, eivät välttämättä tiedä, että rakennus itsessään on taideteos. Mietitimme pitkään, miten rakennuksen upeuden voisi tuoda esiin ja miten se olisi parhaiten toteuttavissa. Lopputuloksena on animaatio, jossa kaikki muu pysyy paikallaan paitsi taivas. Vain taivas liikkuu, jolloin itse rakennus korostuu ja näyttäytyy edukseen parhaalla mahdollisella tavalla.
Varsin monista näyttelyn taiteilijoista ei ole aiemmin ollut suomenkielistä infoa saatavilla, joten halusimme varmistaa, että taiteilijoista on kerrottu. Näin heidän taustatietoihinsa voi tutustua ennen kuin menee katsomaan taideteoksia. Kalenteri, yleisinfoa näyttelyyn liittyvistä asioista ja kumppanit löytyvät myös. Sähköpostilinkki sekä linkit Facebookiin ja Instagramiin päättävät laskeutumissivun.
Syvällinen integraatio Google Analyticsiin
Jokaista ländärin kannalta tärkeää toimintoa (esimerkiksi henkilö klikkaa ”Osta lippu” tai ”Lue lisää” ja siirtyy Merikeskus Vellamon sivuille) seurataan eli ne trackataan käyttäen Google Analyticsin tapahtumaseurantaa. Tapahtumatietojen kerääminen mahdollistaa konversioseurannan.
Jotkut analytics tapahtumat seurataan lähinnä siksi, jotta tiedettäisiin, haluaako esimerkiksi Facebookista tuleva kävijä käydä vaikkapa Merikeskus Vellamon sivuilla vai ei. Jotkut muut eventit puolestaan toimivat pohjana konversioseurannassa. Esimerkiksi lipunostosta Analyticsiin on luotu konversioseuranta, joka käyttää ”Osta lippu” -eventtien seurantatietoja pohjana. Tällöin voimme nähdä, mikä jakelukanava on tuottanut eniten konversioita eli saanut henkilön klikkaamaan linkkiä ”Osta lippu”. Valitettavasti siltä sivustolta, jolle henkilö lippua ostaessaan siirtyy ja jolla tapahtuu varsinainen ostaminen, ei oikein voi enää trackata konversiota. Kyseessä on nimittäin kolmannen osapuolen sivusto, johon meillä ei ole rajoituksetonta pääsyä. Voimme kuitenkin yhä edelleen nähdä, kuinka moni on klikannut ostonappia – ja niitä klikkauksiahan tässä juuri halutaan.
Oman haasteensa aiheuttaa se, jos verkkosivukävijällä on Museokortti, kuten monilla onkin. Sinänsä tämä on upea kortti, mutta sen omistava ihminen ei ikinä tule klikkaamaan linkkiä, josta hän voi ostaa lipun näyttelyyn. Hänen ei tarvitse, koska hän voi Museokortin omistavana vain kävellä sisään museoon, näyttää Museokorttia ja päästä taidenäyttelyyn.
Pitkälti juuri tämän vuoksi Noise of Time -näyttelyn laskeutumissivulla toisena konversiona pidetään sitä, että henkilö viettää aktiivisesti sivulla yli kaksi minuuttia. Silloin voidaan todeta, että henkilö on todennäköisesti konvertoitu ja hän voi olla Museokortin omistaja. Jos henkilöä ei kiinnostaisi näyttely, hän ei varmastikaan viettäisi kahta minuuttia selatakseen sivua.
Käytännössä ländärillä on paljon erilaisia eventtejä, mutta vain kaksi konversiota: Henkilö viettää aikaa vähintään kaksi minuuttia sivulla tai henkilö klikkaa ”Osta lippu”. Näillä käytännössä mitataan sitä, miten tehokas mikäkin mainoskampanja on ollut.
Jotta voitaisiin nähdä laskeutumissivun tilastot omana kokonaisuutenaan – toisin sanoen erillisenä Merikeskus Vellamosta – sekä voitaisiin arvioida sen suoriutumista ja tavoitteisiin pääsyä mahdollisimman kätevästi, lisäsimme Google Analyticsiin uuden verkko-omaisuuden (englanniksi property) eli seurattavan kohteen. Loimme ländärille ihan oman Google Analyticsiin. Asiakas pääsee katsomaan sen ja Merikeskus Vellamon analytiikkaa samasta paikasta. Hän voi valita, haluaako hän nähdä varsinaisen verkkosivuston vai pelkän ländärin analytiikkaa.
Hakukonenäkyvyydestä hyötyä myös näyttelyn päätyttyä
Noise of Time -näyttelyn päättyessä 26.11.2017 laskeutumissivu jää elämään, tarjoaa uniikkia sisältöä teoksista ja taiteilijoista sekä parantaa Merikeskus Vellamon yleistä hakukonenäkyvyyttä. Sivulle pyritään saamaan mahdollisimman paljon laadukkaita linkkejä, jolloin se on Googlen silmin entistä arvokkaampi.
Kun näyttely sitten on ohi, sivu toimii yhä. Mutta kun vierailija tulee näyttelyn loputtua verkkosivulle, siellä kerrotaan näkyvästi, että valitettavasti näyttely on ohi. Verkkosivulle saapunut voi kuitenkin edelleen lukea ja katsoa, minkälaisia taideteoksia näyttelyssä on ollut esillä. Hän voi lukea taiteilijoista sekä saada tietoa Merikeskus Vellamosta ja sen toiminnasta. Ja jos henkilö haluaa käydä katsomassa esillä olleita taideteoksia, Pietarin Erarta-museossa se on edelleen mahdollista.
Näin käytännössä varmistetaan se, että saatu hakukonenäkyvyys ei katoa, kun näyttely on ohi. Ländäriin on panostettu paljon ja tämä satsaus tulee hyödyttämään jatkoakin ajatellen.
Laskeutumissivu staattinen – miksi ei dynaaminen?
Laskeutumissivu eli ländäri on teknisesti toteutettu niin, että se on staattinen sivu (voit oppia lisää aiheesta meidän YouTube-kanavallamme). Taustalla on käytetty niin sanottua static site generaattoria nimeltä Hugo.
Yleensä nykyiset sivut ja sivustot ovat dynaamisia, jolloin kävijän saapuessa sivustolle palvelin lähettää pyynnön tietokantaan ja hakee sieltä sisällön. Samalla otetaan ulkoasuteematiedostot, syötetään niihin lennossa sisään sisältöä, generoidaan HTML- ja CSS-koodia lennossa ja tarjoillaan nämä vierailijalle. Dynaamisella sivustolla jokaiselle vierailijalle voidaan näyttää eri sivu ja myös kirjautuneena voi nähdä eri sivun kuin kirjautumattomana. Dynaamisella sivustolla palvelin tekee paljon työtä generoidakseen yhden sivun ja kaiken taustalla on yleensä sisällönhallintajärjestelmä, joka on kytketty tietokantaan.
Hyvä puoli dynaamisissa sivustoissa on ehdottomasti se, että voidaan luoda eri sisältöä eri kävijöille riippuen vaikkapa siitä, onko käyttäjä kirjautunut saitille vai ei. Toisaalta huono puoli on se, että sisällönhallintajärjestelmä – olipa kyseessä sitten WordPress tai joku muu – täytyy pitää ajan tasalla. Vaikka käytettäisiinkin välimuistityökalua, silti sivusto on hitaampi kuin staattinen sivusto.
Staattisissa sivustoissa on vain HTML:ää ja CSS:ää, ei minkäänlaista tietokantaa tai mitään muutakaan. Staattiset sivustot ovat varsin nopeita, koska niissä ei ole mitään tietokantaa. Palvelin toimittaa kaikki tiedostot heti, kun se saa pyynnön vierailijan selaimelta. Koska tiedostoja ei tarvitse generoida, ne ovat yleensä palvelimen muistissa jo valmiiksi. Jos on kymmeniä tai satoja tuhansia yhtäaikaisia kävijöitä, staattinen sivusto pärjää, koska se ei rasita palvelinta. Siinä ei ole mitään dynamiikkaa, se vain toimittaa tiedostoja – ja sillä selvä.
Dynaaminen sivusto sitä vastoin rasittaa palvelinta. Ellei välimuisti- tai muita monimutkaisia säätöjä ole tehty, niin esimerkiksi WordPress-sivusto ei ikinä pärjää nopeudessa tavalliselle staattiselle sivustolle. Toki WordPressiinkin saa erilaisia työkaluja ja muuta, mutta ne luovat omia ongelmiaan.
Staattisuuden ansiosta käytössä Amazon CloudFront
Ennen kaikkea staattista sivustoa käytettäessä voidaan hyödyntää erilaisia palveluita, esimerkiksi maailmanlaajuista content delivery network Amazon CloudFrontia. Amazon CloudFrontiin laitettavat tiedostot automaattisesti replikoidaan eli kopioidaan kymmenille tai sadoille palvelimille ympäri maailmaa. Monet palvelimet ovat Australiassa, USA:ssa, Aasiassa ja eri paikoissa Euroopassa.
Amazon CloudFrontia käyttäen staattinen sivusto voidaan replikoida helposti ympäri maailmaa, koska staattisessa sivustossa ei tarvita mitään generointeja ja se tehdään kerralla valmiiksi. Näin ollen henkilön saapuessa sivustolle Amazon CloudFront automaattisesti toimittaa sivuston lähimmältä palvelimelta. Jos palvelin löytyy Australiasta, australialaiselle henkilölle sivusto toimitetaan Australiasta. Tästä syystä sivusto latautuu yhtä nopeasti kuin tavallinen australialainen sivusto. Sama pätee Intiassa ja kaikkialla muuallakin. Euroopassa on useita palvelimia, kuten myös Pohjois-Amerikassa, Brasiliassa ja monissa muissa maailman kolkissa.
Käytännössä tämä tarkoittaa sitä, että staattinen sivusto voidaan automaattisesti replikoida ja tehdä todella nopeaksi Amazon CloudFrontin avulla. Toki sisällönhallintajärjestelmätkin voivat käyttää samoja järjestelmiä, mutta se on vaikeampaa, koska siellä on valtavasti asioita, jotka pitäisi osata ottaa huomioon. Jos sisällönhallintajärjestelmä käyttää jotakin välimuistityökalua, joka generoi staattisia tiedostoja ja sitten siirtää ne Amazon CloudFrontiin, niin henkilön päivittäessä sivustoaan prosessi täytyy tehdä uudestaan. Vastaavanlaisen systeemin tekeminen oikein WordPress- tai muissa sisällönhallintajärjestelmissä vaatii paljon enemmän aikaa ja siellä on paljon enemmän mahdollisuuksia siihen, että jossain kohtaa homma mennä menee pahemman kerran pieleen.
Staattista sivustoa ei oikeastaan voi hakkeroida, koska siellä ei ole mitään tietokantaa eikä salasanoja vaan ainoastaan HTML- ja CSS-tiedostoja. Näiden tiedostojen lähdekoodin ja rakenteen voi jo muutenkin nähdä Internet-selaimella tiedoston lähdekoodin katsomalla. Tietoturva on korkealla tasolla, koska ei ole mitään mahdollisuuksia hakkeroida yhtään mitään.
Hugo ja sen hallintapaneeli, automaattinen versionhallinta sekä aikasnapshotit
Staattisten sivustojen ainoa ongelma on se, että niiden muokkaus vaatii HTML-koodin osaamista. Se ei ole kovinkaan käytännöllistä. Sisällönhallintajärjestelmät ovat syntyneet juuri siksi, ettei haluttu enää muokata HTML-koodia yhden uutisen tai muun lisäämiseksi tai päivittämiseksi.
Tässä kohtaa kuvioon mukaan tulee Hugo, static site generator. Sen avulla voidaan luoda sivusto, joka teknisesti on staattinen, mutta siihen on kuitenkin helppoa lisätä ja muokata sisältöä. Hugolle kerrotaan, mikä on teema, miten asioiden pitäisi näkyä ja mihin kohtaan voi tai ei voi lisätä sisältöä. Aina sisältöä lisättäessä käynnistetään prosessi, jolloin Hugo rakentaa koko saitin alusta alkaen ja luo kaikki staattiset tiedostot.
Hugon myötä asiakkaalle voidaan tarjota käyttöön admin- eli hallintapaneeli, joka on yhtä helppokäyttöinen kuin WordPressin vastaava. Kaikki sujuu niin helposti, ettei asiakas välttämättä edes tiedosta, että saitti on staattinen. Kun asiakas päivittää sivustoa, taustalla tapahtuu todella paljon kaikenlaista. Kaikki sujuu kuitenkin varsin vauhdikkaasti.
Esimerkiksi kun asiakas päivittää sivustoa ja tallentaa muutokset, tulee ilmoitus, että muokkaus on tehty. Heti perään kysytään, haluaako asiakas luoda uuden staattisen version sivustosta. Jos tässä kohtaa klikkaa ”Publish changes”, silloin sisällönhallintajärjestelmä lähettää virtuaalipalvelimelle tiedon, että kyseinen sivusto pitää regereneroida uusilla sisällöillä. Kaikki mahdollinen käydään läpi ja regeneroidaan niin sanotusti nollasta. Samaan syssyyn pakataan kuvia, pienennetään JavaScript-tiedostoja ja poistetaan niistä kommentteja, yhdistetään CSS-koodit keskenään helposti ladattavaksi ja kaiken päätteeksi replikoidaan kyseinen sivusto Amazon-palvelimille eripuolille maailmaa.
Vaikka kaikki tämä tapahtuu, käyttäjä ei käytännössä huomaa mitään eroa. Ainoa ero on se, että muutokset vievät pikkuisen enemmän aikaa johtuen siitä, että koko saitti pitää regeneroida. Kun regererointi on meneillään ja yhä kesken, vanha versio sivustosta on näkyvissä. Kun regenerointi on mennyt onnistuneesti läpi, vasta silloin sivusto vaihdetaan uuteen versioon. Kaikki versiot pysyvät tallessa. Jos esimerkiksi tulee tehtyä jotain vahingossa, voidaan helposti palata mihin tahansa versioon. Toisin sanoen koko saitista on olemassa eräänlainen aikasnapshot, johon voidaan palata yhdellä klikkauksella. Se vain valitaan ja klikataan ”Publish deploy”.
Jokaisesta hallintapaneelilla tehtävästä muutoksesta tehdään automaattisesti niin sanottu git-commit, joka tallentuu versionhallintajärjestelmään. Kun se on tehty, tehdään optimointia (optimoidaan esimerkiksi kuvia) ja rakennetaan sivusto. Kun kaikki on valmista, siinä vaiheessa nykyinen versio sivustosta muutetaan uusimpaan mahdolliseen versioon. Käytännössä kaikki asiakkaan tekemät muutokset ovat automaattisesti versionhallinnassa. Versionhallinnasta näemme, mitä muutoksia on tehty (esimerkiksi navigaatiota muutettu tai piste poistettu tekstistä). Voimme hyvin pitkälle analysoida, mitä jollekin sivulle tai koko sivustolle on tehty.
Asiakkaan kannalta kaikki toimii helposti. Käytössä on kätevä hallintapaneeli, mutta taustalla tapahtuu todella paljon kaikenlaista. Esimerkiksi kaikki asiakkaan lisäämät kuvat optimoidaan automaattisesti – asiakkaan ei tarvitse sitä tehdä eikä edes ymmärtää, mitä tapahtuu. Automaattisesti hoituu myös JavaScript- ja CSS-tiedostojen optimointi, mikä nopeuttaa sivustoa entisestään.
SSL-salaus ja HTTP/2 Server Push hyötykäytössä
Noise of Time -näyttelyn sivulla hyödynnämme ilmaista Let’s Encryptin SSL-sertifikaattia. Se luodaan lennossa automaattisesti kaikille asiakasdomaineille, joissa käytetään Hugon staattisten sivustojen teknologiaa. HTTPS-protokolla kertoo kävijälle, että sivusto on turvallinen. Myös Google suosii tällaisia sivustoja ja niillä on parempi mahdollisuus saada näkyvyttä hakutuloksissa.
Samalla käytämme semmoista teknologiaa kuin HTTP/2 Server Push, joka vaatii SSL-teknologian käyttöä. HTTP/2 Server Push tarkoittaa käytännössä sitä, että käyttäjän saapuessa verkkosivustolle etusivulatauksen yhteydessä voidaan automaattisesti kertoa, että lataa myös nämä ja nämä tiedostot selaimeen. Tämän ansiosta asiakaskokemus on huomattavasti parempi.
Monin tavoin optimoitu, helposti hallittava ja hakkerien kannalta mahdoton
Merikeskus Vellamon ländärin hallintaan asiakkaamme on käyttänyt hallintapaneelia, jossa on tarjolla todella helppo ja selkeä tapa muokata kaikkia elementtejä. Jos halutaan päivittää vaikkapa yhden taiteilijan tietoja, niin se on äärimmäisen helppoa. Eri välilehdillä ovat tiedot ja tekstit suomeksi, venäjäksi ja englanniksi, joten välilehdeltä toiselle siirtymällä pääsee suoraan muokkaamaan haluttua kieliversiota.
Päivittäjän kannalta laskeutumissivun hallinta on yhtä helppoa kuin käyttäisi mitä tahansa sisällönhallintajärjestelmää. Kaikki on äärimmäisen helppoa, joten asiakas on tykännyt kovasti. Ennen kaikkea asiakkaan on sitä helppo päivittää ja muokata.
Jos taas mietitään sivun teknistä puolta ja sitä, mitä löytyy pintaa syvemmältä, on kokonaisuus kaikkea muuta kuin yksinkertainen. Suojattu ja salattu staattinen sivu on turvallinen, pitkälle optimoitu ja Amazon CloudFrontin käytön myötä ympäri maailmaa kopioitu eli replikoitu. Sivu latautuu Amazon CloudFrontin ja automaattisten optimointien ansiosta todella nopeasti mistä tahansa päin maailmaa.
Asiakkaaltamme saamamme palaute
Haasteellisuudesta huolimatta projekti sujui varsin hyvin. Mukana olivat Merikeskus Vellamo, toteuttaja Daniliants Ventures ja myös venäläinen Erarta-museo. Eri osapuolen välinen kommunikaatio oli avainasemassa. Vaikka projekti hoidettiin täysin etänä, se onnistui erittäin hyvin ja sujuvasti.
Pidimme paljon Skype-palavereita. Toimitimme uudet ulkoasuversiot käyttäen InVision-työkalua, jolloin asiakkaan oli mahdollista jättää kommentteja suoraan layoutiin eli leiskaan. Samalla pystyimme keskustelemaan tietyistä leiskan kohdista tai muista seikoista. Merikeskus Vellamolta saimme kaikki tarvittavat tiedostot ja materiaalit nopeasti ja jouhevasti Dropboxin kautta.
Asiakkaan kanssa työskentely oli äärimmäisen hauskaa ja mielenkiintoista. Ennen kaikkea Daniliants Ventures oli tärkeätä se, että asiakas itse halusi meiltä uusia ideoita ja oli todella vastaanottavainen, mikä motivoi meitä miettimään myös tavallisuudesta poikkeavia ratkaisuita.
Created with ♥ Daniliants Ventures
Noise of Time -näyttelyn laskeutumissivu pysäyttää miettimään, saa ihmiset kiinnittämään huomiota näyttelyyn ja herättää mielenkiintoa. Käyttäjän pysäyttävä sivu on näyttävä ilmestys. Mikä käyttäjän kannalta tärkeintä, näyttävyyttä ei ole tehty nopeuden kustannuksella vaan ländäristä on tehty sekä nopea että designiltaan tyylikäs kokonaisuus.
Desiginin ja teknisen puolen asettamista haasteista huolimatta pystyimme tuottamaan asiakkaalle sivun, joka vastaa kaikkiin tarpeisiin. Hyvällä tavalla erilainen ländäri tuo kaiken tarvittavan infon näkyville uudessa tuoreessa paketissa, joka toimii myös mobiililaitteilla. Jokainen yksityiskohta on tarkkaan harkittu. Saamamme palaute onkin ollut äärimmäisen hyvää.
Daniliants Ventures oli ilo ja kunnia tehdä töitä näin monipuolisen, haasteellisen ja antoisan projektin parissa. Jatkossakin olemme valmiita rikkomaan rajoja sekä tekemään täysin uudella ajattelutavalla synnytettyjä laskeutumissivuja ja muita verkkosivustoja. Onko sinulla tarvetta ländärille tai haluatko kenties nettisivun, joka tuo myyntiä? Jos vastasit myöntävästi, ota viipymättä yhteyttä.
Jaa: