Nástroje

Webflow v kostce

Osnova

Webflow, nástroj na tvorbu webů, který by měl znát každý designer nebo freelancer. Za posledních pár let na něj přechází stále více firem a studií. Mezi velké firmy, které ho využívají patří např. Zendesk, Dell, Upwork a tisíce dalších. Dokonce jsem zaznamenal i agentury, které už tvoří weby přímo na Webflow. I vy momentálně čtete tento článek na mém webu, který je plně vytvořen na této No-Code platformě. Nepleťte si ale Webflow s nástroji jako je Wix nebo Squarespace, protože Webflow pohlíží na tuto svou “konkurenci” z pěkné výšky. Dneska se chci zaměřit právě na tento nástroj a ukázat vám, proč si myslím, že byste mu rozhodně měli věnovat pár hodin svého života. Mně pomohl získat nespočet nových klientů a můžu přes něj prodávat i své digitální produkty pro designery jako je UX Kit.

Webflow je ideální platformou pro freelancery nebo marketingové oddělení firem, které si mohou tvořit nové Landing Pages bez vývojářů. Potřebujete odprezentovat novou službu na webu? Proč čekat na externí agenturu nebo interní vývojový tým až vám s tím pomohou. Potřebujete změnit slovo v nadpisu, ale ticket na vývoj už tam leží týden? Pokud ano, je Webflow správné řešení pro vás a vaší firmu.

Webflow editor

Co je to tedy Webflow

Webflow je editor, ve kterém  tvoříte vizuálně celý kód stránky a její napojení na CMS. Jde tedy primárně o design a ne kódování. Všem nováčkům ve Webflow ale předem říkám, že musíte znát základy HTML a CSS, jinak nemá smysl ho používat a zvolte něco ve stylu Wix nebo Squarespace, kde stavíte bloky webu jako Lego.
Už tušíte, kde je tedy silná stránka Webflow. Jelikož je platforma složitější než zmíněné Drag-and-Drop nástroje, přináší tím mnohem více funkcí a možností. Ve výsledku jsou vaše možnosti neomezené, protože jeden z elementů je čistý kód, do kterého můžete vložit cokoliv.

Osobně  považuji Webflow za asistenta pro tvorbu webu. Uměl bych web připravit v HTML a CSS? Samozřejmě, ale proč bych s tím trávil tolik času, když nejsem vývojář. Webflow mi pomáhá spravovat můj web, tvořit nové stránky a publikovat články v řádech minut a ne hodin. Všechno běží na jejich CDN, takže se nemusím starat o rychlost nebo zabezpečení webu jako např. u Wordpressu.

Co se týče rychlosti načítání webu vše je dost optimalizované a vy se tak nemusíte o nic moc starat. Pokud nebudete nahrávat fotky, co mají 10MB bude to v pořádku. Pro ukázku – většina mého trafficu přichází z desktopu (pravděpodobně i vy čtete tento článek na počítaci v práci). Zde mám na PageSpeed Insights 83 bodů ze 100 na článku a neuvěřitelných 95 ze 100 na Homepage. S nulovou optimalizací na mé straně. Pokud se tomu budete trošku věnovat, věřím že dosáhnete lepšího score.

Rychlost načítání webu Šimon Jůn

Je Webflow něco jako Wix nebo Squarespace

Jak jsem nastínil v předchozím odstavci – je a není. Na první pohled se tak může zdát, ale pod pokličkou jsou tyto nástroje pro úplně odlišné skupiny lidí. Webflow je pro powerusery. Pro uživatele, pro které web tvoří hlavní zdroj komunikace a příjmů. Pokud máte malinkou kavárnu, určitě zvolte Wix nebo Squarespace, budete to pro vás jednodušší a vy se budete moci věnovat tomu, co vás baví.

Pokud však máte web primárně pro prezentaci služeb, vaší práce a obecně celé firmy, určitě dejte ruce od platforem typu Wix nebo Squarespace. Jsou hodně limitované a většina webů na nich vypadá strašně jak přes “kopírák”. Váš web je vaše výloha a Webflow je ten nejlepší interiérový designer pro váš business.

