single-reference.php
Portfolio

Videogalleria

Keissi: Nykypäivä-lehden tuottama eduskuntavaaliehdokkaiden videogalleria.

Tavoitteena oli tehdä sivusto, jossa Kokoomuksen eduskuntavaaliehdokkaista tuotetut haastatteluvideot olisivat mahdollisimman helposti katsottavissa ja jaettavissa sosiaaliseen mediaan. Käytettävyyssuunnittelun pääpaino oli mobiililaitteissa.

Videogallerian graafinen ilme perustuu Nykypaiva.fi-sivun ilmeeseen; se on ensisilmäyksellä tunnistettavissa saman julkaisijan palveluksi. Tuttuun tyyliini en tehnyt tästäkään sivusta Photoshop-leiskaa, vaan asiakkaan kanssa käydyn keskustelun pohjalta tehtyjen nopeiden lyijykynähahmotelmien mukaan toteutin visun suoraan WordPress-templateksi PHP:lla, HTML:lla ja CSS:lla. Tämä työskentelymalli on osoittautunut minulle nopeimmaksi tavaksi saada asiakkaalle toimiva proto tutustuttavaksi.

Käyttäjät ovat tottuneet scrollaamaan sivuja alaspäin pienillä kosketusnäytöillä – se onnistuu yhdellä sormen pyyhkäisyllä, kun ennen piti hiiren kanssa raahata vierityspalkkia. Sen vuoksi en pidä pitkiä sivuja mobiilikäytettävyydessä ongelmana. Pyrin aina kuitenkin huomioimaan, mitä ensimmäisessä ruudullisessa näkyy – siinä on oltava kunkin sivun tärkein asia ja jonkinlaista vinkkiä siitä, jos sisältöä on alempana lisää. iPadin pystynäkymään sain ”foldin” yläpuolelle näkymään kaiken sisällön: ehdokkaan tiedot ja videon sekä kuvallisen valikon, jossa ovat kaikki muut saman vaalipiirin ehdokkaiden videot. Kapeilla kännyköiden näytöillä ratkaisu on hieman toisenlainen, mutta silti hyvin toimiva.

Päätelaitteen näyttöruudun koon huomioiva responsiivinen suunnittelu on tavannut alkaa 1200 pikselistä alaspäin. Sen pääpaino on ollut iPadissa ja sitä pienemmissä laitteissa, kuten tässäkin tapauksessa. Viime aikoina olen pyrkinyt optimoimaan sivustot myös isoille jopa 1900 pikseliä ja sitä leveämmille näyttöruuduille. Videogalleria ottaakin ne näyttävästi haltuunsa.

Mitä opin?

Opin projektin aikana toden teolla pyörittelemään WordPressin funktioita, kun etusivulla piti saada vaalipiirit satunnaiseen järjestykseen ja kustakin vaalipiiristä näytettäväksi yksi satunnainen ehdokas.

Opin myös virittämään W3 Total Cache -lisäosaa, kun em. satunnaisen järjestyksen on välimuistista huolimatta vaihduttava tietyin väliajoin.

Koska Foundation ei enää kehitä Orbit-karusellia edelleen, opettelin uuden Owl Carousel -systeemin, mitä käytin videovalikkona yhden ehdokkaan näkymässä iPadilla ja sitä suuremmilla näytöillä.

Muun ohella tutustuin myös Font Awesome -vektori-ikoneihin.