Kansalaisfoorumin vastuullinen sivustouudistus

Lähtökohdat

Mikä oli toimeksianto tai ongelma joka piti ratkaista?

Saimme vuoden 2023 tammikuussa Sivistysliitto Kansalaisfoorumi SKAF ry:ltä yhteydenoton, jossa pyydettiin tarjousta Opintokeskus Kansalaisfoorumin kotisivujen uudistamisesta.

Tämä tarjouspyyntö ilahdutti meitä suuresti, koska siinä pyydettiin kertomaan erilaisia vastuullisuuteen liittyviä seikkoja. Olemme panostaneet paljon yrityksemme vastuullisuuteen ja sen osoittamiseen viime vuosina, joten vielä enemmän meitä ilahdutti se, että tarjouksemme tuli valituksi ainakin osin vastuullisuusnäkökulmien perusteella.

Tämä oli muistimme mukaan ensimmäinen kerta kun tarjouspyynnössä mainittiin muitakin vastuullisuusnäkökulmia kuin lakisääteiset velvollisuudet, vaikka yrityksemme on toiminut jo vuodesta 2005 alkaen, ja saamme vuosittain useita kymmeniä tarjouspyyntöjä. Markkinat muotoutuvat sen mukaan mitä ihmiset haluavat ostaa, joten vastuullisuusnäkökulmat olisi erityisen tärkeää huomioida tarjouspyynnöissä.

Muilta osin kyseessä oli tyypillinen järjestön tarjouspyyntö verkkosivujensa uudistamisesta. Uudistuksen tavoitteena oli selkeä, moderni, saavutettava ja helppokäyttöinen sivusto. Budjettia ei avattu tarjousvaiheessa.

Visuaalisen ilmeen haluttiin pysyvän pitkälti samana pientä värien säätöä lukuun ottamatta. Ennen sivustouudistusta asiakas oli tilannut Noon Kollektiivilta uuden kuvakonseptin, jota haluttiin nyt hyödyntää sivuston suunnittelussa.

Julkaisujärjestelmävaatimuksena oli WordPress, sama kuin vanhalla sivustolla. Tietyt sivuston ominaisuudet ja sisällöt haluttiin säilyttää paranneltuina (mm. Algolia-hakuehdotukset), tiettyjä ominaisuuksia haluttiin poistaa turhina (mm. blogi) ja tilalle haluttiin tiettyjä uusia ominaisuuksia (mm. englannin kieliversio). Lisäksi sivuston tuli olla responsiivinen, saavutettava ja tietosuojalainsäädännön mukainen.

Aikataulutoive oli alun perin todella tiukka, mutta asiakas päätti pidentää sitä reilusti ennen tarjouksen hyväksymistä. Tämä oli onnistunut valinta, sillä laadukas lopputulos vaatii aina sekä työskentely- että harkinta-aikaa puolin ja toisin, ja päällekkäiset projektit tiukoilla aikatauluilla aiheuttavat haasteita toimittajille. Projekti päästiin aloittamaan maaliskuussa 2023.

Strategia

Minkälainen strategia haasteen ratkaisemiseksi valittiin? Mikä oli insight joka ohjasi suunnittelua?

Ottaen huomioon järjestöjen tyypillisesti varsin pienet markkinointibudjetit, oletimme budjetin olevan pieni myös tämän uudistuksen kohdalla. Näin ollen pyrimme tekemään tarjouksen edullisesta projektista, joka tarjoaisi kuitenkin merkittävän parannuksen verrattuna vanhaan sivustoon.

Asiakkaan vanha, toisen toimijan aikoinaan rakentama sivusto oli WordPress-pohjainen, ja periaatteessa toimiva, mutta muotoilun ja tekniikan osalta vanhentunut. Selvitysten pohjalta vanhaa sivustoa voitiin kuitenkin käyttää uudistuksen pohjana, mikä säästi työtä ja sitä kautta sekä kustannuksia että ilmastopäästöjä. Pyrimme tässä projektissa ja sivuston jatkokehittämisessä siihen, ettei vastaavaa isoa uudistusta tarvitsisi tehdä pitkään aikaan.

