Miért fontos a mobilbarát weboldal?

A mobiltelefonok évek óta tartó rohamos terjedésével és a telefonok méretnövekedésével és a mobilinternet gyorsulásával egyre fontosabb lett, hogy a weboldalaknak legyen mobilra optimalizált változata. Ez keresőoptimalizálás szempontból is plusz tennivalókkal és beállításokkal jár, így természetesen a seo auditnak is szerves részét kell képezze ennek a vizsgálata.

Milyen a jó mobil weboldal keresőoptimalizálás szempontból? Röviden, ami egyszerű, letisztult, könnyen áttekinthető, gyors, amit szeretnek az emberek. Ha ilyenre csinálod, akkor a google is szeretni fogja az oldalad.

Mobilváltozat a google keresőben

A google 2015 áprilisi algoritmus frissítése óta a találati lista sorrendjének a meghatározásában fontos elem lett, hogy a weboldal mobilra optimalizált-e, vagy van-e mobil változata. A google az embereket követi és megpróbálja a lehető legrelevánsabb találati listát összeállítani a keresésre.

A mobilbarát weboldal fontosságát mutatja az alábbi statisztika is, ami a megveszlak.hu asztali és mobil látogatóinak arányváltozását mutatja:

asztali és mobil forgalom a megveszlak.hu-n

Milyen tecnikai megoldásokból választhatsz a kialakításnál?

A mobilra optimalizált weboldal készítésénél alapos tervezés kell megelőzze a programozói munkálatok megkezdését. Azt kell először eldöntened, hogy minden tartalmat meg akarsz-e jeleníteni mobil változaton is, vagy csak egy részét. Nem érdemes például nagyobb táblázatokat megjeleníteni mobilon. Ezután el kell dönteni, hogy milyen megoldást választasz a mobil tartalom megjelenítésére. Itt három irányzat közül választhatsz:

  1. Reszponzív webdizájn. A tartalmi elemek mérete igazodik a böngésző méretéhez. Ebben az esetben legtöbbször százalékos arányokkal vannak megadva a méretek. Többféle népszerű keretrendszer is segíti a munkálatokat, mint pl. a Bootstrap.
  2. Dinamikus tartalom kiszolgálás. A weboldal kiszolgáló szerver azonosítja a mobil, vagy asztali változatot és ettől függően különböző HTML kód változatot szolgáltata a böngészőnek. Például az ASP.NET fejlesztői keretrendszer által biztosított megoldás, ahol külön mobil oldal készíthető: index.cshtml és index.Mobile.cshtml.
  3. Teljesen elkülönített mobil oldalak. Ennél a megoldásnál külön url-en elérhető a mobil változat, amit megoldhatunk külön almappába helyezett fájlokkal (peldaoldal.hu/mobil/fooldal), vagy aldomainnel (m.peldaoldal.hu/fooldal), vagy akár külön domain vásárlásával is (peldaoldal.mobile vagy mobiloldal.hu).

A legfontosabb szempontok mobilra optimalizáláskor

A layout (elrendezés)

Asztali változatnál a legnépszerűbb megoldások közé tartozik a több hasábos elrendezés. A mobil változatnál a sokkal kisebb képernyő miatt, még ha a telefonok felbontása egyre nagyobb is, ez nem szerencsés. Törekedj az egy hasábos megoldásra. A vízszintes scrollozás teljesen kerülendő.

aszatli és mobil elrendezés

Menük

Mobil változaton nem célszerű a több szintű lenyíló menük használata. A legáltalánosabb megoldás, a képernyő jobb felső sarkában elhelyezett 3 csíkot tartalmazó, úgynevezett hamburger menü ikon, amire kattintva beúszik a menüpontok képernyője. Kutatások bizonyították, hogy a “Menü” szöveg kiírása nincs jó hatással a menü használatára. Az elérhetőséget és a főbb menüpontokat érdemes megismételni az oldal alján is.

Gombok, linkek

Az asztali változattal ellentétben mobilon nincs egérmutató, amivel tű pontosan rá lehet kattintani a gombokra, ezért mobilon legyenek nagyobbak a gombok, hogy egy vastagabb újjú felhasználó is könnyen rá tudjon kattintani. A különböző tooltip-ek és hover dizájnok teljesen feleslegesek és csak lassítják a betöltődést.

Linkeknél és gomboknál is arra kell figyelni, hogy két link, vagy gomb ne legyen túl közel egymáshoz. A webmester eszközök jelzi is az ilyen hibát.

Szövegek

A mobil képernyő korlátozott, ezért a betűméret nagyon fontos. A kisebb betűméret zavarhatja a felhasználó szemét, és több időbe telik az olvasás, míg a nagyobb betűméret túl nagy helyet foglal a képernyőn. Általános szöveghez javaslom a 12-14 pixel méretet, címsorokhoz pedig a 16-18 pixelt. A szövegeknél figyelj arra is, hogy az elemek és az oldalszélek mellett legyen elég köz (padding, margin).

Képek

Mobilon használj kisebb méretű és optimalizált képeket és csak annyit, amennyi szükséges. Persze képek nélkül elég sivár lenne a weboldal. A hajtás alatti tartalom képeit lazy loading-gal töltse be az oldal.

Sebesség

A wifi terjedésével egyre több helyen elérhető menet közben is a gyorsabb internet, de azért még nagyon sokszor 3G és 4G hálózatokon internetezik mobiltelefonon, így még sokkal fontosabb a tartalmak betöltődésének az optimalizálása. A legfontosabb sebesség növelő megoldások:

  • Kisebb méretű képek
  • Kevesebb kép
  • Optimalizált képek
  • Kis képek összevonása egy nagyba (request-ek számát csökkenti)
  • Javascript és css fájlok összevonása (request-ek számát csökkenti)
  • kódok tömörítése (megjegyzések és sortörések eltávolítása)
  • weboldal tömörítése (szerverről gzippel tömörítve töltődik le az oldal)

A weboldal sebességét különböző tesztelésre készült weboldalakon le tudod mérni, ahol az oldalak többségénél javaslatot is kapsz arra, hogy mit kell javítani.

Végszó

A google mobile-first szemléletmódja és a felhasználók egyre nagyobb számú mobilhasználata miatt fontos, hogy az asztali számítógépeken elérhető felhasználói élményt kell nyújtani a felhasználóknak mind minőségben, mind tartalomban és sebességben is. Aki ezt figyelmen kívül hagyja, az már most is jelentős üzleti nyereségtől és látogatószámtól eshet el.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük