7 WordPress-tipp a mobilbarát webhelyhez

Nincs annál rosszabb, mint egy remek megjelenésű asztali webhely és egy mobilwebhely, amely nem működik megfelelően.

A legtöbb tervezési javítás egyszerű, de odafigyelést igényel, ha azt szeretné, hogy a látogatók a webhelyen maradjanak, miközben mobileszközön böngésznek.

Ez a cikk hét mobilbarát webhelyproblémát és ezek javítását emeli ki.

  • A(Are) végrehajtott módosítások nem jelennek meg a mobilon(Mobile)
  • Barátságtalan navigáció
  • Az adaptív elrendezés(Responsive Layout) hirtelen leáll
  • A képek betöltése túl sokáig tart
  • A legfontosabb tartalom nem nyilvánvaló
  • Túl sok információ
  • Adatok kis képernyőkhöz

Nem jelennek meg a mobilbarát webhelyfrissítések(Mobile Friendly Website Updates Not Showing Up)

Mostanában sok időt töltött azzal, hogy frissítse webhelyét. Jól néznek ki az asztalon, de nem jelennek meg a mobileszközön.

Az egyik leggyakoribb ok a gyorsítótár. Előfordulhat, hogy mobilböngészője webhelyének egy régebbi verzióját jeleníti meg, amelyet korábban letöltött. Egy másik ok lehet, hogy webhelye az oldal régi verzióját tartja fenn, és nem jeleníti meg a módosításokat.

Ha ez a probléma, a javított verzió letöltéséhez törölnie kell a gyorsítótárat. Egy gyorsítótár-bővítmény, például a WP Super Cache , a W3 Total Cache vagy a WP Fastest Cache segíthet megoldani ezt a problémát.

Az alábbiakban négy lépés található, amelyek segítenek a webhely gyorsítótárának és böngészőjének kiürítésében, hogy az új verzió megjelenjen a mobilbarát webhelyen.

  1. Frissítse többször a böngészőt asztali számítógépén és mobileszközén.
  2. Tesztelje webhelyét különböző mobileszközökön.
  3. Törölje webhelyét egy gyorsítótárazó beépülő modul segítségével.
  4. Érdeklődjön tárhelyszolgáltatójánál, hogy van-e másik gyorsítótárazási rendszere a szerveren, amelyet törölni kell.

Barátságtalan navigáció(Unfriendly Navigation)

Kihívást jelenthet olyan navigációs menü létrehozása, amely jól működik mobileszközökön. Ha a webhely navigációja sok elemet és almenüt tartalmaz, még bonyolultabb mindent összenyomni egy kisebb képernyőn.

Például, ha csak három vagy négy elem van a webhely navigációjában, akkor annak jól kell kinéznie mobilon. Ha azonban több eleme és almenüje van, azok egymásra helyezkednek, és zsúfoltnak tűnnek.

Az alábbiakban bemutatunk(Below) néhány módszert a probléma megoldására mobilbarát webhelyeken:

  • A navigációt mobileszközök legördülő menüjévé alakíthatja.
  • A navigációs menü megjelenítése blokkelemként, így azok függőlegesen jelennek meg.
  • Használjon átkapcsolható menüikont, hogy kevesebb helyet foglaljon.
  • Hozzon létre egy mobil navigációs menüt a jQuery segítségével.
  • Használja a Hamburger menüt (sok téma opcióként tartalmazza ezt, vagy használhat egy bővítményt( use a plugin) .)

Az adaptív elrendezés hirtelen leáll(Responsive Layout Stops Working Suddenly)

Ha mobilbarát webhelye hirtelen leáll, annak oka lehet a webhelyén található beépülő modul.

Egy új beépülő modul telepítése vagy egy meglévő beépülő modul frissítése ütközést okozhat másokkal, ami befolyásolja az adaptív elrendezést.

Kezdje azzal, hogy egyesével inaktiválja az egyes bővítményeket, hogy megnézze, ez az oka. Ne kapcsolja ki őket egyszerre, különben nem fogja tudni, melyik bővítmény lehet a tettes.

A kódmódosítások(Code) egy másik lehetséges ok. Ha véletlenül vagy szándékosan módosított egy kódot, állítsa vissza az eredeti kódbázist, és ellenőrizze, hogy a reszponzív webhely újra működni kezd-e.

Amikor webhelye mobileszközökre reagáló képességét ellenőrzi, mindig tesztelje azt mobileszközön. 

Néha úgy tűnik, hogy működik, amikor átméretezi a böngészőablakot az asztalon, de nem jelenik meg megfelelően mobileszközön.

Ha egy kódsor hiányzik egy HTML -fejlécfájlból, az megtörheti a reszponzív kialakítást. Ez az egyetlen sor hiányzó kód arra készteti a mobileszközt, hogy a megtekintett webhely teljes méretű webhely.

A megjelenített webhely akkora lesz, mint a nézetablak (a weboldal felhasználó számára látható területének mérete).

Mobilbarát webhelyének javításához adja hozzá a következő kódsort a fejléchez:

<meta name=”viewport” content=”width=device-width”>

