Tervezés

Mobilon is jó a weboldalad? Így néz ki a mobilbarát oldal

Ha megnézed, honnan jönnek a látogatók egy kisvállalkozás weboldalára, a legtöbb esetben azt látod, hogy a nagy részük telefonról. Valaki a buszon, a kocsiban ülve vagy a kanapén keres egy szakembert, rábök a találatra, és pár másodperc alatt eldönti, marad-e. Ha az oldal ott apró betűs, szétesik, vagy percekig tölt, továbblép a következő találatra. A mobilbarát oldal ezért nem extra, hanem alap. Összeszedtem, mit jelent ez a gyakorlatban, és hogyan tudod magad is ellenőrizni a sajátodat.

Mit jelent az, hogy mobilbarát?

Nem azt, hogy az oldal „megjelenik” a telefonon. Egy régi, asztali gépre tervezett oldal is megjelenik, csak kicsinyítve, és nagyítgatni kell. A mobilbarát oldal ehelyett alkalmazkodik a képernyőhöz: a tartalom egy oszlopba rendeződik, a szöveg olvasható méretű marad, a gombok és linkek ujjal is könnyen eltalálhatók, és nem kell vízszintesen görgetni.

Fontos, hogy ez ne csak a főoldalra igaz legyen. A látogató gyakran nem a főoldalon érkezik, hanem egy keresési találatból egyenesen egy szolgáltatás aloldalára, vagy egy blogcikkre. Neki az az oldal az első benyomás, tehát annak is ugyanolyan jól kell működnie telefonon.

Ezt szakmai nyelven reszponzív oldalnak hívják. Ma egy új weboldalnál ez alapkövetelmény, nem külön tétel. A régebbi oldalaknál viszont gyakran találkozom olyannal, ami csak részben az: a főoldal rendben van, de egy aloldalon szétcsúszik egy táblázat, vagy a menü nem nyílik ki rendesen.

A kattintható telefonszám

Ha egyetlen dolgot viszel el ebből a cikkből, legyen ez. Aki telefonról nézi az oldaladat, annak a legkényelmesebb, ha egy érintéssel fel tud hívni. Ha a telefonszám csak sima szöveg, ki kell másolni, vagy fejben megjegyezni és begépelni, és ezen a ponton sokan feladják.

• A telefonszám legyen kattintható link, ami megnyitja a tárcsázót.
• Legyen jól látható helyen, a fejlécben vagy az első képernyőn, ne csak az oldal legalján.
• Ugyanez igaz az e-mail címre: egy érintéssel nyíljon meg a levelezőprogram.
• Ha van üzleted vagy irodád, a cím mellé egy térkép vagy útvonaltervező link is sokat segít.

Arról, hogy milyen kapcsolatfelvételi lehetőség illik a vállalkozásodhoz, és mit érdemes még az oldalra tenni, a mit írj a weboldaladra cikkben írtam bővebben.

Olvasható szöveg, nyomható gombok

A telefon kijelzője kicsi, az ujj pedig nem egérmutató. Ami asztali gépen kényelmes, az mobilon gyakran bosszantó. Néhány dolog, amire figyelek, amikor mobilra tervezek:

• Betűméret. A szövegnek nagyítás nélkül is olvashatónak kell lennie. Ha hunyorogni kell, vagy két ujjal szétnyitni a képet, az látogatót veszít.
• Rövid bekezdések. Ami monitoron két sor, az telefonon nyolc. A hosszú, tömör szövegfal mobilon még nehezebben olvasható.
• Elég nagy gombok, elég távol egymástól. Ha két link túl közel van, a látogató rendszeresen a rosszat nyomja meg.
• Egyszerű menü. Mobilon a menü általában egy gomb mögé kerül. Minél kevesebb a menüpont, annál könnyebb eligazodni.
• Kerüld a felugró ablakokat. Egy egész képernyőt eltakaró ablak, amit egy apró X-szel lehet bezárni, mobilon különösen idegesítő.

