Miten kehitämme WordPress-verkkopalveluita

Sohovan tiimi on suunnitellut ja toteuttanut WordPress-verkkopalveluita jo vuosia. Tänä aikana olemme oppineet paljon, ja yksi tärkeimmistä oppitunneista on ollut ettei työtä kannata aina aloittaa alusta tyhjältä pöydältä. Kokoamme oppimme puitejärjestelmään jota kutsumme nimellä Sohova Design System.

WordPress

WordPress on maailman suosituin tapa toteuttaa verkkosivuja. Se on alunperin blogipainotteinen sisällönhallintajärjestelmä eli CMS (Content Management System), joka on suosionsa myötä kasvanut valtavan monipuoliseksi verkkosivu- ja verkkokauppa-alustaksi. WordPress koostuu itse sisällönhallintajärjestelmästä (WP Core), sen hallintapaneelista tai editorista (nykyään Gutenberg), teemasta (joka määrittelee ulkoasun), tietokannasta, lisäosista ja varsinaisesta sisällöstä.

Mitä Sohova Design System tarkoittaa?

Meille SDS muodostaa kokonaisvaltaiset puitteet verkkopalveluiden tekemiselle. Se tarkoittaa 

  • koottuja parhaita käytäntöjä
  • Suunnittelupohjia ja dokumentaatiota
  • Ennakkoon valittuja lisäosia ja teknisiä ratkaisuja
  • Omaa WordPress-pohjateemaa

Kun aloitamme uuden palvelun suunnittelun, meillä on siis jo alussa olemassa puitteet hyväksi todetulle tavalle toteuttaa WordPress-verkkopalvelu, joka on

  • Käyttäjäystävällinen ja saavutettava
  • Tietoturvallinen ja toimintavarma
  • Tehokas ja optimoitu

Tämän ansiosta voimme välttää toistuvaa rutiinityötä, ja alkaa heti keskittyä asiakkaamme erityistarpeisiin.

SDS WordPress-teema

Sohovan WordPress-teema on täysin räätälöitävissä asiakkaan tarpeiden mukaiseksi sekä käyttöliittymän että toiminnallisuuksien osalta.

Käytämme itse kehittämäämme WordPress-pohjateemaa, joka sisältää olennaiset rakenteet SDS:n mukaista kehitystä varten. Kyseessä on ns. Rautalanka, joka ei vielä ota juuri kantaa kyseisen palvelun ulkoasuun: lähtökohtaisesti toteutusten ulkoasu räätälöidään aina asiakkaan tarpeiden mukaisesti. Kuitenkin monet verkossa tutuiksi standardeiksi vakiintuneet tai käytännön kokemuksella parhaaksi todetut ratkaisut on sisäänrakennettu teeman ratkaisuihin. Esimerkiksi haku-toiminnon käyttöliittymä tai sivunavigaation toteutus kannattaa toteuttaa tavalla johon käyttäjä on mahdollisimman tottunut. 

Teema noudattaa Gutenberg-editoria, ja on asiakkaalle hyvin räätälöitävissä ja edelleen kehitettävissä. Siinä on huomioitu laajalti WCAG-saavutettavuusstandardin vaatimuksia, niin että se täyttää oletuksena AA-tason vaatimukset. Teemassa on myös kiinnitetty paljon huomiota performanssiin, eli latausnopeuteen: nopeasti latautuva palvelu on paitsi käyttäjäystävällinen, hyötyy myös Googlen hakukonealgoritmin suosiosta.

Erimerkiksi performanssin kannalta olennaisia ratkaisuja ovat kuvien laiskalataaminen, uusimpien kuvaformaattien ensisijainen käyttö, esitettävän kuvakoon valinta ruudun koon mukaan, koodin pakkaaminen ja välimuistikäytännöt. Palvelu on optimoitu yhteistyössä palvelinkumppanimme kanssa. Hyvin optimoitu teema toimii pohjana nopealle ja käyttäjäystävälliselle sivustolle. Käyttökokemuksesta merkittävä osa tulee palvelun nopeudesta. Myös hakukone-optimoinnin yksi tärkeimmistä kriteereista on palvelun nopeus.

Sohovan teemalla toteutetut sivustot ja verkkokaupat skaalautuvat todistetusti huikeisiin käyttäjämääriin. Mm. Nenäpäivän sivustolla tehtiin Nenäpäivänä 2021 yli miljoona sivulatausta yhden päivän aikana. Näillä luvuilla sivusto on hetkellisesti Suomen vierailluimpia verkkosivuja.

Tietoturvaa huomioidaan useilla hyväksi todetuilla käytännöillä. Lisäksi ulkopuolinen tietoturva-asiantuntija on auditoinut Sohovan WordPress-teeman.

Teemassa ja muissa teknisissä ratkaisuissa huomioidaan myös mahdollisimman kattava selain- ja laitetuki, tasapainotellen mahdollisimman tehokkaan ja käyttäjäystävällisen lopputuloksen kanssa.

SDS Lisäosat ja komponentit

Vuosien kehitystyön aikana meille on kertynut laaja komponenttikirjasto, josta asiakkaan projektiin käyttöön saadaan jo toimivaksi todettuja ratkaisuja, sekä pystytään räätälöimään niitä asiakkaan tarpeiden mukaan.