Néha egy téma frissítésekor ez a kód eltűnhet.

A képek betöltése túl sokáig tart(Images Are Taking Too Long to Load)

A képek optimalizálása és a képfájl méretének csökkentése(reducing image file size) van értelme. A nem optimalizált nagyméretű képek lelassíthatják weboldalai betöltési sebességét. Ez frusztráló lehet a mobilfelhasználók számára.

A WordPress(WordPress) 4.4-es és újabb verziói automatikusan a szerveren lévő kép legkisebb verzióját jelenítik meg.

Ha már a WordPress legújabb verzióját futtatja , de webhelye még mindig nem töltődik be elég gyorsan, a következőket teheti:

A legfontosabb tartalom nem nyilvánvaló(Most Important Content Isn’t Obvious)

Egyes webhelyek sok felesleges tartalommal vannak feltöltve, hogy kitöltsék az üres helyet, amikor asztali számítógépen nyitják meg őket.

Általában ebbe a kategóriába tartoznak azok a webhelyek, amelyeket úgy fejlesztettek ki, hogy nem vették figyelembe a mobilfelhasználókat. Ezeknek a webhelyeknek a betöltése több időt és sávszélességet igényel.

Ha az oldalak nem megfelelően vannak kialakítva a mobileszközökhöz, akkor előfordulhat, hogy a tartalom egy része nem jelenik meg mobileszközön sok görgetés nélkül.

A weboldalon található elemek legtöbbször egyféleképpen néznek ki számítógépen, és teljesen másként mobileszközön.

Például egy három oszlopot tartalmazó árképzési oldalon ezek egymás mellett jelennek meg a számítógépen.

Mobileszközön azonban az oszlopok egymásra vannak rakva, mert kisebb a képernyő mérete. Ez a viselkedés várható.

Győződjön(Make) meg arról, hogy az ártáblázat a legfelső pozícióban van a weboldalán, hogy mobileszközön tekintve először jelenjen meg. Ha sok szöveg van a táblázat fölött, a mobilfelhasználóknak le kell görgetniük, hogy lássák, de lehet, hogy nem.

A legoptimálisabb mobilfelhasználói élmény érdekében a legkritikusabb tartalmakat helyezze az oldal tetejére. Ha egy felhasználónak sokat kell görgetnie ahhoz, hogy megtekinthesse a tartalmat, valószínűleg nem.

Túl sok információ(Too Much Information)

A bonyolult felhasználói felület elemekkel, például táblázatokkal, többlépcsős űrlapokkal és speciális keresési funkciókkal rendelkező webhelyek rossz mobil felhasználói élményt eredményezhetnek.

Ezek az elemek túl sok információt tartalmaznak, ami zsúfolhatja a mobil képernyőjét, és akadályozhatja a felhasználót abban, hogy megtalálja a kívánt információt.

Az egyik módszer bizonyos tartalmak eltávolítása vagy elrejtése a mobilfelhasználók elől. Ez azonban nem ideális megoldás azoknak a látogatóknak, akik hozzá szeretnének férni ezekhez az elemekhez.

A probléma elkerülése érdekében a lehető legjobban optimalizálja mobilbarát webhelyét. Ezenkívül távolítsa el a szükségtelen elemeket, miközben webhelye alapvető szerkezetére összpontosít.

Adatok kis képernyőkhöz(Data For Small Screens)

A sok sort és oszlopot tartalmazó összetett táblázatok problémát jelenthetnek kis mobilképernyőn. A legjobb megoldás a reszponzív táblázatok használata.

Egy beépülő modul, például a WP Responsive Table ezt könnyen megvalósíthatja.

A fenti ártáblázathoz hasonlóan, ha mobileszközön nézi, az oszlopok egymásra halmozódnak, hogy elférjenek a kisebb képernyőn.

Az adatok mobileszközökön való megjelenítésének egyéb módjai a következők:

  • Kisebb táblázat létrehozása a rács elrendezése nélkül, hogy elkerülje a vízszintes görgetést.
  • Az asztal oldalára állítása, hogy jobban elférjen egy kisebb képernyőn.
  • A nagyobb táblázatok cseréje kisebbekre, amelyek a teljes verzióra hivatkoznak.
  • Táblázatok konvertálása kördiagramokká.

Mivel a mobilhasználat exponenciálisan növekszik, elengedhetetlen, hogy az üzleti webhelyeket mobilbarát verziókkal optimalizálják. Fokozza(Enhance) a felhasználói élményt a funkcionalitás feláldozása nélkül a fenti lépések követésével.

Ezenkívül mindig figyelnie kell webhelye teljesítményét, és szükség esetén módosítania kell a teljesítmény és a felhasználói élmény javítása érdekében.



Géza Magyar

About the author

Számítógépes technikus vagyok, és több mint 10 éves tapasztalattal rendelkezem ezen a területen. Szakterületem a Windows 7 és a Windows Apps fejlesztése, valamint a Cool Websites tervezése. Rendkívül járatos és tapasztalt vagyok ezen a területen, és értékes eszköz lennék minden olyan szervezet számára, amely vállalkozását bővíteni szeretné.


Related posts