A webes forgalom több mint 60 százaléka ma már mobil eszközről érkezik. Az a weboldal, amely nem mobilbarát, a látogatói többségét cserben hagyja. Ez nem ritka különleges eset. A mobil rendbetétele nem extra funkció. Ez az alapszint, amelyet egy vállalati weboldaltól elvárnak.
Egy weboldal mobilbaráttá tétele azt jelenti, hogy a mobilos látogatóknak ugyanolyan minőségű élményt adsz, mint az asztaliaknak. Nem egy lecsupaszított változatot, amely technikailag betölt, hanem olyan oldalt, ahol a szöveg olvasható, a navigáció működik, a képek helyesen jelennek meg, és az űrlapokat tényleg el lehet küldeni telefonról bosszúság nélkül.
Ez a cikk végigvezet azokon a gyakorlati változtatásokon, amelyek egy weboldalt igazán mobilbaráttá tesznek, a navigációtól és a szövegtől a képeken, űrlapokon és sebességen át.
Mit jelent a gyakorlatban a mobilbarát?
A mobilbarát weboldal olyan, amelyen minden funkció megkerülő megoldások nélkül helyesen működik telefonon. A szöveg alapértelmezett nagyításnál olvasható. A navigáció szépen nyílik és záródik. A gombokat el lehet találni úgy, hogy nem kell a rossz elemre koppintani. A képek betöltenek és helyesen jelennek meg. Az űrlapokat bosszúság nélkül ki lehet tölteni és el lehet küldeni.
Számít a különbség aközött, hogy valami technikailag mobilkompatibilis, vagy valóban mobilbarát. Egy oldal technikailag kompatibilis, ha telefonon nem romlik el. Valóban barátságos, ha telefonon használni olyan természetes érzés, mint asztali gépen. A különbség a részletekben van. A térközök, a betűméret, a koppintási célpontok mérete és a betöltési idő mind meghatározzák, hogy az élmény jó, vagy csak éppen használható.
A mobilbarát weboldal alapja a reszponzív dizájn, amely az elrendezést automatikusan igazítja a különböző képernyőmérethez. A mi a reszponzív dizájn cikk technikai szinten elmagyarázza, hogyan működik ez.
Hogyan teszteled, hogy a weboldalad mobilbarát-e?
A legmegbízhatóbb teszt, ha a saját oldaladat végigjárod egy valódi telefonon. Nem a böngésző mobilelőnézetében. Nem egy keskeny oszlopra összehúzott asztali ablakban. Egy valódi telefonon, a hüvelykujjaiddal, úgy, ahogy egy látogató használná.
Járj végig minden oldalt. Nyisd meg a navigációt, és nézd meg, hogy minden link elérhető-e. Olvasd el a szöveget, hogy nagyítás nélkül is olvasható-e. Koppints rá minden gombra, hogy megfelelően reagál-e. Tölts ki és küldj el minden űrlapot. Nézd meg, hogy a képek betöltenek és helyesen jelennek meg. Ellenőrizd, hogy semmihez nem kell vízszintesen görgetni.
A keresők ingyenes mobilteszt eszközöket is kínálnak. Add meg az URL-edet, és az eszköz jelzi a konkrét problémákat, például a túl kicsi, olvashatatlan szöveget, az egymáshoz túl közel lévő kattintható elemeket vagy a képernyőnél szélesebb tartalmat. Ha általánosabb útmutatást szeretnél arról, mit ellenőrizz az oldal indulása előtt, a mit tudj a weboldalad elindítása előtt cikk a mobilos tesztelést az indulás előtti teljes folyamat részeként tárgyalja.
Hogyan működjön a navigáció mobilon?
A navigáció az a hely, ahol a mobilos élmény leggyakrabban elromlik. Az a vízszintes menü, amely egy asztali monitor teljes szélességét kitölti, nem fér el egy telefonképernyőn. A szokásos megoldás egy gombbal nyitható, összecsukható menü, általában a felső sarokban.
A menügombnak azonnal felismerhetőnek kell lennie. A háromvonalas ikon az összecsukott navigációs menük széles körben ismert jelölése lett. Amikor a menü kinyílik, a képernyő elég nagy részét kell lefednie ahhoz, hogy könnyen olvasható és koppintható legyen. Az elemek között elég függőleges térköz kell, hogy az ujj ne érjen a fölötte vagy alatta lévőre.
Tartsd rövidre a mobilmenüt. Ha az asztali navigációdban sok elem van, gondold végig, melyekre van a legnagyobb szüksége a mobilos látogatóknak, és hogy a másodlagos elemek csoportosíthatók-e, vagy kivehetők-e a felső szintről. Az egyszerűbb mobilmenü könnyebben használható. A mi a weboldal navigáció cikk a navigáció szerkezetét és használhatóságát tárgyalja minden eszközön.
Hogyan nézzen ki a szöveg és a betűtípus mobilon?
Az asztali gépen jól olvasható szöveg kényelmetlenül kicsi lehet telefonon, ha a betűméret túl alacsonyra van állítva. A törzsszöveg minimum 16 pixeles betűmérete az általánosan használt szabvány a mobilos olvashatósághoz. Ez alatt a szöveg nagyítást igényel, amit a legtöbb látogató nem fog megtenni.
A sorhossz is számít. Asztali gépen egy szövegsor 600-700 pixel széles is lehet. Mobilon ugyanez a szöveg sokkal rövidebb sorokba tördelődik. Ha a sortávolság túl szűk vagy a bekezdések túl hosszúak, az olvasás kis képernyőn kényelmetlenné válik. A rövid bekezdések, a bőséges sortávolság és a szekciók közötti egyértelmű szünetek mind javítják az olvashatóságot.
A címsoroknak arányosan kell kisebbedniük. Egy asztali gépen 48 pixeles H1 mobilon 28-32 pixelesen lehet megfelelő. Ha a címsorok telefonon is asztali méretűek maradnak, uralják a képernyőt, és a tényleges tartalmat a látható rész alá tolják.
Hogyan kezeld a képeket mobilon?
A képek a mobilos teljesítmény egyik legnagyobb kockázata. Az 1440 pixeles asztali monitorra tervezett, teljes felbontású kép sokkal nagyobb a szükségesnél, ha egy 375 pixeles telefonképernyőn jelenik meg. Ha ezt a képet a mobilos látogatóknak szolgálod ki, adatot pazarolsz, és jelentősen lelassítod az oldalt.
A megoldás az, hogy a különböző eszközöknek megfelelő méretű képeket szolgálsz ki. A legtöbb modern weboldalépítő ezt automatikusan kezeli: több méretet generál, és a képernyő alapján a megfelelőt szolgálja ki. Ha kézzel kezeled a képeket, azt a legnagyobb méretet válaszd, amelyen megjelennek, ne azt, amelyet a fényképezőgéped előállít.
Figyeld, hogyan vágódnak a képek mobilon. Az a széles fekvő kép, amely asztali gépen kiegyensúlyozottnak tűnik, egy magas mobilképernyőn furcsán vágódhat. A nagy nyitóképek és bannerszekciók a leggyakoribb helyek, ahol az asztali és a mobilos vágás észrevehetően eltér. A mi a weboldal sebessége cikk elmagyarázza, hogyan hat a képoptimalizálás az oldal teljes teljesítményére.
Mitől működnek jól az űrlapok mobilon?
Az űrlapok mobilon nagy súrlódási pontot jelentenek. A mezők kitöltése kis érintőbillentyűzettel nehezebb, mint a teljes billentyűzeten gépelni. Minél kevesebb mezőt teszel be, annál jobb. Minden extra mező a bosszúság lehetősége és ok a félbehagyásra.
A beviteli mező mérete számít. A mezőknek elég nagyoknak kell lenniük ahhoz, hogy pontosan rájuk lehessen koppintani, és elég szélesnek, hogy a bennük lévő szöveg olvasható legyen. A címkék a mezők fölött jelenjenek meg, ne csak helyőrző szövegként a mezőben, mert a helyőrző szöveg eltűnik, amint valaki gépelni kezd.
Állítsd be helyesen a beviteli típusokat. Az e-mail mező az e-mailes billentyűzetet hozza elő. A telefonszám mező a numerikus billentyűzetet. A dátum mező dátumválasztót nyit. Ezek apró technikai beállítások, amelyek észrevehetően simábbá teszik az élményt.
Tesztelj minden űrlapot a telefonodon: töltsd ki teljesen, és küldd el. Győződj meg róla, hogy az elküldés sikerül, és a visszaigazoló üzenet helyesen jelenik meg. Az a kapcsolatfelvételi űrlap, amely asztali gépen sikeresen elküldődik, de mobilon nem, csendben elveszíti a megkereséseket, anélkül hogy tudnál róla.
Hogyan hat a mobilbarátság a keresési helyezésekre?
A keresők először a weboldalad mobil változatát indexelik. Ez azt jelenti, hogy a mobilos élmény nem csak a mobilos látogatóknak fontos. Ez az a változat, amely meghatározza, hogyan értik meg és rangsorolják az oldaladat minden eszközön.
Az az oldal, amely rosszul teljesít mobilon, akár a lassú betöltés, a hibás elrendezés vagy az olvashatatlan szöveg miatt, a mobilon jól működő hasonló oldalak mögé kerül. Az a látogató, aki egy mobil oldalra érkezik, és azonnal elmegy, mert nem működik, egyértelmű jelet küld arról, hogy az oldal nem szolgálta ki az igényét. A mobilos látogatók magas lepattanási aránya idővel hat a helyezésekre.
A mobilos oldalsebesség külön tényező. Az az oldal, amely gyors szélessávú kapcsolaton két másodperc alatt betölt, tipikus mobilhálózaton hat másodpercnél is tovább tarthat. Az optimalizált képek, a minimális blokkoló szkriptek és a tiszta sablonszerkezet mind hozzájárulnak a gyorsabb mobilos betöltéshez. A keresőoptimalizálás teljes képéhez a mi a SEO cikk bemutatja a teljes témát, a technikai tényezőkkel együtt.
Hogyan kezeli a WEMASY a mobilt
A WEMASY weboldalépítője reszponzív sablonokat használ, amelyek automatikusan igazodnak az asztali gépekhez, tabletekhez és mobilhoz. A vizuális szerkesztő mobilelőnézetet tartalmaz, így építés közben ellenőrizheted, hogyan néz ki minden szekció kis képernyőn. A képoptimalizálást és a mobilos teljesítményt a platform kezeli, nem kell kézzel beállítanod.
Nézd meg, mi tartozik bele a WEMASY weboldalépítőbe, vagy tekintsd át a csomagokat az árak oldalon.
Gyakran ismételt kérdések
Honnan tudom, hogy a weboldalam mobilbarát-e?
Járd végig az oldaladat egy valódi telefonon. Teszteld minden oldalt, minden navigációs elemet, minden űrlapot és minden gombot. A keresők ingyenes mobilteszt eszközöket is kínálnak, ahol megadod az URL-edet, és jelzik a konkrét problémákat. A kézi végigjárás és az eszközös ellenőrzés kombinációja felszínre hozza a lényeges problémákat. A böngészők mobilelőnézete hasznos a fejlesztés közben, de nem adja vissza teljesen a valódi eszközön szerzett élményt. A WEMASY weboldalépítőjével ezt közvetlenül a saját weboldaladon beállíthatod.
Mobilbaráttá tehetek egy meglévő weboldalt újraépítés nélkül?
Attól függ, hogyan készült az oldal. A modern weboldalépítőkön készült oldalak mobilos élményét gyakran javítani lehet a sablonbeállítások módosításával, a képek átméretezésével vagy jobb sablonra váltással. Az egyedi kódra vagy régebbi platformokra épült oldalak több munkát igényelhetnek. Bizonyos esetekben egy mai platformon újraépíteni gyorsabb, és jobb eredményt ad, mint egy régebbi oldalt rendbe foltozni.
Előrébb kerül a keresési találatok között a mobilbarát weboldal?
A keresők a weboldalad mobil változatát használják elsődleges változatként az indexeléshez és a rangsoroláshoz. Az az oldal, amely jól működik mobilon, és gyorsan betöltődik telefonon, általában jobban teljesít, mint az, amelyet elsősorban asztali gépre építettek. A rangsorolási előnyön túl a mobilbarát oldal tovább tartja a látogatókat, csökkenti a lepattanási arányt, és jobban konvertál. Ezek a viselkedési jelek hosszú távon a keresési teljesítményt is befolyásolják.
Mekkora a minimális betűméret egy mobil weboldalon?
A mobilos olvashatósághoz a 16 pixeles törzsszöveg-méret a széles körben javasolt minimum. Ez alatt a szöveg nagyítás nélkül nehezen olvasható. A címsoroknak arányosan kell kisebbedniük, hogy ne nyomják el a képernyőt. A betűméret legalább 1,5-szeresének megfelelő sortávolság javítja az olvashatóságot kis képernyőn, különösen hosszabb bekezdéseknél.
Mekkorák legyenek a gombok egy mobil weboldalon?
A mobilgombokhoz a minimum 44 x 44 pixeles koppintási célméret a széles körben javasolt. Ez az ujjnak egyértelmű célpontot ad, és csökkenti a szomszédos elemekre történő véletlen koppintásokat. A gombok között is legyen elég hely, hogy az egyikre koppintást ne érzékelje a rendszer a közelben lévő elemre koppintásként. A cselekvésre ösztönző gombok legyenek nagyok, vizuálisan kiemeltek, és hüvelykujjal könnyen elérhetők, a telefon áthelyezése nélkül.