Przez wielu Webflow uważany jest za website builder, czyli narzędzie do składania stron. Porównuje się go do Wixa, Squarspace i stawia na przeciw Wordpressowi. Z jakiegoś powodu, Wordpress w Polsce cieszy się tak wielką popularnością, że uważany jest za TO narzędzie do budowania stron, a aplikacje takie jak Webflow stały się niszowe i są pomijane. Ale nie dla mnie.

Nigdy nie lubiłem używać Wordpressa i nie podoba mi się liczba ograniczeń na tej platformie. W swojej pracy, budując strony dla klientów, używam Webflow i dziś opowiem ci dlaczego.

apple podcast logogoogle podcast badgespotify podcast badge

Co w odcinku:

Z tego odcinka dowiesz się:

  • czym jest Webflow
  • dlaczego używam Webflow
  • jakie strony można zbudować używając Webflow, a jakich nie

Linki

Strony buduję w Webflow

Muzyka pochodzi z Artlist

Objective Finance - case study strony klienta zbudowanej w Webflow

Mój kanał na youtube

Powiązane odcinki podcastu i blogi

Posłuchaj innych podcastów i poczytaj inne artykuły, poruszające zbliżoną tematykę

Podcast - Proces rebrandingu i redesignu mojej strony oraz podcastu, czyli auto case study

Podcast - Po ci ci strona w 2021

Blog - Proces - Poznaj mój sposób pracy

Blog - Mój manifest użyteczności stron

Video - Jak zaprojektowałem swoją nową stronę używając Figma i Webflow, czyli auto case study

Transkrypcja odcinka

Czym w ogóle jest Webflow

Webflow narzędzie, to platforma, to aplikacja służąca do budowania stron internetowych. Sami o sobie mówią że są wizualnym builderem dla deweloperów.

Prawdę powiedziawszy tym różni się Webflow od Squarspace's czy Wixa, że to nie jest tzw. builder drag-and-drop. Praca w Webflow polega na tym, że należy znać HTML i CSS , żeby zbudować stronę. Ale budujemy tę stronę wizualnie. Więc to jest takie połączenie designu z developmentem.

Strony nadal trzeba zaprojektować. Niby możesz projektować stronę bezpośrednio w Webflow, ale nie tak designerzy pracują.

Designerzy najpierw projektują stronę, a dopiero później ją budują, a możliwości pozwalają na to, że strona wygląda dokładnie tak jak została zaprojektowana w Figmie (czego przykładem była między innymi moja strona, którą pokazałem wam w ostatnim odcinku).

Więc skoro już wiemy mniej więcej czym jest Webflow, to powiem wam teraz dlaczego używam Webflow do budowy stron internetowych dla siebie i dla swoich klientów.

Wolność twórcza

Przede wszystkim dlatego, że Webflow daje mi wolność twórczą. Ja jestem projektantem, a nie deweloperem. Nie znam się na pisaniu kodu. Nie jestem w stanie wklepać w klawiaturę kodu całej strony internetowej. Rozumiem HTML i CSS i potrafię czytać kod, ale nie jestem w stanie napisać strony internetowej bo moja praca na tym nie polega. Ja jestem designerem UX, projektuję doświadczenie.

Dlatego używam aplikacji typu Figma, Adobe XD czy Sketch do tego, żeby zaprojektować stronę, żeby zaprojektować doświadczenie. Projektuję UI, czyli interfejs i projektuję UX, czyli doświadczenie. Prototypuję tę stronę używając narzędzi dostępnych na rynku i prezentuje klientowi. W ten sposób wiem dokładnie co chce zbudować do czego dążymy, jak strona ma funkcjonować i wyglądać później kiedy ją złożę w Webflow.

Absolutna elastyczność Webflow pozwala mi, żeby dopasować komponenty wprowadzając odpowiednie style, formatują je, używając stylów CSS oraz elementów HTML buduję stronę wizualnie. Czyli zamiast pisać kod ręcznie, buduje ją wizualnie według mojego designu.

Benefit tego jest taki, że nie ogranicza mnie szablon. Nie muszę spędzać godzin szukając szablonu, który będzie odpowiadał mojej stronie czy stronie mojego klienta. Po prostu projektuję stronę taką jaką chcę. Czy taką jaką mam zaprojektować dla klienta po to, żeby zrealizować jego założenia i jego cele i jego gole. A następnie buduje tę stronę.

Jest to absolutna wolność twórcza.

CMS

Webflow ma fantastyczny CMS, czyli czyli bazę danych Content Management System, który pozwala na łączenie baz danych między sobą, na interakcje pomiędzy tymi bazami.

Jestem w stanie budując np. blog połączyć artykuł z innym artykułem, nawet nie tylko w kwestii lokowania pomiędzy poszczególnymi artykułami. Jestem w stanie zaimplementować jeden artykuł drugi. Jestem w stanie stworzyć bazę danych z elementami wykorzystywanych w innych bazach danych. To w dużym stopniu ułatwia i przyspiesza pracę, a później zarządzanie tą stroną. A znowu tylko i wyłącznie moja wyobraźnia ogranicza mnie przed wykorzystaniem możliwości tego narzędzia.

Wygoda

Drugim elementem dlaczego wybrałem Webflow jest wygoda.

Moja strona jest oparta o CMS. Wszystkie artykuły na blogu wszystkie, wpisy z tego podcastu, wszystkie projekty, które są wyświetlane na mojej stronie są trzymane w bazie danych i wyświetlane tam za pomocą CMS. To pozwala mi na bardzo wygodne zarządzanie.

Mało tego mogę dosłownie w każdym momencie zmienić każdy element bazy danych, dodać elementy połączyć między sobą.

Webflow oprócz tego, że jest narzędziem do budowy strony, zapewnia również hosting. Czyli odpada mi kompletnie problem z szukaniem zewnętrznego hostingu i zastanawiania się, który hosting jest najlepszy na taką czy taką stronę. Hosting Webflow jest nieograniczony i bardzo szybki oraz przystępny cenowo. Posiada kilka progów cenowych, czyli zależnie od tego czy np. chcesz mieć CMS czy nie, nie musisz za to zapłacić.

SEO

Dostarcza już wbudowane narzędzia do SEO. Cała strona jak i każda konkretna podstrona ma swoje własne elementy do wypełnienia, do wpisania opisu, tytułu strony. Te tytuły i opisy mogą być dynamiczne, jeżeli strony są dynamiczne. Czyli jeżeli jest to blog, to opisy będą dynamiczne.

Jestem w stanie przygotować do każdej jednej podstrony osobne grafiki typu OpenGraph, dzięki którym później strona wyświetla się w social mediach tak jak chcę.

E-commerce

Webflow oprócz tego, że oferuje strony i CMS, oferuje również e-commerce. I znów wszystko jest w jednym miejscu, z jednego panelu klienta, z jednego panelu administracyjnego jestem w stanie zarządzać zarządzać moją stroną, zarządzać sklepem.

Mogę zbudować sklep tak, jak chciałbym żeby on wyglądał i zarządzać tym sklepem. Nie muszę korzystać z zewnętrznych narzędzi, nie muszę nigdzie wychodzić, wszystko jest w jednym miejscu.

Rozwój

Oprócz tego pozwala na rozwój strony. Czyli możesz zacząć z niskiego pułapu np. zbudować prostą stronę marketingową dla swojego serwisu, czy dla swojej firmy. Następnie z czasem dodać dodać blog, podcast, a z czasem dodać e-commerce. Więc wszystko z jednego miejsca

Nie musi szukać osobnego hostingu. Nie musisz się zastanawiać jak to rozbudować czy pluginów. Po prostu dodajesz kolejne elementy z panelu klienta.

Efektywność pracy

Trzecim elementem dlaczego lubię Webflow jest efektywność: efektywność pracy i efektywność narzędzia.

Jest szybki i prosty w użyciu. Posiada mnóstwo funkcji, które przyspieszają i ułatwiają pracę jako projektanta czy jako deweloperowi. Jednym z takich elementów są symbole. Budując stronę kilka elementów wykorzystujemy na innych stronach. Symbolem może być wszystko - to może być przycisk, to może być footer, to może być każdy jeden element interfejsu, który stwierdzisz że chcesz użyć wielokrotnie.

Webflow jest bardzo efektywny dlatego, że ma wbudowany silnik do przekierowania 301. Przenosząc stronę z jednego hostingu na drugi, czy zmieniając organizację strony, należy wszytko przenieść na nowy adres używając przekierowania 301. W ten sposób użytkownicy mogą znaleźć nowe miejsce gdzie ta strona została przeniesiona, oraz dlatego żeby Google nie karał za błędy ponieważ strona nie pokazuje treści, które powinna.

Mało tego jeżeli z jakiegoś powodu, w jakiejkolwiek swojej stronie, w swoim panelu chcesz zmienić nazwę danej strony. Np. podstrona nazywała się nazywała się "o mnie", a teraz się będzie nazywała "o nas" i zmieniasz adres URL (czyli mojastrona.com/omnie teraz będzie /onas, Webflow od razu sam ci podpowiada zrób: przekierowanie 301 żeby ta strona się zgubiła.

Zewnętrzny kod

Oprócz tego pozwala na wykorzystanie zewnętrznego kodu. Czyli cokolwiek buduje wewnątrz Webflow, jestem w stanie dodać zewnętrzny kod i wprowadzić zmiany do strony. Np. na swojej stronie wykorzystałem zewnętrzny kod, żeby osiągnąć efekt zamrożonego szkła na pasku nawigacyjnym.

Zewnętrzne kod można wykorzystać do zainstalowania narzędzi trackingowych typu HotJar po to, żeby śledzić zachowanie użytkownika na własnej stronie, wyciągać z nich wnioski, analizować i poprawiać doświadczenie użytkowników UX.

Strona testowa

Ostatnim elementem efektywności jest to, że Webflow dostarcza tak zwaną stronę testową.

Czyli dodatkową stronę utrzymaną w domenie Webflow, która może być tak zwanym placem zabaw. Każdy nowy element, który zmieniam czy dodaję, najpierw mogę przetestować na domenie testowej, dzięki czemu wiem jak dany element się zachowuje, jak wygląda, czy animacja zachowuje się w taki sposób jak sobie zaplanowałem, zanim opublikuje ją na mojej domyślnie stronie.

Ostatnia rzecz tej kategorii efektywności to backupy. Webflow sam wykonuje backupy twojej strony internetowej więc zawsze masz pewność, że Twoja strona jest bezpieczna. Oczywiście masz też możliwość zrobienia backupu manualne, ale ale sam sam fakt, że narzędzie myśli i pamięta o tym, żeby zrobić kopię zapasową dla ciebie jest bardzo pomocne, efektywne i przyspiesza pracę.

User Experience

Kolejnym kolejnym elementem dlaczego lubię i dlaczego używam Webflow jest jego UX, czyli Experience, łatwość użycia.

Przede wszystkim Webflow jest bardzo łatwy do nauki. Jego interfejs jest intuicyjny, mnóstwo rzeczy jest wyjaśnione już w panelu aplikacji. Oprócz tego są linki do tzw samouczków i tutoriali. Wszystko jest dosyć jasno i szczegółowo wyjaśnione i bardzo szybko można załapać jak tego narzędzia się używa.

Webflow dostarcza tak zwany zewnętrzny edytor. Budując stronę, można stworzyć osobne konta dla edytora (zakładając, że masz np osobę dedykowaną do tworzenia kontentu na Twojej stronie do pisania postów na blogów.)

Wówczas, ta osoba nie musi mieć dostępu do kodu, do platformy Webflow, do Twojej strony. Ona ma dostęp do edytora zewnętrznego, gdzie loguje się swoim hasłem i wprowadza treść danego bloga. Blog został opublikowany na Twojej stronie. Bardzo efektywne i fajne narzędzie.

Support

W momencie kiedy jesteś użytkownikiem Webflow masz dostęp do forum dla użytkowników gdzie mnóstwo ludzi na całym świecie pomaga sobie nawzajem rozwiązywać różne problemy.

Oprócz tego Webflow oferuje również support. Czyli jeżeli jest jakiś problem, zawsze można porozmawiać akurat z kimś z Webflow w sprawie danego problemu na platformie. Coś, czego Wordpress nie oferuje.

Wygoda

Kiedy buduje się stronę na Wordpress do wszystkiego są pluginy. Jest plugin do SEO, pluign do obrazków, do wszystkiego. W Webflow wszystko jest już wbudowane, wszystko jest już na miejscu.

Również masz dostępne opcje do połączenia Twojej strony z Facebook pixsel, czy Google Analytics. To wszystko jest w jednym miejscu. Wystarczy wpisać kod trackingowy piksel i to działa.

No-code

Webflow jest platformą no-code. Automatycznie łączy się z innymi narzędziami no-code. Dzięki Zapier można go połączyć właściwie ze wszystkim.

Wykorzystałem połączenie do silników newsletterowych MailerLite, czy Mailchimp, wykorzystałem połączenie do mojej aplikacji, w której zarządzam swoimi projektami, czyli Bonsai. Połączyłem to z Calendly. Istnieje mnóstwo opcji żeby połączyć Webflow z innymi aplikacjami no-code. To znowu daje fantastyczną wygodę wygodę i łatwość użytkowania.

Optymalizacja

Strony Webflow lubią się z Google. Dlaczego dlatego że strony, które produkuje są lekkie, bo generuje czysty kod.

Kod Webflow jest bardzo semantyczny, czysty i efektywny. Dzięki temu strony są lekkie i łatwo skanowalne przez przez Google, a to jest wielkim plusem z punktu widzenia SEO.

I na zakończenie

Webflow oferuje zabezpieczone serwery SSL. Czyli od razu kupując hosting otrzymujesz HTTPS, czyli ten certyfikat zabezpieczenia strony. Nie trzeba tego specjalnie ustawiać, nie trzeba tego specjalnie niczego pobierać, nie trzeba płacić, po prostu to od razu tam jest. Co wpływa znowu na efektywność,  na szybkość pracy i na łatwość pracy.

Te wszystkie powody są zdefiniowały właśnie to, że pracuję w Webflow. Używam tego, a nie innego narzędzia do budowy stron internetowych. Natomiast, to jak pracuję  Webflow, jak buduję strony, możesz zobaczyć na moim kanale na YouTube. Ponieważ planuję tam publikację kilku wideo kilku tutoriali, prezentacje.

Kiedy zobaczysz Webflow w akcji będzie to łatwiejsze do zrozumienia. W końcu design to zajęcie wizualne, coś co trzeba zobaczyć. Dlatego zapraszam na kanał na YouTube, tam będą sukcesywnie pojawiały się nowe wideo.

Podsumowanie

Ja wybrałem Webflow jako platformę, której ja używam i uważam że ona jest świetna w wielu przypadkach, ale nie zawsze. Ja sobie zdaję sobie sprawę, że to nie jest idealne rozwiązanie na każdą sytuację. I są sytuacje, w których może sobie nie poradzić: np. tak zwane gated platforms, czyli gdzie jest hasło i login i żeby się zalogować musisz stworzyć jakieś konto. Tego Webflow jeszcze nie oferuje.

Natomiast do czego jest świetny Webflow, to na pewno strony marketingowe czy strony firmowe. Świetnie spisuje się przy stronach dla małych i średnich przedsiębiorstw, czy twojej pierwszej stronie. Webflow jest do tego idealny. Jest dużo prostszy niż Wordpress i na pewno dużo bardziej oryginalny.

Jest świetny do landing page. Jeżeli nie korzystasz z serwisów dedykowanych do budowania landing page to w Webflow możesz łatwo stworzyć landing page wewnątrz całego narzędzia i po prostu dokładać kolejne podstrony.

Jest świetny na blogi, ponieważ ma CMS wbudowany, więc możesz zbudować blog taki jak ty chcesz.

Jest świetny do e-commerce. Jest bardzo fajną alternatywą dla Shopify bo tworzysz absolutne doświadczenie oraz świetne do portfolio.

Na moim przykładzie, sam budowałem portfolio W Webflow. Wcześniej korzystałem z innych platform. Korzystałem między innymi z Adobe portfolio korzystałem z Adobe Muse, między innymi próbowałem korzystać z Wordpressa. Jednak żadna z tych platform nie dawała mi tej elastyczności i dowolności w kreacji, wolności twórczej w budowie stron.

Więcej o mojej stronie w poprzednim odcinku numer 13. Zapraszam do posłuchania.

Jeżeli masz jakieś pytania odnośnie czy to Webflow jako narzędzia, czy to mojego procesu czy w ogóle mojej pracy, napisz.