Suosittelemme asiakkaillemme ennemmin jatkuvaa pienimuotoista sivustojen kehittämistä sen sijaan, että tehtäisiin isoja kokonaisuudistuksia, joissa koko sivusto rakennettaisiin uudestaan tyhjältä pöydältä siinä vaiheessa kun se on jo täysin vanhentunut. Jatkuvasta kehittämisestä on monia hyötyjä, kuten esimerkiksi se, että näin toimittaessa sivusto on jatkuvasti tarkoituksenmukainen ja moderni, sen sijaan se olisi sitä vain 3–5 vuoden välein.

Olemme tehneet useita kymmeniä vastaavia sivustoprojekteja, joten projektiin ei sisältynyt tavallisesta poikkeavia haasteita. Esimerkiksi monikielisyyden, responsiivisuuden, saavutettavuuden ja tietosuojan osalta noudatettiin normaaleja käytäntöjämme.

Olemme jatkuvasti pyrkineet järkevään suunnitteluun, kestäviin teknisiin ratkaisuihin sekä laadukkaasti toteutettuihin ja optimoituihin sivustoihin, joten ekologisen näkökulman huomioiminen tämän projektin kohdalla ei vaatinut erityisratkaisuja.

Pyrimme optimoimaan kaikki rakentamamme sivustot hyvälle tasolle, sekä ekologisuuden että paremman käyttökokemuksen takia. Tarjoamme myös hosting-palvelua, joten sivustojen nopeudesta on hyötyä pienempien kolmannen osapuolen palvelinkustannusten kautta.

Luova ratkaisu

Millä idealla tai näkökulmalla toimeksiantoa lähestyttiin?

Ekologisuutta ei ollut mainittu sivuston vaatimuksissa, vaan ainoastaan toimittajaan liittyen yleisesti. Näin ollen sivustoa ei lähdetty suunnittelemaan pelkästä ekologisuusnäkökulmasta, jolloin lopputuloksena olisi voinut olla mahdollisimman pelkistetty sivusto. Sen sijaan halusimme luoda sivustosta näyttävän, houkuttelevan, oikeita asioita viestivän ja kaikin puolin aiempaa paremman, pyrkien kuitenkin samalla huomioimaan ekologiset näkökulmat.

Meille on erityisen tärkeää, että asiakas pääsee jakamaan tarvittavat lähtötiedot ja muutenkin vaikuttamaan merkittävästi lopputulokseen. Sen myötä sivustoprojekteista tulee onnistuneempia ja lopputulokset kestävät paremmin aikaa, mikä puolestaan vaikuttaa uudistusten tiheyteen ja sitä kautta pidemmän aikavälin ilmastopäästöihin.

Kuten kaikissa projekteissa, halusimme ymmärtää syvällisesti asiakkaan tavoitteet, toiminnan, kohderyhmän sekä erilaiset käytännön haasteet, joita sivustouudistuksella pyritään ratkomaan. Tämän takia projektin alkuvaiheessa pidettiin useampi workshop-tyylinen kokous meidän ja asiakkaan edustajien välillä, joissa saatiin välitettyä huomattava määrä suunnittelutyössä oleellista tietoa molempiin suuntiin. Nämä ja muutkin kokoukset pidettiin etänä, mikä vähensi liikenteen aiheuttamia päästöjä.

Asiakas oli esimerkillisesti laatinut viestintämanuaalin sekä tehnyt vanhalle sivustolle omaa käyttäjätestausta etukäteen, joten pystyimme huomioimaan myös nämä materiaalit sivuston suunnittelussa.

Sivuston suhteellisen laaja sisältö oli muodostunut orgaanisesti ajan saatossa, ja oli siksi osin puutteellista tai vaikea löytää. Näin ollen mahdollisimman selkeän sivukartan suunnitteluun kiinnitettiin erityistä huomiota, sekä sivujen otsikoiden että niillä käsiteltävän sisällön tasolla. Pyrimme myös tekemään sivuston käytöstä mahdollisimman suoraviivaista, mikä parantaa sekä käytettävyyttä että ekologisuutta.

Sivukartan jälkeen suunniteltiin tarkat rautalankamallit kaikista sivuston keskeisistä sivuista ja sisällön tyypeistä, etusivun osalta myös mobiiliversiona. Kun rautalankamallit on tehty huolella ja sisältävät kaiken tarvittavan rakenteen ja sisällön, ja kun ne on hyväksytty asiakkaan toimesta, niin ulkoasun suunnittelussa voidaan keskittyä pelkästään ulkoasuun tarvitsematta puuttua enää muihin asioihin. Tämä tarjosi suoraviivaisen polun seuraavaan vaiheeseen eli layout-kuvien piirtämiseen.

