Hogyan legyen mobilbarát weboldalad?

Frissítve: 2021-07-13
WhitePress - mobilbarát weboldal
Húsz évvel ezelőtt senki se gondolta volna, hogy a legtöbb ember mobiltelefonon tölti majd be a weboldalakat. Senki sem tudta, mi az az okostelefon, talán Steve Jobs, kivételével. Amikor 2007-ben bemutatták az első iPhone-t, a dolgok változni kezdtek. Az idő múlásával az emberek egyre kényelmesebbnek érezték a mobilhasználatot, a felhasználói szokásokra reflektálva a piaci kínálat is megváltozott.
Publikálj cikkeket ma
Regisztrálj ingyenesen!

Ennek eredményeként az asztali számítógépek és laptopok helyett ma már a hordozható okoseszközöket használjuk gyakrabban a legelemibb keresésekhez is. Éppen ezért akinek weboldala van, annak magától értetődő preferenciája, hogy az mobilbarát legyen.

Mi az a mobilbarát weboldal?

A mobilbarát weboldalt okostelefonokon és táblagépeken lehet megtekinteni, mégpedig megalkuvás nélkül, azaz:

  • A weboldal kialakításának felhasználóbarát módon kell illeszkednie a tabletek és okostelefonok méreteihez.
  • A gyors oldalbetöltés alapvető kritérium, hiszen a hordozható okoseszközöket 4G és 5G – korábban 3G – kapcsolaton keresztül használjuk a lokális/otthoni Wifi és LAN-kapcsolatra is alkalmas laptop és desktop helyett.

Hogyan állapítható meg, hogy mobilbarát-e a weboldalunk?

Ha az elmúlt években indítottuk el a weboldalt, nagy valószínűséggel már mobilbarát.

  • Az új tartalom- és ügyfélkezelő CRM rendszerek alkalmazkodnak a mobilbarát kritériumokhoz, és gondoskodnak arról, hogy a weboldalak minden modern eszközön jól működjenek.
  • A Wordpress, Magento, UNAS és egyéb újabb platformokon elérhető sémák és sablonok képesek adaptálódni a különböző nagyságú kijelzőméretekhez.

A reszponzivitás önmagában azonban nem elegendő, főleg a legújabb Google algoritmus és a Core Web Vitals mutatók követelményeinek fényében.

Annak megállapítására, hogy a weboldalunk megfelel-e a legújabb követelményeknek több lehetőségünk is van:

  • El kell olvasni az általunk használt platform sablon dokumentációs fájljait.
  • Több különböző hordozható okoseszközről is betöltjük az oldalt, így azonnal kiderül, hogy az eltérő kijelzőmérettel rendelkező tableteken, okostelefonokon és inetrnetkapcsolatra, böngészésre is alkalmas e-book olvasókon ugyanolyan fitten töltődik-e be az oldal, és hogy minden funkciója akadály- és kompromisszummentesen használható-e.

A Google eleve biztosít egy online, oldalbetöltés sebességet mérő platformot – (PageSpeed Insights) a weboldalak számára. Pusztán az domaint, vagy az aloldalak hivatkozását kell a keresőbe illeszteni.

A kapott eredmény alapján megállapítható például, hogy:

  • Milyen gyorsan tölt be az oldal,
  • Melyek azok a struktúrák, amik lassítják az oldalbetöltést,
  • Milyen gyorsan képes a felhasználó interaktív kapcsolatba lépni az oldallal.
  • Az eredményeken kívül javaslatot kapunk arra, hogy javíthatunk az egyes struktúrákon, pl.:
  • CSS és JavaScript formátumok minimalizálása,
  • Vizuális elemek – képek, videók – paraméterezése,
  • Harmadik forrásból származó dinamikus tartalmak pl. hirdetések – paraméterezése.

Tovább finomítva a tesztet, egy másik, kifejezetten a mobilbarát jelleget vizsgáló platformon is megfuttahatjuk az oldalt.

Itt az eredmény mellett egy tartalomtípust/formátumot, URL-t és hibajegyet tartalmazó listát kapunk azokról a struktúrákról, amik nem töltődtek be.

  • Például : Template-Kép-Átirányítási hiba

Egy másik lehetőség a GTmetrix használata.

A platform az URL beillesztéssel teszteli az adott oldalt, azaz nem csak annyit tudunk meg, hogy mobilbarát-e a weboldal, hanem jelentéseket kapunk a webhely teljesítményéről, felépítéséről is, valamint azonosítja a gyenge pontokat.

A kapott jelentés lehet az optimalizálási folyamat kiindulópontja.

Hogyan optimalizálható a weboldal mobilra?

Tökéletes weboldal nincs. A SEO sosincs kész, mindig van mit optimalizálni. Kell is, hiszen a marketingtendenciák, és a felhasználói igények folyamatosan változnak, nem is beszélve az újabb és még újabb keresőalgoritmusokról. A SEO azonban éppen ettől szép, és hatékony: bármilyen elvárásnak képes megfeleltetni egy adott oldalt.

Persze, ha egy olyan webodllaról van szó, ahol a legelemibb, metaszintű optimalizálás sincsen készen, ott az alapoktól kell kezdeni. A jó hír viszont, hogy ha egyszer ezzel elkészültünk, a szintentartás már jóval egyszerűbb és könnyebb. A befektetett idő, energia és munka gyümölcse pedig az egyre jobb rangosorolás. Tekintve pedig a bevezetőben említetteket, a weboldalak mobilra optimalizálásának feladatát nem tologathatjuk többé magunk előtt.

Nézzünk most néhány egyszerű módszert a weboldal mobilos optimalizálására.

Egyszerű, letisztult sablon

Sajnos sokan gondolják még mindig azt, hogy a csilivili webdizájnnal több látogatót vonzanak az oldalukra. Nos, ha van valami, ami azonnali visszafordulási kényszert vált ki a felhasználóból, az a hiperszínes, ultradinamikus, agyonanimált, és túlságosan részletgazdag felület.

Desktop nézetben is zavaró, pedig ott nagyobb kijelző miatt kényelmesebb a szemnek. A mobileszközök kisebb kijelzőjén viszont fárasztja a szemet, terheli az idgerendszert, és a rengeteg vizuális információ miatt nehezebb navigálni is.

Adaptív témák használata

Olyan témát használjunk, ami valóban fitten alkalmazkodik az okoseszközök méreteihez, véglegesítés előtt tehát ellenőrizzük ne csak destop, de mobil és tablet nézetben is.

Használjunk mobil menüket

A szokásos weboldal menük nem megfelelőek a mobileszközökhöz. A mobilmenü elrejti az összes elemet egy widgetbe, ami csak akkor jelenik meg, amikor a felhasználó a Menü ikonra koppintva úgy dönt, hogy megjeleníti azt.

A WordPress platformon könnyedén létrehozhatunk, az oldalbetöltés sebességét és szem előtt tartó mobil menüket ingyenes, beépülő modulokkal. Ilyen pl. a Responsive Menu plugin, ami lehetővé teszi a színek, ikonok megváltoztatását, és a menüpontok könnyű hozzárendelését.

Használjunk szabványos betűtípusokat

Ahogy a kezdő írók, úgy a weboldalkészítésben járatlanok is hajlamosak valóban esztétikus, ám cirádás, egyéni színkóddal ellátott betűtípusokat használni. A nem szabványos betűtípusok azonban ugyanúgy lassítják az odalbetöltést, mint egy túlméretezett kép. Emiatt látogatókat, potenciális vásárlókat veszíteni, kapitális baklövés.

Támogatott, mobilbarát klasszikus és új betűtípusok például:

  • Törzsszöveghez:
    • Arial,
    • Open Sans,
    • Verdana,
    • Helvetica,
    • Quicksand,
    • Karla,
    • Roboto.
  • Címsorokhoz:
    • Monserrat,
    • Neue,
    • Tisa,
    • Rooney.

Használjunk média lekérdezéseket

A média lekérdezések egy speciális CSS technika, amelyet a mobilbarát webhelyek tervezésénél használnak. Lehetővé teszik webhelye megjelenésének adott képernyőre történő megváltoztatását.

