Menü

Responsive weboldal

2015 óta, amikor is megjelentek az első böngészők amelyek hatékonyan tudták kezelni a responsive media CSS szabályokat, szinte a Google is azonnal ellenőrizni kezdte, hogy egyes weblapok mennyire mobil barátak.  Már ez már nem opció egy weboldalnál, hanem kötelező elvárás egy weblaptól illetve webfejlesztő cégtől, hogy olyan weboldalakat fejlesszen amely kényelmesen használhatóak mobil felületeken is. Erről tudni kell, hogy ez a feladat nem magától értetődő, egy egyedi weboldal fejlesztésekor, az idő nagy részét teszi ki az, hogy az egyes weblap elemek ne csak asztali de táblagépen és mobilon is jól jelenjen meg.

Általában ha valaki vásárol egy template-et vagy már jól bejáratottat használ azokkal a responsive design együtt jár, tehát már a vásárláskor kifizetjük ennek árát. Azonban egyedi Arculat tervezéskormobil design is egyedi lesz, amelyet a fejlesztéskor kell meghatározni és folyamatosan ellenőrizni.

De mit is jelent az, hogy mobilbarát egy weboldal?

Egy responsive weboldal (magyarul: reszponzív weboldal) mindenképpen mobilbarát, de nem minden mobil barát weboldal responsive. Tehát lehet egy weboldal attól még jól olvasható mobilon, hogy nem kezeljük speciális elemeket másképp, hanem hagyjuk, hogy a böngésző maga megoldja azt.

Legjobb példa erre, a bekezdések. Ha a böngészőnek nem mondjuk meg sosem, fixen egy terület szélességét, hanem mindig relatív szélességben számolunk, akkor amikor egy szerű statikus html weboldalt megnyitunk a mobilon is tökéletesen olvasható lesz, mert a böngésző a saját méreteihez igazítja a szöveget azonnal így minden beavatkozás nélkül működni fog.

Profi weboldalak tervezése és kivitelezése egyedi designnal és grafikával
Kérjen ingyenesen árajánlatot személyre szabva!


Árajánlatot szeretnék kérni...

Azonban ha már bizonyos elemeket meg kell jeleníteni vagy eltüntetni attól függően, hogy mobilon vagy böngészőben nézzük és ráadásul különböző JavaScript kódokat is kell futtatni, ekkor már egy egyszerű mobil barát oldal nem elegendő.

Ez a valóságban nagyjából így néz ki:

  • Responsive weboldal

Látható a felső menü módosítása Mobil és asztali gépeken. Azért, hogy a menü ne zavarja minden oldal betöltéskor a felhasználókat, ne kelljen folyamatosan legördíteni és az értékes tartalmat láthassa a felhasználó, a menüt elrejtettük és 1 gombnyomásra jelenik csak meg.

Mobilbarát teszt

Felmerül a kérdés, hogy lehet-e egyszerűen ellenőrizni, hogy weboldalunk mobilbarát-e. Természetesen igen, a Google alkotott egy teszt eszközt a Webmester eszközök rendszeren belül, ahol ellenőrizni lehet, hogy egy adott weboldal megfelel-e a mobil kinézet szabályainak. 

https://search.google.com/test/mobile-friendly?hl=hu

A fenti linkre kattintva lehet ellenőrizni weblapunkat, sikeres eredmény esetén szép zöld képet kapunk.

  • Mobilbarát weboldal

Mobil SEO

A Mobil témában nagyon érdekes kérdés még a mobilra optimalizált SEO. Már tudjuk, hogy a Google 2020-tól elsődlegesen a Mobil Robotok eredményét veszi figyelembe a SERP rangsorokhoz, így mindenképp figyelmet érdemel a téma. Ami a mobilok esetében nagyon kényes téma a lap betöltési sebesség. A mobilok jelenleg kevésbé nagy teljesítményű eszközök, mint asztali társaik, így azokra több időt kell fordítani. Manapság sajnos több ingyenes vagy nem ingyenes Wordpress plugin-nal találkoztunk, amelyek általában elmondhatók, hogy nagyon rossz hatékonyságúak Mobilon. Page Speed pontjuk a 10-et sem érik el.

Mivel már a lap betöltési sebesség is rangsor, így sok weboldalt érzékenyen érinthetett ez a módosítást, sajnos ezeket a problémákat egy Weboldal Admin nem tud orvosolni, mivel nem tud esetlegesen programozni, vagy nem lehet egyáltalán módosítani a szerzői jogok miatt a template-et. Emiatt az egyedi weblapok igen nagy előnyt élveznek, ha azok jól meg vannak csinálva!.

A másik nagyon érdekes és nagyon fájó pont, ami ugyancsak a lap sebességet is befolyásolja a képek. Nagy képek letöltése nehézkes és lassú, ezt pedig Responsive Képekkel és azok helyes megjelenítésével lehet megtenni. Ezt a témát már egyszer érintettük a képek kezelése blogunkban. 

Feleslegesen ne tegyük bele a generált HTML kódba a weboldalunkat szövegeit többször csak amiatt, hogy egyik csak a mobilnak szól, míg a másik csak az asztali gépnek. Ez lassítja az oldalt, duplikálunk és nehéz karban is tartani. Inkább készítsünk egy mobil aldomain-t és oda irányítsunk, minthogy valamit többször adunk vissza.

Ha ezeket szem előtt tartjuk a fejlesztés során a Keresőoptimalizálási beállítások, biztosan jók lesznek.


Kapcsolat

Amennyiben érdeklik megoldásaink, kérjük ne habozzon lépjen velünk kapcsolatba és írja meg nekünk, milyen elképzelése van.