Layout-kuvat laadittiin samoista näkymistä kuin rautalankamallit, rautalankamallien pohjalta. Tässä vaiheessa suunnitelmat heräsivät eloon kauniiden kuvien, värien, fonttien, muotojen ja ikoneiden myötä, ja asiakas pystyi näkemään täysin millainen sivustosta oli tulossa, ja testaamaan näkymiä omassa selaimessaan ennen toteutusta. Työssä hyödynnettiin Noon Kollektiivin tuottamia kauniita ja dynaamisia valokuvia, joissa esiintyy asiakkaan henkilöstöä ja muita kuvakonseptiin valittuja henkilöitä. Ulkoasu hiottiin valmiiksi tiiviissä yhteistyössä asiakkaan kanssa.

Nämä toimenpiteet mahdollistivat selkeän ja yhtenevän näkemyksen työn lopputuloksena olevasta sivustosta. Saimme myös asiakkaalta kiitosta tästä prosessista  jälkikäteen.

Toteutus

Millainen on lopullinen toteutus ja miksi siihen päädyttiin?

Tarkkojen layout-kuvien sekä tiettyjen ominaisuuksien pohjatoteutuksen ansiosta sivusto oli suhteellisen helppo toteuttaa. Sivusto toteutettiin pääasiassa suunnitteluun osallistuneiden henkilöiden toimesta, joten toteutus oli myös siltä osin suoraviivaista.

Kun uusi sivusto oli riittävässä määrin toteutettu, annoimme asiakkaan edustajille pääsyn sivustolle, koulutimme heidät sivuston hallinnan käyttöön ja laadimme kirjalliset ohjeet aiheesta, vastailimme kysymyksiin ja autoimme tarvittaessa. Tästä eteenpäin asiakkaan edustajat keskittyivät uuden rakenteen mukaisen sisällön suunnitteluun ja kirjoittamiseen, kahdella kielellä.

Sivuston tekstisisältöjen uudistamisessa kiinnitettiin erityistä huomiota kielen selkeyteen ja ymmärrettävyyteen. Sanavalinnoissa ja lauserakenteissa otettiin huomioon selkokielen periaatteet. Lisäksi vähennettiin PDF-muotoisten lisäohjeliitteiden määrää, ja selkeytettyjen ohjeliitteiden tekstisisällöt uudistettiin myös samalla periaatteella.

Kun toteutus alkoi olla valmis, testasimme sivustoa eri henkilöiden toimesta niin sisällön, toimintojen kuin ulkoasunkin osalta. Mobiiliresponsiivisuuden testaus vaatii erityisesti huomiota, joten testasimme sivuston kattavasti oleellisilla selaimilla ja laitteilla, kuten on tapana.

Lopuksi sivuston saavutettavuus laitettiin kuntoon. Omat pohjakoodimme, kuten pohjateema, ovat jo valmiiksi saavutettavia, mutta työtä tarvitaan silti projektissa tuotetun uuden koodin, sekä tässä tapauksessa vanhalta sivustolta siirtyvien ominaisuuksien osalta.

Auditoimme sivuston saavutettavuuden WCAG 2.1 AA-tason ohjeita vasten ja testasimme käytännön saavutettavuuden ruudunlukijalla (NVDA, VoiceOver), näppäimistöllä ja kosketuslaitteella, tietokoneella ja mobiililaitteella. Korjasimme löytyneet ongelmat ja laadimme saavutettavuusselosteen.

Sivuston nopeutta optimoitiin hieman normaalia projektitasoamme pidemmälle. Pidämme tätä järkevänä optimoinnin tasona tämän tyyppiselle sivustolle. Sivuston nopeuden optimointi oli ennestään tuttua tiimillemme, sillä se kuuluu tarjoamiimme palveluihin.

Tulokset

Minkälaisia tuloksia työllä saavutettiin?

Sivustolla ei vieraile valtavaa määrää kävijöitä, joten todennäköisesti sivuston rakentamisen aiheuttamat päästöt ovat selvästi suuremmat kuin mitä sen käytöstä aiheutuvat ovat. Sivuston suunnitteluun ja toteutukseen käytettiin melko paljon aikaa, mikä lisäsi päästöjä projektin aikana, mutta pidemmällä aikavälillä se todennäköisesti kannatti sivuston pidemmän elinkaaren myötä.

