Hogyan tedd a weboldalt mobilbaráttá

Ahhoz, hogy a weboldalad mobilbarát legyen, adj hozzá egy viewport meta-címkét, építsd az elrendezést mobil-első módon rugalmas szélességekkel, és CSS-töréspontokkal rendezd át nagyobb képernyőkön — oszlopok egymás alá, összecsukott menü, a képek a helyükre méretezve. Ezután nézd át minden oldalt telefonszélességben: nincs-e oldalirányú görgetés, túl kicsi-e a szöveg, és nem túl kicsik-e a gombok az érintéshez. AI-val épített oldalnál egy világos prompt és egy átnézés telefonméretű előnézetben általában a legtöbb hibát megoldja.

Mit jelent valójában a reszponzív dizájn

A reszponzív oldal egy oldalkészletet és URL-készletet használ, amelyek alkalmazkodnak a képernyőhöz. Nincs külön „m.” oldal: a CSS bizonyos szélességeknél megváltoztatja az elrendezést, ezeket hívjuk töréspontoknak. Az építőelemek:

• A viewport meta-címke azt mondja a mobilböngészőnek, hogy az eszköz valódi szélességét használja.
• Folyékony elrendezések százalékokat, flexboxot és rácsot használnak, nem fix pixelszélességeket.
• Media query-k (vagy keretrendszer-osztályok, mint a Tailwind md:) adott szélesség felett megváltoztatják az elrendezést.
• Rugalmas médiák — képek és videók, amelyek a tárolóhoz igazodnak.

Az azért fontos, mert a forgalmad valószínűleg nagy része telefonról jön, és mert a Google a lapok mobil verzióját indexeli. Ha a tartalom vagy a linkek csak asztali gépen léteznek, a Google sem látja őket.

Lehetőségek és kompromisszumok

A mobil-első általában egyszerűbb: az egyoszlopos elrendezés a legkönnyebb, és könnyebb oszlopokat hozzáadni, ahogy nő a hely, mint elvenni őket.

Ami általában elromlik

A viewport-címke

Ha az oldal telefonon kicsi asztali oldalnak látszik, hiányzik a viewport-címke:

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

Ne adj hozzá maximum-scale=1 vagy user-scalable=no beállítást. A csíptetős nagyítás tiltása megnehezíti az oldal használatát a gyengénlátóknak.

Fix szélességek és vízszintes görgetés

A leggyakoribb reszponzív hiba az, ami szélesebb a képernyőnél: egy fix width: 1200px konténer, egy széles táblázat, egy hosszú URL vagy kódblokk, egy kép max-width: 100% nélkül. Ilyenkor az egész oldal oldalirányban görget. Használj max-width-et width helyett, hagyd, hogy a szöveg törjön, a széles dolgoknak adj saját görgethető területet.

Navigáció

Az öt asztali menülink ritkán fér el telefonon. A szokásos megoldás egy menügomb, amely panelt nyit. Tartsd láthatóan a két-három legfontosabb műveletet — „Foglalás”, „Kosár”, „Bejelentkezés” —, és ellenőrizd, hogy a menü billentyűzettel is működik, és könnyen bezárható.

Szöveg és érintési célok

• A törzsszöveg kb. 16 px telefonon ésszerű minimum. Az iPhone kisebb szövegű beviteli mezőnél nagyítja a képet, amikor rákoppintanak.
• A gombokat és linkeket könnyű legyen eltalálni. A WCAG 2.2 AA szintje legalább 24 × 24 CSS-pixelt vagy elég távolságot ír elő; körülbelül 44 pixel kényelmes hüvelykujjal.
• Hagyj helyet a szomszédos linkek között, hogy az emberek ne a rosszat nyomják meg.

Táblázatok és adatok

A széles táblázatok a legnehezebb részei egy reszponzív appnak. Lehetőségek, előnyben részesítési sorrendben: kevesebb oszlop telefonon, minden sorból kártya, vagy a táblázat vízszintesen görgethető konténerben, az első oszloppal rögzítve. Az alapján válassz, mit kell az embereknek összehasonlítaniuk.

Képek és médiák

Használj max-width: 100% és height: auto beállításokat, kisebb képfájlokat kis képernyőkre srcset-tel, és állíts be szélességet és magasságot az elrendezés ugrálásának elkerülésére. A beágyazott videóknak és térképeknek reszponzív burkolóra van szükségük, hogy megőrizzék az arányukat. A kisebb képek az oldalt is gyorsabbá teszik — lásd: hogyan tedd gyorsabbá a weboldalad.

Űrlapok

A címkék a mezők fölé kerüljenek, a mezők legyenek teljes szélesek, és használd a megfelelő beviteli típusokat (type="email", type="tel", inputmode="numeric"), hogy a telefon a megfelelő billentyűzetet mutassa. A küldés gomb legyen hüvelykujjal elérhető, és maradjon látható, amikor a billentyűzet megjelenik.

Csak egérhez kötött interakciók

