B100.hr — premium web stranica za vending uslugu, padel terene i uredsku opremu

B100 d.o.o. je hrvatska tvrtka koja od 2013. godine opskrbljuje urede, ambulante, poslovne zgrade i javne prostore aparatima za kavu, vodu i snack, higijenskim materijalom, aparatima za zabavu te premium padel terenima. Zadatak je bio napraviti potpuno novu web stranicu koja taj raspon usluga predstavlja na jednom mjestu, djeluje ozbiljno i skupo, i posjetitelja vodi prema jednom cilju — slanju upita za besplatnu ponudu. Cijelu stranicu dizajnirao sam i razvio od nule, od koncepta i vizualnog identiteta do koda, sadržaja i postavljanja na server.

Vizualni koncept gradio sam oko premium, uredničkog ugođaja u tri boje — crna, bijela i topla zlatna (#c2aa74). Tipografiju nosi font Inter u više rezova, od običnog do najtežeg crnog reza od 900, koji daje snažne, krupne naslove. Cijela naslovnica radi na crnoj podlozi kako bi zlatni akcenti i fotografije aparata dolazili do izražaja. Da bi tekstovi i razmaci bili dosljedni na svim uređajima, postavio sam vlastiti sustav dizajn-tokena u CSS-u: sve boje, veličine fontova, razmaci, prijelazi i slojevi definirani su kao varijable, a naslovi se fluidno skaliraju ovisno o širini ekrana, tako da jednako dobro izgledaju na mobitelu i na velikom monitoru.

Tehnički, stranicu sam namjerno izgradio bez ijednog frameworka i bez build alata — čisti HTML5, moderni CSS i JavaScript u ES modulima, plus PHP 8 za kontakt formu i serversko generiranje stranica proizvoda. Takav pristup znači da je stranica izuzetno brza, lagana za održavanje i da se može uređivati izravno, bez kompliciranog razvojnog okruženja. Cijeli katalog proizvoda vođen je iz jedne JSON datoteke koja se ponaša kao mali CMS: u njoj se nalazi 61 proizvod raspoređen u šest kategorija, a svaki proizvod ima naziv, kategoriju, glavnu sliku i galeriju, kratki i dugi opis, tehničke karakteristike te oznaku je li izdvojen. Dodavanje novog proizvoda znači samo dopisivanje jednog unosa u tu datoteku — sve ostalo (kartice, filteri, detaljna stranica, izdvojeni proizvodi na naslovnici) generira se automatski.

Naslovnica je osmišljena kao putovanje kroz priču. Otvara je uvodni hero s naslovom čije riječi ulaze jedna za drugom, a iznad riječi „kavu” napravio sam poseban efekt dima i pare koji se crta u stvarnom vremenu na canvasu — sustav od gotovo stotinu čestica koje se dižu, šire i nestaju, uz suptilno SVG izobličenje poput topline iznad šalice. Efekt se pametno pali samo dok je hero vidljiv i u potpunosti se gasi čim se odscrolla, da ne troši resurse. Ispod hera slijedi traka povjerenja s brojkama koje se animirano „namotavaju” do svoje vrijednosti (preko 300 aktivnih lokacija, odaziv na servis u 4 sata, 13 godina iskustva), zatim poziv na akciju, sekcija „Kako funkcionira” u tri koraka s fotografijom tehničara u pozadini i tamnim preljevom, pregled vrsta prostora koje opslužuju (uredi, ambulante, poslovne zgrade, javni prostori), mreža od šest kategorija proizvoda s fotografijama aparata kojima sam uklonio pozadinu da lijepo „lebde” na podlozi, dinamični vrtuljak izdvojenih proizvoda i, na kraju, izjava zadovoljnog klijenta.

Stranica proizvoda nudi pregled cijele ponude s filtriranjem po kategorijama, pri čemu se odabrana kategorija pamti u adresi stranice tako da se određena skupina može izravno podijeliti linkom. Svaki pojedinačni proizvod ima svoju stranicu koja se generira na serveru iz JSON podataka i dostupna je na urednom, čistom linku oblika /proizvod/naziv-proizvoda. Te stranice imaju galeriju slika sa sličicama za prebacivanje, popis karakteristika, opis razlomljen u uredne odlomke i formu za upit koja je već unaprijed vezana uz taj konkretni proizvod, tako da tvrtka odmah zna na što se upit odnosi. Posebno sam riješio i slučaj kad proizvod ne postoji — tada se prikazuje uredna poruka i šalje ispravan 404 status.

Kontakt sustav radi kroz formu povezanu s PHP pozadinom koja šalje upit na službeni email tvrtke. Forma ima provjeru na strani preglednika s jasnim porukama o greškama, a na serveru dodatnu provjeru ispravnosti podataka, čišćenje unosa, provjeru s koje stranice dolazi te skriveno „honeypot” polje koje tiho odbacuje spam botove. Nakon uspješnog slanja korisnik se vodi na zasebnu stranicu zahvale. Uz formu, na kontakt stranici je i ugrađena Google karta lokacije u Zagrebu koju sam stilizirao da se uklopi u tamni dizajn, te svi kontaktni podaci i radno vrijeme.

Cijelo iskustvo dotjerano je nizom suptilnih animacija i detalja. Stranica se otvara kratkim ekranom učitavanja s logom i animiranom parom; zaglavlje je „ljepljivo”, ima tanku traku napretka čitanja i mijenja izgled pri scrollanju; sekcije i kartice se nježno pojavljuju kako ulaze u vidno polje; gumbi se magnetski „privlače” pokazivaču miša, a iznad linkova i gumba pojavljuje se prilagođeni zlatni pokazivač. Na mobitelu radi puni meni preko cijelog ekrana. Sve te animacije automatski se isključuju za korisnike koji su u sustavu postavili smanjeno gibanje, kao i na dodirnim uređajima gdje nemaju smisla, pa stranica ostaje ugodna i pristupačna svima.

Velik dio posla bio je i u onome što se ne vidi na prvi pogled. Stranica je u potpunosti optimizirana za tražilice: svaka stranica ima svoje naslove i opise, Open Graph i Twitter oznake za lijep prikaz pri dijeljenju na društvenim mrežama, kanonske linkove, mapu stranice i robots datoteku. Sve fotografije pretvorio sam u moderni WebP format radi manjih veličina i bržeg učitavanja, uz odgodu učitavanja slika koje nisu odmah vidljive. Postavljena je i GDPR traka za kolačiće s odvojenim pristankom za nužne i analitičke kolačiće, a sadržaj je pristupačan zahvaljujući semantičkom HTML-u i ARIA oznakama. Stranica je povezana s pravnim stranicama uvjeta poslovanja i politike privatnosti te ima vlastitu 404 stranicu.

Na strani posluživanja sve je posloženo za produkciju: kroz Apache konfiguraciju riješeni su čisti linkovi, prisilno preusmjeravanje na HTTPS, ujednačavanje domene, preusmjeravanja sa starih adresa prethodne WordPress stranice na nove te pravilna politika predmemorije ispred Cloudflarea. Krajnji rezultat je brza, elegantna i potpuno samostalna web stranica koja vjerno predstavlja B100 kao ozbiljnog partnera i posjetitelja jednostavno vodi do upita.