Blogi

Sisältöeditori on verkkosivuston sydän – kuinka valita oikea editori sivustollesi

Tänä vuonna WordPress-kehittäjien huomion keskipisteenä on WP:n historian kontroversiaalisin uudistus: Gutenberg-editor. Mitä on tänä vuonna odotettavissa ja miksi yksi sana herättää niin vahvoja tunteita WP-yhteisössä? Tutustu kuinka rakensimme mielestämme parhaan sisältöeditorin ja miksi editorivalinnan tulisi olla jokaisen sivustouudistuksen ytimessä.

Sisältöeditori on verkkosivuston sydän – kuinka valita oikea editori sivustollesi

Tiistaina 9.3.2021 julkaistu vuoden ensimmäinen suuri WP-päivitys näyttää listana varsin vaatimattomalta: Gutenberg-editorin päivitys, jQuery-päivityksen viimeinen osa ja kevyt hallintapaneelin värimaailman virkistäminen. Pinnan alla päivitys sisältää kuitenkin laadukkaiden perustuksien valamisen tämän vuoden kunnianhimoisille tavoitteelle: kaikkivoipaiselle Gutenberg-editorille.

Mitä on odotettavissa vuonna 2021?

WordPress-kehittäjien roadmap eli kehitystavoitteet ovat rakentuneet pitkälti The Gutenberg -projektin ympärille, joka pyrkii vaatimattomasti luomaan uudelleen sen miten hallitsemme sisältöjä verkossa. Joulukuussa 2018 julkaistu WP:n versio 5.0 toi yhden alustan historian kontroversiaalisimmista uudistuksista: Gutenberg-editorin. Editori oli massiivisen The Gutenberg -projektin ensimmäinen vaihe, ja nyt alkuvuonna 2021 olemme aivan projektin toisen vaiheen kynnyksellä.

Tähän asti Gutenberg-editorilla on pystynyt muokkaamaan ainoastaan sivujen ja artikkeleiden otsikkoa ja sisältöä. Tämä on jättänyt paljon sisältöalueita muokattavaksi muualta, pitkienkin pudotusvalikkojen takaa. Näitä alueita ovat sivustoilla mm. ylä-, sivu- ja alapalkit sekä valikot.

Toinen vaihe The Gutenberg -projektissa pyrkii laajentamaan editoria siten, että myös näitä muita sisältöalueita voisi jatkossa muokata samalla Gutenberg-editorilla. Tämä kaikkivoipainen Gutenberg-editorin on suunniteltu julkaistavaksi vuoden 2021 aikana, jolle on suunniteltu kaksi suurta päivitystä: heinäkuussa versio 5.8 ja joulukuussa versio 5.9. Ei ole vielä kehittäjienkään tiedossa kummassa versiossa tulee isoin uudistus, mutta jo vuosi 2021 on kunnianhimoinen tavoite.

Editoinnin monet kasvot

Ikonisin WP:n sisältöeditori on alkuperäinen, nykyään Classic-lisänimen saanut editori. Editori oli ominaisuuksiltaan hyvin yksinkertainen: se mahdollisti yleisimpien HTML-elementtien laittamisen allekkain Word-tyyliin. Se teki kuitenkin tämän työn poikkeuksellisen hyvin. Editori tunnisti automaattisesti jopa upotukset, kuten YouTube-videot, niiden url-osoitteesta ja muutti ne lennosta iframe-upotuksiksi. Dynaamisia toimintoja sisällön sekaan saattoi upottaa hakasuluista tunnistettavilla lyhytkoodeilla, yleimpinä käyttökohteina kenties lomakkeet. Osa lyhytkoodeista mahdollisti myös visuaalista tyylittelyä, kuten sisällön sijoittamista kahteen tai useampaan vierekkäiseen palstaan.

Episodi 4: Page buildereiden sota

Classic-editori oli kuitenkin toiminnoiltaan hyvin rajoittunut ja esimerkiksi lyhytkoodeja ei pystynyt esikatselemaan. Sen miltä sisältö näytti sivustolla näki vasta muutokset tallennettuaan. Tämän takia erilaiset visuaaliset Page builder -lisäosat, kuten Elementor ja Divi, nousivat nopeasti todella suosituiksi erityisesti mainostoimistokäytössä. Page buildereiden avulla oli helppo luoda visuaalisesti näyttäviä sisältöelementtejä, joita sisältöä käsittelevien asiakkaiden oli erittäin helppo muokata ja kopioida käytettäväksi uudelleen. Page buildereissa suurin etu oli niiden visuaalinen käyttökokemus, jossa näkee miltä sisältö näyttää suoraan editorissa.

