Tämä blogikirjoitussarja kertoo, miten WordPressin uusi Gutenberg-editori muuttaa sisällöntuotannon konseptisuunnittelusta kirjoittamiseen. Kolmas osa tuijottaa verkkosivun ulkoasua, sisältöä ja rakennetta.

Gutenberg-sivustoissa on sisällönhallintaan uusia työkaluja, joita vanhoista WordPress-sivustoista ei löydy. Lohkot tekevät mahdolliseksi uudenlaisen joustavuuden asettelussa, esitystavoissa ja visuaalisuudessa. Siksi uusissa sivustoissa voi nähdä uusia yhteneväisyyksiä.

Verkkosivujen trendit reagoivat yleensä nopeasti uusiin mahdollisuuksiin. Kun jonkin asian toteutus muuttuu helpommaksi, laskee sen työmäärä ja kustannukset, jolloin uudet tavat päätyvät laajasti käyttöön. Koska WordPress on maailman käytetyin julkaisujärjestelmä, tulee lohkojen mahdollisuudet ohjaamaan odotuksia siitä, miltä nykyaikainen sivusto näyttää.

Tässä muutamia näköpiirissä olevia muutoksia.

Ei kertakäyttöisiä sivupohjia

WordPress-sivustoissa on perinteisesti tarvittu muutamia erikoissivupohjia, joilla esimerkiksi etusivu, uutishuone ja yhteystiedot rakentuvat. Näiden toteutus on vaatinut paljon työtä, mutta esimerkiksi etusivulla olevaa tapahtumakalenteria ei pysty suoraan esittämään jollain toisella sivulla. Osa näkymistä ja toiminnoista jää näin kertakäyttöisiksi.

Kertakäyttökulttuuri saa riittää. Gutenbergin avulla vaikka etusivun sisältöosioita voi käyttää yhä uudestaan monessa paikassa.

Gutenbergin avulla etusivun kaipaamat erikoisosiot voidaan toteuttaa lohkotyypeiksi, jolloin samoja lohkoja voi käyttää muuallakin. Etusivu rakentuu siis lohkoista aivan kuten muutkin sivut. Etusivun sisältöä ei siis tarvitse lukita vaan osioita voi järjestellä, poistaa tai lisätä helposti myöhemmin.

Monikäyttöisyys ei tarkoita tylsää. Esimerkiksi Ainun etusivua voi järjestellä uudestaan tai samoja elementtejä käyttää vaikka laskeutumissivuilla.

Suunnittelu määrää ne rakennuspalikat, joista sisältö luodaan. Kun siis suunnitellaan esimerkiksi miltä etusivu näyttää, täytyy harkita myös missä muualla sinne tulevia osioita voisi käyttää. Suunnittelijan pitää siis pyrkiä asetteluissa, esitystavoissa ja rakenteessa monikäyttöisyyteen.

Tuntomerkki: Voit löytää etusivulla olevat artikkelinostot, someseinän tai tapahtumakalenterin myös muualta sivustolta. Sisältöosia ei ole lukittu vain etusivun käyttöön.

Sivupalkin kuolema

Laajoissa sivustoissa sivuhierarkia on usein sivupalkissa. Mallina Isännöintiliitto.

Perinteisesti blogin sivupalkissa on esitetty esimerkiksi avainsanapilvi, lista kategorioista ja linkit uusimpiin kirjoituksiin. Sisältösivuilla avataan usein hierarkian alasivut sisältöpalstan vieressä. Tälle sivupalkille ei tulevaisuudessa kuitenkaan ole usein enää sijaa.

Gutenbergin avulla voi tehdä leveämpää ja suurempaa sisältöä. Sisältö ei ole rajoittunut yhteen palstaleveyteen vaan sisällössä voi olla elementtejä ja osia, jotka ovat normaalia palstaa leveämpiä tai koko näytön levyisiä. Silloin sisällön reunaan ei jää vapaata tilaa sivupalkille, vaan pitää etsiä uusia tapoja esittää sivupalkissa ollut sisältö.

Tuntomerkki: Uusilla verkkosivuilla näkyy entistä vähemmän sivupalkkeja. Sivun tai artikkelin sisältö näkyy itsekseen ruudun keskellä.

Asetteluiden uusi normaali

Uusi editori tarjoaa suoraan muutamia uusia asetteluita, joiden käyttö on aikaisemmin ollut hankalaa. Esimerkiksi palstajako onnistuu nyt helposti Sarakkeet-lohkolla, jolla sisällön saa vaikka kahteen, kolmeen tai neljään palstaan. Palstoituksella voi esittää näppärästi esimerkiksi tuotteen ominaisuuksia tai yhteystietoja.

Tekstin ja kuvan vuorottelu rytmittää pienellä vaivalla sisältöä.

Sisältöteksti näkyy siis harvemmin yhtenä tasaisena pötkönä. Muutamia vuosia sitten monet verkkosivustot rakentuivat niin, että etusivulle tehtiin suurella työllä erikoissivupohja ja muut sivut olivat pelkkää tekstiä. Yhden palstan asettelu ei varmasti sinänsä katoa tulevaisuudessakaan mihinkään, mutta siitä tulee tylsempi. Vaativa kävijä haluaa vaihtelua myös muille sivuille ja tähän Gutenbergilla on työkalut.

Tuntomerkki: Uusilla verkkosivuilla näkee yhä useammin vaihtelevia asetteluja kuten palstoitettua tekstiä sekä kuvien ja tekstin vuorottelua.

Ylilyöntejä ja sillisalaattia

Ilman rajoituksia Gutenberg tarjoaa paljon mahdollisuuksia säätää värejä, fonttikokoja ja esitystyylejä. Lohkovalikoima on laaja ja lisäosilla on mahdollista saada satoja lisälohkoja. Ainekset villeihin väriyhdistelmiin ja lohkojen tilkkutäkkiin ovat läsnä.

Ilman rajoituksia oman luovuuden saa päästää valloilleen.

Laaja muokattavuus on Gutenberg-editorin ehdoton vahvuus. Tarpeettoman suuri määrä valintoja ja säätövipuja voivat kuitenkin tehdä hallinnasta monimutkaista ja toisaalta sivustolta voi kadota yhteinen linja ulkoasusta. Siksi jotkin rajoitukset ovat paikallaan.

Rajoitamme aina lohkovalikoimaa vain erikseen sallittuihin lohkoihin ja rajaamme tyylien säätömahdollisuuksia. Jos värejä voi valita, rajaamme ne brändiohjeen mukaisiksi. Tarkoitus ei ole poistaa Gutenbergin joustavuutta, vaan löytää tasapaino muokattavuuden, helppouden ja yhtenäisyyden välillä.

Tuntomerkki: Koska Gutenberg tarjoaa laajoja muokkausmahdollisuuksia, voi vastaan tulla ylilyöntejä. Näitä voidaan välttää suunnittelemalla ja toteuttamalla sivusto ammattilaisten kanssa.

Näyttävätkö kaikki sivustot pian samalta?

Gutenberg lisää niitä työkaluja, jotka tulevat jokaisen WordPress-sivuston mukana. Siksi tulevaisuudessa samankaltaisia asetteluja ja näkymiä tulee sitä mukaa myös monelle sivustolle. Joissain asioissa siis yhdennäköisyys kasvaa.

Lohkomaista rakennetta on kaivattu jo pitkään. Framerylle toteutimme lohkomaisen sisällön räätälöidyllä page builderilla 2018.

Lohkomaisuus on paljon Gutenbergia vanhempi trendi. Esimerkiksi Squarespace tarjosi jo vuosia sitten omanlaisen drag and drop -tyylisen sisältöeditorin. WordPressiinkin on viritetty vuosien saatossa monenlaisia page builder -ratkaisuja valmiiden lisäosien ja räätälöityjen ratkaisujen avulla.

Ylivoimaisen markkina-asemansa vuoksi WordPress ja sen uusi editori tulee muuttamaan lähivuosina mielikuvaamme siitä, miltä nykyaikainen verkkosivusto näyttää. Nämä verkkosivustot eivät tule olemaan samasta muotista, mutta niissä on samoja pohja-ajatuksia – joustavuus, monikäyttöisyys ja muokattavuus.

Viimeisessä osassa kerron muutamia käytännön vinkkejä ja niksejä Gutenbergin hyödyntämiseen. Tutustu sitä ennen myös muihin Gutenberg-kirjoituksiimme.