Jak vybrat builder pro web

Weby je samozřejmě možné dělat i na WordPressu bez builderů a podobných pomocníků (čistá šablona). Ale její tvorba a odladění často trvá dlouho… a proto přišly ke slovu buildery.

Co pro mně znamená builder

Následující řádky o tom, jak vybrat builder pro web, píšu z pohledu sebe jako webaře, který často potřebuje věci dělat podle sebe (přesně a precizně), psát vlastní kód a funkce na míru nebo přidávat speciální CSS. Často dělám weby podle grafického návrhu i bez něj a chci při tvoření volnost a ve výsledku i rychlý web. Nepoužívám šablony a dema a očekávám, že výsledek bude rychlý bez nutnosti všechno nacachovat.

Ideální builer vám umožní svobodně a bez omezení tvořit weby. Nemáte nástroj, který vám svými možnostmi “rozkáže”, jak web bude vypadat (protože jiné možnosti prostě nemá nebo za cenu dalších x pluginů), ale že máte design a ten do puntíku realizujete právě pomocí builderu.

Osobně používám buildery z několika důvodů:

• zjednodušují mi práci,
• nabízí build-in moduly, které pak nemusím kódovat sama,
• tyto moduly už mají dobré UX dané v sobě,
• výstup je kvalitní a rychlý (a rychle),
• mohu se soustředit na tvorbu a proces, nikoli detaily a tunu kódu.

Jsou lidé, kteří tvrdí, že vám stačí jakýkoli builder, pokud s ním umíte velmi dobře. Já tvrdím, že NE. Narazíte totiž na limity. Dříve, či později.

Jaké buildery jsou v nabídce

Chcete pomoci s výběrem builderu?

Jak vybrat builder pro web

Následující seznam požadavků vznikl částečně inspirací u jiných vývojářů (těm díky), ale hlavně z mých zkušeností práce s buildery, kterých jsem už vyzkoušela celkem dost. Tyto řádky by vám měly pomoci pří výběru builderu – zhodnoťte si, zda daný builder umí vše, co potřebujete a nebude vám házet klacky pod nohy. Ani v budoucnu.

Uživatelské prostředí

Udělám s ním VŠE, co potřebuji.

• Každý webař má svůj styl práce. A ty nejlepší buildery vám hlavně nenutí ten svůj. Uděláte v něm vše, co potřebujete udělat, bez omezení.
• Nemůže se stát, že nám builder vystaví stopku, protože “něco” neumí – musí nám pak umožnit ho to snadno a rychle naučit (např. práce s ACF, složitější CSS a pod).

UX builderu musí být přehledné a jasné, abyste tu našli všechno přímo a intuitivně.

Načítá se rychle. Pracuje svižně i pro velké stránky.

Wireframe/layer pohled (neutrální pohled na jednotlivé moduly) je skvělý pro hledání skrytých a překrytých modulů.

Klávesové zkratky. Samozřejmost? Bohužel ne všude.

Vlastnosti builderu

Globální nastavení – bez toho to nejde. (Ono to nějak “jde”, ale ztrácíte fůru času nastavováním všeho a nebo skončíte v CSS… a to už builder nepotřebujete vůbec.)

• Velká úspora je správné nastavení globálních barev – které musí být opravdu globální. To znamená, že pokud změním nějakou barvu v paletě, všude, kde byla použita, se změní. Stejně tak u fontů, které by se měly ideálně aplikovat i na vestavěné editory (Gutenberg a klasický editor).

<div> jako základní jednotka, a <section>jako speciální případ.

• Sekce je třeba jako speciální případ, který nám dělá šířku stránky. Tj. sama je na celou šířku (vždy, aby se jí dalo nastavit pozadí a další), a ještě má v sobě nějaký div, který přebírá (z globálního nastavení) šířku layoutu.
• Pomocí <div> elementů můžete tvořit layout jako takový, jak libo (samozřejmě za pomoci CSS flex nebo nebo grid).

Možnost nastavit si typ HTML elementu (např. footer, header, article, aside…).

Šablony pro všechno, co je třeba.

• Stránky a příspěvky (a další CPT), archivy, hlavička a patička (ideálně odděleně), 404, woocommerce stránky…