A telefonon nincs egérkurzor. A tooltipek, legördülő menük és előnézetek, amelyek csak fölé húzva jelennek meg, érintéssel használók számára láthatatlanok. Tedd őket koppintásra is működővé.

Promptok, amelyek működnek

Új építésnél mondd el előre:

Építsd mobil-először. Telefonon egy oszlop, táblagépnél két oszlop, asztali gépen a teljes elrendezés. Ne legyen vízszintes görgetés 320 px szélességnél, a törzsszöveg legalább 16 px, az érintési célok legalább 44 px, kis képernyőn menügomb, a táblázatok telefonon kártyákká alakuljanak.

Meglévő oldalnál írd le, amit látsz:

Telefonon a /pricing oldal vízszintesen görget, és a három csomagkártya egymás mellett összenyomódik. 768 px alatt a kártyák kerüljenek egymás alá, az összehasonlító táblázat görgethessen vízszintesen a saját konténerében, a funkcióoszlop rögzítve, az asztali elrendezés maradjon változatlan.

Ellenőrizd minden oldalt 375 px szélességen. Sorold fel mindazt, ami túlnyúlik, átfed, 16 px-nél kisebb szöveget vagy 44 px-nél kisebb érintési célt használ, vagy csak egérrel működik, majd javítsd mindet.

Lépésről lépésre

1. Ellenőrizd a viewport-címkét az oldal fejlécében.
2. Teszteld 320–375 px szélességen a böngésző eszközmódjában vagy telefonméretű előnézetben. Görgess végig minden oldalon.
3. A vízszintes görgetéssel kezdj. Keresd meg a túl széles elemet; minden más nehezen megítélhető, amíg az nincs meg.
4. Rendezd a navigációt: menügomb, a kulcsműveletek láthatók.
5. Ellenőrizd a szöveget, az érintési célokat és az űrlapokat minden fő folyamatban — regisztráció, keresés, pénztár, kapcsolat.
6. Kezeld a táblázatokat és médiákat: kártyák vagy görgethető konténerek, reszponzív képek és beágyazások.
7. Ellenőrizd a köztes méreteket. Húzd lassan a szélességet telefontól asztali gépig; az elrendezések gyakran táblagép-szélességnél törnek el.
8. Teszteld valódi telefonon. Az emulátorok nem látják, hogy a képernyős billentyűzet eltakarja-e a gombot, a kivágásokat (notch), vagy hogy milyen gyors az oldal mobil adaton.

Gyakori hibák

• Csak egy telefonméreten tesztelni. Nézz meg egy kis telefont, egy nagy telefont és egy táblagépet.
• Tartalom elrejtése mobilon, hogy elférjen. A Google a mobil verziót indexeli, a telefonos felhasználók pedig ugyanazt az információt akarják.
• A zoom letiltása a viewport-címkében.
• Asztali méretű képek telefonon, amelyek töltési időt és adatforgalmat pazarolnak.
• Halmozódó fix elemek: egy ragadós fejléc, egy sütibanner és egy chat-buborék együtt is el tudja takarni a telefonképernyő felét.
• Felugró ablakok, amelyek nem zárhatók be kis képernyőn, mert a bezáró gomb kívül esik a látható területen.

Mobil ellenőrzőlista

• A viewport meta-címke megvan; a zoom nincs letiltva
• Nincs vízszintes görgetés 320 px-nél egyetlen oldalon sem
• A törzsszöveg kb. 16 px; a beviteli mezők nem váltanak zoomot
• Az érintési célok kényelmesen nagyok és el vannak választva
• A menü telefonon és billentyűzettel is működik
• A táblázatok telefonon olvashatók (kártyák, kevesebb oszlop vagy görgethető konténer)
• A képek és beágyazások skálázódnak; megfelelő méretű fájlok mennek ki
• Az űrlapok a megfelelő beviteli típust használják; a küldés gomb elérhető
• Semmi fontos nem függ az egér fölé húzástól
• Legalább egy valódi telefonon tesztelve

A reszponzív elrendezés a akadálymentesség része is: a WCAG azt kéri, hogy a tartalom 320 px szélességnél és 200%-os nagyításnál is működjön. Ha olyan appot építesz, amelyet az emberek naponta telefonon használnak, a hogyan építsz mobilbarát webalkalmazást cikk tovább megy, a telepíthető PWA-kat is beleértve.

Reszponzív dizájn a Mythexen

A Mythex reszponzív webalkalmazásokat épít, Pro csomagon pedig Android- és iPhone-appként is becsomagolhatók. A munkaterületen az Előnézet fölötti telefon ikonra kattintva (Váltás mobilra) megnézheted az appot telefonméretű keretben, és a keret szélét húzva más szélességeket is kipróbálhatsz (Előnézet és kód). A dokumentációban van egy rövid kezdő prompt a kis képernyős elrendezés javításához: mobilra reszponzív promptok. Valódi telefonon is ellenőrizd: nyisd meg a publikált URL-t, vagy oszd meg az előnézeti linket, és nyisd meg a telefonodon.

Kérdések