Walking Dev 1. rész – A3D.hu

Az utcán járva gyakran láthatjuk hirdetéseken, reklámtáblákon, céges autókon, hogy az adott cég feltünteti a weboldalát is. Ezek a cégek valószínűleg büszkék weboldalukra, hiszen nyilvánosan hirdetik, tehát úgy gondolják, hogy a weboldaluk tükrözi cégük minőségét. Vajon, minden esetben így van ez?

Manapság a legtöbbünk zsebében ott lapul egy mini számítógép, egy okostelefon készülék képében. Csak pár kattintás és máris megnézhetjük a cég weboldalát. Mivel nem úgy működnek az emberek, hogy látnak egy cég nevet, telefonszámot, weboldalt felírják a kis papírfecnire, vagy megjegyzik és otthon a gép előtt bepötyögik a böngészőbe, hanem ott helyben, rögtön szeretnék megkapni az információt, ezért különösen fontos az, hogy egy weboldal mobilra optimalizált legyen.

A legtöbbször sajnos ilyenkor szokott jönni a döbbenet: nehezen használható és nehezen olvasható mobilon, vagy lassan tölt be a weboldal. A látogató pedig csalódottan zárja be az említett cég oldalát.

Webfejlesztőként érdekes lehet kicsit mélyebben is megnézni a honlapot, és tanulni mások hibájából. A Walking Dev sorozatban nem az a célom, hogy céges honlapokat fikázzak, bár véleményemet nem minden esetben fogom véka alá rejteni. Nem is az a célom, hogy mélyreható elemzést adjak róluk, hanem inkább egyszerre próbálom felhasználóként, és programozóként is nézni az oldalt, nem elfelejtve megemlíteni a pozitív elemeket.

Egy ma délutáni séta alkalmával meg is láttam első alanyomat, az a3d.hu, lássuk hogyan szerepelt.

A kezdőoldalon egyből látszott, hogy nem egészen sikerült mobilra optimalizálni az oldalt, a betűméretek nem alkalmazkodtak a felbontáshoz, és nem tudtam belenagyítani se az oldalba. Ami azért különösen érdekes, mert azt észrevettem, hogy Bootstrap-et használnak, valamilyen szintű mobilra optimalizálás tehát történhetett. Itthon gép elé ülve, kicsit jobban belemenve a kódba, viszont feltűnt, hogy a meta tagek közé bekerült ez:

<meta name=”viewport” content=”user-scalable=no” />

Ezzel lényegében megtiltják a mobilon böngészőknek, hogy belenagyítsanak az oldalba, ami mint később látni fogjuk, elég fontos lett volna.

Viszont nagyon tetszett a kreatív megoldásuk, miszerint a galériát egy ház 3D-s modelljén, az egyes helyiségekre kattintva tudjuk elérni.

Meglepően kreatív megoldás, bár a technikai kivitelezés mondjuk úgy, hogy meglehetősen egyszerű lett (lényegében cserélgetik a képet amikor kijelölünk egy helyiséget). Viszont az a helyzet, hogy felhasználóként azt látod, hogy gyorsan betölt az oldal, és egy jópofa, kreatív dolog fogad.

Nézzük a menüpontokat!

A Rólunk menüpontra kattintva egy modal ugrik fel, amiben olvashatnánk a szöveget, ha nem lenne túlságosan apróbetűs. Délutáni, kora nyári napsütéses időben megmondom őszintén, nem volt kedvem szenvedni a hangyányi betűkkel. Így hiába írtak szép hosszan magukról, sajnos nem volt kedvem elolvasni.

Itt jön ki a hátulütője a fent említett user-scalable=no paraméternek: ha bele tudtam volna nagyítani, talán még el is olvastam volna a szöveget.

A Kapcsolat menüpont sajnos itt is nehezen olvasható volt sajnos a nem reszponzív kialakítás miatt. Itt viszont találtam egy jó dolgot.

Először azt hittem, hogy Google Térkép van elhelyezve a baloldali oszlopban, de aztán hamar rájöttem, hogy az bizony csak egy kép. Ez hatalmas piros pont tőlem az oldal készítőjének. Én sem szoktam már Google Térképet embeddelni, egyrészt rengeteget lassít az oldalon, másrészt mobilon gyakran fejfájást okoz a használhatósága: gyakran előfordul, hogy az oldalt szeretném görgetni, de véletlenül a térképet görgetem.

Ilyen céges oldalaknál, ahol tényleg csak annyira kell a térkép, hogy nagyjából belőjük a telephely helyzetét, bőven elég egy fotó a Google Térképről, majd a képre tenni egy linket, ami átvisz a tényleges Google Térképre.

Galéria

Egyszerű galériát kapunk, mindenféle csicsázás nélkül. Bár a Galéria menüpontra valamiért kétszer kellett kattintanom, hogy felhozza a lenyíló menüt. 🤷

Viszont itt találtam nem betöltődő képet, és sajnos ez olyan szinten megölte az oldalt mobilon, hogy csak frissítéssel tudtam visszahozni.

Ami eléggé megmozgatta a fantáziámat, az pedig nem más volt, mint az alsó 3D séta ikonok. Erre nagyon kíváncsi lettem volna, hogy miként oldották meg, de sajnos nem töltöttek be a külső szolgáltatón.

Összegzés

Alapvetően egy közepesen mobilra optimalizált oldalt látunk, vegyesen jó és rossz megoldásokkal. Lenne mit fejleszteni rajta, de láttam már ennél rosszabbat is.

PozitívumokNegatívumok
+ kreatív kezdőoldal– nem teljesen mobilbarát (user-scalable = no)
+ gyors betöltés– apró betűk, nehezen olvasható
+ nem beágyazott Google Térképet használ– nem létező tartalmakra hivatkozás
+ rövid, könnyen megjegyezhető domain– bár a galéria képek nem nagy méretűek, azokat akkor is betölti, ha épp nem nyitom meg a galériát (lazyload hiánya)