Ingyenes eszközök webhelyed mobilos verziójának ellenőrzésére

Így ellenőrizd webhelyed mobilos verzióját ingyenes eszközökkel

A következő bejegyzésben különböző módszerekről olvashatsz, amelyekkel ellenőrizheted saját mobilos webhelyed állapotát. A cikk végére te is tudni fogod, hogy hogyan teszteld mobilos webhelyed kulcsfontosságú elemeit, és hogy hogyan javítsd ezek alapján seo-dat!

Használd saját telefonodat mobilos webhelyed tesztelésére

Nyisd meg telefonod böngészőjét, és látogass el webhelyedre. Nézd meg, hogy hogy mutat. Erre a tippre nem is számítottál, ugye? Sok cégvezető soha nem is gondol erre. Kifizetnek egy rakat pénzt egy mobilos webhelyért, de sosem néznek rá, miután a designer bemutatja nekik a látványtervet. Vess tehát rá egy pillantást, és nézd meg, hogy mi hiányzik róla, illetve hogy milyen a teljesítménye.

A következőket ellenőrizd mobilos webhelyeden:

1. Fő feladatok: Győződj meg róla, hogy a látogatók azonnal meg tudják találni rajta a legfontosabb oldalakat. Kérdezz meg embereket, hogy mit gondolnak webhelyed használhatóságáról. Barátaid és családtagjaid biztosan szívesen segítenek majd ebben.
2. Cím és telefonszám: Az emberek gyakran arra használják az üzletek webhelyeit, úti célt állítsanak be navigáció rendszerüknek. Ha azt szeretnéd, hogy ügyfeleid megtalálják fizikai boltodat, akkor tüntesd fel a címét. Ha azt akarod, hogy az emberek felhívjanak, akkor ez lesz mobilos webhelyed fő felhívása (CTA). Tedd kattinthatóvá!
3. Egy működőképes menü és keresőfunkció: A hamburgermenük hasznosak, hiszen helyet lehet megtakarítani velük, de figyelj oda rá, hogy kinyíljanak. Helyezz el egy keresőt is a menün kívül.
4. Mobildesign és felhasználói élmény: Győződj meg róla, hogy mobilos webhelyed nem az asztali webhelyed, egy kis képernyőre összenyomva, mindenféle reszponzív átméretezés nélkül. Ne felejtsd el megnézni, hogy nem-e kapcsoltad be a böngészőben, hogy mindenképpen az asztali oldalt mutassa a mobilos helyett. Ezen kívül ellenőrizd azt is, hogy mobilos webhelyed ugyan azt a tartalmat kínálja-e, amit asztali webhelyed.
5. Gombok és hivatkozások: Győződj meg róla, hogy könnyen észrevehetők legyenek, és elég nagyok, hogy rájuk lehessen koppintani.
6. Olvashatóság: Egy kis képernyőről olvasni nem egyszerű dolog, tehát biztosíts megfelelő tipográfiát webhelyedre.
7. Teljesítmény: Milyen a webhely sebessége? Mi a helyzet az oldalélménnyel?

Fontos észben tartani, hogy különböző telefonokon más és másféleképpen jelenik majd meg webhelyed. Pontosan ezért fontos, hogy többféleképpen is ellenőrizd mobilos webhelyedet, és rátalálj a hibáira.

A Google mobilbarát tesztje

A mobilbarát jelleg rangsorolási szempont a Google szemében. 2020-ban egy mobil-első kialakításra kell törekedni. A Google ehhez egy hasznos ellenőrzőeszközt is készített, amin keresztül megnézheted, hogy a Google hogyan látja webhelyed oldalait. A Bing szintén előállt a saját mobilbarát-ellenőrzőjével.

Így néz ki egy nem mobilra optimalizált webhely teszteredménye. | Forrás: Yoast

 

A Google mobilbarát-ellenőrzőeszköze megmutatja, hogy hogyan jelenik meg webhelyed egy mobilkészüléken. Ha az előnézet úgy néz ki, mint a fent látható képen, akkor bőven van még mit dolgozni rajta. Még akkor is, ha a Google azt mondja, hogy webhelyed mobilbarát jellegű. Ne felejtsd el, hogy ez egy automatikus ellenőrzést. A legjobb, ha saját magad ellenőrzöl mindent, amit ebben a cikkben olvasol, hogy biztosan ne kerülje el semmi a figyelmedet. A józanész gyakran sokkal értékesebb, mint amit a google mond!

 

Webfejlesztő eszköztár

Mobilos webhelyedet közvetlenül a böngésződben is tesztelheted, ha google Chrome-ot használsz. Kattints bárhová az oldalon, majd válaszd a Vizsgálat opciót. Egy másik lehetőség lenyomni a CTRL + SHIFT + I billentyűkombinációt, vagy a menüből a További eszközök > Fejlesztői eszközök opciót választani. Ez után kattints a második ikonra a menüsávban, vagy nyomd le a CTRL + SHIFT + M billentyűkombinációt.

A különféle böngészők hasznos fejlesztői eszközeivel általában a reszponzív designt is ellenőrizheted.| Forrás: Yoast

 

Ez a képen látható módon nyitja majd meg a webhelyet. Az előnézet felett többféle méretet is kiválaszthatsz a megjelenítéshez.

 

A Firefox böngésző is kínál hasonló funkciót: a fejlesztői eszköztár szintén a CTRL + SHIFT + I billentyűkombinációval nyitható meg, a reszponzív előnézet pedig ez után a CTRL + SHIFT + M billentyűkombinációval.

 

Ha például kiválasztod, hogy az előnézet egy iPhone készüléken „jelenjen meg”, és azt látod, hogy webhelyed lekicsinyített mását ábrázolja, akkor tudni fogod, hogy nem mobilbarát kialakítású.

 

A teljesítmény ellenőrzése

A mobilbarát jelleg ellenőrzéséhez nem elég megnézni, hogy mobilos webhelyed megfelelően jelenik-e meg egy böngészőben – a teljesítménynek szintén fontos szerepe van. Ha tehát szeretnéd sikerre vinni mobilos webhelyedet, akkor a teljesítmény elsődleges prioritású kell, hogy legyen.

 

Erre szintén többféle eszközt is használhatsz, amelyek rálátást nyújtanak webhelyed teljesítményére. Egy ilyen eszköz a Google web.dev Measure. Csak add meg neki az url-t, és kattints a Run Audit gombra.

Ha ilyen pontszámokat látsz, akkor sok dolgod lesz webhelyeddel.| Forrás: Yoast

 

Az eszköz megjelenít néhány mutatót, illetve tippet, hogy hogyan javítsd pontszámaidat. Nézd végig a tanácsokat és gondolkodj el rajta, hogy mit tehetnél mobilos webhelyed javítása érdekében. Ezen kívül használd a Google PageSpseed Insights eszközét is, ami részletes jelentést kínál majd webhelyed mobilos verziójának sebességéről.

 

A mobilos webhely ellenőrzése: Összefoglalva

Ha szeretnél tippeket kapni arról, hogy hogyan javíthass mobilos webhelyed teljesítményén, akkor kattints a „Részletek megjelenítése” kifejezésre a Google mobilbarát tesztelőjében. Olyan konkrét dolgokra is figyelj oda, mint a legfontosabb feladatok elvégzésének egyszerűsége, vagy a gombok mérete.

 

Írta: Mocsonoky Csaba | A cikk forrása eredetileg angol nyelven jelent meg a Yoast-com-on: https://yoast.com/diy-test-mobile-site/

Megosztás: