Honlap optimalizálás mobilra, táblagépre

Ujvári Mária - 2013. március 23 - Cikkek / Honlaptervezés

Cikkünk első verziója 2013-ban íródott. Akkor, amikor a mobil verzióval rendelkező honlap még előnynek számított a versenytársakhoz képest, és akkor, amikor elkezdtük minden honlapunkat alaphelyzetben mobilnézettel csinálni. Mára (most 2018-at írunk) a Google már bevezette az úgynevezett “mobile first” indexet, amely a találati listán előnyhöz juttatja azokat a weboldalakat, amelyeknek létezik mobil verziója.

Az már nem kérdés, hogy az okostelefonok milyen szinten terjedtek el. Az okostelefon már messze nem csak a telefonást szolgálja, sokan mobil számítógépként használják.

Hányan nézik a honlapokat mobilról?

A weboldal témájától is függ, hogy mekkora a mobileszközös megtekintések aránya. Azok a témák, amelyeket előszeretettel osztanak meg a Facebookon, vagy amely honlapok célcsoportja jellemzően mobilról keres, ott a mobilos megtekintések aránya jóval magasabb.

Tapasztalataink szerint

 a látogatók 30-60%-a mobileszközről nézi a weboldalt.

A honlap mobil optimalizálás módja

Alapvetően két módszer létezik:

  1. külön honlapot programoznak, amelyet aldomain-re töltenek fel (jellemzően ez egy m-mel jelölt domain név, pl. m.sikermarketing.hu formátuma van)
  2. olyan programozással készítik el a honlapot, hogy az “érzékelje”, mekkora képernyőről nézik, és a képernyő méretének megfelelő “arcát” mutassa

Mi a második típussal dolgozunk, ez az úgynevezett responsive design. A “responsive” hevenyészett fordítása jól lefedi a programozás lényegét: “válaszadó”, “válaszoló”.

Melyik mobil optimalizálási megoldás jobb?

Mindkettőnek megvannak az előnyei és a hátrányai is. Míg az első megoldásnál lényegében duplikálni kell a tartalmat (ez pedig kavarodást okozhat, ha módosítanak a tartalmon), a második esetben erről nincsen szó.

Tény viszont, hogy a responsive honlap design programozási technikája még a nyugatiak számára is új, megtanulandó feladat.

Miért más a mobilra készített honlap?

A mobilon internetezők számára a letöltés gyorsasága pont ugyanolyan fontos, ahogy ehhez már az ADSL-es asztali gépek és laptopok esetében hozzászoktak. Ez viszont nem megy úgy, hogy ugyanazokat a méretű képeket, váltóképet (slide show-t) töltsék le.

A mobilra (is) készült honlap tehát aszerint korlátozza a megjelenítendő tartalmakat, hogy azok milyen méretűek, mennyi ideig tart a letöltődésük – és a táblagépes ill. mobil verzióban vagy kisebb méretű képet jelenít meg, vagy egyáltalán nem is jelenít meg képet.

A mobilra készített honlap tehát a tartalomnak és a funkciónak ad prioritást a “mozizással” szemben.

Hogyan készül egy honlap mobil változata?

Amikor a honlapot elkezdjük tervezni, már akkor szem előtt tartjuk, hogy szükséges a mobil változat is. Ehhez a honlapnak bizonyos egységeit úgy kell elrendezni, leprogramozni, kódolni, hogy az megjelenjen majd a mobil változatban is.

Az általunk használt WordPress CMS rendszer (pontosabban ennek az a konkrét váza, amit használunk) már önmagában is responsive (“válaszadó”), de ez messze nem jelenti azt, hogy egy ilyen honlapot akkor már nem is kell “mobilosítani”.

A honlap design és szerkezet minden egyes elemét vezérelni kell ahhoz, hogy tudják, hol a helyük, ha mobiltelefonról, okostelefonról nézik, és hol, ha tablet-ről. (A különböző méretű monitorokról, laptopról nem is beszélve.)

Milyen a jó mobil honlap?

Elvárások a honlap mobil és tablet változatával szemben

Azt, hogy pontosan hogyan kell megtervezni egy mobil honlap vagy tablet honlap szerkezetét, design-ját, még a honlapkészítők is csak tanulják. (Eleve a honlapok ergonómikus megtervezése is nagy feladat, és a tévedéseknek bizony csak egy vesztese lehet: a honlap tulajdonosa, hiszen az ő oldala lesz átláthatatlan és nehezen használható.)

A mobilra, mobileszközökre tervezett honlap nem annyi, hogy egy “válaszoló” (responsive) sablont teszünk alá!

A Google-lal együttműködve a GOMO 10 pontban foglalta össze, mik az elvárások a mobiloptimalizált weboldalakkal szemben. (Publisher Guide – GOMO)

Az alábbiakban összefoglaljuk azokat a tanácsokat, amelyeket a honlapfejlesztőknek ad a Google, kiemelve azokat a pontokat, amelyekkel a honlap megrendelőjének is tisztában kell lennie:

1. Legyen gyors!

A mobilról, tabletről netezők nem akarnak sok időt tölteni sem a keresgéléssel, sem magával az olvasgatással. Éppen ezért a technikailag gyors letöltődés mellett (kis képek!) szó szerint szem előtt kell tartani a legfontosabb tartalmi egységeket, funkciókat.

2. Egyszerű navigáció

A nagy és összetett honlapok mobil változatát még sokkal áttekinthetőbbé tett navigációval, menüfelépítéssel kell elkészíteni. (A mobilváltozat sokszor rá is mutat az átgondolatlanságra!) Senki sem szeret elveszni egy weboldalon, ahol mindent igyekeznek az arcába tolni, hátha majd vásárol valamit…

3. Hüvelykujj-szabály

A közgazdaságtanban jól ismert fogalom, amely az általában követendő utat jelenti, itt más értelmezést kap: a mobil verziót érintőképernyővel használják, legtöbbször a hüvelykujjat használva. A jó mobil honlap a legnagyobb férfikézben is pontos “kattintást” tesz lehetővé.

4. Tervezd láthatóra!

Fontos a kontraszt, a megfelelő betűméret és a szabadon hagyott fehér felületek. [Ezek épp ilyen fontosak egyébként a normál honlapnál is!]

5. Tervezd hozzáférhetőre!

A hozzáférhetőség olyan beillesztett alkalmazások használatát jelenti, amelyek minden eszközön egyformán jelennek meg – a Flash-t például bizonyos eszközök nem támogatják.

6. Tedd könnyűvé a konvertálást!

A konvertálás a honlapok esetében azt jelenti, hogy a honlap tulajdonosa eléri célját: a webshopban, webáruházban vásárolnak, a szolgáltatót felhívják, a közösséginek szánt vagy pl. hirdetési oldalakon regisztrálnak. Ha a “menetrend” túlbonyolított, az könnyen megöli a konvertálást.

7. Légy ott helyben!

Sokan a helyi kereséseket részesítik előnyben, ami a mobilnál különösen igaz. Ha valaki pl. éttermet üzemeltet, minden webes eszközt ki kell használnia arra, hogy a helyi keresésben megtalálható legyen. [Ez a tanács sem csak a mobilverzióra igaz!]

8. Tedd hasonlóvá!

Az embereknek fel kell ismerniük, hogy adott esetben ugyanazt a honlapot látják, mint az asztali gépről vagy a laptopról. Éppen ezért amennyire csak lehet, hasonlóvá kell építeni a honlap minden változatát. [Ismét egy érv arra, hogy maga az asztali monitoros változat se műalkotás legyen, hanem használható eszköz. Mert a honlap eszköz!]

9. Használj mobil átirányítást!

(Ez a tanács azoknak szól, akik nem responsive technikával dolgoznak.)

10. Figyelj, tanulj, javíts!

A legfontosabb tanács! Pontosan úgy, mint a honlap esetében, vagy különösen a keresőoptimalizálás esetében, a mobil honlap, tablet honlap sem KÉSZ soha… A tesztelési eredmények felhasználásával folyamatosan javítandó!

[Itt ragadjuk meg az alkalmat arra, hogy felhatalmazzuk a kedves Olvasót: ha ezen a honlapon (vagy bármelyik általunk készített mobil honlapon) furcsaságot, szétesést, logikátlanságot talál, jelezze nekünk! Köszönjük!]

A sikermarketing.hu 2013-tól minden honlapját mobileszközökre is optimalizálva fejleszti. Ön is szeretne ilyet?

Bemutatkozunk

Webstúdió és marketing műhely vagyunk Budapesten. Amit csinálunk: honlaptervezés, keresőoptimalizálás, mobiloptimalizálás és marketing – komplex egészként, marketing stratégiai alapokon.

Gyakorlati tapasztalatainkat tréningjeinken is megosztjuk.

A honlapon olvasható minden cikk saját tudásunkon, tapasztalatainkon alapszik.

Ossza meg másokkal is!

Copyright 2007 - 2018. Sikermarketing.hu ©  Minden jog fenntartva!