Hogyan legyen mobilbarát weboldalad?
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.