Mobilbarát weboldal: mit jelent ez ma?

Mobilon dől el, és a Google is így nézi

Kezdjük a hazai számokkal. Az NMHH 2025-ös lakossági felmérése szerint a magyar internetezők 96%-a okostelefonon is internetezik, szemben a 73% laptoppal és az 52% asztali géppel. Az átlagos napi internetezési idő 4,7 óra, és ennek nagy része telefonon telik.

A Google ehhez igazította a működését, méghozzá véglegesen. A mobile-first indexálás 2024. július 5-én lezárult: azóta a Google kizárólag a mobil Googlebottal járja be és indexeli a weboldalakat. A saját közleményük egyértelmű ebben: ami mobil eszközről nem érhető el, azt nem fogja indexelni.

Ennek van egy következménye, amit sokan nem gondolnak végig. Nem csak arról van szó, hogy az oldalad „nézzen ki jól” telefonon. Arról van szó, hogy ami mobilon nincs ott, az a Google számára sem létezik. Ha egy régi sablon kis képernyőn elrejt egy szövegblokkot vagy egy egész szekciót, azzal a tartalommal a keresőben sem fogsz szerepelni.

Ez a leggyakoribb rejtett hiba a régebbi oldalakon: asztali gépen minden ott van, mobilon fele annyi, és senki nem érti, miért nem talál rá a Google olyan kifejezésekre, amik „pedig le vannak írva”.

Mit jelent pontosan, hogy mobilbarát?

Három megoldás létezik a gyakorlatban, és csak az egyik jó.

Reszponzív oldal. Egyetlen HTML, egyetlen cím, és a megjelenés igazodik a képernyő méretéhez: az oszlopok egymás alá csúsznak, a menü hamburger-menüvé válik, a betűk olvashatók maradnak. Ma ez az alapértelmezés, és a Google is ezt ajánlja, mert így egyetlen URL-t kell indexelnie.

Külön mobil oldal (a régi m.domain.hu típusú megoldás). Egykor bevett volt, ma elavult: két tartalmat kell karbantartani, könnyű elcsúszni, és a mobile-first indexálás lezárása óta végképp nincs értelme.

Semmi, vagyis a fix szélességű asztali oldal. A telefon böngészője ilyenkor lekicsinyíti az egészet, a látogatónak nagyítania és oldalra görgetnie kell. Ez ma nem „régies”, hanem használhatatlan.

Egy fontos pontosítás: a reszponzív nem ugyanaz, mint a mobilbarát. A reszponzív a technika, a mobilbarát az eredmény. Egy oldal lehet technikailag reszponzív, miközben a gombjai túl kicsik, a szövege apró, és a legfontosabb információ három görgetésnyire van. Attól még nem mobilbarát.

Hogyan teszteld, ha a Google tesztje megszűnt?

Tisztázzuk, mi szűnt meg pontosan. A Google 2023. december 1-jén visszavonta a Search Console Mobilhasználhatóság jelentését, a Mobile-Friendly Test eszközt és annak API-ját is. Az indoklás szerint azóta több más, jobb eszköz is elérhető, például a Chrome Lighthouse.

Ami helyette maradt, az valójában több és pontosabb. A PageSpeed Insights mobil nézete a sebesség mellett használhatósági jelzéseket is ad. A Chrome DevTools eszköz-emulátorával (F12, majd az eszköz-ikon) bármilyen képernyőméretet kipróbálhatsz. A Lighthouse pedig lefuttat egy teljes ellenőrzést, benne a betűmérettel és a viewport-beállítással.

És van egy módszer, ami mindegyiknél többet ér: a saját telefonod, mobilneten, wifi nélkül. Egyetlen emulátor sem adja vissza, milyen érzés hüvelykujjal használni az oldalad egy villamoson. A cikk végén adunk egy tízpontos öntesztet pontosan erre.

Ha a sebesség is érdekel, arról külön írtunk: miért lassú a weboldalad.

A leggyakoribb mobil-hibák

A hibák meglepően ismétlődnek, és a többségük nem dizájn-, hanem figyelmetlenségi kérdés.

Vízszintes görgetés. A leggyakoribb tünet. Szinte mindig egyetlen elem okozza, ami szélesebb a képernyőnél: egy táblázat, egy nagy kép, egy beágyazott térkép vagy videó. Az egész oldal használhatatlanná válik tőle, pedig egyetlen elem a bűnös.

