Haminan kaupungin verkkopalvelu

Uudistimme Haminan kaupungin verkkopalvelun, tavoitteenamme luoda moderni, selkeä ja käyttäjäystävällinen tietopankki, joka toimisi samalla kaupungin houkuttelevana käyntikorttina. Uudistuksessa hyödynnettiin kestäviä digikehitysperiaatteita, jotka varmistivat sivuston energiatehokkuuden.

Asiakastarina pähkinänkuoressa

• Haminan kaupunki halusi uudistaa verkkosivustonsa moderniksi, selkeäksi ja käyttäjäystävälliseksi tietopankiksi, joka toimisi samalla kaupungin houkuttelevana käyntikorttina. Uudistuksessa painotettiin kestäviä digikehitysperiaatteita ja energiatehokkuutta.

• Suunnittelimme ja toteutimme uuden verkkosivuston Haminan kaupungin brändin mukaisesti. Sivustosta tehtiin selkeä ja helppokäyttöinen, ja se optimoitiin energiatehokkuuden ja nopean latautumisen takaamiseksi.

• Uusi verkkosivusto on saavuttanut tavoitteensa. Se on saanut kiitosta selkeydestään ja käyttäjäystävällisyydestään. Sivusto on myös energiatehokas ja nopea, ja se tukee Haminan kaupungin kestävän kehityksen tavoitteita.

Kaupunkilaisten ääni kuuluviin

Hamina on liki 20 tuhannen asukkaan pikkukaupunki Kaakkois-Suomessa, joka tunnetaan muun muassa historiallisena linnoituskaupunkina sekä harvinaisesta ympyrän muotoisesta asemakaavastaan.

Verkkopalvelu on Haminan tärkein viestintäkanava, jolla pyritään paitsi luomaan kaupunkimielikuvaa, myös tiedottamaan kuntalaisia tärkeistä ajankohtaisista asioista, sekä osallistaa heitä päätöksentekoon.

Lähtökohta verkkopalvelun uudistusprojektille oli perinteinen.
“Kaiken alku ja juuri oli se, että sivusto kaipasi uudistusta. Edellisestä uudistuksesta oli jo 5 vuotta, eivätkä sivut olleet eläneet ajassa.”, toteaa Aija Kurko, Haminan kaupungin markkinointisuunnittelija.

Saavutettavuusdirektiivikin tuli voimaan viimeisimmän uudistuksen jälkeen, eikä sivusto vastannut kaikkiin sen vaatimuksiin.

Kaupunkilaisilta oli tullut yleisesti palautetta, että kaivataan selkeämpiä ja helppokäyttöisempiä sivuja. Yhteensä kaupungilla oli kuusi sivustoa käytössä. Navigaatioelementtejä oli todella paljon ja tietoa oli vaikea etsiä ja löytää.

“Kaupunkilaisilta tuli myös kommenttia että nämähän ovat matkailusivut. Kaupungin verkkosivut tulisi olla ensisijaisesti kaupunkilaisille suunnattu.”, avaa Haminan viestintäkoordinaattori Riikka Koskimies projektin lähtökohtia.

Kestävyys yksi Haminan kaupungin tärkeistä arvoista

Hamina kuuluu Hinku-verkostoon, joka on vuonna 2008 perustettu ilmastonmuutoksen hillinnän edelläkävijöiden verkosto. Hinku-kunnat ovat sitoutuneet tavoittelemaan 80 prosentin päästövähennystä vuoteen 2030 mennessä vuoden 2007 tasosta.

“Kestävyyttä mietitään kaikessa tekemisessämme todella paljon, aina uudisrakentamisesta verkkopalveluiden suunnitteluun.”, toteaa Riikka.

Siispä oli aika kääriä hihat, ja ryhtyä toimeen.

Kokonaisuuteen sisältyi Haminan verkkosivuston suunnittelu, toteutus sekä ylläpito- ja tukipalvelut. Lisäksi verkkopalvelun käyttöliittymä ja visuaalinen ilme suunniteltiin Haminan kaupungin brändin pohjalta.

Kaupungin uudesta verkkopalvelusta tulisi luoda selkeä ja käyttäjäystävällinen kokonaisuus, jossa mukailtaisiin kestäviä digikehitysperiaatteita. Sen olisi tarkoitus toimia Haminan kaupungin asukkaiden tietopankkina ja kaupungin houkuttelevana käyntikorttina.

Moderni ja pelkistetty design käyttäjäystävällisyyden ehdoilla

Hionin kestävän digikehityksen (Green, Sustainable Web) -työryhmän asiantuntemus ohjasi Haminan verkkopalvelun ekologista suunnittelua alusta alkaen. Projektipalavereissa määriteltiin sivuston perusrakenne ja lohkot, jotka hiottiin yksityiskohtaisesti selkeiksi kokonaisuuksiksi. Suunnittelijat kehittivät yhtenäisen, helposti monistettavan visuaalisen ilmeen, jota voitiin soveltaa eri lohkoihin.