Meillä on Koodia Suomesta ry:n hiilineutraaliusmerkki ja olemme hiilineutraali yritys vuodesta 2021 alkaen, eli laskemme vuosittain hiilijalanjälkemme, pyrimme aktiivisesti vähentämään päästöjämme ja kompensoimme päästömme kaksinkertaisesti luotettavien kompensointimenetelmien ja -palveluntarjoajien avulla. Näin ollen voidaan väittää, että sivuston rakentamisen aiheuttamat hiilidioksidipäästöt jäivät pieniksi. Sivusto on meidän ylläpito- ja hosting-palvelussamme ja jatkokehityksessä, joten myös niiden voi väittää tapahtuvan vähäisin päästöin.

Sivusto sijaitsee Suomessa sijaitsevassa Googlen Haminan palvelinkeskuksessa, jota markkinoidaan ekologisena. Sivusto sijaitsee jaetulla palvelimella usean muun asiakkaidemme sivuston kanssa, mikä saattaa heikentää sivuston nopeutta loppukäyttäjille tai auditointityökaluille, mutta toisaalta se parantaa sivuston ekologisuutta ja vähentää kustannuksia, koska palvelinresursseja ei varata sivuston käyttöön turhan takia. Tyypillisesti suurin osa tietoteknisten laitteiden hiilidioksidipäästöistä syntyy raaka-aineiden hankkimisesta ja laitteiden valmistamisesta, ja osa myös niiden markkinoinnista, myynnistä, kuljetuksista ja vastaavasta. Siihen verrattuna niiden käytön aiheuttamat päästöt ovat yleensä pieniä.

Emme valitettavasti pysty mittaamaan sivuston energiankulutusta suoraan, mutta sivusto saa melko hyvät tulokset erilaisilla auditointityökaluilla, mikä tarkoittaa sitä, ettei sen käyttö aiheuta turhia ilmastopäästöjä. Sivustoa saattaisi voida optimoida vielä hieman lisää, mutta arvioimme, että lisäoptimoinnin käytännön vaikutus sivuston käytön ilmastopäästöihin olisi pieni, ja kokonaisvaikutus olisi todennäköisesti negatiivinen johtuen sen vaatimasta työmäärästä. Eli optimointityön aiheuttamien päästöjen ja kustannusten takia sivustoja ei kannata optimoida loputtomiin.

Selkeästi pienempiin päästöihin pääseminen olisi vaatinut kompromisseja joko käyttökokemuksen tai toteutustekniikan suhteen. Esimerkiksi WordPress-julkaisujärjestelmästä luopumalla sivuston ilmastopäästöt vähenisivät kyllä huomattavasti, niin käytön kuin myös toteutuksen, ylläpidon ja hostingin osalta, mutta se tekisi myös lopputuloksesta ihan toisenlaisen asiakkaan näkökulmasta, eikä olisi ollut tämän tarjouspyynnön mukaista.

Pidemmällä aikavälillä haluaisimme korvata nykyiset kohtuuttoman raskaat julkaisujärjestelmät kuten WordPress ja Drupal jollakin niitä huomattavasti kevyemmällä ratkaisulla, jonka suunnittelussa turhan työn ja ilmastopäästöjen välttäminen olisi huomioitu alusta asti. Se vaatisi kuitenkin myös asiakkailta rohkeutta kokeilla jotakin uutta, samoin kuin muilta alan toimijoilta.

Mikäli tämä aihepiiri on sydäntäsi lähellä, niin ota yhteyttä!

Tekijät

Asiakas

Kansalaisfoorumi
(Sivistysliitto Kansalaisfoorumi SKAF ry)

Raisa Laukkanen: sisältö
Riitta Liski: hankinta, sisältö
Joni Sivonen: sisältö

Sivustouudistus

Konsepto
(Konsepto Oy)

Hanna Lindewall: suunnittelu, toteutus
Mikko Paltamaa: käytettävyys, saavutettavuus, asiakkuus, myynti
Janne Hukka: projektinhallinta, testaus
Otto Manninen: toteutus, optimointi

Kuvat

Noon Kollektiivi
(Noon Viestintä Oy)

Riitta Supperi: kuvakonseptointi
Laura Oja: valokuvaus
Inari Savola: kuvitus