Agenda Design System: Miten kehitämme WordPress-verkkopalveluita

Agenda Helsinki on suunnitellut ja toteuttanut WordPress-verkkopalveluita jo yli kuusi vuotta. 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.

kuva12025

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

Käytämme itse kehittämäämme WordPress-pohjateemaa, joka sisältää olennaiset rakenteet ADS: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. Teema perustuu pohjateemaan underscore, joka huolehtii saman ulkoasun eri selaimille (ns. “normalisointi”). Tämän päälle rakennetaan tekninen toteutus, joka hyödyntää Twitterin kehittämää Bootstrappia.

ADS tekniset ratkaisut

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

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. Tietoturvaa huomioidaan markkinoiden parhaiden tietoturvalisäosilla ja useilla hyväksi todetuilla käytännöillä.

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

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

Esimerkkejä kolmannen osapuolen lisäosista joita suosimme:

  • Yoast – monitoroi jatkuvasti sisällön hakukoneoptimointia (SEO)
  • Sucuri Security – auttaa parantamaan tietoturvan tasoa

Agenda Design System sisältää myös joitakin itse toteuttamiamme lisäosia. Tärkeimpänä näistä on Agenda Gutenberg, 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. Lisäosa Agenda Gutenberg 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. Toinen itse kehitetty lisäosa Updates Report on jatkuvassa yhteydessä palvelimeen,l listaa käytössä olevat lisäosien versiot ja tarjolla olevat uudemman versiot, sekä tuottaa pdf-raportin päivitysmahdollisuuksista.

ADS Suunnittelupohjat ja dokumentaatio

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.

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

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