Lisäosat ovat yksi osa WordPressin suosiota. Valitsemalla valmiita lisäosia pystymme nopeasti toteuttamaan monimutkaisia ratkaisuja, joiden toteuttaminen räätälöitynä asiakasta varten olisi suhteettoman työlästä ja kallista. Kun valitsemme kolmannen osapuolen lisäosia, käytämme valintakriteeterinä suosiota (latausmääriä ja arvosteluj), etabloitumista (vakiintunutta suosiota vuosien ajalta) ja tukea (lisäosa saa jatkuvia päivityksiä) – puhumattakaan omasta kokemuksestamme lisäosan käytöstä.

Sohova Design System sisältää myös joitakin itse toteuttamiamme lisäosia. Tärkeimpänä näistä on block teema, joka sisältää paljon kehitystä itse editoriin, joka “karvalakkimallina” ei aina ole kovin käyttäjäystävällinen ainakaan satunnaisen käyttäjän silmin. Teema Sohova Theme tekee korjauksia editoriin ja lisää useita omia Gutenberg-blokkeja. Gutenberg-blokit ovat WordPressin uudemman version kehittäjille tarkoitetun rajapinnan mukaisia peruspalikoita, jotka mahdollistavat ennaltamääritetyn sisällön syöttämisen sivuille.

SDS Suunnittelupohjat ja dokumentaatio

SDS sisältää myös kehityksen kannalta oleellisen teknisen dokumentaation, mikä pitää eri kehittäjien oletusratkaisut johdonmukaisina ja luo jatkuvuutta verkkokehitykseen. 

Kenellekään ei ole hyötyä siitä, että esimerkiksi paras tapa toteuttaa sivunavigaatio suunnitellaan uudelleen kuukauden välein. Kun asia on kerran ajatuksen kanssa käyty läpi, dokumentoimme ratkaisun ja lisäämme sen SDS:n dokumentaatioon. Toki usein ratkaisuja räätälöidään asiakkaan erityistarpeiden mukaisesti, mutta tällöinkin olemme jo askeleen edellä heti työn alkaessa.

Pohjina käytetyt suunnittelutiedostot on valmisteltu SDS-ratkaisujen mukaisesti, mikä virtaviivaistaa kokonaisprosessia. Lisäksi se tuo suunnittelijat ja kehittäjät lähemmäs toisiaan heti työn alussa. Olemme ottaneet vaikutteita parhaista lähteistä, esim. Material Design ja Bootstrap, mutta vieneet ratkaisuja siihen suuntaan jonka itse olemme nähneet työssämme (ja asiakkaidemme kannalta) parhaaksi. Myös suunnittelupohjissa huomioidaan vahvasti käytettävyys ja WCAG-direktiivin mukainen saavutettavuuden taso.

Kolme pääsyytä SDS:n olemasaoloon

1. Tehokkuus

Don’t repeat yourself. Toistuvan rutiinityön määrää vähennetään jotta voimme keskittyä enemmän asiakkaan tarpeiden mukaiseen räätälöintiin. WordPress asennetaan pohjalle nopeasti samalla kaavalla, samoilla liitännäisillä, samoilla asetuksilla jotka ovat useimmissa tapauksissa parhaat – sitten aloitetaan varsinainen työ. Asiakkaamme saavat enemmän samassa ajassa.

2. Laatu

Kaikki toteutukset ovat lähtökohtaisesti yhtä korkeatasoisia, koska ne sisältävät aina parhaaksi todetut ja vertaillut ratkaisut. Aina kun opitaan parempi tapa tehdä jotain, voimme lisätä ratkaisun osaksi SDS:ä. Asiakkaamme hyötyvät tästä kumulatiivisesta kehityksestä. Kuuden vuoden aikana kertynyt osaaminen ja kokemus on koottu yhteen.

3. Jatkokehittävyys

Yhteinen framework tiimeille selkeyttää kehityksen työnkulkua ja siten helpottaa jatkokehitystä. Toteutus noudattaa yhä avointa lähdekoodia, eli on kenen tahansa jatkokehittävissä. Meille tärkeä filosofia on modulaarisuus, eli että kaikki osat pilkottu pienempiin osin tehokkuutta ja yhdistämisen helppoutta ajatellen. Tämä koskettaa varsinaisten “sisältöpalikoiden” lisäksi myös itse koodia: jokainen koodinpätkä on siis pyritty toteuttamaan helposti yhdistettävänä, itsenäisenä palasena. Sama filosofia on huomioitu myös suunnittelutyössä.

4. Käytön helppous

Suunnittelemme verkkopalvelut niin että niitä on helppoa käyttää ja ylläpitää. Varsinkin sivuston sisällön muokkaaminen onnistuu helposti jokaiselta. Myös sivupohjia ja ulkoasuja on mahdollista tehdä omin voimin tai käyttää siihen esimerkiksi graafisen suunnittelijan apuja.

SDS:n tulevaisuus

SDS on nykyään vakiintunut oleelliseksi osaksi työprosessiamme. Sitä mukaa kun uusia, parempia tapoja kehittää WordPressiä – tai digitaalista käyttökokemusta yleensä – todetaan, liitetään ne osaksi SDS:ää koodina, design-pohjina ja dokumentaationa. Visionamme on, että joskus SDS sisältää kaikki Sohovan tiimissä toistuvat suunnittelun ja kehityksen teemat, ja meillä on aidosti holistinen, kaikille yhteinen tapa toteuttaa ydintoimintaamme – käyttäjäystävällisten digitaalisten palveluiden suunnittelua ja toteutusta.