Hiányzó viewport-beállítás. Ha az oldal fejlécéből hiányzik a megfelelő meta-sor, a mobil böngésző asztali szélességben rendereli, majd lekicsinyíti az egészet. Ez az a klasszikus élmény, amikor minden ott van, csak épp olvashatatlanul apró.

Túl apró szöveg és túl kicsi gombok. Erről mindjárt részletesen. Külön csapda az űrlapmezők betűmérete: ha 16 pixelnél kisebb, az iPhone Safari automatikusan ráközelít a mezőre, amikor beleírsz. A látogató ilyenkor azt éli meg, hogy „ugrál az oldal”.

Mobilon elrejtett tartalom. Régi sablonoknál gyakori, hogy kis képernyőn egyszerűen kikapcsolnak szekciókat. Ez ma egyszerre használhatósági és keresőoptimalizálási hiba, mert a Google is csak a mobil változatot látja.

Nem kattintható telefonszám. Apróságnak tűnik, mégis ez az egyik legdrágább hiba: ha a szám nem hívható egy koppintással, a látogatónak ki kell jelölnie és átmásolnia. A legtöbben ilyenkor nem másolnak, hanem továbbállnak.

Az ujjad nem egérmutató

Az egérmutató hegye néhány pixel pontossággal talál el egy célpontot. Az ujjbegy érintkezési felülete ehhez képest óriási, és ráadásul takarja is azt, amire mutat. Ezért van szükség minimális célméretekre.

A webes akadálymentesítési szabvány (WCAG 2.2) AA szinten legalább 24×24 CSS pixelt ír elő kattintható és koppintható elemekre, AAA szinten pedig 44×44 pixelt. A platformok saját ajánlásai ennél is bőkezűbbek: az Apple 44×44 pontot, a Google Material Design 48×48 egységet javasol.

A gyakorlati szabály ebből: 24 pixel a padló mindenhol, a fő gomboknál pedig 44-48 pixel. A folyó szövegben lévő linkekre a szabvány nem várja el a méretet, ott a sorköz és a szövegméret a fontos.

Legalább ennyire számít a távolság. Két egymás mellé zsúfolt, önmagában elég nagy gomb között is folyamatosan mellényúl az ember, ha nincs köztük hely. A menüpontok, a lábléc-linkek és a szűrők a leggyakoribb áldozatok.

Felugró ablakok mobilon

Erre külön érdemes figyelni, mert a Google is figyel rá. Ha a látogató a keresőből érkezik, és rögtön egy olyan felugró ablak fogadja, ami elfedi a tartalmat, azt a Google zavaró közbeékelt tartalomként kezeli, és ez a keresési megjelenésen is meglátszhat.

A kivételek logikusak: a jogszabály által megkövetelt figyelmeztetések (például a sütikezelés vagy a korhatár-ellenőrzés) rendben vannak, és a diszkrét, kis helyet elfoglaló sávok is.

A gyakorlati kérdés nem is a szabály, hanem az arány. Egy tíz másodperccel az érkezés után felugró, teljes képernyős hírlevél-ablak mobilon nagyjából ugyanannyi feliratkozót hoz, mint amennyi látogatót elveszít. Ha mindenképpen kell, jobb megoldás egy alul megjelenő, könnyen bezárható sáv, vagy egy olyan ajánlat, ami akkor jelenik meg, amikor a látogató már elolvasott valamit.

Tízpontos önteszt a saját telefonodon

Ez a rész az, amit ténylegesen érdemes elvégezni, és nem tart tovább tíz percnél. Kapcsold ki a wifit, hogy mobilneten legyél, és nyisd meg a saját oldalad úgy, mintha most látnád először.

Menj végig azon, amit egy ügyfeledtől elvársz: találd meg, mit csinálsz és kinek, keresd meg az árat, nézd meg a nyitvatartást, hívd fel a számot egy koppintással, és küldj el egy üzenetet az űrlapon. Ha bármelyik lépésnél nagyítanod kell, oldalra kell görgetned, vagy kétszer kell próbálkoznod egy gombbal, ott van egy javítanivalód.

A leggyakoribb felfedezés nem technikai, hanem tartalmi: hogy a legfontosabb információ három görgetésnyire van a hír, a bemutatkozás és a képgaléria mögött. Erről bővebben: mit írj a weboldaladra.

Ha az önteszt alapján több pontban is elakadsz, az már nem apró javítás kérdése. Arról, hogy mikor éri meg felújítani és mikor újraépíteni, külön cikkünk van: mikor kell felújítani a weboldalad.

Gyakori kérdések