Mobil weboldal készítés: elvárások és technologia

A mobilra is optimalizált oldalak készítése ma nagyon aktuális és népszerű téma. Ha reggelente körülnézünk a buszon, vagy vonaton, azt láthatjuk, hogy egyre többen használják mobiltelefonjukat böngészésre, tartalomfogyasztásra. A mobil felhasználók száma erősen növekszik, és már határozott elképzelésük is van arról, hogy mit szeretnének látni egy mobilra optimalizált oldalon.

Szerencsére nem kell komoly kutatásokba bocsátkoznunk ha meg akarjuk ismerni felhasználóink elvárásait. A Google nemrégiben közzé tett egy kutatást, melyben 1000 amerikai felnőtt véleményét kérdezték meg a mobil oldalakkal kapcsolatos elvárásaikról.

A legfontosabb tapasztalat, hogy kell a mobilra optimalizált oldal. A mobilon böngészők nagyon nagy jelentőséget tulajdonítanak a mobil oldal meglétének és minőségének. Azok akiknek jó mobilra optimalizált oldaluk van, nagyon könnyen a versenytársaik elé kerülhetnek és egy minőségi mobil szolgáltatással a márkájuk iránti elkötelezettséget is növelhetik. Azok akiknek nincs mobil oldaluk, ennek okán akár könnyen el is veszíthetik vásárlóikat.

Mit várnak el a felhasználók általánosságban?

A felmérés részletesen kitér arra is, hogy egyes szolgáltatói területeken általánosságban milyen elvárásaik vannak a felhasználóknak.

Általános elvárások

A mobil oldalakkal kapcsolatos legfontosabb általános elvárások:

• Illeszkedjen a kis képernyőhöz
• Könnyen megtalálható legyen és egyszerű legyen a kereső használata
• Legyen lehetőség az asztali verzió megtekintésére (reszponzív dizájn esetén ez sajnos nem fog menni)
• Jó nagy, könnyen eltalálható gombok
• Kattintásra hívható telefonszámok

Kiskereskedelmi oldalakkal kapcsolatos elvárások

A Google tanulmánya speciálisan egy-egy üzleti szektorra (banki szolgáltatások, utazási oldalak, stb.) vonatkozóan is megkérdezte a felhasználók véleményét. Általános kiskereskedelmi mobil oldalakkal szemben az alábbi elvárásokat támasztották a felhasználók:

Hogyan kezdjünk neki a mobil verzió készítésének?

Ha nincs még mobilra optimalizált oldalad, nem kell aggódni. Magyarország, még nem amerika és a trendek jellemzően némi késéssel jutnak el hozzánk. Szóval még nem vagy lemaradva semmivel, ha nincs mobil oldalad. A legjobb amit tehetsz, hogy egy kicsit gondolkodol és elemzed az oldalad, mielőtt belevágsz a fejlesztésbe. Érdemes az Analytics statisztikáknál kezdeni.

Nézd meg, hogy mekkora százalékot teszt ki a mobil eszközök látogatottsága a honlapodon. Ezt a Közönség > Mobil > Eszközök menüpont alatt találod. Ebből már láthatod körülbelül mekkora az a közönség, amely mobil verzióra vágyik.

Ezt követően célszerű azonosítani azokat a típusoldalakat, amelyek a mobil eszközökkel rendelkezők számára belépési pontot jelenhetnek. Ezt a Tartalom > Webhelytartalom > Céloldalak menüpont alatt találod. Ezek az oldalak azok, amelyeken a felhasználóid belépnek a honlapodra. Ahhoz, hogy ebben a statisztikában csak a mobil eszközt használókat lásd, a Speciális szegmensek gombra kattintva ki kell pipálnod a Mobilforgalom szegmenst. Ha ezt is megtetted, a Top belépési oldalak, azaz céloldalak listában már csak azokat az oldalakat fogod látni, amelyeken keresztül a mobil látogatásod érkezik. Ezt a listát felhasználva könnyen azonosíthatod azokat az oldalakat, amelyek esetében célszerű elkészíteni a mobil verziót. Figyelj arra, hogy ez a lista a táblagépeket is tartalmazza, amelyek nem feltétlenül igényelnek mobilra optimalizált elrendezést.

