Liikettä sivuille – animaatiot ja videot nettisivuilla

author
Aapo Virta 11.8.2015
Nettisivuille toivotaan nykyisin tavallisen videosisällön lisäksi kasvavissa määrin muutakin liikkuvaa kuvaa ja animointeja. Niiden lisäämiseen on tarjolla useita konsteja. Yksikään tapa lisätä liikkuvaa kuvaa sivuille ei kuitenkaan ole täysin pomminvarma, ja eri käyttökohteisiin tarvitaan eri tekniikoita. Teimme oppaan siitä, mikä muoto toimii parhaiten eri tilanteissa.

Videoiden ja muun liikkuvan kuvan määrä nettisivuilla kasvaa voimakkaasti. Ciscon tekemän arvion mukaan vuonna 2019 videoiden osuus kaikesta nettiliikenteestä tulee olemaan 80-90 prosenttia. Myös nettisivuille toivotaan puhtaan videosisällön lisäksi kasvavissa määrin liikkuvaa kuvaa ja animointeja.

Yksikään tapa lisätä liikkuvaa kuvaa sivuille ei ole täysin pomminvarma, vaan videot, animaatiot sekä niiden kontrollointi on selaimesta riippuen aina hieman häiriöherkkää. Liikkuvan kuvan esittäminen tarkoittaa aina sivun pikseleiden uudelleenpiirtämistä jopa kymmeniä kertoja sekunnissa, ja isoissa videoissa piirrettäviä pikseleitä on valtava määrä. Jos sivun käyttäjän kone tai selain on vanha, häiriöherkkyys kasvaa. Tästä saattaa aiheutua ongelmia varsinkin silloin, kun ison videon toivotaan pyörivän aina sulavasti tai halutaan kontrolloida monimutkaista animaatiota.

Teimme oppaan siitä, mikä esitysmuoto toimii parhaiten eri tilanteissa.

1. Videon jakelualustat

Videon käytön yleisiä haasteita

Videotiedostojen käyttö sivun elävöittämisessä on välillä haasteellista. Videotiedostoihin ei saa läpinäkyvää taustaa, ja niiden saumatonta looppausta ei kaikilla selaimilla saa toimimaan mitenkään. Samoin varsinkin Applen mobiililaitteissa taustavideoita ym. automaattisesti pyöriviä videoita ei saa toimimaan ilman pikku kikkailua. Jos näistä on haittaa, kannattaa skipata suosiolla kaksi ensimmäistä kohtaa.

——–

Kun puhutaan videoklippien, filmien ja ohjelmien lisäämisestä nettisivuille, kannattaa videon jakelualustana käyttää isojen kansainvälisten toimijoiden ratkaisua. YouTube ja Vimeo ovat ne suosituimmat jakoalustat, ja ne tarjoavat erittäin helppokäyttöiset jako-ominaisuudet kaikille käyttäjille. Näiden lisäksi on useita isoja puhtaasti videosisällön jakoon keskittyneitä firmoja, kuten esimerkiksi Flowplayer.

Jälkimmäisten etuna on videosoittimen brändättävyys, eli jos YouTuben tai Vimeon logo videon yhteydessä häiritsee, siitä pääsee myös eroon. Liki kaikki jakelijat antavat mahdollisuuden käyttää videostreamia muutenkin kuin upotetun videosoittimen kautta, useimmiten maksua vastaan. Näin esimerkiksi koko ruudun kokoiset taustakuvavideot voi ajaa myös näiden palveluiden kautta.

+ Videoiden automaattinen konvertointi
+ Käytännössä ehtymättömät kaistat ja serveritehot
+ Nettiyhteyden nopeuteen mukautuva kuvanlaatu
+ Eri selaimissa varmatoimiset soittimet
– Videosoittimen brändäys oman brändin mukaiseksi ei aina onnistu
– Usein maksullisia (joko rahalla tai mainosten kautta)
– Videosoiton kontrollointi koodin avulla joskus hankalaa
– (Pieni) riski jakelualustan kaatumisesta/loppumisesta

2. Videotiedostot omalla serverillä

