Reszponzív webdesign

Mobilbarát weboldal készítés és tervezés hatékonyan


Mitől jó egy mobilbarát weboldal? Az egyik legfontosabb tény, hogy a mobil felhasználók nagyon célorientáltak. Azonnal szeretik elérni az információt amit keresnek a lehető legrövidebb és legegyszerűbb módon.

Mobilbarát weboldal készítés és tervezés hatékonyan
Reszponzív webdesign
Author: Bakos Szabolcs

A Google nem csak beszél, hanem tovább folytatja a mobilbarát alapú stratégiáját. Ha weblap tulajdonos vagy és hosszútávban gondolkozol, jobban jársz, ha Te is így teszel.

A mobilbarát jelenlét kiemelten fontos

A mobileszközök évről évre egyre nagyobb százalékot képviselnek a statisztikákban. Elég ha kimész az utcára és szétnézel, mindig fogsz látni legalább egy alakot aki nyomkodja a mobilját. Tény, hogy az okostelefonok és a tabletek, phabletek terjedésével egyre több multimédiás tartalom vált fogyaszthatóvá, elérhetővé az emberek számára. Egyre könnyebben és egyszerűbben tudunk elérni tartalmakat.

Ezt a trendet pusholja a Google is azzal, hogy a mobilbarát weblapokat részesíti előnyben, ha mobileszközökön keresel. A fentieken felül a Google egy kis címkével is ellátja az ilyen típusú weblapokat, mellyel jelöli a keresési találatokban, hogy bizony mobilon is nyugodtan nézheted az adott oldalt. A vállalat többfajta címkével is kísérletezett, de úgy tűnik végleges verzió egy szürke “mobile-friendly” felirat lett.

Mobilbarát weboldal tervezés

Mitől lesz mobilbarát egy weblap?

  • A Google szerint attól, hogy például a mobilbarát weblap nem használ Flash technológiát a tartalom megjelenítésére
  • A mobilbarát weboldal olyan betűmérettel rendelkezik amelyek nagyítás nélkül is jól olvasható
  • A mobilbarát weboldal a tartalmat az adott képernyőmérethez igazítja, így nem kell vízszintesen nagyítanod az olvasáshoz
  • A mobilbarát weboldal linkjei körül megfelelő eltartás van és azok könnyedén kattinthatóak

A fentiekből is jól látható és nem győzöm hangsúlyozni, hogy aki a következő években szeretné kihasználni a modern webes jelenlét előnyeit, az egyszerűen nem hagyhatja ki, hogy a weblapja ne legyen optimalizálva minél több multimédiás eszközre. És nem csak a Google miatt. Egyre több felhasználó rendelkezik valamilyen multimédiás eszközzel, mellyel könnyedén el tudja érni az internetet. Felejtsd el azt a sztereotípiát, hogy az emberek a PC előtt görnyedve fogyasztják a webes tartalmat, ugyanis ez már rég nem így van. A webes fogyasztói szokások folyamatosan változnak és potenciális ügyfeleket veszíthetünk azzal, ha a weblapod nem megfelelően jelenik meg a mobileszközökön.

Mobilbarát weboldal tervezés

Aki képben van az tudja, hogy erre a problémára a reszponzív weboldal a legjobb megoldás. Igen ám, de a reszponzív weblapok nagy százaléka úgy készül, hogy első körben a monitorokra terveződik a weblap és csak utána készül el mobilos megjelenítés. Általában a mobilos nézet a monitoros nézet egy erősen megcsonkított verziója. Nagyon kevés a hely a mobilokon.

Ha böngészel a mobilodon tapasztalni fogod, hogy sokkal használhatatlanabbak, nehezen kezelhetőbbek a weblapok. Ez a jelenség a fenti dolgok miatt van, mivel a mobil verzió a monitoros verzió egy erősen megvágott verziója.

Mobile-first weblapok és a Google

Van egy másik metódus, a mobile-first metódus. Amikor a tervező mobilra tervez alapból és csak a mobilos felületek elkészülte után tervezi a monitoros felületeket. A mobile first metódus előnyeiről itt olvashatsz részletesebben. Ennek az előnye - mivel alapból mobilra van megtervezve a felület-, ezért kevesebb tartalom van eltüntetve és könnyebben kezelhető a weblap.

Mobilbarát weboldal tervezés

Összeírtam pár tippet, amire nem árt ha figyelsz ha használható mobilbarát weboldalt szeretnél.

A mobilbarát weboldal célja legyen egyértelmű

Tervezése közben érdemes figyelni arra a tényre, hogy a felhasználóidnak mindig tudnia kell elsőre, hogy miről szól a weblapod, különben csak az idejüket vesztegeted. Ha lehetséges már az első képernyőn jó ha tudatod velük, hogy mivel fognak találkozni ha elkezdik böngészni a tartalmaidat.

Felejtsd el a desktop portolást

