Megnyitottad már a weboldalad telefonon, és olyat találtál, ami semmire sem hasonlít abból, amit építettél? A mobilon hibásan megjelenő weboldal az egyik leggyakoribb panasz azoktól a márkatulajdonosoktól, akik asztali gépen tervezték az oldalukat, és soha nem nézték meg, hogyan teljesít kisebb képernyőn. Ez a cikk bemutatja, mi okozza a problémát, hogyan diagnosztizálhatod, melyik hiba érinti az oldalad, és mit tegyél a javításhoz.
A webes forgalom több mint fele ma már mobil eszközökről érkezik. Ez az arány évek óta nő, és tovább emelkedik. Ha egy látogató telefonról érkezik az oldaladra, és olyan szöveggel találkozik, amely túl kicsi az olvasáshoz, olyan képekkel, amelyek kicsúsznak a képernyőről, vagy olyan navigációs menüvel, amely nem reagál az érintésre, kicsi az esély, hogy maradjon. A mobilos magas visszafordulási arány gyakran az első mérhető jele annak, hogy valami elromlott, és sok márkatulajdonos nem köti össze a kettőt, amíg meg nem nézi az analitikát.
A bosszantó az, hogy a mobilos megjelenítési hibák nem mindig nyilvánvalóak az asztali nézetből, amellyel az oldaladat kezeled. A problémák jellemzően csak akkor kerülnek felszínre, ha a tényleges telefonképernyőt nézed, ami azt jelenti, hogy hetekig vagy hónapokig észrevétlenek maradhatnak, miközben a látogatók csendben elmennek.
Miért néz ki rosszul egy weboldal mobilon?
A mobilon hibásan megjelenő weboldalnak nincs egyetlen oka. A probléma általában öt alapvető hiba egyike, néha több kombinációja. Ha megérted, melyik ok érinti az oldalad, kiderül, melyik javítás a megfelelő.
Az oldalt nem reszponzív dizájnnal építették
A reszponzív weboldal az elrendezését automatikusan igazítja a megjelenítő képernyő szélességéhez. Asztali gépen a tartalom három oszlopban jelenhet meg. Táblagépen kettőben. Telefonon egyetlen, görgethető oszlopban. Ez az igazodás a media query nevű CSS-szabályokon keresztül történik, amelyek megmondják a böngészőnek, hogyan rendezze át a tartalmat különböző képernyőméreteknél.
Ha az oldalt reszponzív dizájn nélkül építették, ugyanazt a rögzített elrendezést mutatja a képernyő méretétől függetlenül. Az az oldal, amelyet egy 1440 pixel széles asztali monitorra terveztek, ezen a szélességen próbál megjelenni egy nagyjából 390 pixel széles telefonképernyőn. Az eredmény egy összezsugorított, kicsinyített oldal, ahol a szöveg olvashatatlan, a gombok pedig túl kicsik az érintéshez. A tartalom technikailag ott van, de használhatatlan.
A régebbi oldalaknál, különösen azoknál, amelyeket olyan fogd és vidd szerkesztőkkel építettek, amelyek nem helyezték előtérbe a mobil kimenetet, gyakori ez a probléma. Ide tartozhatnak azok az oldalak is, amelyeket egyedi kóddal építettek, mobilközpontú gondolkodás nélkül.
A képek nincsenek mobil képernyőre méretezve
A 3000 pixel szélesen feltöltött és korlátozás nélkül megjelenített kép a teljes méretében próbál megjelenni, függetlenül attól, hol nézik. Asztali gépen a böngésző össze tudja zsugorítani, hogy beférjen. Mobil eszközön, ha nincs alkalmazva reszponzív méretezési szabály, a kép kitolódhat a képernyő széle mögé, vízszintes görgetést vagy az elrendezés összeomlását okozva.
Még ha a képek nem is csúsznak ki, a nagy, optimalizálatlan képek rontják azt, miért fontos a weboldal sebessége mobilon. Az a lassan betöltő kép, amely feltartja az oldal többi részének megjelenését, a hibás működés egyik formája akkor is, ha az elrendezés technikailag egyben marad. A mobilkapcsolaton lévő látogatók különösen érzékenyek erre.
A rögzített szélességű elemek kicsúsznak a képernyőről
A rögzített szélességű elemek olyan tárolók, div-ek, táblázatok vagy más HTML-elemek, amelyeknek a stíluslapban konkrét pixelszélességet adtak százalék vagy rugalmas egység helyett. Az a tároló, amelyet 900 pixel szélesre állítottak, asztali gépen helyesen jelenik meg, de kicsúszik a telefonképernyő széle mögé, így a felhasználónak vízszintesen kell görgetnie, hogy lássa a teljes tartalmat. A weboldalon a vízszintes görgetés szinte mindig rögzített szélességű túlcsordulási probléma jele.
A táblázatok gyakori bűnösök. Az HTML-ben rögzített oszlopokkal épített árazási táblázat vagy összehasonlító diagram mobilon drámaian összeomolhat, és a szöveg olvashatatlan módon torlódik. Ugyanez érvényes az oldalsávokra, a beágyazott modulokra és minden olyan elemre, amelynek explicit pixelszélessége meghaladja a telefonképernyő rendelkezésre álló helyét.
A betűméret túl kicsi, zoomolás nélkül nem olvasható
A szöveg, amely asztali képernyőn 14 pixelesen jól olvasható, telefonon olvashatatlanná válhat, különösen a nagy sűrűségű kijelzőkön, ahol a fizikai pixelek száma jóval magasabb a logikai kijelzőmérethez képest. Ha a látogatónak össze kell csippentenie és nagyítania kell, hogy elolvassa a tartalmadat, az élmény hibás, akkor is, ha az elrendezés technikailag ép.
A mobilon ajánlott minimális törzsszöveg-méret 16 pixel. Minden, ami ez alatt van, azt kockáztatja, hogy az eszközök jelentős részén megbukik az olvashatóság. A kisebb szöveg a keresőknek is jelzi, hogy az oldal nincs optimalizálva mobilra, ami befolyásolhatja az oldal rangsorolását és indexelését.
A navigáció rosszul összecsukódik, vagy érintésre nem működik
Az asztali navigációs menüket gyakran vízszintes sávként építik, legördülő elemekkel, amelyek egérráhúzásra jelennek meg. Az érintőképernyőn nincs ráhúzás. Az a menü, amely az egérráhúzásos interakcióra épül, telefonon egyszerűen nem működik. A látogatók megérintik a menüpontot, és nem történik semmi, vagy rossz oldalra jutnak, mert az almenüt feltáró ráhúzási állapot sosem aktiválódik.
Még az a navigáció is hibás lehet a gyakorlatban, amely technikailag működik érintésre, ha az érintési célpontok túl kicsik vagy túl közel vannak egymáshoz. A mobilos érintési célpontok általános iránymutatása legalább 44 x 44 pixel. A kisebb célpontok elhibázott érintésekhez, véletlen navigációhoz és bosszús látogatókhoz vezetnek, akiknek könnyebb elmenni, mint megtalálni, amiért jöttek.
Hogyan ellenőrizd, hogy a weboldalad mobilbarát-e
A leggyorsabb ellenőrzés az, ha megnyitod az oldalad egy valódi telefonon. Használd a saját eszközöd, és ha lehet, egy másik gyártmányt és típust is. Ami az egyik telefonon jól néz ki, a másikon másként jelenhet meg a képernyőfelbontás, a böngészőmotor és az operációs rendszer verziója közötti különbségek miatt.
A böngésző fejlesztői eszközei beépített mobilszimulációt kínálnak. A legtöbb asztali böngészőben az F12 megnyomása megnyitja a fejlesztői panelt. Az eszközsáv ikonjával különböző képernyőméreteket és eszköztípusokat szimulálhatsz. Ez gyors ellenőrzésekhez hasznos, de nem teljes helyettesítője a valódi eszközökön végzett tesztelésnek, mert a szimulált környezetek nem adják vissza a tényleges érintési viselkedést, a betűmegjelenítést vagy a hálózati körülményeket.
A Google mobilbarát tesztje, amely a Google Search Console-on keresztül érhető el, kiértékeli az oldalaidat, és jelzi a konkrét mobilhasználhatósági problémákat. Azonosítja az olyan hibákat, mint a túl kicsi, nem olvasható szöveg, az egymáshoz túl közeli kattintható elemek és a nézetablakba be nem férő tartalom. A jelentés oldalszintű részletességet ad, így megállapíthatod, melyik konkrét oldalak buknak meg, és melyek felelnek meg.
Az analitikai adatok ellenőrzése viselkedési réteget ad a műszaki képhez. Ha a mobilos visszafordulási arányod lényegesen magasabb, mint az asztali, ez a különbség gyakran a telefonok megjelenítési vagy használhatósági problémájára utal. A mobilos magas visszafordulási arányról szóló cikk elmagyarázza, hogyan olvasd ezeket a jeleket, és mi készteti a látogatókat arra, hogy azonnal elmenjenek a kisebb képernyőkön.
Hogyan javítsd ki a mobilon rosszul kinéző weboldalt
A megfelelő javítás attól függ, melyik ok okozza a problémát. A fenti öt ok mindegyikének megvan a megfelelő megoldása.
Válts reszponzív elrendezésre
Ha az oldal egyáltalán nem reszponzív, a megoldás vagy az újraépítés reszponzív keretrendszerre, vagy átváltás olyan platformra, amely alapértelmezetten reszponzív HTML-t ad. Reszponzív viselkedést utólag hozzáadni egy nem reszponzív oldalhoz lehetséges, de gyakran munkaigényesebb, mint reszponzív kiindulópontról újraépíteni. Ha az oldal olyan modern platformon van, amely támogatja a reszponzív témákat vagy sablonokat, a reszponzív sablonra váltás általában a gyorsabb út.
Méretezd át és korlátozd a képeket
A képeket a ténylegesen szükséges megjelenítési méretben kell feltölteni, nem az eredeti exportálási felbontásukban. A legtöbb weboldal-képnél az 1200 pixeles maximális szélesség elég a nagy sűrűségű kijelzőkhöz, miközben a fájlméret kezelhető marad. Az a CSS-szabály, amely a képeken max-width: 100% értéket állít be, biztosítja, hogy soha ne csússzanak ki a tárolójukból, bármekkora is a képernyő szélessége. Ez az egyetlen szabály megoldja a legtöbb képtúlcsordulási problémát az egyes képek átméretezése nélkül.
Cseréld a rögzített szélességeket rugalmas egységekre
A tárolókon, táblázatokon és más elrendezési elemeken lévő rögzített pixelszélességeket százalékos szélességekre vagy rugalmas CSS-egységekre, például em, rem vagy vw értékekre kell cserélni. Az a tároló, amelynek width: 900px helyett width: 90% van beállítva, minden képernyőméretnél megfelelően skálázódik. A táblázatoknál az olyan CSS-szabály hozzáadása, amely a táblázatokat a tárolójukon belül vízszintesen görgethetővé teszi, megakadályozza, hogy tönkretegyék az általános elrendezést keskeny képernyőkön.
Növeld a betűméreteket mobilon
A mobilon a törzsszöveget legalább 16 pixelre kell állítani. Ha az asztali stíluslap kisebb méretet határoz meg, a mobil képernyőszélességekre célzott media query felülírhatja. A címsorméreteket is érdemes átnézni, mert sok címsorstílus, amely asztali gépen arányosnak tűnik, telefonon túlságosan nagy lesz, és más tartalmat a hajtás alá tol, mielőtt a látogató bármit elolvasna.
Cseréld le az egérráhúzásos navigációt mobilmenüre
A mobilnavigáció szokásos megoldása az összecsukható menü, amelyet gyakran hamburgermenünek hívnak, és érintésre, nem ráhúzásra nyílik. A legtöbb reszponzív keretrendszer és weboldalépítő alapból tartalmazza ezt a mintát. Ha az oldal jelenlegi navigációjának nincs mobil megfelelője, a hozzáadáshoz vagy a stíluslapot és a JavaScriptet kell módosítani, vagy olyan témára kell váltani, amely beépített funkcióként tartalmaz mobilnavigációt. Az érintési célpontok méretét is érdemes átnézni, hogy minden menüpont megfeleljen a minimális 44 pixeles iránymutatásnak.
Ha az oldaladon a megjelenítési problémák mellett hibás oldalak is vannak, a vizuális elrendezés javításával kezdve gyakran könnyebb eljutni az egyes oldalakra, és letesztelni őket az audit során.
Hogyan kezeli a WEMASY a mobilt
A WEMASY weboldalépítője minden oldalon reszponzív HTML-t állít elő beállítás nélkül. Az elrendezések mobil képernyőméreteknél automatikusan átrendeződnek, a képek a tárolóikon belül maradnak, a navigáció pedig telefonokon és táblagépeken érintésbarát menüre vált. A betűméreteket, az érintési célpontokat és a térközöket a platform dizájnrendszere állítja be úgy, hogy megfeleljenek a mobilhasználhatósági szabványoknak, így a WEMASY-n induló márkák már mobilra kész oldallal kezdenek, és nem kell utólag átalakítaniuk.
Nézd meg, mi tartozik hozzá, a WEMASY weboldalépítőnél, vagy nézd meg az elérhető csomagokat az árak oldalon.
Gyakran ismételt kérdések
Miért néz ki jól az oldalam asztali gépen, de rosszul mobilon?
Ez jellemzően akkor történik, ha az oldalt elsősorban asztali megjelenítésre építették vagy tervezték, reszponzív CSS-szabályok nélkül, amelyek a kisebb képernyőkhöz igazítanák az elrendezést. Az asztali böngészőnek van elég szélessége a rögzített elrendezés szándékolt megjelenítéséhez. A telefonképernyőnek nincs, ezért az elemek kicsúsznak, átfedik egymást, vagy olyan kicsire zsugorodnak, hogy olvashatatlanok. A leggyorsabb módja annak, hogy lásd, mit tapasztalnak a mobilos látogatók, ha megnézed az oldalt a böngésző mobilszimulációs módjában vagy egy valódi eszközön. A WEMASY weboldalépítőjével ezt közvetlenül a saját weboldaladon is beállíthatod.
Befolyásolja a Google-helyezésemet a hibás mobilos elrendezés?
Igen. A Google mobil-első indexelést használ, ami azt jelenti, hogy egy oldal mobilváltozatát értékeli elsősorban a rangsoroláskor. Az a weboldal, amelynek mobilos megjelenítési problémái, kis szövege vagy a nézetablakból kicsúszó tartalma van, alacsonyabb használhatósági pontszámot kap, ami beleszámít az általános keresési teljesítménybe. A mobilos hibák javítása egyszerre felhasználói élmény javítása és SEO-előny.
Mi okozza a vízszintes görgetést egy mobil weboldalon?
A mobilon megjelenő vízszintes görgetés szinte mindig olyan elemre utal, amelynek rögzített pixelszélessége meghaladja a telefonképernyő szélességét. Gyakori bűnösök a táblázatok, oldalsávok, beágyazott tartalmak, szélességkorlátozás nélküli képek, és olyan tárolók, amelyeket százalék helyett konkrét pixelszélességre állítottak. A túlcsorduló elem azonosítása a böngésző fejlesztői eszközeiben, majd a rögzített szélesség százalékra cserélése vagy túlcsordulás-kezelés hozzáadása a szülőtárolóhoz általában megoldja a problémát.
Hogyan tesztelhetem, hogy a weboldalam mobilbarát-e?
Nyisd meg az oldalt egy valódi telefonon, és görgess végig az összes kulcsoldalon. Aztán nyisd meg egy asztali böngésző fejlesztői eszközeiben, és az eszközszimulációs móddal nézd meg több képernyőszélességnél. Strukturált audithoz futtasd át az oldalakat a Google Search Console mobilhasználhatósági jelentésén, amely jelzi a konkrét problémákat, például a túl kicsi szöveget, az egymáshoz túl közeli kattintható elemeket és a nézetablak-konfigurációs hibákat. A két megközelítés együtt adja a legteljesebb képet.
Javíthatom a rosszul működő mobil oldalt az egész újraépítése nélkül?
Attól függ, hogyan építették eredetileg az oldalt. Ha az oldal olyan platformon fut, amely támogatja a reszponzív témákat, a reszponzív témára váltás gyakran a leggyorsabb megoldás, és nem igényli a tartalom nulláról való újraépítését. Ha az oldalt egyedi kóddal, nem reszponzív elrendezéssel építették, a media query-ket használó célzott CSS-módosítások teljes újraépítés nélkül megoldhatják az egyes problémákat. Ha viszont az elrendezés táblázatokra épül, vagy végig erősen rögzített szélességekre támaszkodik, a reszponzív alapra való teljes újraépítés általában hatékonyabb, mint az egyes problémák foltozgatása.
Miért mennek el a látogatók néhány másodperc után a weboldalamról mobilon?
Ha a látogatók megjelenítési problémákkal, olvashatatlan szöveggel, hibás navigációval vagy lassan betöltő képekkel rendelkező oldalra érkeznek, gyorsan elmennek, mert az oldal nem felel meg az alapvető használhatósági elvárásaiknak. A mobilos látogatók kevésbé tűrik a súrlódást, mint az asztaliak. Ha az elrendezés hibás vagy lassú, visszatérnek a keresési találatokhoz, és inkább egy másik találatra kattintanak. A látogatók elmenéséről az oldaladról szóló cikk bemutatja az emberek gyors távozásának okait, és hogyan diagnosztizálhatod, melyik érinti az oldalad.