Ulkopuolisten videoalustojen käyttöön verrattuna tiedostojen pitäminen omalla serverillä kannattaa vain joissain tapauksissa. Omalla serverillä videot pysyvät tallessa, ja videon toistamiseen voi käyttää vapaasti mitä tekniikkaa tai koodia tahansa. Videoiden lataus offline-käyttöä varten on myös helpompi sallia oman serverin kautta. Samalla pitää kuitenkin varautua lisääntyneeseen kaistankulutukseen sekä ennen kaikkea siihen, että lokaalien videoiden lisääminen nettisivuille vaatii jonkun verran teknistä taitoa sekä ohjelmia videoiden konvertointiin. Oppikirjan mukaan tehtäessä jokainen video pitäisi konvertoida kolmeen eri formaattiin (mp4, ogv sekä webm), vaikkakin pelkällä mp4-formaatilla pärjää aika pitkälle.

+ Kontrolli
+ Koodin avulla kontrollointi helpompaa
+ Offline-käytön salliminen
– Kaistankulutus
– Videosoittimen ohjelmointi
– Konvertointijumppa

3. Animoidut GIFfit

Animoidut giffit ovat vanhin edelleen laajemmin web-käytössä oleva liikkuvan kuvan formaatti. Vaikka se on teknisesti kömpelö ja rajoittunut formaatti, sillä on edelleen käyttökohteita. Huumoripätkien ja taiteellisten kokeilujen lisäksi giffeillä saa piristystä sivuille esimerkiksi ns. cinemagraphien avulla. Näissä vain osa kuvasta on animoitu, ja tuloksena voi olla erinomaisen hienoja kuvia. Ajatuksen kanssa tehdyt cinemagraphit toimivat erinomaisen hienosti esimerkiksi journalistisen sisällön kanssa.

Giffit ovat kuitenkin raskaita, useammallakin tavalla. 700×400 pikselin kokoinen cinemagraph voi olla kooltaan yli megatavun, kun vastaava jpg-kuva painaa useimmiten kymmenyksen tästä. Isommat animoidut giffit ovat myös raskaita pyörittää, ja voivat hidastaa merkittävästi selaimen toimintaa. Fullscreen-giffit eivät ole tästä syystä hyvä idea. Gif-animaatioita ei voi myöskään kontrolloida muuten kuin aloittamalla toiston alusta.

+ Toimivat käytännössä kaikkialla 
+ Oikein käytettynä todella vaikuttavia
– Raskaita
Vain 256 väriä
– Hyvin rajalliset mahdollisuudet animaation kontrollointiin

4. CSS-animoinnit

Selkeä valtaosa nykyisin käytössä olevista selaimista tukee melko hyvin sivun elementtien animointia css-tyylitiedostojen avulla. Niitä käytetään yleisimmin nappien ja muiden käyttöliittymäelementtien piristykseen, mutta niiden avulla voi toteuttaa myös koko ruudun kokoisia animointeja. CSS-animointiin pätee moni sama kaava kuin giffeissä: sillä saa hienoa jälkeä, jos tietää mitä tekee, mutta sen avulla on mahdollista saada sivusta vilkkuva ja välkkyvä painajainen, joka kuumentaa koneen ja kaataa selaimen. Myös css-animointien kontrollointi on hankalaa ja tietyissä tapauksissa mahdotonta. CSS-animointien luominen vaatii myös kohtalaisen hyvää css-kielen osaamista.

CSS-animoinnit toimivat hyvällä prosentilla myös mobiilissa. Osa käyttöjärjestelmistä ei tosin näytä animointeja nettisivun skrollauksen aikana.

+ Oikein käytettynä helppo ja kevyt tapa lisätä liikettä sivulle
+ Hyvä ja koko ajan parantuva selaintuki
– Vaatii css-osaamista
– Liikaa käytettynä raskas selaimille

5. Javascript-animoinnit / GSAP

Javascript-animoinnilla kannattaa tehdä sivuelementtien animointeja, jotka ovat css:n avulla turhan monimutkaisia, tai jotka vaativat kontrollointia. Selkeästi paras koodipaketti js-animointiin on aikoinaan Flash-puolella aloittanut GreenSockin GSAP-kirjasto. Sen etuna css:ään verrattuna on yksiselitteisempi syntaksi ja tarkempi kontrolli – javascriptin avulla animoinnit voi esimerkiksi keskeyttää, niiden nopeutta voi muuttaa tai niissä voi siirtyä suoraan tiettyyn kohtaan. Meillä on tapana ottaa GSAP suoraan käyttöön, jos tarkoituksena on luoda yhtään monimutkaisempia animaatioita.

