Zarówno Webflow, jak i WordPress, są narzędziami no-code służącymi do tworzenia stron internetowych. 

Webflow jest narzędziem SaaS dostępnym on-line na stronie https://webflow.com. Wystarczy założyć konto, utworzyć pierwszy projekt i w dosłownie minutę możemy zacząć budować stronę internetową.

WordPress jest narzędziem open source dostępnym do pobrania na stronie https://wordpress.org/. Oprogramowanie musimy następnie samodzielnie zainstalować na serwerze. Możemy także skorzystać z autoinstalatora oferowanego przez większość firm hostingowych.

Pod względem rozpoczęcia pracy nad stroną, użytkownikowi nietechnicznemu łatwiej będzie założyć konto na Webflow niż samodzielnie zainstalować WordPressa. Jednak osobie, która nie zna nawet podstaw HTML i CSS będzie znacznie trudniej nauczyć się obsługi Webflow, gdyż jest to, moim zdaniem, narzędzie skierowane bardziej do frontend developerów niż użytkowników biznesowych.

Webflow vs. WordPress – które narzędzie dla kogo?

Webflow jest doskonałym przykładem narzędzia no-code skierowanego do profesjonalistów, nawet jeśli tym profesjonalistą jest junior frontend developer. Webflow jest czymś w rodzaju nakładki na HTML i CSS. Aby skutecznie posługiwać się tym narzędziem musimy znać zasady tworzenia stron za pomocą HTMLa oraz orientować się przynajmniej w niektórych koncepcjach CSS jak np. box model czy flexbox.

Flexbox w Webflow

WordPressa używa się nieco inaczej, jednak i tu podstawowa wiedza na temat HTMLa się przyda aby stworzyć stronę, która spełnia choćby minimalne standardy. Jednak odnoszę wrażenie, że WordPress skierowany jest do szerszej grupy użytkowników niż Webflow – od amatorów chcących założyć hobbystycznego bloga, poprzez przedsiębiorców potrzebujących strony firmowej, po programistów, którzy mają możliwość rozszerzania WordPressa o nowe funkcjonalności np. za pomocą wtyczek. 

Webflow natomiast na swojej stronie reklamuje się tak: “Optimized for marketing, backed by design”. Narzędzie wydaje się być stworzone do pracy w typowo agencyjny sposób – gdzie grafik/ UI designer tworzy layouty poszczególnych podstron w programie graficznym, a potem programista przekłada design na kod. Z tym, że Webflow eliminuje konieczność ręcznego pisania kodu. Kod strony po prostu wyklikuje się poprzez interfejs.

Webflow jest ekstremalnie intuicyjny w użyciu dla osób, które wcześniej kodowały strony od zera i dobrze znają HTML & CSS. Mimo rozbudowanego interfejsu i mnogości opcji zajęło mi może godzinę – dwie, aby poczuć się komfortowo i mieć wrażenie jakbym korzystała z tego narzędzia od dawna.

Jednak próg wejścia dla osoby, która nigdy nie pisała kodu, będzie znacznie wyższy w Webflow niż w WordPressie.

Dlatego, moim zdaniem, osobom nietechnicznym, które chciałyby stworzyć blog czy stronę firmową, ale nie chcą się zagłębiać w techniki tworzenia stron internetowych, łatwiej będzie się odnaleźć w WordPressie.

Natomiast Webflow jest świetnym narzędziem dla agencji, w których najpierw projektuje się design, a później jest on kodowany do strony internetowej w podejściu pixel-perfect. Szczególnie polecam sprawdzić to narzędzie wszystkim agencjom, które mają problem z pozyskaniem programisty do pracy. Wykorzystanie Webflow może przynieść dużą korzyść biznesową ponieważ znacząco przyspieszy pracę oraz umożliwi zatrudnienie osoby o nieco niższych kompetencjach np. juniora zamiast mida.

Webflow vs. WordPress – jakość wygenerowanego kodu

Wszelkie narzędzia służące do tworzenia stron internetowych ostatecznie zawsze wygenerują pewną strukturę HTML oraz kod CSS odpowiedzialny za styl. Po prostu każda strona internetowa jest serwowana w tych technologiach niezależnie od sposobu w jaki została stworzona – czy poprzez narzędzia no-code, czy poprzez frameworki programistyczne.

Jednak kod wygenerowany z różnych narzędzi może być różnej jakości. Pod tym względem narzędzia no-code nie są równorzędne. Jedne generują kod lepszej jakości, inne gorszej. Pisałam o tym też we wpisie porównującym Elementor z edytorem blokowym. Widać tam wyraźnie różnicę w jakości między tymi dwoma edytorami. A jak jest z Webflow?

Pod względem jakości wygenerowanego kodu HTML Webflow można porównać z edytorem blokowym w WordPressie. Zarówno w Webflow, jak i w edytorze WordPressa mamy bloki, które odpowiadają pewnym elementom treści np. nagłówkom, paragrafom, obrazkom itp. Dodanie takiego bloku na stronie spowoduje wygenerowanie odpowiadającego mu tagu HTML. W obu edytorach kod jest minimalistyczny i semantycznie poprawny. Wykwalifikowany frontend deleloper napisałby bardzo podobny kod.

Struktura bloków

W obu tych narzędziach można stworzyć dobrej jakości stronę, zakładając, że znamy choćby podstawy dobrych praktyk tworzenia dokumentów HTML. Jakość można też zepsuć, podobnie jak i może ją zepsuć słaby programista.

W Webflow, nawet bardziej niż w WordPressie, widzimy że poszczególne bloki przekładają się na odpowiadający im tag HTML. Mamy tu np. blok DIV, który w WordPressie nazywa się GRUPA. Oba te bloki w rzeczywistości wygenerują nam element <div>. Dlatego też osobom już zapoznanym z kodowaniem jest łatwiej wgryźć się w Webflow.

Bloki dostępne w Webflow

W obu narzędziach, dodając kolejne bloki na stronę tworzymy strukturę HTML strony. Pod tym względem te narzędzia działają bardzo podobnie. Różnica jest jednak w możliwości stylowania. 

WordPress domyślnie oferuje bardzo ograniczone możliwości edycji stylów. Webflow natomiast oferuje, zdaje się, pełną paletę właściwości CSS, które możemy przypisywać poszczególnym elementom. Dodatkowo robi to w bardzo fajny sposób. 

Stylowanie odbywa się bowiem po klasach (i tu znów przyda się wiedza o CSS). Nie stylujemy więc każdego elementu z osobna, ale nadajemy mu klasę do której przypisujemy style. A następnie możemy tę klasę przypisać do innych elementów strony. Pozwala to później na łatwą zmianę stylu we wszystkich elementach z daną klasą.

Przykład stylowania po klasach.

Na koniec Webflow wygeneruje statyczną stronę HTML oraz plik CSS z wszystkimi stylami. Wygląda to podobnie do tego jak byśmy samodzielnie napisali taką stronę. Taka strona wczytuje się bardzo szybko i osiąga bardzo dobre wyniki Page Speed.

Muszę przyznać, że jestem pod dużym wrażeniem jak dobrze to jest zrobione w Webflow. Słyszałam, że coraz więcej agencji przestawia się na to narzędzie, i wcale się im nie dziwię. W Webflow jesteśmy w stanie stworzyć stronę w podobny sposób jakbyśmy ją kodowali i bardzo podobnej jakości, tyle, że przynajmniej 3 razy szybciej.

Webflow vs. WordPress – możliwość rozszerzania

Do stworzenia prostej strony wizytówkowej, która ma na celu np. prezentację oferty firmy, oba narzędzia nadadzą się w podobnym stopniu. Sprawa się nieco bardziej komplikuje gdy potrzebujemy czegoś więcej niż zwykła wizytówka.

CMS

Powiedzmy, że potrzebujemy strony dla biura nieruchomości, gdzie będziemy dodawać dostępne nieruchomości. Chcemy także wyświetlać listę tych nieruchomości na stronie i dać użytkownikom możliwość ich filtrowania np. po cenie, liczbie pokoi itp.