Dalším argumentem, proč zvolit Webflow, je jeho kompletní otevřenost, co se týče přístupu ke kódu a možného napojení na aplikace třetích stran. Ať už napřímo nebo přes službu jako Integromat nebo Zapier. Musím se přiznat, že nevím jak toto má zvládlé Wix nebo Squarespace, takže pokud je to pro vás důležité, určitě si to předem ověřte.

Webflow CMS

Kdy se vyplatí Webflow použít a kdy zas ne

Webflow má, jak už asi tušíte, plno výhod. Tady je pár scénářů s vysvětlením, proč zvolit právě Webflow. Samozřejmě přidávám i scénáře, kdy Webflow nevolit, protože žádný nástroj není bezchybný.

Webflow pro freelancery

Jste freelancer a potřebujete profesionálně prezentovat svou práci? Určitě zvolte Webflow. Jeho otevřenost vám pomůže web do budoucna vyvíjet tak, jak potřebujete bez zásahu vývojářů. Pokud web nechcete vyvíjet od začátku, tak má Webflow i plno šablon, které si můžete zakoupit a pak libovolně upravovat v editoru jako kdybyste celý web postavili vy. Krásné animace jsou pak jen třešnička na dortu celého nástroje. Animace vytvoříte za pár minut a Webflow má dokonce celý kurz zdarma.

Webflow pro firemní web / Start-Up

Vytvořit firemní web je pro většinu menších firem nebo start-upů velká zátěž. Chcete se věnovat klientům nebo svému produktu, ale musíte pálit čas tvorbou webu a správy hostingu. Toto všechno Webflow řeší za vás. Z mé zkušenosti jste tam schopni postavit špičkový web v rámci dní bez pomoci vývojářů. Nejlepší je, že jeho rozvoj do budoucna je jednoduchý a vy tak můžete celou tvorbu fázovat. Každý měsíc např. vytvořit jednu, dvě stránky a naplno se věnovat vašemu podnikání.

U pár klientů, které znám jim celý web přes Webflow spravuje marketingové oddělení a oni si nemusí držet vývoj. Dokonce znám i firmu, co je vývojové studio (dělá aplikace) a mají web na Webflow. Vývoj se zaměřuje jen na vylepšení aplikací a přidávání nových featurek. Marketing si řeší prezentaci na webu a vše s tím spojené. Pokud je momentální web na custom řešení nebo Wordpressu pro vás spíš přítěž než výhoda, určitě dejte Webflow šanci.

Webflow pro web pro klienta

Zvládnout navrhnout web a pak ho i sám vytvořit, může být splněný sen plno freelance designerů. I když já to tak nedělám, zaměřuji se pouze na Product a UX, ale vím o pár designerech, kteří přináší tento full service.
Ve Webflow postavíte web opravdu rychle a pokud se jedná o prezentační web, tak určitě budete mít celou zakázku hotovou dříve než vývojové studio, které by ho kódovalo od začátku. Zároveň je díky napojení na Webflow CMS velice jednoduché web spravovat a zvládne to i klient. Když mu ukážete, jak je to jednoduché spadne z něho takový ten stres, že měnit cokoliv na webu zabere týden a bude strašně drahé. Hezky to ukazuje Finsweet (Webflow agentura), která posílá instruktážní videa svým zákazníkům.

Webflow pro malé weby / marketingové Landing Page 

Děláte v marketingovém oddělení a potřebujete občas vypustit novou stránku nebo připravit LP na novou kampaň? Často nápady skončí u toho, že je nemá kdo exekuovat a vývoj nemá čas vytvářet nějakou landing page na test.
I s tímhle vám Webflow pomůže. Největší klienti, kteří používají Webflow, jako např. Dell, ho právě využívají pouze pro práci marketingového oddělení a rychlé vytváření LP na nové kampaně. Stačí vám jen designer a nemusíte zaměstnávat vývoj. Vše si uděláte sami v týmu za pár dní.