Javascript-animoinnin avulla saadaan aikaiseksi myös visuaalisesti vaikuttavat, sivun skrollauksen mukaan vaihtuvat parallax-animaatiot.

Mobiilikäyttöön pätee samat säännöt kuin css-animaatioiden kohdalla.

+ Tarkka keino animointiin
+ Laaja selaintuki
+ Selkeä syntaksi
– Vaatii aina javascript-tuen selaimessa
– Monimutkaiset animaatiot raskaita selaimelle
– Vaatii ohjelmointitaitoa

6. Canvas-animointi

Canvas on nettisivujen elementti, jota voi ohjelmoida hyvin monipuolisesti. Canvas on kuin tyhjä taulu, johon voi javascript-koodin avulla piirtää jos jonkinlaista animaatiota. Esimerkiksi upean forecast.io -sivuston sääkartat on animoitu canvasin avulla. Canvasin heikkous on se, että vaikka käytössä olisi animointia helpottavia koodikirjastoja, monimutkaisemmat animoinnit ovat aina vaativia toteuttaa. Taitavissa käsissä canvasilla voi kuitenkin tehdä melkeinpä kaiken minkä aikoinaan Flashin avulla.

+ Liki rajattomat mahdollisuudet animointiin
+ Hyvä selaintuki
– Monimutkaiset animaatiot raskaita selaimelle
– Vaativia toteuttaa

7. Muita vaihtoehtoja

Sivuille saa liikkuvaa kuvaa myös muilla keinoilla. Yksi keino on tehdä animaation frameista yksittäisiä kuvia ja näyttää/piilottaa niitä koodin avulla, vähän kuin ennen vanhaan pläräysvihkoja. Näissä ongelmana on ladattavan datan määrä sekä animoinnin sulavuus, jos käytössä on paljon isoja kuvia. Tekniikka soveltuu parhaiten esim. tuotekuvien tai vastaavien pyörittelyyn.

Tätäkin tekniikkaa on kehitelty pidemmälle, mutta käytännössä se vaatii kohtalaisen paljon teknistä taitoa ja aikaa.

Animoidun giffin korvaajaksi kehitellään myös APNG-formaattia eli animoitua png-kuvaa, mutta sen selaintuki on vaatimatonta ja animaatiot ovat tiedostokooltaan isoja.

Kovassa nosteessa olevaa kuvaformaatti SVG:tä voi myöskin animoida, mutta varsinkin Internet Explorerin selaintuki ei ole vielä riittävällä tasolla monipuolisten animointien tekoon. Tilastokäppyröiden ja graafien animointiin svg on kuitenkin jo varteenotettava vaihtoehto.

Yksi vaihtoehto, tosin koko ajan heikkenevä, on edelleen Flash, joka mahdollistaa erittäin monimutkaiset animaatiot. Ne eivät vain toimi mobiilissa, ja ennen liki täydellinen selaintuki heikkenee koko ajan. Näin ollen Flash-animaatioita ei kannata miettiä muihin kuin suljettuihin ympäristöihin.

—————

Oli animaatio ja tekniikka mikä tahansa, sen lisäämisessä kannattaa olla aina tarkkana. ”Mitä vähemmän ja pienempää” on usein hyvä nyrkkisääntö. Varsinkin käyttöliittymäelementtien animoinnissa ylimääräiset ja varsinkin sivun toimintoja hidastavat liikkeet ovat pitemmän päälle vain käyttöä haittaavia. Hyvällä maulla käytettynä animoinnit ja videot voivat kuitenkin nostaa sivun profiilia huomattavasti.

– Aapo

Oletko kiinnostunut ohjelmoinnista ja teknologiasta?

Kirjoitamme aiheeseen liittyviä hyödyllisiä artikkeleita. Liity mukaan tilaajaksi niin olet aina tietoinen kun julkaisemme uuden artikkelin!

Artikkelit

thumbnail

Modernin verkkosivuston suunnittelu – avaimet onnistuneeseen projektinhallintaan

