Egy weboldal attól még nem mobilbarát, hogy elfér a telefon képernyőjén. Ha a látogató hunyorogva olvassa a szöveget, nem találja a telefonszámot, vagy feladja az űrlap kitöltését, az oldal nem végzi jól a dolgát. A mobilbarát weboldal készítésnél ezért a teljes telefonos utat érdemes ellenőrizni, az első pillantástól a kapcsolatfelvételig.
Lehet, hogy nálad is felmerül a kérdés: a lassú betöltés a gond, vagy egyszerűen túl zsúfolt az oldal? Találgatás helyett próbáld végig a legfontosabb feladatokat a telefonodon úgy, ahogy egy érdeklődő tenné. Olvasd el a fő információkat, nyisd meg a menüt, majd töltsd ki az űrlapot.
Az alábbi ellenőrzőlistával felismerheted, mi akadályozza a mobilos használatot, és mihez érdemes először hozzányúlni. Nézd meg az olvashatóságot, a navigációt, a betöltést és a kapcsolatfelvételt is. Így nem apró részleteken javítgatsz találomra, hanem az oldal üzleti célját akadályozó hibákkal kezdesz.
A mobilbarát weboldal telefonon is könnyen olvasható és kezelhető. A látogató gyorsan megtalálja, amit keres, és külön ügyeskedés nélkül eljut a következő lépésig. Nem kell nagyítania a szöveget, oldalra húznia a képernyőt vagy vadásznia a menüre.
Képzeld el, hogy valaki útközben egy pékség nyitvatartását keresi. Nem akar hosszú bemutatkozást böngészni, csak látni szeretné, mikor van nyitva a pékség, hol találja, és hogyan tud odaszólni egy tortarendelés miatt. Ha gyorsan megtalálja ezeket az információkat, az oldal elvégzi a feladatát. Ha egy zsúfolt kezdőlapon kell keresgélnie, könnyen továbbállhat.
Jó irányban haladsz, ha a fő tartalom telefonon is jól olvasható, a menü kényelmesen használható, a fontos gombok pedig könnyen megtalálhatók és megérinthetők. A reszponzív elrendezés a képernyő méretéhez igazítja az oldal elemeit. A reszponzív weboldal fogalma ezt az alkalmazkodást írja le.
Én ezt a különbséget tartom szem előtt: egy oldal attól mobilbarát, hogy telefonon kényelmesen használható, nem attól, hogy egyszerűen megjelenik a képernyőn. A mobilbarát weboldal készítés során ezért nem elég kisebb képernyőn megnézni a látványt. Azt is próbáld végig, hogy a látogató valóban eljut-e a keresett információig és a neki szánt műveletig.
A betöltés csak a kezdet. Ha a nyitvatartás, a telefonszám és a cím egymásra torlódik, vagy a menü túl sok elemet zsúfol össze, a látogatónak keresgélnie kell. Egy könyvelő oldalán például lehet, hogy valaki csak időpontot szeretne egyeztetni. Ha a telefonszám nem kattintható, vagy az üzenetküldési lehetőség nehezen található meg, megszakadhat ez az út.
Telefonon a kapcsolatfelvételnek egyszerűnek kell lennie. Koppints a telefonszámra, és nézd meg, elindul-e a hívás. Próbáld ki az űrlapot is: könnyen kitölthetők a mezők? Ha a látogatónak túl sok akadályon kell átvergődnie, lehet, hogy nem jut el a kapcsolatfelvételig. A weboldalkészítés során ezért az oldal üzleti céljához igazítom, mit kell a látogatónak először megtalálnia és megtennie.
A mobilos weboldal akkor működik jól, ha nem egyszerűen kisebb formában mutatja az asztali változatot. Az elrendezésnek, a szövegnek és a fontos műveleteknek együtt kell igazodniuk ahhoz, ahogyan a látogató a telefonját használja.
A reszponzív elrendezés a képernyő méretéhez igazítja az oldal elemeit. Ami asztali nézetben két oszlopban szerepel, telefonon egymás alá kerülhet. Így nem kell oldalra húzni a képernyőt, hogy elérd a szöveg végét vagy a következő gombot.
A logó, a menü és a következő lépésre vezető gomb mobilon is legyen könnyen elérhető. A menü jelezze, ha megnyílt, a fontos gomb pedig ne vesszen el a hosszú szövegek között. Nem kell minden elemnek azonnal látszania, de a látogatónak értenie kell, merre induljon.
Először azt mutasd meg, miben segít a vállalkozásod, majd kínálj egy világos következő lépést. Ez lehet telefonhívás, ajánlatkérés vagy időpontfoglalás. A többi részlet jöhet lejjebb az oldalon. Egy kávézó nyitvatartása vagy egy könyvelő elérhetősége például ne bújjon hosszú bemutatkozás mögé.
A tartalom megmutatja, mit keressen a látogató, az elrendezés pedig segít neki gyorsan megtalálni. Ezért a mobilbarát weboldal készítés nem pusztán az elemek átrendezéséről szól. A szöveg sorrendjét is érdemes a látogató feladataihoz igazítani.
Az Erdei Kuckó Játszóház oldalán is ebből indultam ki. A tulajdonos azt kérte, hogy a játszócsoportok leírása kézenfekvőbb, a foglalás pedig egyértelműbb legyen. A szülők jellemzően telefonról foglalnak, ezért a mobilos nézet volt a kiindulópont. A hosszú csoportleírások helyett heti órarendet és kibontható csoportkártyákat tettem a főoldalra. A szülő így előbb azt látja, mikor és melyik csoportba jöhet, a részleteket pedig csak akkor nyitja ki, ha szüksége van rájuk.
Használj rövid bekezdéseket és informatív alcímeket. Felsorolást akkor írj, ha több dolgot kell gyorsan áttekinteni. A betű ne legyen apró, a sorok és elemek között hagyj elég helyet, a képek pedig ne szorítsák háttérbe a fontos információkat. Ezt az ellenőrzőlistát érdemes végigvenned telefonon:
Attól, hogy a weboldal megjelenik a telefonodon, még nem biztos, hogy kényelmesen használható. A mobilbarát weboldal készítés ellenőrzésekor próbáld végig a teljes látogatói utat: a főoldal megnyitásától a fontos aloldalon át egészen a kapcsolatfelvételig.
Ne csak a számítógépeden szűkítsd le a böngészőablakot. Vedd elő a telefonodat, és végezd el rajta ugyanazokat a lépéseket, amelyeket egy érdeklődő tenne. A valódi készüléken hamarabb feltűnik, ha valami apró, nehezen érinthető vagy egyszerűen útban van.
Számítógépen ezt nézd: jól áttekinthető-e az oldal nagyobb képernyőn, és könnyen elérhetők-e a menüpontok egérrel.
Telefonon ezt nézd: olvasható-e a tartalom nagyítás nélkül, elférnek-e az elemek, és kényelmesen kezelhetők-e érintéssel.
Nyisd meg a menüt, válassz ki egy fontos oldalt, majd próbálj visszatérni a főoldalra. Figyeld meg, egyértelmű-e, hol jársz, és nem kell-e találgatnod, hogyan jutsz vissza. Koppints a gombokra és a hivatkozásokra is. Ha nehéz eltalálni őket, vagy túl közel vannak egymáshoz, kényelmetlenné válik a használat.
Nézd meg azt is, hogy egy felugró ablak, sütiüzenet vagy rögzített sáv nem takarja-e el a menüt és a fő tartalmat. Zárd be, majd nyisd meg újra az ilyen elemeket. Ne csak az oldal látványát ellenőrizd, azt is, mi történik használat közben.
Görgess végig egy fontos aloldalon. A képek ne lógjanak ki a képernyőről, ne szorítsák le aránytalanul a szöveget, és ne kényszerítsenek fölösleges görgetésre. Ezután töltsd ki az űrlapot a telefon billentyűzetével. Küldj próbaüzenetet, ellenőrizd, hogy érthetők-e a mezők, a hibaüzenetek a megfelelő helyen jelennek-e meg, és a küldés után kapsz-e világos visszajelzést.
Az űrlap csak akkor tekinthető mobilon kipróbáltnak, ha a telefonodon végig kitöltötted, elküldted, és ellenőrizted a visszajelzést. Így olyan hiba sem marad rejtve, amelyet egy gyors ránézés nem mutat meg.
A sebességet és a hozzáférhetőséget ne egyetlen benyomás alapján ítéld meg. Próbáld végig az oldalt a telefonodon, majd külön mérőeszközzel is ellenőrizd a teljesítményét. A kétféle próba mást mutat: az egyik a saját tapasztalatodat, a másik mérési adatokat ad.
Nyisd meg az oldalt mobilhálózaton és wifin is. Figyeld meg, mikor válik láthatóvá a fő tartalom, majd próbáld ki ugyanezt egy másik saját eszközön is. Ha az első képernyőn minden rendben lévőnek tűnik, görgess lejjebb. Egy nagy kép vagy beágyazott elem késleltetheti a megjelenést, vagy megnehezítheti az oldal használatát.
A Google PageSpeed Insights eszközzel mérési adatokat is kérhetsz az oldalról. Az eredményt kezeld jelzésként, ne garanciaként: a mérés nem minden esetben tükrözi pontosan azt, amit egy adott telefonon és hálózaton tapasztalsz. A mobilbarát weboldal készítés ellenőrzéséhez ezért a mérés mellett saját próba is kell.
A hozzáférhetőség azt jelenti, hogy különböző képességű emberek is könnyebben tudják használni az oldalt. Kezdd az alapokkal: olvasható-e a szöveg a háttér előtt, vagy hunyorognod kell a halvány feliratok miatt? A képek alternatív szövege röviden leírja a kép tartalmát azoknak, akik nem látják azt.
Ha van rá lehetőséged, billentyűzettel is próbáld végig a fontos műveleteket, például a menü megnyitását és az űrlapmezők közötti lépkedést. Figyeld meg, hogy mindig látszik-e, melyik elem van kiválasztva, és el tudsz-e jutni a küldés gombig.
A saját ellenőrzéshez haladj ebben a sorrendben:
Ne azzal kezdd, amelyik hiba a leglátványosabb, hanem azzal, amelyik megakadályozza a látogatót a legfontosabb feladatában. Ha például telefonról nem lehet elküldeni az ajánlatkérő űrlapot, az sürgősebb, mint egy kevésbé mutatós kép.
Én három csoportba rendezem a hibákat. Így könnyebb eldönteni, mi következzen, és nem lesz minden apróság egyformán sürgős:
Javítás előtt jegyezd fel, hol jelentkezik a hiba, melyik oldalt érinti, és mit akadályoz. Például: „Kapcsolat oldal, mobilon az űrlap küldés gombja nem reagál, ellenőrizni kell a működését.” Ez már használható következő lépés, nem csak annyi, hogy „valami nem jó”.
A sorrend legyen egyszerű: először a kapcsolatfelvételt vagy vásárlást akadályozó hibák, utána az olvashatósági és navigációs gondok, végül az esztétikai finomítások. Ha egyetlen gomb vagy szöveg okozza a bajt, elég lehet célzottan módosítani. A mobilbarát weboldal készítés nem feltétlenül jelent teljes újratervezést.
Ha ugyanaz a gond több oldalon is előjön, vagy a látogató útja több ponton elakad, érdemes a teljes felépítést átnézni. Egy részletes weboldal-audit segíthet feltárni, hogy elszigetelt hibáról van-e szó, vagy a tartalom, az elrendezés és a működés együtt okoz nehézséget.
Ha a javítások sorra újabb problémákat hoznak elő, lehet, hogy a weboldal alapjait is át kell gondolni. Ilyenkor a weboldalkészítés során már a tervezés elején érdemes figyelembe venni a mobilos feladatokat. Kezdd a legnagyobb akadállyal, és haladj tovább a feljegyzett hibák alapján.
A mobilbarát weboldal készítés akkor támogatja az üzleti célodat, ha a látogató telefonon is könnyen megtalálja a fontos információkat, használni tudja az oldalt, és eljut a következő lépésig. Nézd végig a teljes utat a saját készülékeden, a főoldaltól a kapcsolatfelvételig. A betöltés önmagában kevés, a menünek, a gomboknak és az űrlapnak is működnie kell.
Ha hibát találsz, kezdd azzal, ami akadályozza az érdeklődést vagy a vásárlást. Utána jöhet az olvashatóság, a navigáció és a megjelenés finomítása. Nem kell mindent egyszerre átépítened. A javítási sorrendet az határozza meg, mit szeretnél, hogy a látogató elérjen az oldalon.
Én több mint 50 ügyfél weboldalát kezelem és tartom karban, ezért a weboldal kialakításánál az üzleti célból indulok ki.
Egy weboldal akkor mobilbarát, ha telefonon is könnyű olvasni, megtalálni a fontos információkat és elvégezni a következő lépést. A szöveghez nem kell nagyítani, a menü kezelhető, a gombok pedig kényelmesen megérinthetők. A mobilbarát weboldal készítés során ezért a megjelenés mellett azt is ellenőrizd, hogy a látogató eljut-e például a telefonszámig, az időpontkérésig vagy a vásárlásig.
Vedd elő a telefonodat, és próbáld végig az oldalt úgy, ahogy egy érdeklődő tenné. Nyisd meg a főoldalt, keress meg egy fontos információt, használd a menüt, majd próbáld ki a kapcsolatfelvételt vagy a vásárlást. Figyeld, kell-e nagyítani, félre lehet-e koppintani, és érthető-e az űrlap visszajelzése. Ha van rá lehetőséged, ismételd meg a próbát egy másik saját készüléken is.
Nem. A megnyílás csak azt mutatja, hogy az oldal betölt, a kényelmes használatot nem. Ha apró a szöveg, nehéz megtalálni a menüt, vagy az űrlap mezői nem kezelhetők, a látogató elakadhat, mielőtt kapcsolatba lépne veled. Próbáld végig a telefonos utat a keresett információtól a következő műveletig. Ha közben keresgélned vagy kerülgetned kell az elemeket, érdemes javítani az oldalon.
Én azt javaslom, hogy minden nagyobb módosítás után nézd meg telefonon is az érintett oldalt. Új menüpont, frissített űrlap vagy átalakított kezdőlap után próbáld végig a fontos műveleteket. Nincs minden weboldalra érvényes, kötelező időköz. Ha ritkán nyúlsz az oldalhoz, akkor is teszteld időnként a kapcsolatfelvételt és a legfontosabb funkciókat, ne csak akkor, amikor valaki hibát jelez.
A reszponzív weboldal elrendezése alkalmazkodik a képernyő méretéhez. Például a többoszlopos tartalom telefonon egymás alá kerülhet. A mobilbarátság tágabb szempont: azt jelenti, hogy az oldal telefonon ténylegesen kényelmesen használható. Egy oldal lehet reszponzív, de attól még nehéz lehet rajta olvasni, navigálni vagy űrlapot kitölteni. A két fogalom összefügg, de nem ugyanazt jelenti.
Elsőként azt a hibát javítsd, amely megakadályozza a látogatót a legfontosabb feladatában. Ha például nem működik az ajánlatkérő űrlap, vagy nem található a telefonszám, kezdd ezekkel. Utána jöhetnek az olvashatósági és navigációs gondok, majd a kisebb megjelenési hibák. Jegyezd fel, melyik oldalon találkoztál a problémával, mit akadályoz, és mi legyen a következő javítási lépés.
Ha átbeszélnéd, hogyan igazítsd a mobilos használatot az oldalad céljaihoz, foglalj díjmentes konzultációt.
„Olyan érzés volt, hogy nem egyedül dolgozom az oldalamon, hanem ketten együtt, két tulajdonos gondolkodik...
...abban, hogyan lehetne ezt az üzletet a legjobban beindítani, hogyan lehet ezt az oldalt a legjobban összerakni."
„Az ügyfeleink a legfontosabbak számunkra. Ezért dolgozunk a legjobbakkal...
...és ezért bízzuk a weboldalaikat Rád.'
'Webfejlesztő sok van, Rudiból csak egy.
Szerencsések vagyunk, hogy a vele való munka során olyan szakemberre bízhatjuk magunkat és az ügyfeleinket, aki ugyanúgy a tökéletes végeredményre törekszik, mint mi."
"Rudi az, akit vállalkozóként webes "kollégának" álmodtam magamnak.
Megvalósítja azt, amiről még nem is tudom, hogy szükségem lesz rá. Mindig ott van, amikor szükségem van rá. Az első pillanattól kezdve érzem, hogy egy csapat vagyunk. Imádom!"
