A budapesti weblátogatók 71%-a mobilon érkezik. Mit jelent ez gyakorlatban a tervezésnél, és hol szúrják el a legtöbben.
Nézzük meg a számokat: egy tipikus magyar kisvállalkozás weboldalán a látogatók 71%-a kizárólag a telefonjáról nyitja meg az oldalt — ezt a Google Analytics-ből látjuk. Bizonyos szektorokban (éttermek, szolgáltatóipar) az arány 85% fölé szalad. Mégis: a fővárosi weboldalak közel ötven százaléka úgy fest, mintha asztali monitorra szabták volna, és csak utólag "ráigazították" volna a kisebb képernyőkre.
A "reszponzív" és a "mobil-első" között milyen az eltérés?
Reszponzív: az asztali változat zsugorítva préselődik be a telefonra. Mobil-első: a terv telefonról indul, ott zajlik a teljes élmény — az asztali csak egy tágabb vászon, több üres tér.
Hogyan látszik ez a gyakorlatban? Egy reszponzív site-on a hero-rész általában 80–120%-os képernyőterületet vesz el mobilon (le kell görgetni, hogy a felhívás megjelenjen). A mobil-első kivitelnél a fő gomb azonnal az első nézetben ül, és a hüvelykujjal könnyen elérhető pozícióban van.
4 visszatérő mobil-hiba a budapesti oldalakon
1. Mikroszkopikus gombok — 44×44 pixelnél kisebbek. Az Apple és a Google ezt alapszabályként kezeli; ennél kisebb felületeket nehéz hüvelykujjal eltalálni. 2. Csak desktop-on működő hover — a hoverre megjelenő tartalom mobilon teljesen elvész. Sokszor pont a kulcsinformáció esik ki így. 3. Asztali táblázatok görgetés nélkül — egy 5 oszlopos árlistát mobilon képtelenség elolvasni. A megoldás vagy függőleges kártya-elrendezés, vagy egy szándékos vízszintes scroll-megoldás. 4. Vontatott betöltés mobilon — a 4G és 5G sem segít, ha 6 MB-os hero-fotó akar betöltődni.
Mit mutatnak a tényleges számok?
A saját adatainkból budapesti webshopokra: mobilon a konverziós ráta átlagosan 1,1%, asztalon 2,3%. Másképp: a forgalom 71%-a a bevétel 60%-át termeli ki, és ennek oka a gyengébb mobil felület. Ha ezt a rést behúzod, a webshop bevétele 15–25%-kal feljebb mehet változatlan forgalom mellett is.
Mit lehet egy hét alatt megjavítani?
- A CTA gombok újradimenzionálása és új helyre pozícionálása
- Mobil-specifikus fejléc-átépítés (rövidebb menü, kiemelt hívás-gomb)
- Képek tömörítése és átkonvertálása WebP formátumra
- Mobilon felesleges popup-ok kiiktatása
Ezek a tipikus "gyors nyereség" beavatkozások — anélkül, hogy az egész oldalt felforgatnánk. Persze, ha az egész oldal alapjaiban elavult, akkor új projekt indítása az értelmes irány; a havi együttműködésekben ezek a kis csiszolások egyébként is folyamatos részei a munkának.