Verkkosivuston suunnittelu on monivaiheinen prosessi. Toimivan verkkosivuston suunnittelu vaatii kokonaisvaltaisen ymmärryksen sisältöjen ja teknologian yhdistämisessä käyttäjäystävälliseksi kokonaisuudeksi.

author
Rami Lappalainen · 19.4.2017
thumbnail

SKS ja Mediapool tekevät digitaalisia oppimateriaaleja lukiolaisille

Mediapool toteuttaa uudenlaisen digitaalisen oppimisen alustan Suomalaisen Kirjallisuuden Seuralle.

author
Aapo Virta · 7.11.2016
thumbnail

Tuloksellinen digitaalinen markkinointi

Tuloksellinen digitaalinen markkinointi ei ole päivänselvä asia vielä tänäkään päivänä. Tuloksellisuus ei ole klikkien metsästämistä vaan luovan suunnittelun, teknologian ja mittaroinnin kokonaisvaltaista hallintaa.

author
Rami Lappalainen · 13.10.2016
thumbnail

Uudenlaiset mobiilivideot Apple iOS 10 -päivityksessä

Applen uusi iOS-käyttöjärjestelmäpäivitys mahdollistaa täysin uudenlaisia mahdollisuuksia mobiilivideoiden hyödyntämiseen°

author
Aapo Virta · 5.10.2016
thumbnail

Markkinoinnin automaatio uusasiakashankinnan apuvälineenä

Markkinoinnin automaatio ja sen englanninkielinen nimitys Inbound Marketing kajahtelee monen pk-yrittäjän takaraivossa. Suurin kysymys lienee kaikilla, mitä se on ja mitä sillä tehdään?

author
Rami Lappalainen · 21.5.2016
thumbnail

Linkkaus, embeddaus, repostaus – Tekijänoikeudet ja käytännöt verkossa

Tekijänoikeudet askarruttavat monia sosiaalisen median käyttäjiä ja erityisesti yritysten some-kanavien ylläpitäjiä. Sählääminen tekijänoikeuksien kanssa voi tarkoittaa mittavia sanktioita julkaisijalle. Ota siis oppia miten toimit oikein verkossa.

author
Rami Lappalainen · 13.2.2016
thumbnail

Yrityksen tietoturva — viisi tietoturvavinkkiä yrittäjälle

Yrityksen tietoturvan merkitys arkielämässä on kasvanut huimasti viime vuosien aikana. Säilytämme yhä enemmän arkaluontoista dataa elektronisessa muodossa, käymme luottamuksellisia keskusteluja internetin välityksellä, ja asuntojemme lämmitysjärjestelmät tai jopa automme saattavat olla kytkettyinä internetiin. Tietomurroista saamme kuulla jatkuvasti uutisissa, minkä vuoksi moni yrittäjäkin on pohtinut, miten parantaa omaa ja oman yrityksen tietoturvaa.

author
EE Turunen · 30.10.2015
thumbnail

Verkkomainonta on kuollut, sisällöntuotanto elää!

Verkkomainonta on kriisissä. Adblockerit ja selainten päivitykset vaikeuttavat perinteistä bannerimainontaa. Samalla sisällöntuotanto vahvistaa asemaansa markkinointityökaluna myös somessa. Miltä sisällöntuotannon tulevaisuus näyttää?

author
Maria Niemi · 6.10.2015
thumbnail

Liikettä sivuille – animaatiot ja videot nettisivuilla

Nettisivuille toivotaan nykyisin tavallisen videosisällön lisäksi kasvavissa määrin muutakin liikkuvaa kuvaa ja animointeja. Niiden lisäämiseen on tarjolla useita konsteja. Yksikään tapa lisätä liikkuvaa kuvaa sivuille ei kuitenkaan ole täysin pomminvarma, ja eri käyttökohteisiin tarvitaan eri tekniikoita. Teimme oppaan siitä, mikä muoto toimii parhaiten eri tilanteissa.

author
Aapo Virta · 11.8.2015
thumbnail

Somenatiivi vai somevanhus – Kuinka sosiaalisen median kanavat kesytetään