Page buildereiden ongelmana oli kuitenkin lisäosan valtavasta koodimäärästä johtuva sivuston krooninen hitaus, joten rinnalle nousi nopeasti myös ammattitekijöiden toimesta natiivimpi WP:n metalisäkenttiin pohjautuva editointiratkaisu suurempia ja teknisesti korkeampia vaatimuksia omaavia sivustoja varten. Advanced Custom Fields -lisäosa mahdollistaa dynaamisten kenttäryhmien luomisen, joista voi muodostaa sisältöelementtejä omaan lisäkenttä-editoriin.

ACF-editorin etuja on nopeat sivustot, helppo kehitys ja se, että toimijat voivat luoda omia valmiita sisältöelementtikirjastojaan uudelleen käytettäväksi. Sisältöelementtejä on myös helppo jatkokehittää ja lisätä jälkikäteen. ACF-editori on myös erittäin turvallinen ja helppokäyttöinen asiakkaan näkökulmasta. ACF:n isoin heikkous on, että sisältöelementit näkee vasta kun sisällön julkaisee tai tallentaa. Luotua elementtiä ei näe editorissa eikä lisäkenttiä näe myöskään WP:n natiivilla esikatselu-toiminnolla. Samaan aikaan kilpailevat sisällönhallintajärjestelmät hyödynsivät React-pohjaisia visuaalisia editoreja, jotka olivat todella nopeita käyttää ja näyttivät kirjoittaessa samalta kuin julkaistunakin. Nämä sisällönhallintajärjestelmät, kuten Ghost, valtasivat alaa WordPressin dominoimalta kentältä erityisesti laadukasta kirjoituskokemusta arvostavilta sisällönsyöttäjiltä.

Episodi 5: WordPress-imperiumin vastaisku

Lopulta WordPressin kehittäjäyhteisö päätti uudistaa editointikokemuksen perusteellisesti. Syntyi The Gutenberg -projekti, joka julkaistiin todella nopeasti – ja todella keskeneräisenä. Editorin toimintaidea oli moderni ja hieno: sisältö jaoteltaisiin jatkossa erilaisiin lohkoihin, joka varmistaisi toisaalta yhteensopivuuden molempiin suuntiin ja toisaalta mahdollistaisi mainostoimistojen kehittää omia lohkokirjastoja asiakkailleen. Muokkaus tapahtuisi React-pohjaisella editorilla, jolloin jokaisen lohkon ulkoasu ja toiminnallisuus voitaisiin sitoa yhteen ja kehittäjät voisivat hyödyntää moderneja työkaluja lohkojen luomisessa. Valitettavasti toteutus jäi keskeneräiseksi ja kauas lähes utopistisesta editori-ideasta.

Gutenberg-editori oli aluksi todella buginen eikä toiminut yhdessä monen todella suositun lisäosan kanssa, mm. ACF:n, muiden metakenttiä hyödyntävien lisäosien kuten hakukoneoptimointiin käytetyn Yoastin ja yleisimpien Page buildereiden kanssa. Uusi editori rikkoi tullessaan valtavan määrän sivustoja ja toi mukanaan valtavasti ongelmia, vaikka WP:n taaksepäin yhteensopivuus oli aiemmin erittäin huolellisesti varmistettu jokaisen päivityksen yhteydessä. Jo tuolloin WP pyöritti kolmannesta maailman verkkosivustoista. Myös uuden ohelmointikielen Reactin sotkeminen mukaan herätti vastustusta perinteisesti PHP-kielellä toteutetussa WordPressissä.

Gutenberg-editori herätti saapuessaan ryminällä vahvan vastustuksen todella laajasti erilaisten käyttäjäryhmien joukossa. Se jätti pitkät jäljet WP-kehittäjien yhteisöön ja näkyy yhä lisäosan arvosteluissa. Lähes 73% arvosteluista on 1 tai 2 tähden arvosteluja.

Episodi 6: Gutenbergin paluu

Valitettavasti arvioinnit ovat nykyään virheellisen painottuneita kritiikkiin: aika on tehnyt tehtävänsä ja kaksi vuotta täyttäneen Gutenberg-editorin bugit on korjattu, lähes kaikki lisäosat toimivat hienosti yhteen ja editorin käyttökokemus on todella miellyttävä. Uudet kriittiset arvioinnit kumpuavat nykyäänkin pääasiassa rikkoutuneista sivustoista, joskin rikkoutumisen todellinen syy ei ole Gutenberg. Syinä yleensä on vanhentuneita sivustoja, lisäosia ja teemoja, tai arveluttavasti kokoon kyhättyjä sivustoviritelmiä mutta syntipukkia halutaan etsiä Gutenbergista. Lisäksi hyvistä kokemuksista kiitetään itsessään WordPressiä, mutta huonot kokemukset kirjoitetaan lisäosan arvosteluihin. Lisäosa onneksi kerää nykyään yhä enenevissä määrin hyviä arvosteluja ja kiitosta, vaikka lähtökohtaisesti positiivisista kokemuksista kirjoitetaan harvemmin arvostelu kuin negatiivisista kokemuksista.

Editori-sodan vaikutukset

Ensimmäiseksi on hyvä lyödä luvut pöytään. Kahden vuoden aikana WordPressin suosio sisällönhallintajärjestelmänä on kasvanut noin 10 prosenttiyksikköä. Maaliskuussa 2021 osuus on jo 40.6% kun tasan vuosi sitten se oli vasta 35.9%. Osuudet on valtavia kun maailmasta löytyy reilusti yli miljardi verkkosivustoa. En usko että WordPress olisi voinut kasvattaa markkinaosuuttaan näin valtavasti ilman The Gutenberg -projektia.

Toinen merkittävä fakta on Page builder -lisäosien suosion kasvun merkittävä hidastuminen. Kun aiemmin Page builder -lisäosia hyödyntävien sivustojen määrä kasvoi nopeasti, on kasvu hidastunut huomattavasti Gutenberg-editorin yleistyttyä. Markkinaosuudeltaan kasvavien kilpailevien sisällönhallintajärjestelmien suosiossa ei ole samanlaista tilastollista kasvun hidastumista havaittavissa.

Classic-editorin tarjoavan lisäosan suosio on räjähtänyt ja nykyisellään lisäosalla on yli 5 miljoonaa aktiivista asennusta ja se on noussut 3. suosituimmaksi lisäosaksi. Se on samassa suosioluokassa suosituimpien lisäosajättiläisten kuten WooCommercen, Yoastin ja Contact Form 7:n kanssa. Lisäosa on tuonut rauhan maahan vahvasti leiriytyneeseen ja polarisoituneeseen Gutenberg-kiistelyyn. Lisäosalla voidaan tarjoa taaksepäin yhteensopivuus sitä tarvitseville sivustoille ja tarjota rinnalle vaihtoehdoksi modernimpaa Gutenberg-editoria.

ACF-lisäosa on hyödyntänyt oletuseditorivaihdoksen täydellisesti ja tarjoaa nyt myös PHP-rajapintaa uusien lohkojen luomiseen kehittäjille tutuilla lisäkentillä ja niihin liityvillä funktioilla. ACF mahdollistaa sisältöelementtien luomisen lohkoina sekä omalla ACF-sisältöeditorilla, vaikka oma sisältöeditori ei ole ikinä ollut ACF:n päätarkoitus.

Gutenberg näyttää nousevan voittajana kisassa siitä, miten tulevaisuudessa verkon sisältöjä hallitaan. Erityisesti kun kaikkivoipaisuus saavutetaan ja Gutenberg-editorilla pystyy muokkaamaan koko sivustoa lohkoina. Nyt kun pahimmat yhteensopivuusongelmat on ratkottu eikä kilpailevien editoreiden tarvitse pelätä olemassaolonsa puolesta, on saavutettu rauhallisen yhteiselon aika. Editorit täydentävät toisiaan ja tarjoavat omat etunsa, joten jokainen sivusto voi valita itselleen parhaiten soveltuvan editorin tai editorit tarpeeseensa.

Kuinka hyödyntää editorien erot

Olemme toteuttaneet vuosien varrella sivustoja kaikilla editorityypeillä ja omaamme vahvan kokemuksen kunkin editorin vahvuuksista ja heikkouksista. Meillä sivusto rakennetaan aina editori mukaan lukien asiakkaan ja hänen tarpeidensa mukaan, ei sen mukaan mitä osaamme tai mistä satumme tykkäämään eniten.

Editori-valinnassa painavat sivuston nopeus, helppokäyttöisyys, muokkauskokemus, projektin budjetti ja aikataulu, sivustolta odotettava elinikä sekä tarvittavat erikoisominaisuudet, kuten rajapintaintegraatiot. Myös valintaperusteiden tärkeysjärjestys on hyvin olennaista.

Sivustoprojekteissa lähtökohtana pidämme mielestämme optimaalisinta ACF-pohjaista, mutta ominaisuuksiltaan turboahdettua omaa sisältöeditoriamme. Se on edullisin, suorituskyvyltään nopein, laadukkain, helpoin käyttää, nopein koodata ja käyttäjäystävällisin sisällön muokkaajalle. Se tarjoaa ACF-editorin uskomattoman nopeuden sivustolle ja sen luomiseen. Mutta olemme muokanneet ACF-editorista käyttäjäystävällisemmän version, jossa sisältöelementit voi valita visuaalisesti ja esikatsella jo editorissa.

ACF-editorimme lataa jokaisen sisältöelementin resurssit vain jos se on käytössä kullakin sivulla, pitäen selaimen lataaman koodin ja muiden resurssien määrän minimissään. Tuloksena on nopein mahdollinen sivusto, jossa ei ole ensimmäistäkääm turhaa bittiä käyttäjän ladattavaksi. Sisältöelementit on rakennettu asiakkaan brändiin sopiviksi ja helpoiksi muokata ja uudelleenkäyttää. Sisältöeditorimme mahdollistaa asiakkaan tarvitsemien lisäsisältötyyppien ja -taksonomioiden luomisen sekä käsintehtyjen ominaisuuksien hyödyntämisen.

Oma oletuseditorimme ei sulje myöskään pois muita editoreita. Esimerkiksi Gutenberg-editori on yksi sisältöelementti muiden joukossa, jolloin sen edut voi hyödyntää vapaasti. Samoin Classic-editori on käytössä monissa vapaan tekstin kentissä sisältöelementeissä. Editorin voi valita myös sisältötyyppikohtaisesti ja oletuksena oma editorimme onkin käytössä pelkästään staattisissa sisältötyypeissä kuten sivuilla ja palveluissa, kun taas artikkelit ja uutiset hyödyntävät Gutenberg-editoria. Yhteyshenkilöille, referenseille ja muille listattaville sisältötyypeille luodaan aina omat erikoiseditorit kiinteillä lisäkentillä.

Mutta jos asiakkaalla on tarve saada projekti mahdollisimman nopeasti ja edullisesti valmiiksi ilman koodaamista eikä sisältöä tarvitse muuttaa brändin näköiseksi, tai sivusto on todella yksinkertainen, voi Gutenberg-editori olla paras valinta. Se sisältää kaikki tärkeimmät sisältöelementit valmiina, ja sinne voi luoda nopeasti asiakkaan brändiin sopivia lisäelementtejä.

Jos taas sivuston nopeus ei ole olennaista vaan tarvitaan mahdollisimman nopeasti ilman koodaamista rakennettu, mutta vahvasti brändätty sivusto WP:n perusominaisuuksilla, voi paras vaihtoehto olla Page builder -lisäosan tarjoama editori. Page buildereilla on helppo luoda sivusto ilman omaa koodia, joka näyttää täysin uniikilta ja jota on helppo muokata.

Page buildereiden heikkous on suurten lisäosien aiheuttama sivuston hitaus ja monia erikoistoiminnallisuuksia ei niillä pysty toteuttamaan. Page builderit ovat hinnaltaan kalliimpia editoreita vuosittaisilla maksuillaan, mutta ne vaativat taas vuorostaan huomattavasti vähemmän työtunteja toteuttaa aluksi.

Sivuston erikoisvaatimukset (nopeus, saavutettavuus, integraatiot, jne), erikois-sisältötyypit tai pisin mahdollinen elinikä vaativat yleensä omien editoreiden rakentamista.

Valjasta osaamisemme ja kokemuksemme sivustosi oikean toteutustavan valinnassa tai tilaa koko projekti toteutusta myöten.

Lisää aiheesta

Ota yhteyttä