NOVOFRUCT SK

Zadanie

Potravinár z Nových Zámkov, ktorý vyrába od roku 1975. Vyše osemdesiat produktov v niekoľkých radoch — detská výživa, sterilizovaná zelenina, nátierky, hotové jedlá — plus samostatné značky Ovko a DayUp.

Dizajn prišiel hotový. Chýbala funkčná implementácia, ktorá udrží taký katalóg rýchly a zároveň spravovateľný pre ľudí, ktorí nie sú vývojári.

Čo sa riešilo

• Preklopenie dodaného dizajnu do funkčného WordPressu
• Katalóg produktov s kategóriami, radmi a samostatnými značkami
• Správu obsahu pre netechnických ľudí
• Rýchlosť pri veľkom počte položiek a obrázkov

Kedy dizajn príde hotový a čo to mení

Pri tomto projekte prišiel vizuálny návrh od klienta a našou úlohou bola implementácia. To nie je menej práce, len iná — a má vlastné riziká.

Hotový návrh totiž takmer nikdy nepokrýva všetko. Chýbajú stavy, ktoré sa v statickom súbore nekreslia: ako vyzerá kategória s dvomi produktmi namiesto dvanástich, čo sa stane pri dlhom názve, ako vyzerá formulár po odoslaní. Tieto veci sa buď doriešia na začiatku, alebo sa doriešia počas vývoja podľa toho, komu čo napadne.

Prešli sme návrh a chýbajúce stavy sme pomenovali skôr, než sa začalo kódovať.

Ako spravovať katalóg s vyše osemdesiatimi produktmi

Osemdesiat produktov je hranica, za ktorou sa katalóg nedá udržiavať ručne. Novofruct k tomu má niekoľko produktových radov a dve samostatné značky — Ovko a DayUp — ktoré potrebujú vlastnú prezentáciu, ale zdieľajú tú istú štruktúru.

Postavili sme to na vlastnom type obsahu s taxonómiami pre rad a značku. Prakticky to znamená, že nový produkt je vyplnený formulár: názov, obrázok, popis, zaradenie. Kategórie sa napĺňajú samy podľa zaradenia. Nikto nemusí ručne pridávať produkt na tri miesta a pamätať si, kde všade ho treba zmazať.

Toto je rozdiel medzi katalógom, ktorý je aktuálny po roku, a katalógom, ktorý sa prestane dopĺňať, lebo je to otrava.

Rýchlosť pri veľkom počte obrázkov

Katalóg potravín je hlavne fotografie a fotografie sú najčastejšia príčina pomalého webu. Produktové fotky prichádzajú od klienta v tlačovej kvalite — niekoľko megabajtov, rozmery cez štyri tisíc pixelov.

Riešenie má tri vrstvy. Obrázky sa pri nahratí automaticky prevádzajú do formátu WebP a generujú sa vo viacerých veľkostiach, takže mobil sťahuje malú verziu a nie tú istú, akú vidí desktop. Načítavajú sa až keď sa priblížia k obrazovke. A v zozname produktov sa používa orezaný náhľad, nie zmenšený originál.

Bez toho by kategória s dvadsiatimi produktmi sťahovala desiatky megabajtov a na mobilnom pripojení by sa načítavala niekoľko sekúnd.

Správa obsahu pre ľudí, ktorí nie sú vývojári

Web spravuje človek, ktorý sa venuje marketingu potravinárskej firmy, nie WordPressu. Administrácia je preto zjednodušená na to, čo naozaj potrebuje — pridať produkt, upraviť text, vymeniť fotku.

Všetko ostatné je skryté. Menej možností znamená menej príležitostí niečo rozbiť a menej otázok, na ktoré by sa musel niekoho pýtať.

Čo si z toho môže vziať firma s veľkým katalógom

Ak predávate viac než pár desiatok položiek, rozhodujúca otázka nie je, ako bude katalóg vyzerať, ale kto ho bude o rok dopĺňať a či to preňho bude znesiteľné. Katalóg, ktorý sa ťažko spravuje, prestane byť aktuálny — a neaktuálny katalóg je horší než žiadny, lebo zákazníkovi klame.

Druhá vec: obrázky riešte pri nahrávaní, nie potom. Automatický prevod a zmenšenie ušetria viac času aj rýchlosti než akákoľvek neskoršia optimalizácia.

Ak máte hotový dizajn a hľadáte niekoho, kto ho postaví, robíme produkciu z dodaných návrhov.

Ako to dopadlo

Katalóg spravuje klient sám — nový produkt sa pridá cez formulár, nie cez kód.