stolarstvogryf.sk – realizácia

CIEĽ

Cieľ projektu

Stolárstvo Gryf pôsobí v Žiline a širšom okolí a skúsenosti s výrobou nábytku má od roku 2004. Firma dovtedy nemala vlastnú modernú webovú prezentáciu, preto bolo potrebné vytvoriť jednoduchý, prehľadný a vizuálne zapamätateľný web.

Hlavným cieľom bolo:

predstaviť firmu a jej skúsenosti,
ukázať fotografie realizácií,
vysvetliť postup od prvého telefonátu až po montáž,
podporiť telefonický kontakt a dohodnutie obhliadky,
prepojiť web s Google Business Profile.

Web bol navrhnutý skôr ako dôveryhodná online vizitka než ako klasický predajný web s množstvom formulárov a výziev na objednávku.

RIEŠENIE

Čo projekt rieši

Web obsahuje:

úvodnú animovanú scénu s posuvnými nábytkovými dvierkami,
predstavenie stolárstva a jeho histórie,
prehľad spôsobu spolupráce,
galériu realizácií rozdelenú podľa kategórií,
odkazy na konkrétne kategórie pomocou kotiev,
responzívny lightbox s ovládaním šípkami a klávesnicou,
kontaktnú stránku s telefonickým a e-mailovým spojením,
Google Maps načítanú až po vedomom kliknutí používateľa,
prepojenie s Google Business Profile,
stránku ochrany osobných údajov a informácií o cookies.

POUŽITEĽNOSŤ

Použiteľnosť a prístupnosť

Vizuálny štýl vychádza z pôvodného firemného loga, drevených materiálov a tradičného stolárskeho remesla.

Najvýraznejším prvkom je úvodná sekcia pripomínajúca skriňu s posuvnými dvierkami. Pri scrollovaní sa dvierka otvárajú a odhaľujú obsah stránky. Animácia tak priamo súvisí s predmetom podnikania a nie je iba náhodným dekoratívnym efektom.

Na mobilných zariadeniach bola animácia zjednodušená a upravená tak, aby nebránila používateľovi v prirodzenom posúvaní stránky.

Dôraz bol kladený aj na:

čitateľné veľkosti nadpisov,
jednoduchú navigáciu,
dostatočne veľké dotykové plochy,
dobrý kontrast,
ovládanie galérie klávesnicou,
jasné informovanie, že návšteva prevádzky je možná po dohode.

KVALITA

Výkon a optimalizácia

Pri tvorbe bol dôraz kladený na čo najmenší objem prenášaných dát a stabilné vykresľovanie stránky.

Použité boli najmä:

obrázky vo formáte WebP,
samostatné mobilné verzie veľkých úvodných obrázkov,
lazy loading galérie,
pevne zadané rozmery obrázkov proti poskakovaniu rozloženia,
cacheovanie statických súborov,
kompresia na úrovni servera,
verziovanie CSS, JavaScriptu a obrázkov,
obmedzenie JavaScriptu na nevyhnutné funkcie,
presun skriptov mimo kritickej cesty.

Pri záverečnej kontrole dosiahol web v Lighthouse výsledky približne:

výkon: 98
prístupnosť: 100
osvedčené postupy: 100
SEO: 100

HTML validátor nenašiel chyby ani upozornenia a kontrola WAVE nenašla chyby prístupnosti.

PRAX

Výzvy a riešenia

Najväčšou výzvou bola úvodná animácia.

Jednotlivé prehliadače pracujú rozdielne s výškou mobilnej obrazovky, adresným riadkom a obnovovaním pozície po návrate na stránku. Pri prvých verziách preto dochádzalo k trhaniu, poskakovaniu alebo nesprávnemu dokončeniu animácie.

Riešením bolo:

oddeliť výpočet geometrie od samotného vykresľovania,
obmedziť aktualizácie cez requestAnimationFrame,
na mobile nepoužívať zbytočne náročný zoom pozadia,
nezapočítavať každú zmenu výšky mobilného viewportu ako plný resize,
vytvoriť samostatné nastavenia priebehu animácie pre mobil a desktop.

Ďalšou výzvou boli kotvy v galérii. Optimalizácia pomocou content-visibility spočiatku spôsobovala, že prehliadač pri prvom kliknutí nepoznal reálnu výšku vzdialených sekcií. Pre galériu preto bolo potrebné zachovať presné rozloženie ešte pred automatickým presunom na kategóriu.

STACK

Použité technológie

PHP a opakovane použiteľné include súbory
HTML5
vlastné responzívne CSS
Vanilla JavaScript
Apache a .htaccess
natívne lazy loading obrázkov
JSON-LD structured data
Open Graph a Twitter Card metadata
XML sitemap a robots.txt

Projekt nepoužíva framework ani databázu. Vďaka tomu zostáva technicky jednoduchý, rýchly a nenáročný na hosting aj ďalšiu správu.

POD KAPOTOU

Technické riešenie

Spoločné časti webu, ako hlavička, navigácia, pätička a HTML <head>, sú oddelené do PHP include súborov. Úpravy spoločných prvkov sa tak vykonávajú iba na jednom mieste.

Animácia úvodnej sekcie je riadená podľa polohy scrollu. JavaScript používa requestAnimationFrame, pasívny scroll listener a animuje najmä vlastnosti transform a opacity, ktoré sú pre prehliadač menej náročné.

Osobitne bolo potrebné ošetriť mobilné prehliadače, ktorým sa počas scrollovania mení výška zobrazenej plochy v dôsledku skrývania adresného riadka. Kód preto pri bežnej zmene výšky mobilného viewportu zbytočne neprepočítava celú scénu.

Galéria používa dve veľkosti obrázkov:

menšie náhľady pre stránku realizácií,
väčšie fotografie pre lightbox.

Tým sa pri bežnom prehliadaní nemusia sťahovať veľké originály.

VÝSLEDOK

Výsledok

Stolárstvo Gryf je menší prezentačný projekt, pri ktorom však bolo potrebné spojiť originálny vizuálny nápad, responzívne správanie, vysoký výkon, technické SEO a jednoduchú budúcu správu.

Výsledkom je ľahký web bez databázy a rozsiahlych knižníc, ktorý reprezentuje charakter remeselnej firmy, ukazuje jej realizácie a prirodzene vedie návštevníka k telefonickej dohode.