Sivuston designissa tavoiteltiin pelkistettyä ja modernia tyyliä, jossa vältettiin raskasta kuvamateriaalia ja automaattisesti käynnistyviä videoita, joita aiemmalta sivustolta löytyi runsaasti. Etusivun ilmettä modernisoitiin yksinkertaisesti nojaamalla tekstin ja brändivärin yhdistelmään, ja koko sivuston rakennetta selkeytettiin tiedon löydettävyyden parantamiseksi kuntalaisia varten.

Suunnittelun pääpaino oli selkeydessä, saavutettavuudessa ja keveydessä, jotta sivusto palvelisi kaikkia käyttäjiä mahdollisimman hyvin, ja myös sivuston koodia optimoitiin tehokkuuden parantamiseksi.

Integraatiot

Erilaiset yhteystiedot toimivat tärkeänä osana Haminan kaupungin viestintää. Sivustolle toteutettiin integraatio, jonka avulla Haminan kaupungin työntekijöiden sekä toimipisteiden yhteystiedot synkronoidaan Fonectan REST-rajapinnasta kerran päivässä sivuston tietokantaan omiin räätälöityihin sisältötyyppeihin. Sivuston ylläpitäjät voivat luoda dynaamisia yhteystietonostoja haluamillaan suodatuksilla räätälöidyn lohkon kautta mihin tahansa sisältöön, ja sivustolla on myös erillinen yhteystietohaku, joka kokoaa kaikki sivuston yhteystiedot samaan paikkaan haettavassa muodossa.

Sivustolle on toteutettu myös erillinen räätälöity lohko, jonka avulla sivuston sisältöihin voidaan luoda tapahtumanostoja halutulla suodatuksella, esim. tapahtumien kategorian perusteella. Tapahtumat haetaan lohkoon dynaamisesti ulkoisen tapahtumapalvelun REST-rajapinnasta, ja tulokset välimuistitetaan palvelinresurssien säästämiseksi.

Tekninen toteutus ja green coding -käytänteet

Arkkitehtuuri

Haminan verkkopalvelun teknologiastack nojaa WordPress-pohjaiseen DustPress-kehykseen, jossa on hyödynnetty Gutenberg-custom-lohkoja sekä ACF-kenttiä. Teknologiavalintoja määrittivät Haminan tarjouspyynnön vaatimukset, mutta pystyimme vaikuttamaan itse kehitystyössä palvelun energiatehokkuuteen.

Esimerkiksi integraatio ajetaan vain kerran yössä, eikä dynaamisesti jokaisella sivulatauksella. Tämä vähentää merkittävästi http-pyyntöjen määrää ja säästää energiaa.

Palvelinresurssit pyörivät uusiutuvalla energialla omassa kaupungissa

Haminan kaupungin etuna on Googlen palvelinsalien läheisyys, sillä ne sijaitsevat nimenomaisesti Haminan kaupungissa. Kun projektista tehtiin tarjous, oli selkeää, että Haminalle olisi hyödyllistä ottaa Google Cloud -palvelinresurssit käyttöön, sillä mitä lähempänä käyttäjiä palvelun hostaus tapahtuu maantieteellisesti, sen parempi energiankulutuksellisesti.

Välimuistitus

Haminan verkkosivusto on optimoitu suorituskyvyn parantamiseksi hyödyntämällä monipuolista välimuistitusta. Googlen CDN tarjoilee HTML-sisällön suoraan käyttäjälle, vähentäen palvelimen kuormitusta ja nopeuttaen latausaikoja.

Redis-välimuistia käytetään tietokantakyselyiden ja sisäisten hakujen nopeuttamiseen. Lisäksi CSS-, JS-tiedostot ja kuvat toimitetaan Ewww Image Optimizerin CDN:n kautta, ja CSS-tiedostot välimuistitetaan tunnin välein käyttäjän selaimessa, mikä vähentää entisestään palvelimen kuormitusta. Nämä toimenpiteet yhdessä varmistavat nopean ja sujuvan käyttökokemuksen Haminan verkkosivustolla.

Sivuston resurssien optimointi: kuvat, vektorit, fontit ja koodi

Haminan verkkosivustolla on panostettu kuvien ja resurssien optimointiin energiatehokkuuden parantamiseksi. Kuvat on optimoitu Ewwwio-lisäosan avulla, joka pakkaa ja lataa ne tehokkaasti. Vektorikuvia käytetään SVG-spriten ja ikonifontin avulla, mikä vähentää tiedonsiirtoa ja nopeuttaa latauksia. HTML-koodi on pakattu ja ylimääräisiä WordPressin ja lisäosien koodirivejä on poistettu. Fontit on valittu huolella ja ne latautuvat tehokkaasti .woff-muodossa. Nämä toimenpiteet yhdessä varmistavat, että sivusto on kevyt ja nopea ladata, mikä parantaa käyttäjäkokemusta ja vähentää energiankulutusta.

Suojaa verkkohyökkäyksiltä

Google Cloudin päässä on aktivoitu sivustolle Cloud Armor –palomuuri, joka suojaa verkkosivustoa erilaisilta verkkohyökkäyksiltä kuten esimerkiksi palvelunestohyökkäyksiltä. Se tekee sen rajoittamalla pyyntöjä IP-osoitteiden perusteella, estäen palvelua kuormittavia haittaliikennepiikkejä. Tämä parantaa sivuston suorituskykyä ja vähentää energiankulutusta.

Saavutettavuus

Verkkosivusto täyttää suurelta osin WEB Content Accessibility Guidelines (WCAG) 2.1:n edellyttämät vaatimukset A- ja AA-tasolla. Saavutettavuusvaatimusten mukainen suunnittelu suosii selkeää ja minimalistista käyttöliittymää, joka vähentää tarpeetonta graafista sisältöä ja raskaita elementtejä. Tämä keventää sivuston kokonaisrakennetta, mikä johtaa pienempiin tiedostokokoihin ja vähempään tiedonsiirtoon.

Lopputuloksena käyttäjäystävällinen ja kevyt palvelu

“Uudet verkkosivut ovat selkeämmät ja käyttäjäystävällisemmät niin kuntalaisille kuin eri toimialojen viestijöille. Sivusto palvelee eri toimialojen viestinnän tekijöitä hyvin päivittäisessä tekemisessä ja kehittämisessä. On myös hienoa, että uusi sivusto on tietoturvallisempi.”

-Aija Kurko, Haminan kaupunki

“Sivustot ovat nyt aiempaa selkeämmät ja uudet elementit mahdollistavat paljon enemmän kuin vanhoilla sivuilla olleet ominaisuudet. Kuntalaiset löytävät etsimänsä tiedon helpommin ja ovat näin tietoisempia ajankohtaisista asioista. Kävijäpolut ovat selkeämpiä ja pyrimme jatkuvasti vähentämään pdf-liitteiden käyttöä sivuilla, mikä parantaa saavutettavuutta. Uudistuksen yhteydessä karsimme vanhaa sisältöä ja keskityimme olennaiseen.” – Aija Kurko, Haminan kaupunki

Nostoja tuloksista

Palvelinresurssien hiilijalanjälki

Palvelun palvelinresurssien aiheuttamat päästöt olivat joulukuussa 2024 11 kg CO₂e. Koko vuoden 2024 aikana arvioimme päästöiksi yhteensä 132kg CO₂e.

Kyseessä ovat palvelinsalin scope 1,2,3 -päästöt kyseisen palvelun osalta.

Scope 1 kattaa paikan päällä tapahtuvan fossiilisten polttoaineiden käytön, kuten lämmityksen ja generaattorien päästöt. Scope 2 sisältää sähköverkosta ostetun sähkön päästöt. Scope 3 puolestaan kattaa laajemmin datakeskukseen liittyviä päästöjä, kuten työntekijöiden matkustamisen ja laitteistojen elinkaaripäästöt.

Sivujen koko ja latausnopeus

Haminan verkkosivuston etusivu on kevyt ja energiatehokas. Sen koko on vain 1.01MB, ja se on EcoGraderin mukaan 74.56% pienempi kuin keskivertosivusto. Google PageSpeed Insights antaa etusivulle hyvät pisteet tehokkuudesta, ja sivuston latautumisnopeus on myös hyvä.

Mitä seuraavaksi?

Haminan kaupungin tiimi on tunnistanut useita kehityskohteita sivustonsa jatkokehitykselle.

“Tiedostamme, että sivustot eivät ole koskaan valmiita ja päivitettävää riittää jatkossakin. Mikä tänään on tärkeää, ei välttämättä ole sitä enää huomenna. Siksi meille on tärkeää kuunnella kuntalaisten palautetta ja hyödyntää uuden sivuston ketteriä kehittämismahdollisuuksia.”, Aija Kurko toteaa.

“Hyvin palvelevat verkkosivut korvaavat isossa määrin paperisen viestinnän tarpeita ja edistävät näin osaltaan kaupunkimme Hinku-tavoitteita.”, kiteyttää Riikka Koskimies.

Työmme jatkuu koulutuksilla asiakkaan sisällöntuotantoon ja muihin energiatehokkuuden kannalta olennaisiin aihealueisiin liittyen. Jatkokehityksessä tulemme ottamaan energiatehokkuuden entistä tarkemmin huomioon ja luomme käyttäjille mm. ohjeistuksen sisällönsyöttöön.