W WordPressie taką funkcjonalność możemy zaimplementować stosunkowo łatwo. Czy to za pomocą własnoręcznie napisanego kodu, czy za pomocą jednej z dostępnych, często bezpłatnych, wtyczek (np. https://pl.wordpress.org/plugins/easy-property-listings/).

Webflow posiada wbudowany CMS, w którym możemy utworzyć nowy typ treści – w naszym przypadku “Nieruchomości”, a następnie możemy dodać do niego wymagane pola np. opis nieruchomości, cena, liczba pokoi itp.

Funkcjonalność CMS sprawia, że w Webflow w bardzo łatwy sposób możemy tworzyć kolejne typy treści, dodawać do nich pola (coś a’la wbudowany ACF), tworzyć relacje między nimi itp.  Jest to domyślna funkcjonalność Webflow, nie potrzeba do tego żadnych zewnętrznych dodatków.

Funkcjonalność CMS w Webflow

Jednak napotkamy też na pewne ograniczenia tam gdzie w WordPressie tych ograniczeń nie ma. 

Własny kod

Hostowanego przez siebie WordPressa możemy rozszerzać właściwie bez żadnych ograniczeń. Możemy dołączyć własny kod HTML, CSS, JavaScript oraz PHP i dzięki temu zbudować praktycznie dowolną funkcjonalność.

W Webflow nie ma możliwości rozbudowania backendu za pomocą własnego kodu. Narzędzie nie wspiera także żadnego języka typowo backendowego jak np. PHP. Ale też nie mamy możliwości rozbudowania backendu naszej strony za pomocą JavaScript. Przykładowo, w sytuacji gdy w CMSie nie znajdziemy odpowiedniego rodzaju pola, to nie mamy właściwie żadnej możliwości żeby go dodać. Możemy zgłosić takie zapotrzebowanie do supportu i liczyć, że może za kilka miesięcy zostanie ono zaimplementowane do Webflow.

Jesteśmy więc skazani tylko na te funkcjonalności, które w danej chwili oferuje nam Webflow. Jedyne co możemy zrobić to dołączyć własny kod JavaScript do frontendu strony.

Integracje/ Wtyczki

Jeśli więc potrzebujemy dodać takie filtrowanie na stronę to możemy kombinować z własnym kodem JavaScript lub sprawdzić czy istnieje odpowiednia integracja. Integracje w Webflow to powiedzmy taki odpowiednik wtyczek w WordPressie. Jednak przeważnie działają one nieco inaczej.

Integracje w Webflow.

Integracje polegają przeważnie na załączeniu hostowanego zewnętrznie skryptu JavaScript. Następnie poprzez dodanie kodu iframe lub odpowiednich atrybutów do poszczególnych elementów uzyskujemy pożądaną funkcjonalność np. załączenie na stronę kalendarza rezerwacji spotkań czy utworzenie filtrowania np. na stronie nieruchomości.

Jeśli chcesz zobaczyć jak w Webflow można dodać taką funkcjonalność filtrowania to zachęcam do obejrzenia tej prezentacji: Webflow filter tutorial.

Wiele z dostępnych integracji wymaga utworzenia konta w zewnętrznych usługach SaaS (np. Calendly, WuFoo Forms), a często także ich comiesięcznego opłacania.

Webflow vs. WordPress – jakie są koszty?

No właśnie, skoro pojawił się już temat kosztów to przyjrzyjmy się jeszcze temu ile kosztuje utrzymanie strony na WordPressie, a ile na Webflow.

WordPress sam w sobie jest narzędziem open source i można go bezpłatnie pobrać z oficjalnego repozytorium. Jeśli zdecydujemy się samodzielnie budować naszą stronę z wykorzystaniem wyłącznie bezpłatnych dodatków to za zbudowanie strony nie zapłacimy nic (poza własnym czasem). 

Jednak stronę musimy opublikować w internecie, potrzebujemy więc domeny i hostingu. Dla jednej małej strony wystarczy nam najmniejszy pakiet hostingowy, więc jeśli zdecydujemy się na hosting wp_IN w cyber_Folks za pierwszy rok w pakiecie z domeną zmieścimy się w kwocie 150 zł brutto. W kolejnych latach ta kwota wyniesie ok. 450 zł brutto za rok. 

A jak to wychodzi w Webflow?

W pierwszym momencie cennik Webflow może się wydać niejasny, gdyż zawiera 2 rodzaje planów: Site plan i Workspaces.

Site plan jest to po prostu plan hostingowy, potrzebujemy go aby opublikować stronę pod własną domeną. Najtańsza opcja kosztuje 18$/miesiąc lub 168$/ rok przy płatności z góry (ok. 80 zł za miesiąc lub 750 zł za rok). Jednak gdy wykorzystujemy funkcjonalność CMS (czyli np. nasze nieruchomości) to musimy się liczyć z koszem o min. 60% wyższym.

Cennik pakietów Webflow.

Do tego mogą nam dojść koszty wszelkich integracji np. gdy mamy kalendarz rezerwacji Calendly to będziemy musieli osobno wykupić subskrypcję tego narzędzia.

Całkowity koszt utrzymania strony może tu szybko dobić do 1500-2000 zł/ rok.

Natomiast plan Workspaces (od 20$/ miesiąc) przeznaczony jest dla agencji/freelancerów tworzących strony dla swoich klientów. Plan ten daje możliwość przepisywania kont na klientów oraz eksportowania kodu HTML, CSS i JS strony, który można później np. wdrożyć do innego CMSa lub po prostu umieścić jako statyczną stronę na hostingu niezwiązanym z Webflow (tracimy wtedy możliwość edycji strony za pomocą Webflow).

Webflow vs. WordPress – podsumowanie

Muszę przyznać, że Webflow bardzo pozytywnie mnie zaskoczył. Wdrożenie się w niego zajęło mi mało czasu, gdyż narzędzie ma bardzo dobrze zrobiony onboarding nowych użytkowników, a także bogatą bazę materiałów edukacyjnych. Tego od Webflow powinien się uczyć każdy właściciel SaaSa.

Moim zdaniem Webflow największą wartość biznesową może wnieść do agencji tworzących strony internetowe. Szczególnie tych, które muszą odrzucać projekty ze względu na braki w zespole programistów. W Webflow można wygenerować HTML i CSS, a nawet ciekawe efekty w JS, w czasie znacznie krótszym niż pisanie kodu od zera.

Ale czy Webflow stanowi zagrożenie dla dominacji WordPressa w świecie CMSów? Myślę, że nie będzie to takie proste. Wyższy próg wejścia w Webflow może skutecznie odstraszyć większą część nietechniczych użytkowników. W WordPressie mają możliwość łatwego zaimportowania gotowych stron, używania wzorców czyli takich gotowych sekcji, a także istnieje znacznie więcej tutoriali, porad, wpisów blogowych, filmów o WordPressie niż o Webflow. Co sprawia, że WordPressem jest się łatwiej posłużyć i łatwiej jest znaleźć rozwiązanie problemu.

Niemniej jednak Webflow na pewno wyprzedzi pozostałe narzędzia no-code do tworzenia stron typu WIX, Squarespace i z czasem jego pozycja na tym rynku z pewnością się umocni. Webflow jest po prostu świetnie zrobiony i oferuje wiele możliwości, wystarczy choćby rzucić okiem na wspomniane wyżej video prezentujące filtrowanie produktów.

A Wy testowaliście już Webflow? A może porzuciliście WordPressa na rzecz Webflow? Chętnie przeczytam w komentarzach o Waszych doświadczeniach.

>
Magdalena Paciorek
Ewangelistka WordPress, deweloperka, organizatorka naszych webinarów. Fanka Gutenberga.

3 odpowiedzi na "Webflow vs. WordPress – porównanie narzędzi do tworzenia stron internetowych"

  1. bibliotekarz pisze:

    dobry tekst (jak zawsze) zachęcił mnie do przetestowania „nowości” jednak (jak w trybie naczelnego malkontenta w kraju) porównanie z SaaS wordpress.com było by bardziej równorzędne, a wykazanie że samodzielna instancja wordpressa może wszystko i jest najbardziej elastyczna by zwieńczyła temat.

  2. abmstudio pisze:

    Podoba mi się termin „Klikacz”.

  3. Investnet pisze:

    Ciekawe porównanie. Zachęca do przetestowania Webflow, ale dużym minusem jest stała opłata. A przy obecnej dominacji WordPress’a klienci nawet nie bardzo chcą szukać innych rozwiązań.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Polecane dla Ciebie

Szukasz dalej?