Redesign Hardminu a zrychlení webu o 30 %

31 Říj

Pomalý web a složitá správa dokážou brzdit i dobře rozjetý byznys. U Hardminu byl problém dvojitý: stránky se načítaly pomalu a běžné úpravy byly tak nepraktické, že se bez vývojáře skoro nedalo pohnout.

V této případovce popisuji, jak jsme web předělali podle designu ve Figmě, doplnili e-shopovou část a postavili ho na WordPressu tak, aby byl rychlý a snadno spravovatelný.

Kontext projektu

Klient: hadmin.com
Impuls: poptávka přišla e-mailem, klient už viděl moje reference
Hlavní cíle:
- zrychlit web (výkon a uživatelský dojem)
- zlepšit a zjednodušit správu obsahu
- převést nový vizuál z Figmy do funkčního webu
Moje role: vývoj frontendu, WordPress implementace, e-shopová část (WooCommerce), testování, jednorázové zaškolení a spuštění na produkci.

Jak poptávka vznikla a co klienta trápilo

Ozval se mi pan Zdeněk Sobek. Hledal vývojáře, který vezme hotový webdesign a převede ho do rychlého, funkčního a udržitelného webu.

U původního webu zmiňoval hlavně:

pomalé načítání (uživatelsky nepříjemné, marketingově limitující),
těžkou správu (obsah se upravoval obtížně),
závislost na vývojáři i u drobností.

Proto jsme si domluvili osobní schůzku v Ostravě. Ta byla užitečná hlavně pro sladění očekávání: co je pro klienta „rychlý web“, co musí jít upravovat v administraci a kde je lepší držet pevnější strukturu.

Odcházel jsem s dobrým pocitem. Klient taky – a to je často ten nejlepší signál, že očekávání jsou nastavená realisticky.

Figma podklady a upřesnění rozsahu

Po schůzce mi klient poslal odkaz na Figma design. Design obsahoval zhruba 15 unikátních stránek (úvod, landing pages, blog, detail článku, kontakt…).

Během procházení Figmy jsem si ale všiml důležité věci: web měl prvky e-shopu, jenže nákupní proces nebyl v návrhu rozkreslený.

Nechtěl jsem, aby to klient zjistil až v půlce projektu. Proto jsem ho na chybějící části upozornil ještě před začátkem spolupráce – a rovnou jsme si vyjasnili, že:

checkout/košík/přihlášení/účet je samostatná část,
je potřeba ji domyslet a doplnit,
a rozsah projektu se tím může navýšit.

Na základě Figmy jsem připravil cenovou nabídku s poznámkami k rozsahu. Klient ji schválil, vyřešili jsme smlouvu a zálohu a šlo se do vývoje.

Figma design webu hardmin, bez nákupního procesu

Fáze 1 – kódování

Začínám tím, že z návrhu postavím základní „stavebnici“ – design systém:

typografie,
barvy,
rozestupy,
opakovatelné komponenty.

Díky tomu je web konzistentní, rychleji se skládají další stránky a později se lépe udržuje.

Frontend jsem kódoval tak, aby byl připravený pro plynulý převod do WordPressu. Technologicky jsem šel cestou, kterou používám nejčastěji:

TailwindCSS pro rychlou a konzistentní práci se styly,
čistý JavaScript pro interakce,
PHP šablony / komponenty pro znovupoužitelné části,
a build proces (u mě typicky přes Grunt) pro kompilaci a automatizaci.

Následně jsem nakódoval jednotlivé sekce a šablony tak, aby byly:

responzivní (mobil / tablet / desktop),
připravené na reálný obsah,
a technicky čisté pro další napojení na WordPress.

Po dokončení kódování jsem nahrál statickou verzi na testovací URL a poslal ji klientovi ke kontrole.

První zádrhel

Vznikl v momentě, kdy jsem klientovi poslal hotovou statickou verzi a požádal ho o vyjádření. Bez něj jsem nechtěl pokračovat do další fáze, protože by hrozilo zbytečné předělávání.

Klient se ale několik týdnů neozýval ani po opakované výzvě. Já jsem na jeho reakci čekal, a proto se projekt dočasně zastavil.

Když se později ozval (byl mimo, na cestách), vzniklo z toho nedorozumění. Situaci jsme si vyjasnili a pokračovali dál. Pro mě to byla připomínka toho, že úspěch webu není jen o kódu, ale i o procesu a spolupráci na obou stranách.

Fáze 2 – programování

Další krok byl převod hotového frontendu do WordPressu.

Web jsem stavěl jako custom theme s důrazem na:

jednoduchou správu bez zbytečných kliků,
dlouhou životnost řešení,
a využití Gutenberg editoru jako stavebnice.

Začal jsem nastavením theme.json (globální styly jako barvy, typografie, rozestupy). Následně jsem připravoval bloky a sekce tak, aby odpovídaly designu a šly skládat a upravovat v administraci.

Postupně jsem napojil:

hlavičku (logo, menu, odkazy),
patičku (kontakty, další menu, copyright),
a jednotlivé šablony podle Figmy.

Výsledkem je web, kde tým dokáže tvořit a upravovat stránky bez zásahu do kódu – a přitom se design nerozsype.

Doplnění nákupního procesu a WooCommerce

Během implementace klient doplnil návrhy pro košík a nákupní proces. Tuto část jsem následně nacenil a dopracoval.

Protože web pracuje s produkty, nasadil jsem WooCommerce a upravil:

produktové šablony,
košík a checkout,
registraci / přihlášení,
uživatelský účet po přihlášení.

Cíl byl jasný: funkční e-shopový základ, který sedí na design a je dlouhodobě udržitelný.

Testování, stabilita a výkon

Po dokončení vývoje přišlo ladění a testování:

různé prohlížeče a zařízení,
různé scénáře vyplnění obsahu,
kontrola, že se web nerozsype při dlouhých textech nebo neideálních datech.

Součástí bylo i technické doladění z pohledu SEO, přístupnosti a rychlosti.

Z pohledu výkonu jsem porovnával stav před a po v nástroji PageSpeed Insights. Původní web se pohyboval v oranžových hodnotách okolo 60, po úpravách se nový web dostal do zelených hodnot 90+. (Beru to jako praktický ukazatel „zdraví“ webu, ne jako jediné číslo na světě.)

Fáze 3 – předání, plnění obsahem a spuštění

Po dokončení jsem vytvořil nové demo URL, připravil přístupy a web předal k převzetí.

Následoval online meeting, kde jsem:

ukázal administraci,
vysvětlil, jak se skládají stránky a sekce,
a zaškolil tým, který bude web spravovat.

Klient si pak během následujících několika týdnů doplnil obsah a produkty a společně jsme vše zrevidovali. Teprve potom se nový web nasadil do produkce a starý web se zálohoval.

Co přinesla nová verze webu

Rychlejší načítání a lepší uživatelský dojem
Jednoduchá správa obsahu bez závislosti na vývojáři
E-shopová část postavená na WooCommerce
Vizuál a rozvržení podle navrženého webdesignu

Po spuštění následovalo pár týdnů drobných dotazů a úprav. Dnes klientův tým web spravuje samostatně – tvoří nové stránky, píše články a přidává produkty.

To je pro mě klíčové: spuštěním web nekončí. Dobře navržená správa a stabilní základ jsou to, co rozhoduje o tom, jestli web dlouhodobě funguje.