Predstavitvena spletna stran za Desto (Dejancho Bozhinov s.p.), družinsko čistilno podjetje z Obale. Ponujajo pisarniško čiščenje, čiščenje po renovaciji in čiščenje doma na območju Obale, Krasa in Notranjske.
Obišči živo stran →
Stranka je imela jasno ponudbo in dobre reference, a brez kakršne koli spletne prisotnosti. Izziv ni bil samo "narediti stran" — bil je prepričati poslovne naročnike (direktorje, office managerje), ki dnevno vidijo profesionalne strani večjih podjetij, da je Desto zanesljiv partner.
Odločil sem se za en sam scrollable one-pager (HTML/CSS/vanilla JS, brez ogrodja). Za stran s tako jasno ponudbo bi multi-page struktura pomenila nepotrebno navigacijsko trenje; vse, kar naročnik potrebuje za odločitev, je dostopno z enim scrollom.
Vizualni jezik je namerno na meji med poslovnim in pristnim: temno mornarsko ozadje (#0A2540) v heroju komunicira resnost, bela/svetlosiva vsebinskih sekcij pa lahkotnost in urejenost — kar je pri čistilnem servisu analogija, ne naključje. Tipografski par Fraunces (serifna) za naslove in DM Sans za besedilo ustvari uredniški kontrast, ki ga pri konkurenci nisem videl.
Cenik sem vključil — z okvirnimi cenami in jasno opombo, da je točna ponudba po brezplačnem ogledu. Odločitev je bila premišljena: B2B-naročnik, ki ne vidi nobene cenovne orientacije, pogosto sploh ne pošlje povpraševanja.
Za kontaktni obrazec sem uporabil Web3Forms API — brezplačen, brez strežnika, povpraševanje prispe neposredno na strankin e-poštni naslov. Drugače kot pri Artechu (lasten PHP backend) sem tu ocenil, da brez lastnega strežnika enostavnejša zunanja rešitev prinaša enako zanesljivost ob nič vzdrževanja.
SEO sem zgradil od začetka: schema.org strukturirani podatki v JSON-LD pokrivajo tako LocalBusiness kot FAQPage — slednje zato, ker je FAQ-sekcija z odgovori o ceni in postopku dejansko dragocena za iskalnike.
Vsaka sekcija ima dekorativne silhuete čistilcev kot ozadje — element identitete. Pri določenih širinah zaslona so figure pristale točno čez besedilne bloke in uničile berljivost. Namesto fiksnih položajev za vsak breakpoint (kar bi bilo krhko) sem napisal lasten algoritem za zaznavanje trka v JavaScriptu: ob nalaganju, spremembi velikosti okna in po umiritvi pisav preveri getBoundingClientRect() vsake figure in vsebinskega bloka. Če se pravokotnika prekrivata (z robom 12 px), figura postane nevidna; ko trka ni, se z animacijo vrne. Robustno, brez ročnega nastavljanja za vsako napravo.
Sekciji Cenik in Mnenja sta imeli mrežo definirano neposredno v HTML-atributu style="". Inline styli imajo višjo specifičnost od media query-ja, zato se mreža na mobilnem ni prelomila. Rešil sem z majhno funkcijo, ki prek window.matchMedia() posluša breakpoint in direktno nastavi el.style.gridTemplateColumns — ker se inline stil prepiše le z inline stilom. Ciljan JS popravek namesto predelave strukture HTML.
Statistična sekcija (20+, 5+, 50k+) ima števce od nič do cilja. Prva različica je animacijo sprožila ob nalaganju — na hitrih napravah so se zaključili, preden je uporabnik dosegel sekcijo. Rešitev: IntersectionObserver z threshold: 0.3, da se animacija sproži šele ob 30 % vidnosti, nato se opazovalec odklopi (disconnect()). Cubic easing naredi zalet naravnejši od linearnega.
Pri asinhronem pošiljanju prek Web3Forms je ključno, da gumb med pošiljanjem jasno komunicira stanje — sicer uporabnik pritisne dvakrat. Med klicem se besedilo zamenja s "Pošiljanje…" in gumb se onemogoči. Ob uspehu se obrazec skrije in prikaže potrditev; ob napaki se gumb vrne v prvotno stanje z jasnim sporočilom, brez osvežitve strani.
