Oman työurani alussa sivustojen suunnittelu tehtiin Photoshopilla, tai henkilökohtaisista mieltymyksistä riippuen esimerkiksi InDesign-nimisellä taitto-ohjelmalla. Kaikki oli tiukasti kontrollissa, ainoastaan kehittäjän (ja tietysti asiakkaan) kanssa keskusteltiin sivupohjista ja yksityiskohdista. Nykyisin laajasti käytetyllä Figma-sovelluksellakin on mahdollista ”viilata pikseliä”, mutta sen ominaisuudet tukevat paremmin lohko- ja varianttipohjaista suunnittelua.

Aiemmin suunnitteluvaiheessa muotoiltiin muutama toimiva sivupohja, ja niiden perusteella sivusto sitten koodattiin valmiiksi kokonaisuudeksi. Tällä tavalla lopputulos oli monesti hieno ja asiakas tyytyväinen, mutta joustavuus näissä ratkaisuissa oli ratakiskon luokkaa. Useimmissa tapauksissa sisällönhallinta oli kuitenkin dynaamista yksinkertaisella työkalulla.

Välimallin lohkot ACF:llä

Hallinnan tunne murenee. ACF (Advanced Custom Fields) -lohkoilla toteutetulla sivustolla loppuasiakas voi jo vaihtaa lohkojen järjestystä mieleisekseen, sekä tietysti laittaa halutessaan vaikkapa kuvakaruselleja kymmenen peräkkäin. Toisaalta valta yksittäisen lohkon suhteen on edelleen tiukasti suunnittelijalla. Lohkot ovat ulkoasultaan lukittuja, ja sisältökentät omilla paikoillaan.

Tässä vaiheessa on jo astunut kuvaan useita mietittäviä asioita. Mihin tarkoituksiin asiakas mahdollisesti käyttää lohkoa? Miten lohko nimettäisiin mahdollisimman yleispätevästi? Entä jos asiakas kirjoittaa otsikkoon 20 sanaa ja jättää leipätekstin täyttämättä? Moniulotteinen ajattelu, kokonaisuuden hahmottaminen ja asioiden ennakointi ovat ottaneet jo isoa roolia suunnittelussa.

Tyypillinen ACF-lohkon muokkausnäkymä. Sisältö taipuu, mutta muoto pysyy. WordPressin natiivilohkot tarjoavat rajoitettua valinnan vapautta

Jo ACF-lohkojen aikana asiakas pystyi usein päättämään tietyn lohkon väriteeman tai kuvan ja tekstin puolisuuden. Tämä orastava vapauden tunne saavutetaan natiivilohkoissa sisäänrakennetusti. WordPress ja Gutenberg sisältävät jo valmiiksi monenlaisia muokkausmahdollisuuksia lohkoihin eli blokkeihin. Esimerkiksi taustaväri ja padding (eli ”ilman” määrä lohkon ylä- ja alareunassa) ovat oletusarvoisesti vapaasti määritettävissä.

Suunnittelijan vastuulla on antaa asiakkaalle järkevä määrä vapauksia. Osa sisäänrakennetuista ominaisuuksista voidaan jättää pois näkyvistä, jolloin käyttäjä voi esimerkiksi valita taustavärin muutamasta brändiväristä tai niiden johdannaisista, ja valita montako tekstipalstaa näytetään vierekkäin. Palstojen määrälle voidaan asettaa minimi ja maksimi.

Natiivilohkojen edut pähkinänkuoressa

• Aito esikatselu: Näet heti miltä lopputulos näyttää. Muokkaat tekstejä ja kuvia suoraan sivunäkymässä ilman turhia välivaiheita tai sivupalkissa kikkailua.
• Yhtenäinen tuntuma: Kun opit käyttämään yhtä lohkoa, osaat käyttää niitä kaikkia. Työkalut ja valikot pysyvät aina samoilla paikoillaan.
• Huippunopeus: Sivusto latautuu nopeammin sekä sinulle että sivustolla kävijöille, koska WordPressin ei tarvitse lukea tietoja useista eri lähteistä.
• Varmuus ja kestävyys: Sivusto pysyy helpommin pystyssä päivitysten yhteydessä, ja sisältösi pysyy tallessa standardimuodossa vuosia eteenpäin.

Testaa natiivilohkoja täällä: https://wordpress.org/gutenberg.
Teknisempää asiaa lohkoista: Block Editor Handbook.

Duplot vs. Legot

WordPress-kehittäjien keskuudessa käytetään osuvaa vertausta rakennuspalikoista. ACF-lohkot ovat Duploja: isoja, valmiiksi muotoiltuja paloja, joiden yhdistäminen on helppoa ja lopputuloksesta tulee aina jotakuinkin sellainen kuin pitikin. Niistä on vaikea rakentaa ”väärin”, mutta yhtä lailla on vaikea rakentaa mitään yllättävää. Sininen Duplo on aina sininen Duplo.

Natiivilohkoja on verrattu Legoihin: ne ovat pienempiä, modulaarisempia ja yhdisteltävissä käytännössä loputtomasti. Samasta laatikosta voi syntyä käytännöllinen ja kaunis rakennelma tai vähemmän siro sekamelska, riippuen siitä, kuka rakentaa ja millä ohjeilla. Natiivilohkoista rakennetut lohkomallit, eli valmiiksi mietityt lohkoyhdistelmät helpottavat asiakkaan sisältötyötä.

Suunnittelijan tehtävä ei siis enää ole ainoastaan suunnitella asiakkaan kanssa toimivaa kokonaisuutta valmiiksi, vaan päättää, mitä paloja asiakkaan legolaatikkoon laitetaan.

Vasemmalla varmuus, oikealla mahdollisuudet Suunnittelijan uusi rooli

Tämä muutos tarkoittaa, että suunnittelijan työn painopiste on liikkunut. Aiemmin piirrettiin pelkästään sivupohjia, nyt määritellään myös sääntöjä. Sen sijaan, että suunnittelija miettisi miltä etusivun kolmas osio näyttää, hän miettii myös, millaisia värejä, fonttikokoja, väljyyksiä ja kuvasuhteita asiakas voi ylipäätään valita.

Valmiilla sivustolla säännöt määritellään theme.json -tiedostossa, johon kehittäjä poimii suunnittelijan Figmassa määrittelemät värit, fontit ja välistykset.

Hyvin tehty pohja näyttää asiakkaan päässä yksinkertaiselta, mutta sen takana on tiukasti rajattu suunnittelujärjestelmä.

Vapauden hinta, missä raja menee?

Vapaus on hyvä renki mutta huono isäntä. Jos asiakkaalle annetaan vapaasti käyttöön 14 fonttikokoa, kuusi sävyä jokaisesta brändiväristä ja täysin vapaa padding, brändi-identiteetti rapautuu muutamassa kuukaudessa. Sivusto alkaa muistuttaa kollaasia, jossa jokainen lohko on omanlaisensa.

Toinen ääripää on yhtä huono: jos kaikki on lukittu pilkulleen, asiakas turhautuu eikä pysty tekemään luovia ratkaisuja. Sivusto jämähtää, eikä elä mukana niin kuin pitäisi.

Hyvä natiivilohkokokonaisuus löytää keskitien. Asiakkaalla on aitoja valintoja, mutta valinnat ovat pääasiassa suunnittelijan hyväksymiä. Lopputulos näyttää brändin mukaiselta.

Vapautta brändin ehdoilla. Asiakas saa valita, mutta vain hyväksytyistä vaihtoehdoista. Kontrolloijasta mahdollistajaksi

WP-toimiston ja suunnittelijan rooli on muuttunut. Asiakkaalla on enemmän vapauksia, sivuston toteuttajan tehtävänä on määritellä hiekkalaatikon rajat ja lelut. Asiakas saa sivuston, joka elää, taipuu ja päivittyy heidän tarpeidensa mukana. Suunnittelija puolestaan saa työskennellä järjestelmätasolla. Työ sisältää vähemmän pikselikohtaista hinkkaamista, enemmän strategiaa ja kokonaisuuksia.

Lopputulos on parhaimmillaan sivusto, joka näyttää suunnitellulta vielä viiden vuoden ja sadan päivityksen jälkeen. Ja sehän on yhteinen tavoite niin asiakkaalla kuin suunnittelijallakin.

Haluatko natiivilohkoilla rakennetun WordPress-verkkosivuston? Ota meihin yhteyttä.