Práce s CSS

Class-first přístup – CSS třída (a ID samozřejmě také) se používají jako nosiči změn.

• Nemyslí se tím to, že je můžete třídu/id nastylovat někde vedle pomocí CSS (jako případ poslední nouze, když builder neumí to, co chcete), ale že se reálně stylují pomocí builderu a můžete je přepoužívat na formátování všech bloků.

Použití libovolných CSS jednotek a hodnot.

• Kdekoli můžete použít jakoukoli jednotku, včetně proměnných nebo !important.

Třída se aplikuje přímo na element.

• Toto očekávám i pro základní moduly, které by neměly být do ničeho zanořené (ani součástí nějakého wrapperu), jako jsou nadpisy, p, div…

Pseudotřídy (:hover, :before, :after a další…) je možné také stylovat.

Flex a grid jako nutnost.

• Stylování layoutu pomocí flex nebo grid považuji za základní vlastnost builderu.

Vlastní CSS pro celý web nebo pro konkrétní modul. CSS by mělo být nastavitelné globálně (např. šablona nebo nastavení builderu), i na jednotlivých modulech (šetří se tak čas a místo).

Vlastní vývoj a integrace

Podmínky pro zobrazení modulů.

• Předpokladem jsou základní podmínky, např. přihlášení uživatele, koupení produktu, hodnota v cookies a další).
• Pokud není podmínka splněna, modul vůbec není součástí zdrojového kódu.

Nativní spolupráce s CPT a ACF. Naprostá nutnost je možnost vypsat někam v cyklu vlastní CPT a jejich ACF, případně pro ně tvořit šablony, psát pro ně podmínky a další.

Dynamická data – umožňují zobrazit výsledek vlastní PHP funkce v obsahu modulu nebo s ním v modulu pracovat.

Vlastní HTML atributy – můžete přidat vlastní atributy do jednotlivých modulů, např. aria atributy a další ideálně i z ACF polí.

Stavební bloky

Repeater/loop – vypsat někam v cyklu příspěvky, taxonomie nebo vlastní CPT s libovolnou strukturou je naprostá nutnost.

Code block – modul, kam se dá dát JavaScript, ideálně i PHP kód.

Shortcodes – není třeba speciální modul, ale musí být možnost, jak je vložit.

Výstup

Výstup je rychlý a minimalistický (žádné tuny javascriptu a CSS).

Výstup je rychle – ukládání změn je rychlé a builder pracuje svižně.

DOM je minimální a čistý – není tam milion tříd, wrapperů a zanoření).

Minimálně 4 breakpointy (a jejich rychlé přepínání). Pokud jich umí více nebo jdou přidat, jen dobře.

Minimální počet nastavení základních vizuálních nastavení.

• Nechci ztrácet čas tím, že budu napravovat nějaké nastavení základních prvků, např. že fonty se obarví nějakou barvou, protože to tak builder má nastaveno. Všechny moduly by měly mít minimum nastavení a brát defaultní CSS vlastnosti.

srcset images – pro obrázky, aby bylo možné je zobrazovat responzivně.

Accessibility – správná struktura a aria atributy jsou naprostý základ přístupnosti.

“Nice to have”

Reusable componenty jsou skvělá pomoc, pokud máte nějaký prvek na více stránkách a chcete ho formátovat z jednoho místa.

Lokální fonty nejsou nutností, ale jsou vítané.

Máte pochybnosti nebo je toho hodně?

Cena

LTD (lifetime deal) je pro mě velké plus. A lifetime znamená, že k produktu i jeho novým verzím mám přístup, dokud na něm vývojáři pracují.

• Výhodou je zjevná – z pohledu mě i mých klientů je jednorázová platba skvělá, protože nikdo ročně nepřipomíná platbu za licenci.
• Nevýhoda je to z pohledu vývojářů – musí neustále shánět nové zákazníky, protože ty aktuální nemají za co znovu fakturovat. Leda za rozšíření. Není proto divu, že spousta firem od této praxe opouští a nastupují roční (nebo měsíční) platby.

Zdroje

• https://blog.hubspot.com/service/wordpress-page-builder
• Vlastní zkušenosti

Kurz zdarma: