Miten kehitämme WordPress-verkkopalveluita

Agendan 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ä Agenda 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ä Agenda Design System tarkoittaa?

Meille ADS 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.

ADS WordPress-teema

Kaikki WP-toteutuksemme ovat täysin asiakkaamme näköisiksi räätälöityjä. Me emme käytä valmisteemoja, ellei niin ole erikseen asiakas toivonut.

Teema on WordPressin kenties merkittävin muuttuja, joka määrittelee yleensä miltei koko palvelun ulkoasun. Lähetystapamme teeman kehitykseen on se, että kirjoitamme asiakkaan ilmeen mukaiset tyylisäännöt täydentämään WP:n virallista oletusteemaa. Tämä tarkoittaa käytännössä lapsiteeman toteuttamista.

Lähtökohtana on jatkuvasti kehittämämme ADS-lapsiteema. Kyseessä on ns. ”rautalanka”, joka ei vielä ota juuri kantaa kyseisen palvelun ulkoasuun: 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.

Agendan 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.

Tietoturva huomioidaan jatkuvassa kehityksessä aktiivisesti. 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.

ADS 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ä.

Agenda Design System sisältää myös itse toteuttamiamme lisäosia, joilla täydennämme WP:n toiminnallisuuksia. Nämä ovat ominaisuuksia jotka näemme oletuksena aina hyödyllisinä, eikä pelkästään asiakaskohtaisina erityispiirteinä.

ADS Suunnittelupohjat ja dokumentaatio

ADS 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 ADS: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 ADS-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ä ADS: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. Perusasetuksemme saadaan pystyyn hetkessä, jolloin asiakaskohtaisia muutoksia aletaan toteuttamaan jo ensimmäisen työtunnin aikana!

2. Laatu

Kaikki toteutukset sisältävät aina valmiiksi parhaaksi todetut ja vertaillut ratkaisut. Aina kun opitaan parempi tapa tehdä jotain, voimme lisätä ratkaisun osaksi ADS:a. Asiakkaamme hyötyvät tästä kumulatiivisesta kehityksestä. Kuuden vuoden aikana kertynyt osaaminen ja kokemus on koottu yhteen. Jokainen verkkosivusto alkaa entistä paremmilla eväillä.

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ä. Pyrimme myös terveeseen minimalismiin: toteutus on vain sen verran monimutkainen kuin sen kannattaa olla.

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.

ADS:n tulevaisuus

ADS 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 ADS:sää koodina, design-pohjina ja dokumentaationa. Visionamme on, että joskus ADS sisältää kaikki Agendan 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.