Redandbluen verkkosivustouudistus

Projekti osallistuu Grande One -kilpailussa kategorioihin:

  • Saavutettavin digipalvelu
  • Ekologisin verkkopalvelu
  • Paras visuaalinen design

Strategia

Redandblue lähti uudistamaan verkkosivustoaan uuden kestävän kasvun strategian myötä. Redandbluen strategian perustana on vastuullinen liiketoiminta, joka konkretisoituu ekologisten, saavutettavien, tuloksellisten ja ihmislähtöisten verkkopalveluiden tuottamisena. Tehtävämme on luoda asiakkaillemme kestävää kasvua koko asiakkuuden elinkaaren ajan.

Verkkopalvelulle annettiin tavoitteeksi kertoa kattavasti eri palveluista, näyttää referenssejä ja esittää asiantuntijablogeja strategisia tavoitteita tukien. 

Uudistuksen yhteydessä tehtiin myös kevyt brändiuudistus, jossa päivitettiin typografia- ja kuvitustyyli ja yhdenmukaistettiin blogin kuvitusmaailma. Kaikki sivustolla näkyvät kuvitukset on redandbluen designerin piirtämiä.

Luova idea ja konsepti

Uuden sivuston konseptoinnin yhteydessä tehtiin laaja bechmarkaus samantyyppisten toimijoiden verkkopalveluista. Kartoitimme erityisesti tapoja kommunikoida yrityksen vastuullisuutta ja energiatehokkuutta myös verkkosivuston kautta. Haluamme olla tällä saralla edelläkävijä. 

Ekologisuuden osalta päätimme laskea edellisen verkkosivuston energiatehokkuuden ja verrata sitä uuteen sivustoon, ja kommunikoida eron uuden sivuston footerissa. Uusi sivusto tuottaa https://www.websitecarbon.com/ mittauksen mukaan 72 % vähemmän hiilidioksidipäästöjä kuin edellinen headless-teknologialla toteutettu sivusto. Saman mittauksen mukaan sivusto on 59 % vähäpäästöisempi kuin verkkosivustot keskimäärin globaalisti.

Sivuston designin osalta halusimme tavoitella kaunista ulkoasua ja jouhevaa käyttökokemusta. Otimme tavoitteeksi tällä projektilla todistaa, että AA-kriteeristön tason saavutettuuden vuoksi ei tarvitse tehdä kompromissejä visuaalisuuden osalta.

web-analytiikka ja kävijäseuranta

Ekologisuus

  • Tehokkuus ja ekologisuus: Sivuston suorituskyvyn parantamisessa on keskitytty erityisesti vähentämään Cumulative Layout Shift -arvoa (CLS), mikä tarkoittaa, että sivuston visuaalinen vakaus säilyy latauksen aikana, eikä sisältö hyppele näytöllä. Tähän päästiin muun muassa seuraavilla toimenpiteillä:

    • Fallback-fontit: Fonttien varakoko määriteltiin tarkasti vastaamaan brändifonttien kokoa, mikä vähentää visuaalisia muutoksia latausvaiheessa.
    • Kuvien kuvasuhteet: Kuville määriteltiin tarkat kuvasuhteet, jotta ne eivät latautuessaan aiheuta odottamattomia muutoksia sisältöön.
    • Responsiiviset kuvat: Kuvia optimoitiin latautumaan aina käyttäjän laiteikkunan leveyden mukaan sopivassa koossa.
    • CSS-tiedostojen latausjärjestys: Tyylitiedostot järjestettiin latautumaan optimaalisessa järjestyksessä, mikä parantaa suorituskykyä ja nopeuttaa sivuston käyttöä.

  • Eco-valikko – käyttäjällä mahdollisuus vaikuttaa sivuston energiatehokkuuteen

    • Tumma teema: Valikon avulla käyttäjä voi säädellä sivuston taustaväriä tumman ja vaalean välillä. Tumman taustan yksittäinen pikseli kuluttaa vähemmän enerergiaa kuin mikä tahansa muu väritausta.
    • Kevyet kuvat: Matalan resoluution kuvat latautuvat nopeammin ja kuluttavat vähemmän energiaa. Kun tämä asetus on päällä, kuvat näytetään pikselöitynä, jolloin sivu latautuu nopeammin ja energiaa säästyy.
    • Ei animaatioita: Matalan resoluution kuvat latautuvat nopeammin ja kuluttavat vähemmän energiaa. Kun tämä asetus on päällä, kuvat näytetään pikselöitynä, jolloin sivu latautuu nopeammin ja energiaa säästyy. Pikselisistä kuvista saadaan myös persoonallinen visuaalinen efekti sivustolle – kuvien pakkaustapaa, pikselien määrää ja värimäärityksiä mietittiin tarkkaan ennen pakkauksen teknistä toteutusta

