Postavit značku agentuře, která značky staví.

Fáze 01Vizuální jazyk

Prémiovost není lesk. Je to sebejistota nechat na stránce prázdno.

Sekce pod herem vznikaly každá zvlášť a bylo to na nich poznat: tři různé černé, dvě jména pro tutéž mátovou a písma stahovaná ze tří odkazů na Google Fonts. Každá sekce sama o sobě vypadala v pořádku. Vedle sebe působily jako čtyři weby.

Sjednotili jsme to na jeden materiál: Archivo Black na nadpisy, Archivo na text, jediný podklad a mátová jako jediný akcent. Písmo leží na vlastní doméně, žádný požadavek na Google.

Případové studie mají vlastní podsystém: jiné písmo, ještě tmavší podklad a zlatou jen tam, kde patří k identitě klienta. Není to nálada. Je to systém, kterým jde obhájit každá barva na stránce.

Fáze 02Hero

Zadání znělo: nechte to vypadat stejně.

NETMA si hero chtěla nechat. Líbilo se jí a lidé si ho se značkou spojovali. Úkolem nebylo vymyslet nové, ale to stávající doladit, přepsat z pluginu do vlastního kódu a hlavně zrychlit. Že nová verze vypadá skoro stejně jako stará, není nouze. Je to splněné zadání.

Kouř poháněl doplněk Slider Revolution pro dynamiku tekutin a WebGL vrstva, kterou potřeboval, dohromady 214 kB cizího kódu. Napsali jsme vlastní Navier–Stokesův solver na WebGL2 o 20 kB, po kompresi 5,5 kB. Parametry jsme nevymýšleli, opsali jsme je z panelu pluginu: vír 15, rozptyl hustoty 0,69, tlak 0,75. Není to nápodoba. Je to přenos.

Proto tu nefunguje obvyklá dvojice před a po: viděli byste dva skoro stejné obrázky. Rozdíl je jinde: staré hero se sekalo a načítalo 2,6 s, nové jede plynule.

Kouř zůstal. Plugin ne.

Fáze 03Pohyb jako materiál

Animace, která běží pořád, není efekt. Je to hluk.

V heru jede místo kurzoru mátová koule s režimem prolnutí difference: text se pod ní invertuje, takže nadpis čte i pod ní. Jakmile ukazatel opustí hero, koule se prolne do jednoduchého kurzoru. Rozhoduje o tom jediný skript; původně na stránce běžely tři nezávislé kurzorové systémy, každý z jiného fragmentu.

Karty se naklánějí podle ukazatele. Na dotyku až po prodlevě 100 ms v okruhu 10 px, aby se náklon nepral se scrollem, když člověk jen jede prstem po stránce.

A pak disciplína, kterou nikdo nevidí, ale každý pozná. Kouř se mimo obraz zastaví. Trvale povýšených vrstev ubylo z 21 na 8. Na telefonu zmizelo všech 12 rozmazávaných vrstev. Pohyb se tu dávkuje, ne rozdává.

Fáze 04Co jsme vyhodili

Třetí slib jsme škrtli. Místo něj tři čísla, na která jde kliknout.

V sekci O nás stály tři marketingové sliby. Sliby se píšou snadno a čtou se ještě snadněji. Třetí jsme nahradili třemi čísly z práce NETMA: 47,6 milionu obratu, ROAS 82, proklik za 1,15 Kč. Každé vede do studie, kde je k němu rozepsaný výpočet.

Druhý škrt míří dovnitř. Na kartách se nabízely ikony: vlaštovka, terč, žárovka. Vypadaly dobře a neznamenaly nic: každá z těch metafor by seděla na kteroukoli ze tří karet. Místo nich tam stojí číslice 01–03, které navazují na číslování služeb o sekci níž.

Dekorace, která nenese informaci, je jen šum s dobrým vkusem.

Fáze 05Konstrukce

WordPress ven, statika dovnitř.

Nový web je čisté HTML bez build kroku. Jediná serverová část jsou dvě funkce: sken webu a odeslání přihlášky. Homepage si při načtení stáhne 63 kB JavaScriptu včetně celého solveru kouře; původně stálo přes 250 kB jen samotné hero.

Přechod nesměl nic rozbít. Na staré adresy případových studií odkazují cizí weby, takže je deset pravidel přesměrovává trvalým 308 na nové. Odkazy fungují dál a vyhledávače vědí, kam se obsah přestěhoval.

Žádný plugin k aktualizaci. Žádná databáze. Žádný build, který by se musel udržovat.

Důkaz

Číslo bez výpočtu je marketing. Číslo s výpočtem je důkaz.

Obě případové studie na webu NETMA stojí na jednom pravidle: u každého čísla je vidět, odkud je. Moje zlato neuvádí 47,6 milionu jako tvrzení, ale jako součet: 37,01 z Mety a 10,6 z Googlu. A hned vedle přiznává, co sečíst nejde: organické profily vlastní tržby přiřazené nemají, a vydávat u nich číslo by byl odhad, ne měření.

To pravidlo se obrátilo i proti nám. U druhé studie stránka tvrdila cenu prokliku −1104 %. Snížit cenu o víc než sto procent nelze: šlo o dvanáctkrát levnější proklik, vydávaný za procenta. U CTR jsme dohledali zdroj a opravili průměr trhu. Všude, kde se to číslo objevilo, včetně náhledového obrázku pro sociální sítě.

Chybu jsme nenašli v datech. Našli jsme ji v tom, že čísla na stránce nešla sečíst.

Řemeslo

Web působil v pořádku. Audit našel, že čtečka obrazovky dostávala na mobilu rozbitý strom.

Přepínač služeb je na desktopu sada záložek. Na úzkém displeji se panel přestěhoval dovnitř seznamu záložek, kam patří jen záložky. Čtečka obrazovky pak dostala strukturu, která nedávala smysl. Oprava nebyla doplnit atribut. Byla uznat, že na dotyku to už záložky nejsou, a udělat z nich harmoniku.

Stejně tiše přibylo chybějící ohraničení hlavního obsahu, srovnaly se tři kontrasty a IČO v patičce z 2,65 na 4,66 : 1, nad hranici WCAG AA. Loga klientů po převodu do WebP klesla ze 474 na 142 kB.

Pod tím leží vrstva, kterou neuvidí nikdo: serverové funkce, formulář přes ověřenou doménu, bezpečnostní hlavičky a pravidla cache. Mobil dnes v Lighthouse dává 100 ve všech čtyřech kategoriích, desktop 99 ve třech měřeních za sebou.