Ennek a technikának a használatával konkrét elemeket jeleníthetünk, vagy tüntethetünk el teljesen, például:

  • Az óriási kezdőkép jól mutat desktopon, mobilon viszont beteríti a kijelzőt, és görgetni kell a lényegi információk eléréséhez. A képet tehát célszerű méretpontosan beállítani, vagy teljesen kiiktatni a mobilnézetből.
  • A Címsor2 (H2) kiemelésnek ugyanúgy fitten kell illeszkednie a mobilfelülethez.

Ezt a következő média lekérdezéssel lehet érvényesíteni forráskód nézetben:

@media only screen and (max-width: 600px) {

h2 {

font-size: 20px;

}

}

A képfájlok optimalizálása

Egyetlen nem optimalizált kép használhatatlanná teheti a weboldalt. Ezért érdemes 100kB-ban maximalizálni a kép nagyságát. A speciális beépülő pluginok, pl. ShortPixel, tömörítik és optimalizálják a már feltöltött képeket az egész webhelyen.

A képek előzetes, feltöltés előtti optimalizálásához online eszközöket is giénybevehetünk. Ilyen pl. a Kraken, amivel a mobilbarát kimeneti minőségen is változtathatunk.

A szövegtörzs tördelése

Minél hosszabb egy bekezdés, minél tagolatlanabb egy szöveg, annál nehezebben olvasható. Természetesen nem kell feleslegesen címsorokat hozzáadni, de a szöveg tagolásáról ne feledkezzünk meg. Akár blank helyek meghagyásával tegyük szemnek kellemesebbé és szellősebbé, hogy mobilfelükleten is könnyebben olvasható legyen.

Az űrlapok használata

Mivel nemcsak olvasunk, hanem vásárolunk is a mobilról, az űrlapok kisebb felületen történő fitt megjelenítése kiemelten fontos. Minél átláthatóbbá, értelmezhetőbbé és könnyebbé kell tenni a rendelés, vásárlás, fizetés folyamatát. Itt már effektíve vásárlókat veszítünk, ha bárhol is fennakadás történik.

A pop-up ablakok eltüntetése

Bár egyes esetekben lehet értelme a pop-up ablakok használatának, a mobilverziókból tüntessük el azokat. Az emberek figyelmének előterébe tolakodó pop-up olyan, mintha minden előzmény nélkül beleordítanánk a látogató arcába. Nem csak zavaró, de egyenesen frusztráló.

A speciális ajánlatainkat tehát ne pop-up formájában adjuk hírül. A látogató partnerként való kezelése pl. a hírlevél-feliratkozásra való ösztönzés, udvarias és egyben hatékony gesztus. Ha mindenképpen ragaszkodunk az azonnali információ átadáshoz, akkor használjunk inkább integrált Chatbotot, ami az oldal aljára görgetéskor aktiválódik.

Az oldalon való keresés lehetősége

A nem mobilbarát oldalak egyik közös jellemzője, hogy teljességgel hiányzik a szabadszavas kereső. Ez egy kontraproduktív metódus. Bármilyen jó a webhely struktúrája, lehet “oltári menő” a menürendszer, a mobilos felületen történő navigáció összetettebb, mint PC-n.

A szabadszavas kereső megadja a lehetőséget arra, hogy a látogató a saját igényeinek megfelelően hajtsa végre a keresést és megtalálja azokat az információkat, termékeket, amik valóban érdeklik.

A kapcsolat menü

Mobilon mindig lehetőséget kell adni a látogatónak arra, hogy azonnal kapcsolatba léphessen velünk, mindezt úgy, hogy ne kelljen visszaléppegetnie a kezdőoldalra, vagy a menüben keresgélnie. A kapcsolat menünek – email cím és telefonszám - minden aloldalon láthatónak és elérhetőnek kell tehát lennie.

Mobilapplikáció, vagy mobilbarát weboldal?

A mobilappilikációk a weboldal kifinomultabb változatai. Alapértelmezetten gyorsabb betöltést, plasztikus beállítási lehetőségeket, jobb felhasználói élményt ígérnek.

Igen, gyakran valóban csak ígérnek.

A mobilalkalmazás lefejlesztése, tesztelése, élesítése, a bugok kijavítása gyakran több időt és erőforrást - pénz, szakértők - emészt fel, mint a weboldal mobilra optimalizálása. Az applikáció létrehozása leginkább olyan oldalak esetében racionális döntés, amiknek magas a látogatottsága és jelentős profitot termelnek.