Toteutus

  • Navigaatio ja rakenne: Navigaation suunnittelussa ja toteutuksessa on otettu huomioon sisällön laajentuminen, saavutettavuus ja hakukoneoptimointi.
  • Saavutettavuus: Sivusto noudattaa WCAG 2.2 AA-tason saavutettavuuskriteereitä, mikä tekee siitä yhdenvertaisen ja helposti lähestyttävän kaikille käyttäjille. Verkkosivuston saavutettavuus on toteutettu huolellisesti semanttista HTML:ää hyödyntäen, jotta erityisesti ruudunlukijakäyttäjät saavat selkeän ja helppokäyttöisen kokemuksen.
  • Analytiikka ja optimointi: Sivustolle asennettiin kattavat analytiikkatyökalut, joiden avulla voidaan seurata keskeisiä mittareita, kuten käyttäjämääriä ja hakijapolkujen toimivuutta.
  • Responsiivisuus: Sivusto toimii saumattomasti eri laitteilla, ja sen sisällöt ovat helposti jaettavissa sosiaaliseen mediaan.
  • Monikielisyys: Sivustolle on mahdollista lisätä useita kieliversioita, tällä hetkellä sivusto toimii suomeksi ja englanniksi.
  • Tehokas hakutoiminto: Hakutoiminto kattaa kaikki sivuston sisällöt kategorisoituna ja nopealla moottorilla toteutettuna.
  • Suodatinsivut ja sisältötyypit: Sivustolla on useita sisältötyyppejä, joiden avulla sisällöntuottajat saavat lajiteltua laajaa sisältöpalettia hallinnan puolella sekä saavat pidettyä sisällöt tarvittavilta osin määrämuotoisina sisällönsyöttäjästä riippumattomasti. Suodatinsivujen avulla käyttäjät löytävät omaan käyttötarpeeseen sopivat referenssit ja esimerkiksi työpaikkailmoituksia voidaan hakea nostoina eri puolelle sivustoa.
  • Laaja kustomoitu sisältölohkokirjasto: Sivustolle rakennettiin Gutenberg-editorille laaja lohkokirjasto erilaisten sisältöjen esittämiseen. Lohkokirjasto kattaa kymmeniä lohkoja erilaisilla variaatioilla asettelun suhteen. Kaikki lohkot on toteutettu toimimaan myös sivuston ekologisella dark modella.
  • Migraatiot: Sivustolle migroitiin edelliseltä sivustolta kymmeniä artikkeleita ja referenssejä sisältöineen.
  • Palvelin: Sivusto pyörii Seravon palvelimilla, joiden käyttämä sähkö on tuotettu uusiutuvalla energialla.

Tulokset

Tutustu verkkopalveluun

Julkaisun jälkeinen 30 päivää verrattuna edeltävään ajanjaksoon

  • Sitoutumisprosentti kasvoi

    114,8 %

  • Sitoutuneen kävijän vierailun kesto kasvoi

    79,9 %

  • Sitoutuneet sessiot per kävijä nousi

    149 %

  • Konversioiden määrä kasvoi

    59,3 %

Redandblue

Redandblue on erikoistunut saavutettavien ja ekologisten verkkopalveluiden tuottamiseen. Teimme vuonna 2024 yhteensä 16 AA-tason saavutettavaa verkkopalvelua. Yrityksenä kannamme ympäristövastuun ja olemme laskeneet vuoden 2024 hiilidioksidipäästömme (70 tonnia CO2-päästöjä) sekä kumonneet niiden ilmastovaikutuksen tukemalla uusiutuvan energian projektia Intiassa. Redandbluella on Koodia Suomesta hiilineutraaliusmerkki. 

Koodia Suomesta ry:n myöntämä Hiilineutraali-merkki