Vertailussa Webflow ja Wordpress – 7 tärkeintä eroa

Epäilyttääkö uusi ja ihmeellinen Webflow kotisivujesi työkaluna ja alustana? Tunnetumpi Wordpress on vielä selkeästi käytetympi ohjelma nettisivujen tekemiseen, mutta onko vielä pitkään? Haluan tässä kirjoituksessa avata näiden kahden työkalun eroja, risuja ja ruusuja.

Alkuun on todettava;  vaikka olen molempia alustoja käyttänyt, on Webflow näistä kahdesta minulle selkeästi tutumpi. Tein vaihdoksen Wordpress :istä Webflow :hun sivujeni alustana reilu 3 vuotta sitten, enkä ole tuota päätöstä päivääkään katunut. Vaihdokseen johti tässä tekstissä läpikäydyt asiat. En silti väitä, että Webflow on ainut oikea tapa tehdä loistavia nettisivuja, mutta vaaka on henkilökohtaisesti rajusti kallellaan Webflow :n puoleen.

Tärkein ero ohjelmien välillä on se, että Wordpress on avoimen lähdekoodin tietokantasysteemi, jonka avulla rakennat sivut. Tarvitset sivujen julkaisuun palvelimen, joka ostetaan kolmannelta osapuolelta. Webflow taas on ”SaaS” eli ”Software as a service” työkalu, joka sisältää kaiken mitä nettisivujen rakentamiseen ja julkaisuun tarvitaan.

Kahden välillä on kuitenkin liuta muita isoja eroavaisuuksia, ja haluan näistä tärkeimmät 6 osassa:

1. 1.  Visuaalinen suunnittelu
2. 2.  Kolmannen osapuolen lisäosat ja integraatiot
3. 3.  Dynaaminen sisältö
4. 4.  Sivujen palvelimet
5. 5.  Ylläpito ja sisällön päivitys
6. 6.  Hakukoneoptimointi
7. 7.  Hinnoittelu rakentajalle ja asiakkaalle

Ennen kuin pureudutaan työkalujen eroihin, haluan esitellä molemmat työkalut hieman tarkemmin.

Mikä on Wordpress?

Wordpress on avoimen lähdekoodin tietokantasysteemi, joka on tällä hetkellä ylivoimaisesti suosituin työkalu nettisivujen rakennukseen. 42% prosenttia kaikista netin sivuista on tehty Wordpressillä.

Wordpress tehtiin alun perin blogialustaksi, ja on sen jälkeen kehittynyt monipuoliseksi työkaluksi, jolla pystyy rakentamaan nettisivut joka tarpeeseen. Yrityksen nettisivut, portfoliot, blogit ja verkkokaupat onnistuvat Wordpressillä.

Kuten sanottu, Wordpress on alun perin rakennettu simppeliksi tietokannaksi. Tämän päälle on aikojen saatossa rakennettu tuhansia teemoja ja plugineita, jotka määrävät sivun visuaalisen asun ja suorittavat toiminnallisuudet ja optimoinnit. Nämä palikat ovat suurimmilta osin kolmannen osapuolen eli jonkun muun kuin Wordpressin rakentamia ja ylläpitämiä.

Käytännössä sivut rakennetaan Wordpressillä näin:

• Sivuille valitaan visuaalinen teema
• Sivuston sisältö muokataan tai rakennetaan tuohon teemaan sopivaksi
• Sivustolle asennetaan tarvittavat palikat toiminnallisuuksiin. Nämä palikat voivat esimerkiksi sisältää sosiaalisen median feedit, google maps kartan, henkilöstön esittely taulukon, ajanvarauskalenterin, yhteydenottokaavakkeen, verkkokaupan yms.
• Sivusto optimoidaan asentamalla lisää palikoita kuten SEO-työkaluja ja turvaohjelmia.
• Sivusto julkaistaan ja sitä pyöritetään kolmannen osapuolen webhotellin päällä.
• Sivuston jokainen palikka pidetään ajan tasalla ja vaihdetaan tarvittaessa, jos palikan ylläpitäjä päättää lopettaa ylläpitämisen.

Mikä on Webflow?

Webflow on amerikkalainen nettisivujen rakenennusohjelma, joka kattaa melkein kaiken sivuston rakentamiseen tarvittavat asiat. Webflow julkaistiin vuonna 2013, ja on tämän jälkeen varsinkin Yhdysvalloissa kasvanut vuosi vuodelta isommaksi kilpailijaksi Wordpressin rinnalle. Suomessa Webflow on vielä Wordpressiin verrattuna aika tuntematon ohjelma, mutta alati kasvava.

Webflowlla sivut ”koodataan visuaalisesti”, eli elementtejä tiputellaan sivukankaalle ja muokkaillaan niin, että muutokset näkyvät reaaliajassa sivukankaalla. Tekemäsi muutokset koodaavat taustalla pikselin tarkkuudella koodia, johon pääset tarvittaessa käsiksi. Mahdollisuudet työkalulla on lähes rajattomat, ja esimerkiksi sivujen visuaalisessa suunnittelussa vain mielikuvitus on rajana. Ei valmisteemoja jarruttelemassa.

Käytännössä Webflowlla sivut rakennetaan näin:

1. Sivustoa lähdetään rakentamaan alusta asti tyhjälle kankaalle, tai valitaan jokin sapluuna taustalle. Tätä sapluunaa voidaan muokata täysin rajattomasti.
2. Sivustolle kirjoitetaan ja koodataan visuaalisesti tarvittava staattinen sisältö
3. Sivustolle rakennetaan tarvittavat tietokannat ja muut dynaamisesti päivitettävät sisällöt Webflown omaan CMS-tietokantaan kuten blogi, henkilöstö, portfolio, galleria, ajankohtaisuutiset yms.
4. Sivustolle voidaan lisätä myös verkkokauppa Webflow e-commercen avulla.
5. Sivustolle tehdään hakukoneoptimointi Webflown omien hakukoneoptimointi työkalujen avulla.
6. Sivusto julkaistaan Webflow:n kautta hankitulle webhotellille. Sivuston ylläpito ei ole tarpeellinen, koska kolmansien osapuolien palikoita ei ole. Kaikki sivuston koodi on omissa käsissäsi.
   ‍

Lähdetään pureutumaan työkalujen eroihin yksityiskohtaisemmin.

1. Visuaalinen suunnittelu

Wordpressillä valitset visuaalisen tyylin valmiista teemoista. Näin ollen visuaalinen suunnittelu on nopeaa, mutta rajattua. Saat valittua sivuillesi interaktiivisia elementtejä kuten animaatioita valmiista kirjastosta. Wordpress sivujen lähdekoodi on avoin, joka tarkoittaa rakentajan pääsyä taustalla olevaan koodiin. Osaava tekijä pystyy siis muokkaamaan sivujen ulkoasua muokkaamalla koodia käsin. Tämä on hidasta, mutta avaa mahdollisuuksia.

Webflowlla voit ottaa pohjalle sapluunan, tai aloittaa tyhjältä pöydältä. Visuaalisesti vain mielikuvitus on rajana. Webflown interaktiot ovat staattisten elementtien tapaan täysin vapaasti muokattavissa millisekunnin ja pikselin tarkkuudella.

2. Kolmannen osapuolen lisäosat ja integraatiot

Oma sivun koodin ulkopuolelta tuodut palikat ovat aina riski ja rasite sivustolle. Joku kaunis päivä kolmannen osapuolen palikan ylläpitäjä saattaa kyllästyä, ja lopettaa ylläpidon. Jos sivustosi toiminta perustuu tuohon palikkaan, saattavat sivusi mennä rikki osittain tai kokonaan. Mitä vähemmän tuot ulkopuolisia lisäosia sivustollesi, sitä rauhallisemmin voit yösi nukkua tietäen sivustosi olevan pystyssä vielä aamulla.

Lähes jokainen Wordpressillä rakennettu sivu luottaa kolmannen osapuolen plugineihin tai teemoihin. Isoimmat tekijät ovat toki luotettavia päivitysten ja ylläpidon suhteen, mutta aina silloin tällöin joku palikka pitää päivittää tai vaihtaa kokonaan.

Webflow:n sivustot eivät yleensä tarvitse yhtään kolmannen osapuolen lisäosaa. Jos kuitenkin jokin ominaisuus onnistuu paremmin kolmannen osapuolen tekemällä palikalla, ovat nuo palikat Webflown puolesta verifioituja ja turvallisia palikoita. Webflow :n sivustoille pystyy integroimaan lähes kaikkia palikoita, mitä Wordpressissäkin käytetään. Tekniikka näiden lisäosien käyttöönottoon on vain erilainen. Wordpressillä asennat koko palikan sivuillesi, kun taas Webflowlla upotat vain tarvittavan koodinpätkän sivuillesi, ja tuo koodinpätkä hakee tarvitsemasi palikan sivuillesi kolmannen osapuolen sivuilta. Tämä Webflown tapa säästää sivuston muistia ja latausaikoja.

3. Dynaaminen sisältö

Jos sivuillasi on sellaista sisältöä, mitä tarvitsee lisätä tai päivittää usein, on järkevää rakentaa siitä sisällöstä dynaamista. Tarkoittaa sitä, että sisällölle rakennetaan tietokanta, ja sivusto hakee näytettävät tiedot tietokannasta. Tällaista sisältöä voi olla esimerkiksi blogikirjoitukset, ajankohtaiset uutiset tai kuvagalleria.

Wordpress luottaa tässäkin kuten kaikessa, lisäosiin. Voit ladata sivuillesi galleria -lisäosan, ja lataat kuvat ja kuvatekstit tuohon lisäosaan. Sivusto hakee tiedot lisäosasta, ja näyttää ne sivuillasi.

Webflow CMS on sovelluksen sisällä oleva tietokantatyökalu, jolla pystyt rakentamaan halutun laisen tietokannan. Tämä tietokanta rakentuu sivustosi koodiin, kuten kaikki muutkin sivustolla olevat elementit. Voit rakentaa useita tietokantoja, ja siirtää niiden välillä tietoa.

4. Sivujen palvelimet

Wordpress ei tarjoa sivustollesi webhotellia, vaan se täytyy hankkia muualta. Kun olet hankkinut webhotellin, täytyy sinun yhdistää sivustosi tuohon webhotelliin. Webhotelleja tarjoaa useat palveluntarjoajat ja vaihteleviin hintoihin. Palveluntarjoaja kannattaa valita tarkoin, sillä kuten puhelinliittymät, myös webhotellien palvelinten laatu vaihtelee. Jos palvelimen laatu on heikko, saattaa sivustosi latausajat kärsiä. Pahimmassa tapauksessa palvelimet kaatuilee, jonka seurauksena myös sivusi kaatuvat.

Webflow :n sivuja pyöritetään heidän omilla webhotelleillaan, joiden palvelimet ovat Amazonin servereillä. Palvelinten laatu on todella hyvä, mikä näkyy latausajoissa ja varmasti luotettavana webhotellina. Kolikon kääntöpuolella nämä webhotellit ovat yleensä hieman kalliimpia suomalaisiin palveluntarjoajiin verrattuna. Hinta kuitenkin korreloi laatuun. Nopea ja riskitön palvelin sivuillesi on kuitenkin toimivan sivuston perusta.

5. Ylläpito ja sisällön päivitys

Wordpressin sivustoja täytyy pitää jatkuvasti ajan tasalla, ettei lisäosat ja teemat mene rikki. Jos et osaa/pysty/halua päivittää näitä palikoita itse, tarkoittaa se sivujen rakentajan työtunteja ja laskuja pelkästä ylläpidosta. Webflow:n sivustot eivät ylläpitoa tarvitse.

Sisällön päivitys sivuston omistajan puolesta onnistuu molemmilla työkaluilla. Wordpressin käyttöliittymä on melko tekninen ja vaatii opettelua oikeiden asioiden löytymiseen. Käytät asiakkaana täysin samaa käyttöliittymää, kuin sivustojen rakentajat, joten osuessasi väärään nappulaan, saatat rikkoa sivustosi sisältöä.

Webflow on rakentanut erillisen työkalun sivuston sisällön päivittämiseen. Sivuston rakentaja pystyy lukitsemaan tiettyjä elementtejä sivuilla, ettei asiakas pysty vahingossakaan rikkomaan mitään. Asiakkaan käyttöliittymä ”Webflow Editor” on simppeli työkalu, ja näet päivitetyt asiat heti silmiesi edessä.

6. Hakukoneoptimointi

Nykyisin, kun sivuja on paljon ja kilpailua riittää, on hakukoneoptimointi eli SEO erittäin tärkeä kilpailuvaltti. Suurin osa hakukoneiden kosiskelusta ei ole niinkään työkalusta riippuvaisia, vaan sivustolle tehdystä sisällöstä. Työkaluilla on kuitenkin suuri rooli rakenteellisissa asioissa hakukonenäkyvyyden varmistamiseksi.

Wordpress luottaa tässäkin asiassa lisäosiin, jotka antavat käyttöösi tarvittavat työkalut sivujen optimointiin. Hakukoneet tykkäävät nopeista latausajoista, joten nämä lisäosat myös minimoivat koodia ja optimoivat latausaikoja. Toisaalta jokainen lisäosa tuo sivustolle lisää latausaikaa ja paisuttaa koodia.