Ezt követően már csak azt kell eldöntened, hogy milyen technológiát választasz a mobil verzió elkészítésére, és már kezdheted is a munkát.

Reszponzív vagy küln URL?

Az októberi Traffic Meetup előadásán spontán kerekasztal beszélgetés bontakozott ki a mobil weboldalak készítése kapcsán. A többség a reszponzív (responsive) dizájn mellett foglalt állást, mint legjobb megoldás mobil verzió készítésére. Én nem gondolom, hogy a reszponzív dizájn lenne a legjobb megoldás, nézzük meg miért nem.

Mint a legtöbb témában, most sem kell nagyon mélyre ásnunk. Sokan feldolgozták már ezt a témát, de nemrégiben maga a Google is ismételten állast foglalt az ügyben. A Google fejlesztői oldalain, pedig egy nagyon jó leírás is a rendelkezésünkre áll. E mentén fogom most én is átnézni a lehetőségeket.

Mobil verzió készítésekor alapvetően három lehetőség közül választhatunk, nézzük melyek ezek:

1. Külön URL alatt érhető el a mobilra optimalizált weboldal

A külön URL alatt azt az esetet értjük, amikor a mobilra optimalizált oldal az asztalai gépeken megjelenő url-től eltérő címen jelenik meg. Így működik az Index – m.index.hu, vagy a HVG -m.hvg.hu mobil weboldala is.
Korábban, de még egy fél évvel ezelőtt is ez volt a Google által is javasolt legjobb megoldás, de mindig is voltak ezzel szemben fenntartások. Külön url használata esetén problémát a duplikációk elkerülése jelentheti. Előfordulhat ugyanis  hogy  a desktop keresési találatok között a mobil és a hagyományos weboldal oldalai is feltűnnek. Ilyen esetben az azonos tartalommal rendelkező, de külön url alatt elérhető tartalmak versengenek egymással, gyengítik egymást.

Korábban a Google részéről is történtek kijelentések, hogy ez a megoldás nem okozhat duplikált tartalmakat, de a legfrissebb hivatalos úmuatások szerint javasolt a rel="alternate" és rel="canonical" tagek használata az alábbiak szerint:

1. Az asztali gépekre optimalizált oldalon rel="alternate"taggel jelöljük meg az adott oldal alternatív elérési lehetőségeit:
2. A mobil oldalon pedig rel="canonical" tag elhelyezése szükséges.

A rel="alternate" tag használatával jelezhetjük a robot számára,hogy az adott oldalnak milyen egyéb url-ek alatt található alternatív megjelenése, pl. mobilra optimalizált verziója. A rel="canonical" tag pedig visszafelé, a mobil oldalon jelzi a kereső számára, hogy az adott mobil oldal csak a mobil eszközök számára lett létrehozva, és az indexelésre szánt tartalom hol található meg.

Külön url használatának előnyei:

• Gyorsabb, valóban mobil eszközökre optimalizált oldalt készíthetünk. Nem töltődik le minden tartalom.
• Az url vizuálisan is jelzi a felhasználóknak, hogy mobilra optimalizált oldal töltődik be éppen.

Külön url használatának hátrányai:

• Plusz fejlesztési költségekkel jár.
• Körülményes az alternate és canonical tagek alkalmazása. Bonyolultabb szerkezetű oldalak esetében előfordulhat, hogy nem is alkalmazható megnyugtató módon.

2. Reszponzív dizájn alkalmazása

Reszponzív dizájnról akkor beszélhetünk, ha az oldalunk CSS szerkezete úgy van elkészítve, hogy az oldal változó képernyő felbontás mellett is megfelelően jelenjen meg. Példának okáért a mi oldalunk is reszponzív. Ha változtatjuk a böngésző szélességét, a tartalom szerkezete is változik. Így azonos URL alatt optimalizált tartalmat nyújthatunk asztali-, táblagépekre és különböző méretű mobiltelefonokra is. Könnyű belátni, hogy ez egy rendkívül előnyös megoldás.

Hogyan készítsünk reszponzív oldalt?

Reszponzív oldalt a CSS fájl módosításával készíthetünk. Egyszerűen be kell szúrni egy feltételt a CSS-be, aminek köszönhetően egy-egy meghatározott felbontás alatt más stílusokat használunk, vagy egyes elemeket eltüntetünk, megjeleníthetünk.

@media only screen and (max-width: 640px) {...}

Milyen hátránya lehet a reszponzív dizájnnak?

• Nem készíthető vele teljesen különböző mobil és asztali oldal. Reszponzív dizájn esetén csak az asztali gépekre optimalizált oldal tartalmát egyszerűsítve hozhatunk létre mobil oldalt.
• A mobilra optimalizált oldalak esetében is letöltődik minden HTML elem, CSS, JS, stb. fájl, még akkor is ha mobilon nem kerül felhasználásra, megjelenítésre. Összetettebb oldalak esetében ez komoly gond, mivel lassabb mobilinternet kapcsolat esetén a betöltődési idő túl hosszú lehet, az optimalizált megjelenés ellenére is.

3. Változó tartalom, változatlan url alatt

Technikailag nem túl nagy kihívás különböző eszköznek megfelelő tartalom kiszolgálása azonos url alatt. WorPress alá pl. több ilyen plugint is találhatunk egy egszerű kereséssel. A problémát ebben az esetben technikai jellegű dolgok okozhatnak. Egyrészt nagyon fontos, hogy a keresőrobot számára megfelelő módon jelezzük, hogy a tartalom eszközfüggő lehet. Ehhez nem kell mást tennünk, mint a HTTP header információban szerepelnie kell a  Vary: User-Agent mezőnek, az alábbi módon:


GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers...)

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)


Ez egy erős jelzés a keresőrobot számára, hogy a tartalom eszközfüggő lehet. Ha robot ilyet talál, akkor a mobil oldalak feltérképezésére szolgáló robot is meglátogatja az oldalt és értékeli azt.

Megoldás előnyei:

• Nincs szükség külön meta tagekre.
• Minden eszköz számára, valódi optimalizált tartalom szolgálható ki.

Hátrányok:

• Vigyázni kell a Cache használatával. Ha cache segítségével szeretnénk mondjuk az oldalunkat gyorsítani, akkor erre nagyon oda kell figyelnünk. Mivel ilyen esetben az URL nem változik csak a tartalom, előfordulhat, hogy a cache eltárolja valamelyik verziót és azt szolgálja ki minden eszköznek.
• A tartalom kiszolgálása valamilyen mobil eszköz (user-agent) detektálás alapján történik. A user-agent detektálást több ponton is el lehet rontani. Rendszerint egy eszköz listán alapul, amit például frissen kell tartani. Gyakori hiba még, ha csak egy rövidebb karakterlánc alapján azonosítunk eszközöket, mint „android”. Ebben az esetben például a mobil verzió fog megjelenni minden Android tableten is, ami szintén nem biztos, hogy jó megoldás.

Konklúzió

A lényeg, hogy jelenleg nincs „ultimate” megoldás. Pontosan ez az amire szerettem volna ezzel a bejegyzéssel felhívni a figyelmet. A reszponzív css használata olyan technikai megoldás, amivel egyszerűen, gyorsan és olcsón hozhatjuk létre saját mobil oldalainkat. Ezzel szemben látni kell, hogy ennek is vannak hátrányai és komoly mobil látogatással, vagy stratégiával rendelkező oldalaknak valószínűleg ennél komolyabb megoldásra lesz szüksége.
Tehát minden mobil projekt elején gondoljuk át, hogy mi a cél, mit szeretnénk elérni a mobil oldalakkal és ennek tudatában döntsünk a megfelelő technológia alkalmazása mellett.

Ha tetszett a bejegyzés, nyomj egy lájkot! Ha vitatkoznál a leírtakkal, vagy kérdésed van, akkor pedig írj hozzászólást.

[thrive_leads id='5025']