Külön figyelmet érdemel az ajánlatkérő űrlap. Telefonon minden kitöltendő mező egy újabb akadály, ezért csak azt kérdezd meg, ami tényleg kell az első válaszhoz. A név, egy elérhetőség és egy rövid üzenet a legtöbb vállalkozásnál elég. Ha a telefonszám mezőnél számbillentyűzet, az e-mail mezőnél pedig a kukacot is tartalmazó billentyűzet ugrik fel, az apróságnak tűnik, de sokat könnyít a kitöltésen. A hibaüzenet is legyen érthető: ha valami hiányzik, a látogató lássa, melyik mezőről van szó, és ne vesszen el, amit már beírt.

A gyors betöltés mobilon még fontosabb

A telefon nem mindig jó wifin van. Mobilneten, gyenge térerőnél egy nehéz oldal sokkal lassabban tölt be, mint otthon a gépen. A leggyakoribb ok, amit látok, a túl nagy képek: egy fényképezőgépből vagy telefonból egyenesen feltöltött fotó sokszorosa annak, amire valójában szükség van.

Ami segít: a képek megfelelő méretre és formátumra optimalizálva kerüljenek fel, ne legyen az oldalon fölösleges animáció és külső bővítmény, és a tárhely se legyen a legolcsóbb, túlterhelt fajta. A sebesség részleteiről a miért lassú a weboldalam cikkben írtam.

Miért számít ez a Google-nek is?

A Google ma alapvetően a weboldalak mobilos változatát nézi, amikor eldönti, hogyan jelenjen meg az oldal a keresésben. Ha a mobilos élmény gyenge, az nem segít a láthatóságon. Ennél is fontosabb viszont az, ami a találat után történik: hiába kattint rád valaki, ha az oldal mobilon használhatatlan, nem fog ajánlatot kérni. A keresésben való megjelenésről a hogyan találnak meg a Google-ben cikkben olvashatsz többet.

Egyszerű saját teszt öt percben

Nem kell hozzá semmilyen eszköz, csak a telefonod. Nyisd meg a saját oldaladat, lehetőleg mobilneten, nem a céges wifin, és nézd végig a látogató szemével:

1. Betölt pár másodperc alatt? Ha addig nézed az üres képernyőt, hogy elgondolkodsz, a látogató is elgondolkodik.
2. Kell-e nagyítani a szöveg olvasásához? Ha igen, a betűméret vagy az elrendezés nem mobilra készült.
3. Kell-e vízszintesen görgetni? Ha valami kilóg a képernyőről, az hiba.
4. Megtalálod-e a telefonszámot egy pillantás alatt, és fel tudsz-e hívni vele egy érintéssel?
5. Működik-e a menü? Nyisd ki, kattints végig néhány aloldalt, és nézd meg, azok is rendben vannak-e.
6. Ki tudod-e tölteni az ajánlatkérő űrlapot? Próbáld ki ténylegesen, és nézd meg, megérkezik-e az üzenet.

Érdemes a tesztet egy ismerősöddel is elvégeztetni, aki még nem látta az oldaladat. Ő nem tudja, hol keresse a dolgokat, így sokkal hamarabb észreveszi, ha valami nem egyértelmű. Ha van rá lehetőséged, nézd meg egy régebbi, kisebb kijelzős telefonon is, mert ott jön elő a legtöbb hiba.

Ha a teszt nem sikerült jól

Nem feltétlenül kell új weboldal. Ha az alap rendben van, sokszor elég néhány célzott javítás: kattinthatóvá tenni a telefonszámot, optimalizálni a képeket, rendbe tenni egy szétcsúszó aloldalt. Ha viszont az oldal eleve nem reszponzív, és minden aloldalon nagyítani kell, akkor a foltozgatás többe kerül, mint amennyit ér, és jobb egy olyan oldal, ami eleve mobilra is készült. Ha nem tudod eldönteni, melyik a te eseted, a kapcsolat oldalon írhatsz, és megnézem.