Adott egy nem mobilbarát weboldal és egy ügyfél aki szeretné minél gyorsabban és olcsóbban mobilbaráttá alakítattni a weblapját. Egy kis CSS módosítás ide, egy kis hamburger menü oda és kész is a mobil site. Sajnos ez egy igen elterjed módszer itthon, az esetek nagy részében gyenge felhasználói élménnyel rendelkező mobilfelületeket kap a végére a megrendelő. Normál esetben ilyen könnyen nem úszható meg a dolog, hiszen túl nagy a különbség a felületek között. Különbözik a beviteli mód (egér, ujj), különbözik a felület mérete (kicsi, nagy) és a használati szokások is különbözőek.

Csak a legfontosabb elemek maradjanak

A mobil felületeken sajnos rendkívül kevés hely áll rendelkezésre, éppen ezért a legfontosabb elemekre kell helyezni a hangsúlyt. A cél, hogy minél kevesebb kattintható felület, minél kevesebb zavaró elem legyen az oldalakon. A zavaró elemek eltüntetése segíti a felhasználói fókusz megtartását, a rövidebb oldalak pedig abban segítenek, hogy kevesebbet kelljen lapozni a felhasználónak. Persze ez nem mindig kerülhető el.

A kattintható elemek legyenek nagy méretűek

Az ujjaink jóval szélesebbek mint a precíz egér kurzor, ezért nagyobb felület szükséges a használatukhoz. Az Apple például 44px négyzet távolságot javasol a tapintható mobilfelületek köré. Természetesen ezt nem kell pixelpontosan betartani, de érdemes növelni a linkek körüli távolságot, a gombok kerületét és az eltartási távolságokat is, amennyire lehetséges. Így szellősebb lesz a tartalom és könnyebben kattinthatóak az elemek.

Mobilbarát weboldal tervezés

Törekedj a szellős struktúrára, a nagy térközökre és az olvasható betűkre

Kiemelten fontos a nagy térközök és jól olvasható betűtípusok használata a mobil felületeken. A nagy térközök jobban tagoltá teszik a tartalmat, a nagyobb betűk pedig könnyebben olvashatóvá. Az ügyfelek szeretik, ha minél több szöveg elfér egy oldalon, viszont az apró és zsúfolt betűket nehéz olvasni, főleg kisebb méretű telefonokon.

A mobilbarát weboldal nyitóoldalán található call to action gomb legyen elérhető scrollozás nélkül

Mobilbarát weboldal tervezésénél érdemes figyelni arra, hogy a modern reszponzív weblapok nyitóoldala általában hero képpel és CTA (call to action) gombbal indul. Mobil nézetben, ha a weblap nem megfelelően van optimalizálva, a CTA gomb csak scrollozás után érhető el. Ez egy fatális hiba, a mobil nézetben a CTA gomb az első képernyőn azonnal legyen elérhető.

Használj rövid és egyszerűsített menüket a mobilbarát weboldal tervezése közben

A mobil felhasználók nem szeretik tekergetni a hosszú menülistákat. Erre kiemelten ügyelj a tervezés közben. Alakítsd a weblapod menüpontjainak listáját úgy, hogy minél egyszerűbben elérjék a mobil felhasználók a keresett menüpontot. A tradicionális weblapokon a fő navigációs menü, általában az oldal tetején van elhelyezve. A menüpontok számától függően ez a struktúra nem jeleníthető meg rendesen a mobil felületeken. A fenti problémának köszönhetően terjedt el a hamburger menü, mely már a desktop felületeken is egyre népszerűbb. A második komolyabb probléma a többszintű navigáció, a hoverre lenyíló menük megjelenítése a mobil felületeken. Ezeket amennyire csak lehetséges kerüld a mobilon.

Mobilbarát weboldal tervezés

A kereső legyen könnyen elérhető a mobilbarát weboldaladon

A mobil felhasználók információt keresnek a weblapokon. Ha nem találnak valamit, általában a keresőhöz fordulnak. Mobilbarát weboldal tervezése közben, ha a weboldalad rendelkezik keresőmezővel, akkor mobil nézetben is rakd egy jól látható helyre és ne dugd pl. egy lenyíló menü mögé.

Engedd a felhasználóidat szabadon böngészni

A felhasználók szeretik feltérképezni, megismerni a weblapokat mielőtt különböző döntéseket hoznak azokkal kapcsolatban. Engedd a felhasználóidnak, hogy szabadon böngészhessenek, kötelező feladatok nélkül. A felhasználók adatainak túl korai bekérése például kevesebb regisztrációhoz vezethet.

Használj minél egyszerűbb űrlapokat, az adatok bekéréséhez

Mobilbarát weboldal tervezése közben kiemelten figyelj arra a tényre, hogy a felhasználók utálják a hosszú, átláthatatlan űrlapokat. Használj minél egyszerűbb struktúrájú beviteli mezőket tervezéskor. Csökkentsd az űrlapok kitöltésének hibaszázalékát egyértelmű hibajelzésekkel. Ha nem tudod elkerülni a hosszabb formokat, használj folyamatjelző csíkot, wizard-ot, mely mutatja a felhasználónak mennyi van még hátra a befejezésig.

