Desto
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 →
Izziv
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.
- Čistilni servis je panoga z nizko vstopno oviro, videti morajo biti opazno bolj profesionalni od "navadnih" čistilcev, a hkrati obdržati pristnost družinskega podjetja.
- Stran mora generirati povpraševanja neposredno (obrazec), ne le informirati.
- Cena je za B2B-stranke pogosta blokada, jo vključiti ali ne, in kako?
- En sam HTML-fajl mora pokriti celoten prodajni lijak: od prvega vtisa do oddaje obrazca.
Pristop
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.
Ključne pasti in rešitve
1. Dekorativne figure, ki so prekrile besedilo
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.
2. Inline grid-style, ki ga media query ne more prepisati
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.
3. Animirani števci, ki so se sprožili prepozno ali prehitro
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.
4. Obrazec mora dati takojšen povratni signal
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.
Rezultat
- Delujoča spletna stran na domeni desto.si, optimizirana za B2B-naročnike.
- Obrazec za povpraševanje z izbirnikom vrste storitve, samodejno dostavo na strankin e-poštni naslov in takojšnjim povratnim sporočilom, brez strežnika in mesečnih naročnin.
- JSON-LD strukturirani podatki za LocalBusiness in FAQPage; prijava v Google Search Console in oddan sitemap.
- Celotna stran v enem HTML/CSS/JS brez zunanjih odvisnosti (razen Google Fonts in Web3Forms), gostovanje je preprosto, predvidljivo in poceni.