Összegzés

Aki 2021-ben indít weboldalt, egyszerűen nem feledkezhet meg a mobiloptimalizálásról. A jövő internetes kereskedelme áthelyeződött a mobilfelhasználók kezébe, ezért a SEO trendek követése elengedhetetlen, függetlenül attól, hogy milyen platformot használunk.

  • Szerző: Tóth-Czere Péter

    Tartalommarketing és SEO szakértő

    www.thecoffeebreak.hu

    Tartalommarketing és SEO szakértő, a CoffeeBreak Consulting digitális marketing ügynökség és szakmai blog alapítója, ahol a marketing stratégiák kialakítása és megvalósítása mellett business és productivity tréningeket is tart. Elsődleges szakterületei a tartalommarketing, keresőoptimalizálás, közösségi média management és a growth hacking. Számos ügyfele volt hazai és nemzetközi közép- és nagyvállalati szegmensekből, kiemelten foglalkozik eCommerce oldalak tervezésével, illetve teljes körű marketingjükkel. Szabadidejében pedig a KV Szünet Podcast adásait bővíti.

Hozzászólások (0)
A WhitePress szerkesztõi fenntartják a jogot, hogy más emberek számára sértõ megjegyzéseket töröljenek, amelyek vulgáris szavakat tartalmaznak, vagy nem kapcsolódnak a tárgyához.

Személyes adatait a WhitePress Kft, 2161 Csomád, Verebeshegy utca 11., Magyarország, 26768142-2-13 kezeli. A felhasználói fiók regisztrációja során megadott személyes adatai a kiválasztott szolgáltatás biztosítása érdekében szükségesek. A kiválasztott szolgáltatás feltételeinek elfogadásával Ön hozzájárul az elektronikus kommunikációs eszközökön, különösen e-mailen keresztül történő tájékoztatáshoz, mely a szolgáltatás megvalósításának állapotát, valamint a WhitePress Kft. platformján időközben megjelenő változtatásokat és új funkciókat hivatott közölni. A személyes adatok kezelésének alapja a a GDPR 6. cikk (1) bekezdés b) pontja és 6. cikk (1) bekezdés f) pontja. Az adatok marketing célú feldolgozására adott engedély alapján a WhitePress Kft. időközönként telefonon (a hozzájárulástól függően) vagy e-mailben értesíti Önt a jövőbeli konferenciák, tréningek, rendezvények, valamint egyéb marketinginformációkkal kapcsolatosan. A személyes adatok ezzel kapcsolatos kezelésének alapja a GDPR 6. cikk (1) bekezdés a) pontja. A személyes adatok kezeléséről bővebb információt az Adatvédelmi szabályzatunkban talál.

Olvass tovább
  • Még senki sem írt megjegyzést ehhez a cikkhez.

Személyes adatait a WhitePress Kft, 2161 Csomád, Verebeshegy utca 11., Magyarország, 26768142-2-13 kezeli. A felhasználói fiók regisztrációja során megadott személyes adatai a kiválasztott szolgáltatás biztosítása érdekében szükségesek. A kiválasztott szolgáltatás feltételeinek elfogadásával Ön hozzájárul az elektronikus kommunikációs eszközökön, különösen e-mailen keresztül történő tájékoztatáshoz, mely a szolgáltatás megvalósításának állapotát, valamint a WhitePress Kft. platformján időközben megjelenő változtatásokat és új funkciókat hivatott közölni. A személyes adatok kezelésének alapja a a GDPR 6. cikk (1) bekezdés b) pontja és 6. cikk (1) bekezdés f) pontja. Az adatok marketing célú feldolgozására adott engedély alapján a WhitePress Kft. időközönként telefonon (a hozzájárulástól függően) vagy e-mailben értesíti Önt a jövőbeli konferenciák, tréningek, rendezvények, valamint egyéb marketinginformációkkal kapcsolatosan. A személyes adatok ezzel kapcsolatos kezelésének alapja a GDPR 6. cikk (1) bekezdés a) pontja. A személyes adatok kezeléséről bővebb információt az Adatvédelmi szabályzatunkban talál.

Olvass tovább
Kiemelt cikkek