O projektu
Pro agenturu burda.design jsem zajišťoval kompletní technickou realizaci webu pro Truhlářství Kamil Vedral.
Cílem bylo převést dodaný návrh z Figmy do téměř pixel-perfect podoby v WordPressu, s důrazem na čistý kód, rychlost a jednoduchou správu obsahu. Výsledkem je přehledný a spolehlivý web, který odpovídá kvalitě samotného řemesla.
Zadání
S agenturou burda.design spolupracuji dlouhodobě jako externí vývojář. U tohoto projektu šlo o to převést pečlivě navržený design do téměř pixel-perfect podoby v WordPressu, bez použití builderů nebo zbytečných pluginů. Cílem bylo vytvořit web, který bude technicky čistý, rychlý a snadno se bude spravovat – tak, aby mohl klient v budoucnu měnit obsah bez zásahu vývojáře. Důraz byl kladen na kvalitu kódu, výkon a přesnost zpracování.
Moje řešení
Web jsem postavil na WordPressu s vlastní šablonou, která využívá Timber a Twig pro přehlednou šablonovací logiku a čistý kód. Díky tomu je struktura webu modulární a snadno rozšiřitelná.
Pro správu obsahu jsem nasadil Advanced Custom Fields, aby mohla agentura i klient jednoduše upravovat texty, obrázky i celé sekce bez potřeby vývojáře.
Frontend jsem zpracoval pomocí Bootstrapu 5, který jsem upravil přes Sass tak, aby využíval jen to, co je skutečně potřeba. O kompilaci, minifikaci a správu statických souborů se stará Webpack, který celý build automatizuje a hlídá konzistenci mezi prostředími. Pomocí PurgeCSS se při každé kompilaci automaticky odstraní nepoužívané CSS třídy, tudíž je výsledný kód plně optimalizovaný pro rychlé načítání.
Celé řešení jsem optimalizoval pro výkon, bezpečnost a dlouhodobou stabilitu. Web běží bez přebytečných pluginů, načítá se rychle a snadno se spravuje.
Výzvy a jak jsem je řešil
Největší výzvou bylo zachovat přesnost návrhu z Figmy a přitom udržet kód čistý, efektivní a udržitelný. Každou část webu jsem postavil jako samostatný blok, který se dá snadno znovu použít nebo rozšířit. Optimalizoval jsem načítání stylů, skriptů i obrázků tak, aby se web choval rychle i na pomalejším připojení.
Výsledek
Vznikl moderní, rychlý a spolehlivý web, který věrně odpovídá dodanému návrhu a zároveň stojí na pevném technickém základě. Administrace je jednoduchá a přehledná, web se načítá rychle a funguje stabilně.
Celé řešení je postavené tak, aby bylo dlouhodobě udržitelné a připravené na další rozvoj.
Technologie a detaily řešení
Osvědčený a flexibilní systém, na kterém stojí celý web. Použitý jako základ pro vlastní šablonu bez builderů.
Knihovna Timber odděluje logiku od šablon a dává WordPressu jasnou architekturu. V kombinaci s jazykem Twig umožňuje psát přehledný, udržitelný a bezpečný kód s čistým HTML, podobně jako v moderních frameworcích.
Rozšiřuje WordPress o možnost vytvářet vlastní pole a bloky obsahu. Díky tomu může klient jednoduše upravovat texty, obrázky i sekce webu, aniž by se musel dotýkat kódu.
Frontend framework, který zajišťuje responzivní zobrazení napříč zařízeními a jednotný vizuální styl webu. V projektu je použitý ve vlastní úpravě přes Sass, přizpůsobený konkrétním potřebám šablony.