Webflow pro e-shop

Poslední možná situace, kdy využívat Webflow je pro e-shop. Webflow má celý e-commerce modul. Pokud uvažujete o tvorbě e-shop, pak Webflow  nedoporučuji využívat. Sáhněte raději po Shopify nebo českém Shoptetu. Já přes Webflow e-commerce prodávám své online produkty, ale to jen kvůli tomu, že je to okrajový zdroj příjmů a omezení, které má celý modul tedy přehlížím. Zároveň jsou to pouze digitální produkty, takže celá logistika se dělá přes e-mail a já nemusím mít nic propojené na skladové a expediční systémy.
Webflow E-commerce je opravdu dobré pouze, pokud máte web na Webflow a chcete bokem prodávat nějaké drobnosti, ideálně digitálně.

Webflow CMS

Content management system neboli CMS je prostředí pro rychlou a jednoduchou správu obsahu na webu. Od článků přes správu nabízených služeb až po členy týmu. Ve Webflow můžete jednoduše na CMS napojit jakoukoliv část webu. Novou kolekci vytvoříte a propojíte na web v rámci minut.

Jednoduché prostředí pochopí rychle i klient nebo asistentka a mohou tak obsah doplňovat do designu sami. Vy však máte jistotu, že to nerozhodí původní design, protože do něj nikdo nesahá. Na výběr máte z různých polí, do kterých se pak vyplňuje daný obsah. Všechny pole můžete omezit, takže např. když máte pole na vyplnění telefonního čísla na nového člena týmu, omezíte možnosti pouze na číslo. Tím máte jistotu, že do pole nikdo nevyplní e-mail a podobně.

Webflow CMS

Webflow vs. Wordpress

Asi nejznámějším CMS je Wordpress. Běží na něm velká část všech webů a jako řešení je zdarma. I můj web dříve běžel na Wordpressu. Nikdy jsem přechodu na Webflow ani na minutu nelitoval.
Wordpress je rozhodně robustnější systém, který je hodně založený na pluginech třetí strany. To je jeho největší výhodou a zároveň nevýhodou. I když má několik vizuálních editorů na styl Webflow, všechno to jsou pluginy třetí strany a nejsou zabudovány do samotného jádra aplikace. Nehledě na to, že musíte dávat pozor na to, aby pluginy mezi sebou dobře fungovaly a nějak si nelezly “do zelí”.
V neposlední řadě je tu hostování a zabezpečení. Většina menších Wordpress webů poběží na nějakém levném hostingu v Česku za pár korun měsíčně. Na vás je zabezpečení celého webu a optimalizace pro rychlost webu. Webflow toto řeší za vás. Všechny servery běží na Fastly nebo AWS, takže rychlost a zabezpečení je úplně jinde než nějaký hosting v horní dolní za 29 Kč měsíčně.
Hlavním důvodem, proč jsem z Wordpressu přešel jsou aktualizace. Skoro každý týden bylo nutné něco aktualizovat, testovat, jestli se něco na webu nerozbilo a případně to opravit. Toto na Webflow není. Ne, že by se Webflow neaktualizovalo, ale všechny aktualizace jsou dělány týmem Webflow a vám to nikdy nezasáhne do samotného webu. Toto je ten rozdíl pluginu třetí strany a samotného jádra aplikace.
Ale i Wordpress má výhody – množství pluginů je obrovské, a proto se dá systém ohýbat do všech různých směrů. Pokud máte nějaký specifický případ a vývojáře po ruce, zvolil bych Wordpress. Pokud vám ale jde o jednoduchý firemní web, krásné portfolio nebo tvorbu landing pages pro novou marketingovou kampaň, určitě zvolte Webflow, nebudete litovat. 

Webflow E-commerce modul