Webflow pitää sisällään kattavat SEO-työkalut, joiden avulla sivustosta saa hakukoneystävällisen nopeasti ja latausaikoja uhraamatta. Koodi minimoidaan muutamalla napilla, ja elementteihin tehdään tarvittavat metatietolisäykset käsin. Jokaisen alasivun hakukonetiedot muokataan yksitellen vastaamaan sivun sisältöä ja toistamaan haluttuja avainsanoja. Hakukoneoptimointi on hyvin yksityiskohtaista ja huolellista hommaa, ja Webflown kautta tämä on tehty helpoksi ja ”idioottivarmaksi”.

7. Hinnoittelu rakentajalle ja asiakkaalle

Wordpress

Rakentajalle Wordpress on täysin ilmainen ja jokaisen käytettävissä oleva työkalu.

Sivuston päivittäminen on myös asiakkaan puolesta ilmainen.

Jokaisella sivustoilla käytettävät teemat ja lisäosat ovat osiltaan maksullisia. Toiset lisäosat ostetaan kerran, ja toiset maksavat x euroa vuodessa. Lisäosien kulut lankeavat yleensä asiakaan vastuulle.

Jos sivustoa ylläpitää sivuston rakentaja, laskuttaa hän todennäköisesti ylläpitokuluja sivuston päivityksistä.

Sivuille ostetaan webhotelli kolmannelta osapuolelta asiakkaan toimesta.

‍

Webflow

Rakentajalle Webflown kokeiluversio on ilmainen kahdelle projektille, mutta isommille tekijöille työkalu maksaa 192 dollaria vuodessa (10 projektia) tai 420 dollaria vuodessa (ei projektirajaa).

Sivuston päivittäminen ei maksa asiakkaalle mitään.

Asiakas maksaa yleensä webhotellin, joka otetaan webflown kautta. Nämä hotellit maksavat 144 dollaria vuodessa (staattinen sisältö) tai 192 dollaria vuodessa (dynaaminen sisältö) tai 348 dollaria vuodessa (verkkokauppa).

Sivuston ylläpito ei maksa asiakkaalle mitään.

Projekteihin saattaa kuulua kolmannen osapuolen maksullisia integraatioita.

Risut ja ruusut molemmista työkaluista

Ruusut

Wordpress

• Tunnettu työkalu – paljon rakentajia, webhotellien palveluntarjoajia sekä opiskelumateriaalia verkossa
• Avoin lähdekoodi – osaava tekijä pystyy muokkaamaan sivujen sisältöä
• Paljon erilaisia lisäosia ja teemoja, mistä valita – toiminnallisesti mahdollisuuksia on paljon
• Ylläpito halpaa, jos osaat itse päivittää lisäosia ja teemoja

‍

Webflow

• Visuaalisella suunnittelulla rajattomat mahdollisuudet – pikselin tarkkaa suunnittelua nopeasti.
• Nopeat ja riskittömät palvelimet
• Ei tarvita ylläpitoa – säästää aikaa, rahaa ja hermoja.
• Asiakkaan käyttöliittymä helppo ja turvallinen.
• Dynaaminen sisältö ohjelmoitavissa täysin tarpeiden mukaan.
• Hakukoneoptimointi tarkkaa ja yksityiskohtaista
• Asiakaspalvelu nopeaa ja asiallista
• Webflow University - laadukas tutoriaalipankki Webflown opiskeluun.

‍

Risut

Wordpress

• Luottaa kolmannen osapuolen lisäosiin ja teemoihin. Tämä lisää sivuston kokoa, latausaikoja, ylläpitoa ja riskejä sivuston kaatumiseen.
• Valmisteema tekee visuaalisesta suunnittelusta rajallista, jos ei osaa pureutua lähdekoodiin ja muokkaamaan sitä.
• Asiakaskäyttöliittymä sama kuin rakentajan – monimutkainen ja sekava, vaatii kattavan perehdytyksen ja tuen ylläpitoon.
• Valmisteemojen myöstä sivustoista tulee usein hyvin samanlaisia, eikä sivut erotu massasta.
  ‍

Webflow

• Vielä suhteellisen tuntematon alusta, joten tekijöitä on vähän.
• Vaatii osaavan tekijän, joka ymmärtää HTML, CSS ja Javascript koodia.
• Webhotellit hieman kalliimpia, kuin suomalaisilla palveluntarjoajilla. Webflow on myös amerikkalainen yhtiö, joten laskusta ei saa vähentää arvonlisäveroa.

‍

Lähteet: Webflow, Wordpress, W3techs