Kuudes pykälä verkkopalvelun ostajan oppaassa paneutuu työmäärällisesti hankkeiden selkeästi suurimpaan yksittäiseen osakokonaisuuteen: tekniseen toteutukseen eli koodaukseen. Viimeksi suunnittelijamme Ernesti Niemi kirjoitti käyttökokemuksen ja käyttöliittymän suunnittelusta, jonka tuloksena on syntynyt aineisto, jota ryhdytään ohjelmoimaan. Loput pykälät olemmekin koonneet jo valmiiksi Ostajan Oppaaseemme, josta löydät kaikki artikkelit sekä ladattavan PDF-tiedoston.
Minun nimeni on Antti Lassila, olen ohjelmoinut työkseni kymmenkunta vuotta. Vastaan Into-Digitalissa yrityksemme teknisistä käytänteistä tittelillä CTO (Chief Technology Officer) sen lisäksi, että pääosa ajastani kuluu koodatessa.
Tekniseen toteutukseen liittyy tietysti erinäköisitä termejä ja teknologioita, joita muiden kuin meidän koodareiden tai kehittäjien (käytetään tässä artikkelissa ’’meidän ammattikunnastamme’’ termiä koodari) ei tarvitsekaan ymmärtää mitään. Tämä artikkeli pohjautuu näkemykseemme siitä, mikä on nimenomaan asiakkaan – tulevan verkkopalvelun omistajan – kannalta tärkeää.
Helppo, selkeä ja joustava sisällönhallinta
Kovin monesti ja ymmärrettävästi yksi asiakkaidemme tärkeimmistä verkkosivu- tai verkkokauppauudistuksen reunaehdoista on se, että sisällönhallinta on helppoa, kattavaa ja joustavaa. Käytännössä tarkoittaa siis sitä, että asiakas voi tehdä verkkopalvelussaan asioita itse ilman, että lankojen tulee laulaa meidän tai kenenkään muunkaan verkkopalveluasiantuntijan suuntaan.
Tätä tarkoitusta varten verkkopalveluihin asetetaan taakse lähes poikkeuksetta sisällönhallintajärjestelmä, joka tarkoittaa nimensä mukaisesti järjestelmää, joilla sisältöjä hallitaan. Meidän ensisijainen ehdotuksemme sisällönhallintajärjestelmälle on lähes poikkeuksetta WordPress.
Hankkeissa on tarpeellista kuitenkin korostaa ja huomioida se, että mitä helppo, selkeä ja joustava sisällönhallinta tarkoittaa. Vaikka WordPress on WordPress, ei se suinkaan tarkoita sitä, että kaikki WordPressin päälle toteutetut verkkopalvelut olisivat sisällönhallinnallisesti monipuolisia. Tai helppokäyttöisiä. Sama pätee vaikkapa Drupaliin. Meidän WordPressin päälle toteuttamat verkkopalvelut kuitenkin ovat. Tästä esimerkkejä seuraavassa:
- Kaikki sisällöt (tekstit, kuvat, videot) ovat päivitettävissä. Myös sivuston runkoelementtien sisällöt, kuten esim. footerin osoitetiedot.
- Modulaarisuus. Suunnittelemme ja toteutamme verkkopalvelut modulaarisesti, jotta sisällönhallitsija voi tehdä itse esimerkiksi seuraavia päätöksiä ja muutoksia:
- Missä järjestyksessä etusivulla on lyhyt yritysesittely, artikkelinostot, uutiskirjeen tilaus ja somesyöte?
- Onko tämän artikkelin perässä kolme seuraavaa artikkelinostoa, vai ohjataanko käyttäjä tästä artikkelista mahdollisesti sisältönostomoduulilla tutustumaan palveluihimme?
- Muut ulkoasulliset muutokset – pitääkö esimerkiksi jonkun elementin taustaväriä kyetä hallitsemaan WordPressistä? Onnistuu! Esimerkiksi toteuttamamme www.viinilinna.fi on erinomainen esimerkki joustavasta ja monipuolisesta sisällönhallinnasta.
Tätä aihealuetta on siis syytä tarkastella verkkopalveluhankkeen kilpailutusvaiheessa hyvin kriittisesti: kuinka monipuolisen WordPressin (tai muun sisällönhallintajärjestelmän, kuten Drupalin) päälle toteutettavan verkkopalvelun toimittaja ihan oikeasti sitoutuu toteuttamaan? Kuten todettua – nämä kaikki eivät suinkaan ole WordPressin ’’vakio-ominaisuuksia’’. Tästä samasta syystä muun muassa WordPress on tietyiltä osin väärin ymmärretty sisällönhallintajärjestelmä. Todellisuudessa se mahdollistaa aivan äärettömän joustavien verkkopalveluiden toteuttamisen.
Ulkonäkö ja ’’hienous’’
Sillä, miltä verkkosivusto tai -kauppa lopulta näyttää ja tuntuu, on paljonkin tekemistä tekniikan kanssa. Me Into-Digitalilla toteutamme verkkopalvelut siten, että ne ihan oikeasti piirretään puhtaalle (digi)paperille tyhjästä. Tämä tarkoittaa sitä, että meidän tulee myös ohjelmoida palveluiden front end (eli siis se, mitä käyttäjä näkee käyttäessään sivustoa) tyhjästä.
Tämä ei suinkaan ole itsestäänselvyys tarjoajien joukossa, kun puhutaan verkkosivu-uudistuksista. Monesti saatetaan käyttää esimerkiksi valmiita teemoja, joko julkisia tai toimittajan omia, jotka aiheuttavat reunaehtoja verkkopalvelun ulkonäölle.
Ihan oikeasti teknisesti räätälöity verkkosivusto on tietysti työläämpi toteuttaa kuin räätälöimätön. Suosittelen paneutumaan tarkasti verkkopalvelua ostaessa siihen, miten toimittaja aikoo verkkopalvelun ulkoasun suunnitella ja toteuttaa eli koodata. Markalla saa markan ulkoasun.
Toimivuus ja tietoturva
Asiakkaat eivät halua verkkosivustoa, joka kaatuilee ja on (tieto)turvaton. Me huolehdimme toimivuudesta ja tietoturvasta monin keinoin, kuten valitsemalla turvallisen palvelimen ja noudattamalla hyviä ylläpito- sekä päivityskäytänteitä.
Palvelinkapasiteetti, palvelimen suorituskyky ja palvelimen soveltuvuus verkkopalvelulle ovat tietysti avainasemassa palvelimen valinnassa. Me emme tarjoa asiakkaillemme palvelimia lainkaan, vaan valitsemme tarpeeseen sopivimmat 3. osapuolen ratkaisut tapauskohtaisesti. Esimerkiksi WordPress-sivustojen osalta on tärkeää, että palvelin on WordPress-optimoitu muun muassa välimuistilaajennuksella. Sopiva palvelinvalinta siis mahdollistaa sivustolle omaa luokkaansa olevat latausnopeudet sen lisäksi, että sivusto kestää jättimäisetkin kävijäpiikit.
Tietoturva puolestaan on aihealue, johon liittyy niin palvelinratkaisu (ja sen tietoturvaominaisuudet) kuin myös toimittajan ylläpitokäytänteet. Eri julkaisujärjestelmien palveluissa käytetyt lisäosat muun muassa saattavat olla tietoturvariski, mikäli niitä ei valita ja ylläpidetä huolellisesti. Verkkosivuston tai -kaupan toimivuus ja tietoturva ovat siis tärkeitä, mutteivat kuitenkaan itsestään selviä aihealueita.
Verkkosivuston järkkymätön toimivuus ja tietoturvallisuus vaativat siis erityishuomiota ja työtä, eli ne maksavat. Suosittelen vakavasti tutustumaan siihen, kuinka verkkopalvelutoimittajat sitoutuvat huomioimaan aihealueen tarjouksessaan.
Verkkosivukoodauksen ’’hyvät käytänteet’’
Kun koodari kirjoittaa koodia, siihen liittyy paljon samankaltaisia hyviä käytäntöjä kuin kirjoittamiseen ylipäätään.
Tärkeimpänä pitäisin sitä, että koodari ensinnäkin itse ymmärtää, mitä on tekemässä ja mitä koodissa tapahtuu. Github, Stack Overflow ja netti ylipäätään on täynnä erilaisia valmiita templateja, lisäosia, lisäosien laajennuksia, tutoriaaleja sekä yksittäisiä koodiesimerkkejä. Taitava koodari osaa käyttää näitä lähteitä sopivassa määrin apunaan eikä turhaan keksi pyörää kerta toisensa jälkeen uudestaan. Toisaalta tarjonnan laajuus mahdollistaa kääntöpuolena sen, että jopa hyvin välttävällä koodaustaidolla varustetun sepän on mahdollista saada aikaiseksi pelkästään erilaisten pohjien, lisäosien ja koodiesimerkkien avulla näennäisesti toimivia purkkaviritelmiä.
Hyvä koodi ei ole kirjoitettu pelkästään ohjelman suoritettavaksi vaan myös luettavaksi. Koska koodia tullaan kuitenkin myöhemmin myös ylläpitämään ja jatkokehittämään, sitä pitää pystyä myös lukemaan. Hyvä jäsentely, sisentäminen ja sopivan mittaiset ”kappaleet” tekevät koodista helppolukuista, jolloin koodarin on silmäilemällä helppo ymmärtää, mitä koodissa missäkin kohdin tapahtuu. Kun myös muuttujien ja toimintojen nimeämiset on tehty harkiten ja toimintalogiikat kuvattu selkeillä kommenteilla, muutosten tekeminen on helpompaa ja riskittömämpää.
Kun verkkosivustoa koodataan jonkin alustan tai julkaisujärjestelmän päälle, kuten useimmiten tehdään, on tärkeää noudattaa alustan omia käytäntöjä ja malleja sekä myös hyödyntää alustan tarjoamia sisäänrakennettuja toimintoja ja muita mahdollisuuksia. Näin toimimalla muun muuassa pienennetään sitä riskiä, että jokin räätälöity osa koodia hajoaisi alustojen päivityksien yhteydessä.
Teknologiavalinnat
Nykypäivänä verkkopalveluita rakennetaan jos jonkinmoisilla teknologioilla. Teknologiat vaihtelevat niin taustajärjestelmien, rajapintojen kuin front end -tekniikoiden suhteen. Ei varmastikaan ole yhtä ainoaa ja oikeaa tapaa tehdä asioita, mutta perusteet valinnoille olisi hyvä löytyä kerta kerrasta.
Verkkosivutoimittajaa on hyvä haastaa perustelemaan, miksi he tarjoavat esimerkiksi modernia headless-ratkaisua asiakkaan verkkosivuston rakentamiseen. Ja nimenomaan asiakkaan näkökulmasta – älkää antako esimerkin sanan moderni hämätä. Mitä valinta tarkoittaa esimerkiksi hakukonelöydettävyyden näkökulmasta?
Miten meidän sivustomme löytyy Googlessa?
Hakukonelöydettävyys on tietysti yksi asia, joka on kovin tärkeää verkkopalveluhankkeissa. Siihen liittyy niin sisällöllinen kuin tekninenkin näkökulma. Jutellaan me tekniikasta.
On siis asioita, joita meidän koodareiden tulee tehdä, jotta sivusto on mahdollisimman hakukonelöydettävä. Tuleehan niiden potentiaalisten asiakkaiden ja palveluista kiinnostuneiden myös löytää verkkosivustollemme ja mielellään ennen kilpailijoiden verkkosivustoja!
Uudelleenohjaukset ovat asia, joka tulee ottaa huomioon joka ainoassa verkkosivu-uudistuksessa. Jos vanhalla sivustollasi on esimerkiksi palvelusivu (www.esimerkki.fi/palvelut/palvelu1), on se indeksoitunut Googleen jo valmiiksi ja löytyy lukuisten käyttäjien selainten välimuistista. Saatatte myös ohjata liikennettä vaikkapa digimainonnasta ko. osoitteeseen. Uudistuksen aikana sivuston sisältö (ja sitä myöten url-rakenne) saatetaan uudistaa täysin, jolloin tuon saman sisällön osoite onkin (www.esimerkki.fi/palvelu1). Meidän tulee silloin tehdä asioita, jotta sivulle /palvelut/palvelu1 kulkeva liikenne uudelleenohjataan sivulle /palvelu1.
Muita teknisiä hakukoneoptimointikäytänteitä ovat muun muassa cachen (välimuisti) määritykset, tietoturva, SEO-laajennukset, palvelinkutsujen gzip-pakkaus sekä luotettava ja toimiva palvelinvalinta. Sivuston tietorakenteen osalta otsikoinnit, metakuvaukset ja selkeä ja hyvin suunniteltu sisältörakenne myös edesauttavat hakukonelöydettävyyttä.
Yhteenvetoni
Kirjoituksessani on nyt käsitelty muutamia tunnistamiamme asioita, jotka ovat asiakkaidemme mielestä merkityksellisiä ja liittyy suorasti tai epäsuorasti verkkopalvelun tekniseen toteutukseen. Me rakennamme verkkopalvelut teknisesti parhaalla mahdollisella tavalla, jotta ne palvelevat niin asiakasta kuin vielä tärkeämpää kohdeyleisöä – asiakkaiden asiakkaita.
Terveisin
Antti
Antti Lassila
Antti Lassila on Into-Digitalin osakas, CTO ja intohimoinen golf-harrastaja, mistä kertoo kaksi peräkkäistä MTL-golfin mestaruuspokaalia vuosilta 2018 ja 2019. 2020 oli välivuosi menestyksessä. Kuten myös 2021.
antti.lassila@into-digital.fi