K E-commerce modulu se rozepíšu už jen krátce, protože jsem to popsal výše. E-commerce modul Webflow sice má, ale je hodně v plenkách. I oni sami ho zatím mají vedený jako Beta verzi. Pokud vám jde o spuštění e-shopu, nedělejte to na Webflow. Zvolte Shopify pokud to myslíte vážně, nebo Shoptet pokud začínáte. Webflow v tomto odvětví chybí neskutečně základních funkcí. Nemůžeme mu to mít za zlé, nikde netvrdí, že to je E-commerce systém a nikdy nebude.
Celý modul je vytvořen pro boční prodej. Příklad jsou třeba moje digitální produkty, které přes svůj web na Webflow prodávám. Není to žádný robustní e-shop a nikdy nebude. Každopádně pro napojení na platební bránu a zaslání odkazu na stažení balíčku po nákupu, je Webflow dostatečné řešení a všechno mám pod jednou střechou.
Webflow E-commerce tak mohu opravdu doporučit jen freelancerům nebo agenturám, kteří mají na Webflow web a chtějí si bokem prodávat školení, sadu ikonek, šablony webů atd.

Webflow cena a hosting

Pricing je důležitý faktor při rozhodování se, kde bude váš budoucí web hostován a jak bude vytvořen. Webflow má dva základní poplatky – za účet a za web.

Účet můžete mít buďto jako jednotlivec nebo člen týmu. Týmový tarif je v podstatě tarif PRO pro jednotlivce jen s tím, že celý tým je propojen a může pracovat na stejných projektech. Ideální pro větší firmu nebo agenturu co spravuje x projektů najednou.

Tarif za weby je už trošku složitější, protože záleží, jaké funkce od Webflow očekáváte. Základní rozdíl jemezi tím, jestli chcete E-commerce modul nebo ne. Pokud ne, jde jen o vaší měsíční návštěvnost a nutnost mít CMS. Rozhodně si zvolte variantu s CMS, bez něj je tvorba komplexnějšího webu skoro nemožná. Varianta Basic (bez CMS) je vhodná pro single page weby (ideálně pro marketingovou kampaň). Firemní web, bych na tom nestavil.

Webflow cena


Webflow má i Enterprise plán. Ten bohužel nemůžu moc popsat, protože neznám nikoho, kdo by ho používal. Pokud ho používáte nebo někoho znáte, určitě mi napište, abych to mohl do článku dopsat pro další čtenáře.
Kompletní pricing najdete na Webflow webu.

Budoucnost No-Code platforem a aplikací

Budoucnost No Code appek je asi každému jasná. Dokazuje to úspěch appek jako je Webflow, Zapier nebo český Integromat, který byl prodán za 2,3 miliardy korun. 

A vývojáři nebudou mít co žrát.

Vývojáři budou pořád potřeba. Věřím tomu, že naopak více než jindy. Začínající projekty a start-upy nebudou mít před sebou bariéru složitého vývoje. To zapříčiní růst více projektů, které v určité fázi svého růstu, budou nahrazovat tato No-Code řešení vlastními řešeními připravenými na míru.
Osobně strašně vítám celé No-Code hnutí, protože mi to dovoluje napojovat si a automatizovat plno věcí, které bych nikdy předtím nezvládl. I to, že můžu mít kompletní web na Webflow a změny dělat v rámci sekund bez nutnosti hrabat se v HTML, je neskutečná výhoda. Díky tomu se můžu zaměřit na práci s klienty, tvorbu nových produktů pro designery nebo online školení. Lépe strávený čas jak pro mě, tak pro mé okolí. No-Code nemá rozhodně nahradit vývoj, jen má pomoci s základními úkony bez nutnosti vývojáře a zdlouhavého procesu tvorby webu a napojování na externí služby. 

Největší online kurz na Figmu v Česku

MasterClass jsem postavil jako komplexní hub vědomostí. Najdete v něm vše o Figmě a práci v ní. Od jednoduchého nastavení po složitější prototypy a aplikace.

Kurz obsahuje 14+ hodin contentu. Konkrétně 127 videolekcích, díky kterým se rychle naučíte to, co zrovna potřebujete.

Zjistit vše o kurzu
Let’s talk now!