Pokud zvažujete, v čem udělat svůj nový web, jste tady správně, protože dneska ukážu další no-code nástroj pro tvorbu webových stránek - Framer. Nedávno jsem natočil sérii o Webflow, což je výborný nástroj pro tvorbu webů bez nutnosti psát kód – to je ten pojem no-code. I když dnes už bych ho nazval spíše low-code, protože tím, jak nabobtnal, můžete v něm zrealizovat téměř cokoliv, co běžně při tvorbě webů potřebujete, ale někdy nějaký ten kód napsat musíte, proto low-code.

‍

Framer jde ale trochu jinou cestou – a aktuálně bych Framer nazval tím čistokrevným no-code nástrojem. Dneska to nebude porovnání Webflow a Framer, spíše se pojďme podívat na jednotlivé jeho aspekty, pokud o něm uvažujete, že se s ním buď naučíte, nebo jste klient a zvažujete si nechat na něm postavit třeba firemní web.

‍

A pokud vás zaujme, jako Framer partner pro vás mám 3 měsíce zdarma, pokud zvolíte tarif Pro Site, stačí při objednávce zadat následující kód: partner25proyearly

‍

Designování

S Framerem je vytváření webových stránek velmi podobné pracovnímu postupu návrhu, na který můžete být zvyklí u grafických programů jako je Figma nebo Sketch. To znamená, že neřešíte prvky HTML/CSS jako je třeba div, ale zjednodušeně řečeno web kreslíte. A ta jejich "magie", jak tomu sami říkají, se odehrává na pozadí, kdy se z toho ten kód tvoří.

Samozřejmě to není tak jednoduché, jak to na první pohled vypadá – například aby web správně reagoval na desktopu i na telefonu, tedy přizpůsoboval se, je tam pár nastavení, která musíte udělat. A samozřejmě nejen ohledně responzivity. Ale pokud využíváte třeba plný potenciál zmíněné Figmy, pak to nebude nic moc nového. Tím pádem tohle je i jedna z největších předností Frameru, kdy lze opravdu rychle vytvořit profesionální responzivní web bez znalosti kódování.

‍

‍

Figma

A když už jsem zmínil Figmu – pokud se tvoří individuální webové stránky, právě v ní se většinou tvoří design webu a ten se pak převádí nebo kóduje, abychom z toho udělali opravdové funkční stránky. To znamená, ten design rozhýbali. Ale u Frameru nemusíte, pokud dodržujete správnou práci s Figmou, jako je třeba auto layout atp. Protože máte možnost na jeden klik převést projekt z Figmy do Frameru. A funguje to moc hezky.

‍

Šablony

No a pokud se nechystáte pro vlastní design, máte samozřejmě možnost jako u konkurenčních řešení web postavit i na hotové šabloně. I když jich není tolik jako třeba u Webflow, stále jich je značné množství. Případně můžete použít UI kit, což je databáze desítek až stovek komponent, ze kterých si web můžete poskládat.

‍

Animace

Stejně jako designování, tak i animace jdou ve Frameru s lehkostí. Máte možnost si vybrat z předpřipravených animací, třeba pro efekt po najetí na nějaký prvek, jeho uchopení, kliknutí, reakci na scrollování myši atd. A to všechno pak dává webu živost a atraktivitu. Dokonce existuje i knihovna animací, aby jste se s tím nemuseli skládat sami – dáte jen ctrl-c a ctrl-v do svého projektu.

‍

Rychlost a SEO

Nepochybně důležitou částí každého webu je rychlost načítání a SEO optimalizace. Už jsem o tom na tomto webu mluvil několikrát. Dobrá zpráva je, že Framer má všechny tyto aspekty vyřešené. Jeho technologie na pozadí se automaticky stará o optimalizaci jak kódu, tak i třeba obrázků, které tam nahrajete, pro co nejrychlejší načítání. Podobné je to se SEO optimalizací, kdy řadu věcí dělá Framer automaticky, máte ale možnost zasáhnout i do těch pokročilejších nastavení.

‍

Spolupráce v týmu

Pokud je vás víc, kdo na webu chcete pracovat, ani to není problém. Buď můžete být všichni jako designéři, kdy přímo na plátně webu uvidíte, co kdo dělá v živém přenosu. Nebo samozřejmě můžete i nastavit role – kdo bude designovat, kdo bude mít přístup jen k CMS kolekcím a kdo může web publikovat.

‍

‍

CMS kolekce

Jak už jsem zmínil, máte k dispozici i CMS kolekce, které se hodí pro opakující se obsah, jako jsou jakékoliv články, vyjádření klientů, referenční projekty, členové týmu a tak dál. Máte zkrátka jednotnou šablonu, do které jednoduše pouze přidáváte obsah.

‍

Pro co se hodí a nehodí

No a ta základní otázka – pro jaké projekty se hodí a kde je lepší se poohlédnout po jiném řešení? Z kontextu tedy vyplývá, že je skvělý pro produktové landing pages, na které směřují třeba PPC kampaně, pro kreativní weby typu portfolia, ale samozřejmě i pro firemní stránky. Je ale nutné na začátku více přemýšlet o tom, co od webu očekáváte nebo co můžete v dohledné době potřebovat. Framer totiž není úplně nejvhodnější na rozsáhlé weby nebo pokud tam jsou nějaké integrace, custom kód atd.

‍

Čili je potřeba si dávat pozor na jednotlivé funkce – například Framer nemá funkci pro tvorbu formulářů (UPDATE: od června 2024 už má). Další věcí je třeba multijazyčnost, kterou Framer sice podporuje a vypadá moc dobře, ale nechá si za to slušně zaplatit, podstatně více než konkurence.

‍

Cena Frameru

A to se dostáváme k ceně. Web můžete zdarma publikovat na doméně Frameru, tedy .framer.io nebo .framer.wiki. Takový web bude obsahovat i jejich reklamní banner, takže nic pro profi použití. Smysl dává placená verze, která je aktuálně za 110 Kč měsíčně při roční platbě, ale pokud vám bude stačit jen jedna stránka, hodí se pro jednostránkové weby. Pak je tu možnost za 233 Kč měsíčně, kdy už máte k dispozici až 150 stránek a jednu CMS kolekci třeba pro články. Je to zároveň hosting webu, který nemusíte řešit jinde, stačí jenom doména.