Sosiaalinen media voi olla oikein käytettynä niin pienen kuin suuremmankin yrityksen vahva markkinointikanava ja brändinrakennustyökalu, mutta huolimaton käyttö voi aiheuttaa monenlaista päänvaivaa. Somenatiiviksi synnytään, mutta onneksi sosiaalisessa mediassa vanhakin koira voi oppia uusia temppuja.

author
Maria Niemi · 5.8.2015
thumbnail

Potkua verkkosivujen sisällöntuotantoon

Verkkosivujen sisällöntuotanto on parhaimmillaan yksinkertaista ja helppoa. Tärkeintä on ymmärtää perusperiaatteet, jolloin työ etenee joutuisasti ja saat kaikki tehot irti sisällöistä.

author
Rami Lappalainen · 27.5.2015
thumbnail

Lisäarvollinen sisältö, mitä se oikein on?

Lisäarvollinen sisältö on päivän "buzzword" ja sen kuulee sanottavan kaikkien sisältömarkkinoinnin konsulttien suusta hissipuheen ensimmäisen minuutin aikana. Mitä tuo lisäarvo oikein on? Mietitäänpä yhdessä asiaa!

author
Rami Lappalainen · 29.3.2015
thumbnail

Facebookin orgaaninen näkyvyys tappiin?

Facebook on viimeisen kahden vuoden aikana useaan otteeseen muuttanut algoritmejaan. Muutokset ovat vähentäneet erityisesti orgaanista näkyvyyttä niiden yritysten sivuilla, joissa sisältö ei ole merkityksellistä tai kiinnostavaa.

author
Rami Lappalainen · 10.3.2015
thumbnail

Kuvankäsittelyn historia – mistä kaikki alkoi?

Kuvankäsittelyllä on pitkä historia mustavalkokuvien retusoinnista tämän päivän Photoshop -työskentelyyn. Hyvin käsitelty kuva ei tarkoita “päiden siirtelyä” vaan tunnelman virittämistä oikeilla sävyillä.

author
Marko Simonen · 20.2.2015
thumbnail

Kuvatuotannon suunnittelu

Kuvatarve tulee yleensä yllättäen, kuin kulman takaa ja silloin pitää jo olla valmiina toimintaan. Mistä tilata? Millaisia kuvia? Mitä maksaa? Miten pitää toimia? Valotamme seuraavassa, mitä seikkoja kannattaa ottaa huomioon kuvallista viestintää suunniteltaessa.

author
Rami Lappalainen · 3.2.2015
thumbnail

Evästeet ja direktiivit

Uuden EU-direktiivin voimaantulon jälkeen netti on täyttynyt bannereista, joissa pyydetään hyväksymään evästeiden käyttö sivustolla. Otimme selvää, tarvitaanko bannereita kotimaisilla saiteilla.

author
Rami Lappalainen · 28.1.2015
thumbnail

Hakukoneoptimointi, helppo homma

Hakukoneoptimoinnin tärkeyttä ei voi väheksyä. Listaamme tärkeimmät ja tulevaisuuden kannalta varmimmat konstit siihen, että sisältösi pysyvät hakutulosten kärjessä nyt ja jatkossa.

author
Aapo Virta · 27.1.2015
thumbnail

Sisältömarkkinointia ihmisille, ei hakukoneille

Miksi sisältömarkkinointi on juuri nyt kiinnostavaa ja miksi siitä kannattaa olla kiinnostunut? Sisältömarkkinointi ei ole yhden illan juttu, vaan kuin onnellinen ja toimiva parisuhde.

author
Tommi Jäkkö · 20.1.2015
thumbnail

Inbound-markkinoinnin sudenkuopat

Inbound-markkinointi on trendikästä, tehokasta ja loogista markkinointia. Ja kappas vaan, niinhän senkin voi sotkea. Neuvomme pahimpien karikoiden ohi.

author
Aapo Virta · 16.1.2015
thumbnail

Viraalivideo vai jatkuva sisältöstrategia?

Viime vuosien aikana moni yritys on tuottanut videomateriaalia markkinointinsa tueksi. Kuitenkin aniharva nettiin ladattu video ylittää 150 katsontakerran määrän ja panostukset saattavat valua hukkaan.

author
Rami Lappalainen · 14.1.2015
thumbnail

Web-rekry

author
Aapo Virta · 27.1.2010
mautic is open source marketing automation