Elavult, nem mobilbarát a céges weboldal: javítás vagy új honlap?

Mit jelent ez az üzletednek?

Súlyosság: magas. Közvetlenül rontja a Google helyezéseket és elriasztja a mobilos látogatók több mint 60%-át.

A mobilról érkező érdeklődő nem fog két ujjal zoomolni vagy vízszintesen görgetni az árak és a telefonszám megtalálásához: 3 másodpercen belül visszalép a találati listára a következő helyi szolgáltatóhoz. Emellett a Google algoritmusai a rossz mobilos használhatóságot egyértelmű negatív rangsorolási szignálként kezelik.

A leggyakoribb okok – és hogyan ismered fel őket

1. 1

   Hiányzó vagy helytelen Viewport meta címke

   Ha a HTML fejlécből hiányzik a viewport beállítás, a telefonos böngészők miniatűr asztali nézetben jelenítik meg a lapot, amit a felhasználónak kézzel kell felnagyítania.

   Így ellenőrizd: Nézd meg a forráskódban: szerepel-e benne a <meta name="viewport" content="width=device-width, initial-scale=1"> sor?

2. 2

   Rögzített szélességű asztali elrendezés (Fixed Width)

   Régi táblázatos vagy merev pixeles elrendezések (pl. width: 1000px), amelyek nem képesek dinamikusan összeugrani a mobil képernyőméretére (360–420 px).

   Így ellenőrizd: Megjelenik vízszintes görgetősáv a telefonodon az oldal alján?

3. 3

   Túl apró betűk és szűk sorközök

   10-12 képpontos betűméretek, amelyeket monitoron még el lehet olvasni, de egy rázkódó buszon vagy séta közben telefonról olvashatatlanok.

   Így ellenőrizd: A szövegtörzs (body) mérete eléri a kényelmesen olvasható 16–18 képpontot mobilon?

4. 4

   Egymásra torlódó érintési felületek és gombok

   Az apró linkek és ikonok nincsenek elválasztva legalább 8-12 képpontos térközzel, így a felhasználó véletlenül mellékattint.

   Így ellenőrizd: A fő hívógomb és űrlapgomb eléri a minimálisan ajánlott 44x44 képpontos érintési méretet?

5. 5

   Mobilra optimalizálatlan felugró ablakok (Pop-upok)

   Hatalmas hírlevél vagy promóciós felugrók, amelyek kitakarják az egész mobilképernyőt, és az X bezáró gomb lelóg a képernyőről, így a látogató nem tudja bezárni őket.

   Így ellenőrizd: Mobilon azonnal felugrik valami, ami megakadályozza a szöveg olvasását?

Javítás lépésről lépésre

1. 1. lépés

   Állítsd be a kötelező Viewport meta címkét

   Minden modern oldal alapja a rugalmas nézetablak deklarációja a <head> részben.

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 2. lépés

   Alakítsd át a fix szélességeket fluid (százalékos) CSS-re

   A merev pixeles szélességek helyett használj modern flexboxot vagy gridet, max-width: 100% korlátozással a képekre és konténerekre.

   img, video {
     max-width: 100%;
     height: auto;
   }
   .container {
     width: 100%;
     max-width: 1200px;
     padding: 0 16px;
   }

3. 3. lépés

   Növeld a mobilos betűméretet legalább 16 pixelre

   A bekezdések és felsorolások szövege legyen legalább 16px méretű, kényelmes 1.5–1.6-os sormagassággal, hogy szemüveg vagy nagyítás nélkül is azonnal olvasható legyen.

4. 4. lépés

   Biztosíts ujjbarát érintési célpontokat

   A gombok, menüpontok és telefonszám linkek minimális mérete legyen legalább 44–48 képpont, egymástól kényelmes távolságban, hogy hüvelykujjal is el lehessen találni őket félrekattintás nélkül.

5. 5. lépés

   Helyezz el azonnali hívás gombot a telefonos nézetben

   A helyi érdeklődő telefonálni szeretne: a fejlécben vagy az oldal alján fixen rögzített sávban legyen ott egy kattintható hívás gomb (`tel:+36...`).

6. 6. lépés

   Mérd fel, megéri-e a foltozás vagy jobb egy új alap

   Ha a weboldal 6-8 évnél régebbi, elavult PHP/CMS motorra épül, a kézi reszponzívvá alakítás hetekig tarthat és folyamatos hibákat szülhet. Ilyenkor egy tiszta, modern weboldal készítése gyorsabb, olcsóbb és stabilabb.

Tippek platformonként

Gyakori hibák javítás közben

• Azt hinni, hogy a mobilnézet ráér, mert „a mi ügyfeleink irodai gépről nézik a honlapot” (a statisztikák szinte minden iparágban 60%+ mobilarányt mutatnak).
• Két ujjas zoomolásra kényszeríteni a látogatót ahelyett, hogy a szöveg magától tördelődne.
• Olyan pop-upokat kitenni telefonon, amiket nem lehet bezárni a kis képernyőn.
• Asztali méretű, több megabájtos fotókat letöltetni mobilneten.

Gyakori kérdések