Mobilbarát weboldal tervezés

Ne engedd meg a felhasználóidnak a kétújjas nagyítást

A mobil felhasználók már hozzászoktak a lefelé görgetés szabályaihoz. Ne zavard őket össze nagyítással és a horizontális scrollozás lehetőségével. Azok a weboldalak amik kényszerítik a felhasználókat a horizontális scrollozásra, általában elbuknak a Google mobilbarát teszten és rosszabbul szerepelnek a keresési találatokban.

Törekedje a minél kevesebb beviteli mezőre

Az emberek jobban szeretnek kattintani, tappolni mint írkálni, főleg mobilon. Mobilon az írkálás lassú és fájdalmas procedúra. Egy nem mobilbarát weboldalnál általában a formok okozzák a legtöbb problémát. Minél rövidebb egy form, annál nagyobb eséllyel fogják kitölteni. Érdemes tehát minimálisra csökkentni az írkálás lehetőségét a mobil felületeken is.

Felejtsd el a weblapod alján található “Teljes verzió”, “Asztali verzió” típusú linkeket

A fenti linkek segítségével egyes weblapok monitorokra tervezett verziói elérhetőek mobilon is. Ha mobilbarát weboldalt tervezel, felejtsd el ezeket a linkeket, mert azt sugallod a mobilos felhasználóidnak, hogy asztali verzióval több tartalmat fognak kapni.

Optimalizáld a teljes weblapod mobilra

A mobilbarát weboldal tervezésénél kiemelten fontos, hogy minden oldal optimalizálva legyen mobil felületekre. Azoknál a weboldalaknál, ahol ez nem történt meg a felhasználók összezavarodhatnak és ezáltal az adott weboldalak rosszabb teljesítményt nyújthatnak. A designerek általában fix méretben megrajzolják a mobil és a desktop terveket (jobb esetben), a legtöbb fejlesztő pedig elintézi a fejlesztést valamilyen reszponzív framework-el (Bootstrap, Foundation). A probléma akkor kezdődik, ha a felületek nincsenek optimalizálva lehetőség szerint több mérettartományban, csak bizonyos telefonokon, tableteken néznek ki jól.

Természetesen minden mobileszköz felületére nem lehet optimalizálni, de ha a felületek mobil first stílusban készülnek akkor jóval nagyobb tartományt tudnak lefedni. Törekedj rá, hogy minél több felületen nézzen ki jól a weblapod, webes alkalmazásod.

Mobilbarát weboldal tervezés

Érvek a mobilbarát weboldalak mellett

  • Tízből négy magyarnak már van mobilnet előfizetése
  • A tendenciák szerint Magyarországon többen interneteznek mobil platformokról, mint az asztali számítógépekről
  • Ha valaki mobilon indít keresést a Google-ben, akkor a Google a mobilbarát weboldalakat részesíti előnyben
  • Mobilos böngészés közben az emberek 40%-a kilép egy weblapról, ha az nem mobilbarát
  • A felhasználók 48%-a bosszankodik, ha nem mobilra optimalizált oldalra lép
  • A felhasználók 48%-a szerint az a cég aki nem optimalizálta weblapját mobilra, az nem foglalkozik megfelelően az üzletével

Mobile first és kevesebb a probléma

A mobile first előnye, hogy a tervezés a mobil felületeknél kezdődik és a desktop felületeknél ér véget. Pont emiatt kerülhető el a fenti problémák nagy része. Mint általában minden weboldal tervezésnél, a mobile first metódusnál is ajánlott a drótváz, prototípus tervezése, készítése. Érdemes már előre definiálni a reszponzív töréspontokat, és a legkisebb mobil felbontásra optimalizálni először.

Ha szeretnéd tesztelni, hogy mobilbarát-e a weblapod a Google szerint, az alábbi linken megteheted:

https://search.google.com/test/mobile-friendly

A fentiekből látszik, hogy rengeteg dolgot kell figyelembe venni az optimális felhasználói élmény eléréséhez a mobil felületeken is, de érdemes rá időt és pénzt fordítani. Lehet, hogy egy potencionális ügyfél a mobilon találkozik először a weblapoddal, és ha ott nem találja meg az információt amit keres, vagy káoszt talál könnyen tovább is állhat. Ezzel üzletet bukhatsz.


Bakos Szabolcs, UI/UX Designer

A bejegyzés szerzője

Bakos Szabolcsnak hívnak, szabadúszó UI/UX Designer vagyok, több mint 17 év tapasztalattal a hátam mögött, cégek és vállalatok számára tervezek, auditálok weblapokat, webáruházakat és webes alkalmazásokat.



További bejegyzések


Dolgozzunk együtt!

Amennyiben kérdésed van, legyen az egyszerű információkérés, együttműködés, vagy üzleti megkeresés, örömmel állok a rendelkezésedre.

Elolvastam és megértettem az Adatvédelmi és szerzői jogi nyilatkozatot
UI/UX Design
Kapcsolat Facebook Twitter Linkedin
Webdesign