A jó mobil landing oldal gyorsan megmutatja az ajánlat lényegét, olvashatóan rendezi a tartalmat, és kényelmesen végigvezet a jelentkezésen. Ehhez a szövegnek, a gomboknak és az űrlapnak is alkalmazkodnia kell a kis képernyőhöz. Előbb ellenőrizd az oldalt különböző nézetméretekben, majd valódi telefonon. A szép előnézet jó kezdet, de az ujjal történő használat közben is működnie kell mindennek.
Képzeld el: egy nyelvtanfolyamra jelentkeznél a telefonodról. A főcím lelóg a képernyőről, a gomb egy bélyeg méretével versenyez, az űrlaphoz pedig úgy kell oldalra húznod a lapot, mintha egy térképen keresnéd a kijáratot. Nyelvet tanulnál. Nem túlélőversenyre neveztél.
Ilyen helyzetben a látogató nem feltétlenül az ajánlatoddal elégedetlen. Lehet, hogy egyszerűen nem tudja végrehajtani a következő lépést. És ezt egy izmosabb főcím önmagában nem javítja meg.
Tartalomjegyzék
- Miben más egy mobil landing oldal?
- Mi kerüljön a mobilos első képernyőre?
- Rövidíts úgy, hogy a jelentés megmaradjon
- Az ajánlat döntse el, mi kerül feljebb
- Hogyan legyen kényelmes a gomb és az űrlap?
- A gomb kattintható területe is számít
- Az űrlap a billentyűzettel együtt férjen el
- Mikor hasznos a rögzített CTA?
- Hogyan ellenőrzöm a teljes reszponzivitást?
- Melyik mobilos hibát javítsd először?
- 12 pontos mobil landing oldal ellenőrzőlista
- Gyakori kérdések a mobilos ellenőrzésről
- Mi a neve a Chrome különböző képernyőméreteket mutató funkciójának?
- Miért érdemes 320 CSS-pixel szélességnél is ellenőrizni az oldalt?
- Mi legyen a következő lépésed?
Miben más egy mobil landing oldal?
A mobil landing oldal egy adott ajánlatra és cselekvésre épülő oldal, amelyet kis képernyőn is könnyű elolvasni és használni. A „reszponzív” azt jelenti, hogy az elrendezés alkalmazkodik a rendelkezésre álló szélességhez. A használhatóság ennél további kérdéseket is felvet:
- Érthető az ajánlat?
- Megnyomható a gomb?
- Kitölthető az űrlap?
Egy oldal attól még lehet nehézkes, hogy a hasábjai szépen egymás alá kerülnek. Ha a jelentkezési gomb előtt egy óriási, pusztán dekoratív kép foglal el 2 képernyőnyi helyet, akkor a szűkebb elrendezés megtörtént. A látogató döntésének támogatása még várat magára.
A döntési sorrendet is ellenőrizd. Kis képernyőn kevesebb információ látszik egyszerre, ezért sokat számít, mi kerül előre, és milyen kérdésre kap választ az olvasó a következő görgetésnél. Az ajánlat lényegét ne a cég történetének 4. bekezdéséből kelljen kibányásznia.
Az oldal hosszát viszont ne kezdd el pánikszerűen felezni. Egy drágább vagy összetettebb szolgáltatáshoz több magyarázat kellhet. A mobilos szerkesztés célja az, hogy a szükséges információ könnyen követhető legyen. A lényeges feltételek elhagyása később bizonytalanságot okozhat, hiába lett közben gyönyörűen rövid a lap.
A jó mobilos oldal végigvezet a következő lépésen: el tudod olvasni, el tudod érni, és végre is tudod hajtani.
A technikai alapokról a reszponzív weboldal működését bemutató cikkben olvashatsz tovább. Itt most azt nézzük végig, hogyan tudja a látogató ténylegesen használni a landing oldaladat telefonon.
Mi kerüljön a mobilos első képernyőre?
A nyitó szakaszból derüljön ki, mit kínálsz, kinek segít, és mi a következő lépés. Az első képernyőt ne díszletekkel töltsd fel: az ajánlat és a cselekvés legyen felismerhető. A hero az oldal nyitó szakasza; telefonon ezt a részt érdemes külön megtervezni, nem csak összenyomni.
Tegyük fel, hogy egy kutyakiképző kezdő gazdiknak indít csoportot. A „Harmóniában négylábú társaddal, közös utunk csodálatos élményein át” mondat talán szépen mutat a falon. A telefonon viszont a gazdi azt szeretné megtudni, hogy ez a tanfolyam segít-e a pórázon húzó kutyájával, és hol tud jelentkezni.
Egy lehetséges, szemléltető szövegváltozat: „Kezdő kutyaiskola gazdiknak: az alapoktól a nyugodtabb közös sétáig.” Alatta röviden tisztázható a helyszín, a csoport jellege és az indulás, majd jöhet egy „Megnézem a csoport részleteit” gomb. A pontos ígéret természetesen a valódi szolgáltatásból következzen.
Rövidíts úgy, hogy a jelentés megmaradjon
A főcímből először a homályos tölteléket vedd ki. Őrizd meg az ajánlat tárgyát, az olvasónak fontos előnyt és a lényegi korlátot. Ha a tanfolyam kizárólag kezdőknek szól, ezt ne hagyd le csak azért, hogy a cím beleférjen egy sorba.
A tördelést több méretben nézd meg. Egy hosszú szó, egy kézzel beillesztett sortörés vagy egy túl nagy betűméret egészen másképp viselkedhet 320 és 414 pixel széles nézetben. A cél egy olvasható főcím; nem az, hogy minden telefonon pontosan ugyanannyi sorból álljon.
Ha a cím sok helyet foglal, előbb a szöveget és a térközöket vizsgáld meg. A betűk vég nélküli zsugorítása olyan, mintha a költözésnél a bútorokat reszelnéd kisebbre, mert nem férnek át az ajtón. Időnként inkább az elrendezésen kell változtatni.
Az ajánlat döntse el, mi kerül feljebb
Nincs minden mobil landing oldalra érvényes szekciósorrend. A látogató sürgős kérdése kerüljön előre. Egy helyi, időponthoz kötött szolgáltatásnál az elérhetőség és a helyszín korán fontos lehet; egy hosszabb képzésnél előbb a tartalmat és az alkalmassági feltételeket kellhet megérteni.
Például egy fogászat konzultációs oldalán a páciensnek az első kapcsolatfelvétel módját és a vizsgálat helyét is könnyen meg kell találnia. Egy nyelviskolánál a megfelelő szint és az órarend lehet a következő döntési kérdés. Ugyanazt a blokklistát ráhúzni mindkettőre gyors. Gondolkodni viszont hasznosabb.
Kiindulásnak ezt az olvasói utat vizsgáld:
- Megérti az ajánlat lényegét és felismeri, hogy neki szól-e.
- Megtalálja a legfontosabb feltételt, például a helyszínt vagy a részvétel módját.
- Kap egy releváns bizonyítékot vagy magyarázatot, amely segít eldönteni, érdemes-e továbbmennie.
- Megérti a szolgáltatás részleteit, a folyamatot és a rá vonatkozó feltételeket.
- Eléri a jelentkezés, foglalás vagy kapcsolatfelvétel következő lépését.
Ez szerkesztési kiindulópont, nem kötelező sablon. A teljes felépítéshez a landing page szekcióinak és sorrendjének útmutatója ad további kapaszkodót.
Hogyan legyen kényelmes a gomb és az űrlap?
A mobilos gomb és űrlap akkor használható, ha pontosan látszik, mit kell megnyomni vagy kitölteni, és ehhez nincs szükség nagyításra, célzásra vagy találgatásra. Próbáld végig ujjal is a folyamatot. Az egérmutatóval könnyű eltalálni olyasmit, amit a telefonon már kevésbé.
A gomb kattintható területe is számít
A gombfelirat mérete önmagában nem mondja meg, mennyire könnyű megnyomni a gombot. A teljes érinthető felület és a szomszédos elemek távolsága számít. Fő CTA-nál, vagyis a kívánt cselekvésre vezető gombnál érdemes kényelmes, legalább 44×44 CSS-pixeles területtel tervezni.
A CSS-pixel (px) a weboldalakon használt méretegység: ezzel adjuk meg például a betűk, képek és térközök méretét. Nem feltétlenül egyezik meg a kijelző egy valódi képpontjával, mert egy CSS-pixelt több fizikai képpont is kirajzolhat. Így a megjelenítés élesebb lehet anélkül, hogy a weboldal elemei kisebbé válnának.
A 44×44 CSS-pixel gyakorlati célméret, nem minden elemre vonatkozó AA-minimum. A WCAG 2.2 AA érintési célméret-követelménye 24×24 CSS-pixelből indul ki, és meghatározott térköz- és egyéb kivételeket is megenged. A 44×44 CSS-pixeles követelmény a szigorúbb, AAA szinthez tartozik, szintén kivételekkel.
A CSS-pixel a weboldal elrendezésében használt méretegység; nem a telefon gyártója által megadott fizikai képpontszám. A gyakorlatban nézd meg, van-e elég hely a gomb körül, és nem indítasz-e el véletlenül egy szomszédos műveletet.
A feliratból pedig legyen világos a következő lépés. Egy masszázsszalon oldalán az „Időpontot foglalok” akkor pontos, ha valóban foglalás indul. Ha előbb csak visszahívást kérsz, ezt mondd meg. A jól eltalálható, de félrevezető gomb még mindig rossz irányba vezet; a CTA-gombszövegek útmutatójában találsz konkrétabb megfogalmazásokat.
Az űrlap a billentyűzettel együtt férjen el
Csak a következő lépéshez szükséges adatot kérd. Ez nem jelenti azt, hogy minden szolgáltatásnál ugyanannyi mező kell. Egy egyszerű visszahívás és egy alaposan előkészített konzultáció más információt igényelhet. A szükséges kérdések megmaradnak; a megszokásból ottfelejtett mezők mennek.
Az e-mail-mezőhöz és a telefonszámhoz megfelelő mezőtípust használj. A Google űrlapmezőkről szóló útmutatója bemutatja, hogy a mezőtípus a megjelenő kezelőfelületet és képernyőbillentyűzetet is befolyásolja. A megfelelő automatikus kitöltési jelölés pedig segít a böngészőnek felajánlani a mentett adatot, ha ez a felhasználónál elérhető.
A mező felirata kitöltés közben is maradjon látható. A W3C feliratozási útmutatója szerint a pusztán mezőn belüli helyőrző többek között azért problémás, mert gépeléskor eltűnik. A „Telefonszám” feliratnak akkor is egyértelműnek kell maradnia, amikor már beírtál 6 számjegyet.
Nyisd meg a billentyűzetet, lépj tovább a mezők között, és próbálj ki egy hibásan kitöltött mezőt. A javítás helye legyen egyértelmű, a már helyesen beírt adatok pedig lehetőség szerint maradjanak meg. Egy homályos „Hiba történt” üzenet nem segítség, csak digitális vállvonás.
Élő oldalon tesztbeküldést a saját vagy az üzemeltetővel egyeztetett tesztadattal végezz. Ellenőrizd a sikeres visszajelzést és a következő oldalt is. Az, hogy a gomb kattintható, még nem bizonyítja, hogy a jelentkezés célba is ért.
Mikor hasznos a rögzített CTA?
A rögzített, azaz görgetés közben is látható CTA akkor indokolt, ha megkönnyíti ugyanannak a következő lépésnek az elérését. A tartalom használható maradjon mellette. Ha az alsó gombsáv eltakarja az űrlapmezőt vagy a hibajelzést, akkor a segítségnek szánt elem új akadályt épít.
Ez tervezési döntés, nem kötelező mobilos kellék. Egy hosszabb szolgáltatási oldalon hasznos lehet egy visszafogott, az ajánlatkéréshez vezető gomb. Egy rövid, azonnal látható űrlapos oldalon kevésbé biztos, hogy további sávra van szükség. Az indokát az adott oldalon keresd, ne egy trendlistában.
Különösen figyelj, amikor több lebegő elem találkozik. Alul a CTA, fölötte a sütisáv, a sarokban a chatbuborék. A látogatónak már csak egy keskeny rés marad, amin keresztül úgy nézi az ajánlatot, mint egy postaládába ejtett levelet. A szándék lehetett segítőkész. A használat ettől még kényelmetlen.
Ha rögzített CTA-t használsz, ellenőrizd:
- Ne takarjon fontos tartalmat, mezőt vagy siker- és hibaüzenetet.
- Nyitott billentyűzettel is működjön az űrlap használata.
- A fókusz látható maradjon, amikor billentyűzettel lépsz a kattintható elemek között.
- Ugyanahhoz a célhoz vezessen, mint az oldal fő jelentkezési vagy foglalási gombja.
A fókusz a billentyűzettel éppen kiválasztott elem. A WCAG 2.2 AA fókuszláthatósági követelménye szerint ezt az elemet a weboldal saját tartalma nem takarhatja el teljesen. A kényelmes használathoz érdemes ennél többet célozni: a látogató ténylegesen lássa és használhassa a mezőt vagy gombot.
Hogyan ellenőrzöm a teljes reszponzivitást?
Előbb több nézetméretben, utána saját telefonon nézem végig az oldalakat. A saját munkámban a lassú betöltés, a kilógó elemek és szövegek visszatérő hibák. Olyan oldal is akad, amely egyáltalán nincs mobilra optimalizálva. Ezeket először meg kell találni; a „nálam jól néz ki” ehhez kevés.
Chrome-ban a fejlesztői eszközökkel kezdek. A funkció neve Device Mode, az eszköztár kapcsolója Toggle device toolbar. A nézetméret beállítását és a saját profilok létrehozását a Chrome hivatalos leírása mutatja be.
Az első lépéseket így tudod követni:
- Nyisd meg az ellenőrizendő oldalt Chrome-ban.
- Nyisd meg a fejlesztői eszközöket, Windows alatt például az F12 billentyűvel.
- Kapcsold be a telefonra és tabletre emlékeztető Device Toolbar ikont.
- A Dimensions választónál használd a Responsive nézetet, vagy válassz saját méretprofilt.
- Állítsd be a szélességet és magasságot, majd nézd végig az oldalt.
- A méretek között is ellenőrizz: változtasd fokozatosan a szélességet.
A saját listámban jelenleg ezek a nézetméretek szerepelnek:
Görgesd oldalra az ujjaddal a táblázatot! ⟷
| Nézet | Szélesség × magasság |
|---|---|
| Asztali 1 | 2560 × 1440 |
| Asztali 2 | 1920 × 1080 |
| Asztali 3 | 1600 × 900 |
| Asztali 4 | 1536 × 864 |
| Asztali 5 | 1440 × 900 |
| Asztali 6 | 1366 × 768 |
| Asztali 7 | 1280 × 800 |
| Asztali 8 | 1024 × 768 |
| Tablet 1 | 768 × 1024 |
| Mobil 1 | 414 × 896 |
| Mobil 2 | 393 × 873 |
| Mobil 3 | 360 × 780 |
| Mobil 4 | 320 × 568 |
Ez 13 nézetméret: 8 asztali, 1 tablet- és 4 mobilnézet. A lista a saját ellenőrzési rutinomat mutatja; nem állítom, hogy lefedi az összes telefont vagy minden böngészőkörnyezetet. A méretek közötti ellenőrzés azért is fontos, mert egy elrendezés két mentett profil között is széteshet.
Ha a böngészős ellenőrzés rendben van, a saját mobilomon is kézzel végignézem az oldalakat. A különböző méretű előnézeteket és ezt a telefonos átnézést egymásra épülő lépésként használom.
A böngészős szimuláció közelítés. A Chrome dokumentációja szerint a Device Mode nem valódi mobileszközön futtatja az oldalt, és nem utánoz minden hardveres sajátosságot. Ha egy hiba csak egy adott telefonon vagy böngészőben jelentkezik, abban a környezetben vizsgáld tovább.
A saját méretlistádat az oldaladhoz és a közönséged tényleges eszközeihez igazítsd. Ha például a jelentkezések egy részénél csak egy adott böngészőben akad el az űrlap, azt külön vedd fel az ellenőrzési körbe. A méretlista mellé az érintett böngészőt is jegyezd fel, különben egy eszközfüggő hiba könnyen kimarad az újrapróbálásból.
Melyik mobilos hibát javítsd először?
Először azt a hibát kezeld, amely megakadályozza a használatot vagy a jelentkezést. Ha az oldal nem tölthető be, a gomb elérhetetlen, vagy az űrlap nem küldhető el, akkor ezek megelőzik a finomabb szöveg- és színváltoztatásokat. Azonosítsd a hibás lépést, és utána válaszd meg a javítást.
Egy képernyőről kilógó elemnél például keresd meg, melyik blokk okozza az oldalirányú mozgást. Lehet túl széles kép, fix szélességű elem vagy nehezen tördelődő szöveg. A pontos okot vizsgáld meg. Az egész oldal túlcsordulásának elrejtése önmagában levághat olyan tartalmat is, amelyre a látogatónak szüksége lenne.
A sebességnél pedig mérj a javítás előtt. A korábbi cikkemben megmutattam, hogyan használom a PageSpeed Insights és a GTmetrix vizsgálatát, és miért ellenőrzöm a képek formátumát és felbontását. A landing oldal sebességének mérési és javítási útmutatója ehhez ad részletesebb sorrendet; itt nem ismétlem meg a teljes sebességfejezetet.
Görgesd oldalra az ujjaddal a táblázatot! ⟷
| Megfigyelt hiba | Első vizsgálat | Javítás utáni próba |
|---|---|---|
| Kilóg a szöveg vagy a kép | Azonosítsd a túl széles elemet és a tördelési problémát. | Ellenőrizd szűkebb és tágabb nézetben is, hogy minden információ elérhető. |
| Nehéz megnyomni a gombot | Nézd meg az érinthető területet és a szomszédos elemek távolságát. | Nyomd meg valódi telefonon, a környező gombokkal együtt. |
| Elakad az űrlapkitöltés | Figyeld meg, melyik mezőnél, billentyűzetállapotnál vagy hibajelzésnél történik. | Menj végig a javításon és az egyeztetett tesztbeküldésen. |
| Lassan jelenik meg az ajánlat | Mérd meg a betöltést, és keresd a konkrét késleltető elemet. | Ismételd meg a mérést összevethető feltételekkel, majd ellenőrizd a működést is. |
A táblázat hibafeltárási sorrend, nem előre megígért konverziónövekedés. Attól, hogy valamit megjavítottál, még nem tudod automatikusan, mennyivel több jelentkezés érkezik. Ehhez a saját forgalmad és a ténylegesen befejezett jelentkezések megfelelő összehasonlítása szükséges.
Ha a technikai akadályok után az ajánlat és a döntési út fejlesztése következik, a 15 lépéses landing optimalizációs útmutató segít a tágabb sorrendben. Először tedd használhatóvá az ajtót. A kilincs árnyalatán ráérsz utána vitatkozni.
12 pontos mobil landing oldal ellenőrzőlista
A következő 12 ellenőrzési ponttal körülbelül 10 perc alatt elvégezhetsz egy első átnézést egy egyszerűbb oldalon. Ez gyors hibakeresés; hosszú oldal, összetett foglalás vagy részletes technikai vizsgálat több időt igényelhet. Készíts rövid jegyzetet arról, melyik lépésnél és milyen eszközön akadtál el.
- Érthető az ajánlat? Nyisd meg az oldalt telefonon, és nézd meg, kiderül-e a nyitó szakaszból, mit kínálsz és kinek. A reklámból érkező látogató találja meg azt, amit az üzenet alapján vár.
- Olvasható a főcím? Ellenőrizd 320 és 414 pixel széles nézetben is. Maradjon értelmes a tördelés, és ne lógjon ki szó vagy sor a képernyőből.
- Használható a tartalom nagyítás nélkül? Figyeld a bekezdéseket és a mezőfeliratokat. Ha a szöveg kényelmetlenül apró, az elrendezéssel és a tipográfiával együtt vizsgáld meg a problémát.
- Van indokolatlan oldalirányú görgetés? Nézd meg, nem húzza-e szét az oldalt egy kép, gomb vagy hosszú szöveg. Egy szándékosan görgethető adattáblázat más eset; az egész oldal ne emiatt csússzon oldalra.
- Jó sorrendben kap választ a látogató? A fontos feltétel és a következő lépés legyen megtalálható. A dekoratív kép ne szorítsa indokolatlanul távolra az ajánlat lényegét.
- Kényelmes megnyomni a gombot? Próbáld ki ujjal, a szomszédos kattintható elemekkel együtt. A feliratból is derüljön ki, mi történik utána.
- Minden űrlapmező indokolt? Kösd a kérdést a következő valós lépéshez. Ami később is bekérhető, és most nem szükséges, annak ne a mobilos jelentkezés legyen az akadálypályája.
- Segít a billentyűzet és a kitöltés? Lépj bele az e-mail- és telefonszámmezőbe. Ellenőrizd a mezőfeliratot, a képernyőbillentyűzetet és az elérhető automatikus kitöltést.
- Javítható a hibás adat? Próbálj ki egy hibás formátumot. A jelzés mutassa meg, mit kell módosítani, és ne veszítsd el közben indokolatlanul a többi adatot.
- Elférnek a lebegő elemek? Nézd meg együtt a sütisávot, a chatet és az esetleges rögzített CTA-t. Nyitott billentyűzettel és görgetés közben is maradjon használható a tartalom.
- Érthető a sikeres elküldés? Egyeztetett teszttel ellenőrizd a visszajelzést és a következő lépést. A látogató tudja meg, hogy megérkezett a jelentkezése, és mire számíthat.
- Megnézted valódi telefonon is? A böngészős méretellenőrzés után görgess és használd végig az oldalt a telefonodon. A feltárt hibát a javítás után ugyanott ellenőrizd újra.
Ha találsz hibát, rögzítsd a pontos helyét és a körülményét. Például: „320 pixel széles nézetben az árblokk gombja kilóg.” Ebből el lehet indulni. A „mobilon fura” jegyzetből legfeljebb egy közös sóhaj lesz.
Szívesen olvasnál még hasonlókról? Rendszeresen megjelenő hírleveleimben ilyen és egyéb, vállalkozással, online marketinggel, web-/landing oldal készítéssel kapcsolatos fontos tudnivalókat osztok meg. Ha szeretnéd kimaxolni a vállalkozásodban lévő potenciált, akkor iratkozz fel ezekre a hasznos levelekre itt! 👇
Gyakori kérdések a mobilos ellenőrzésről
Mi a neve a Chrome különböző képernyőméreteket mutató funkciójának?
A funkció neve Device Mode, az eszköztára Device Toolbar. A fejlesztői eszközökben a telefon/tablet ikon kapcsolja be; a Responsive nézetben adható meg a méret. Részletesen a Chrome Device Mode dokumentációjában találod.
Miért érdemes 320 CSS-pixel szélességnél is ellenőrizni az oldalt?
A 320 CSS-pixel a WCAG újratördelési követelményének egyik vizsgálati szélessége. A függőlegesen görgetett tartalomnak itt is használhatónak kell maradnia információ- és funkcióvesztés, illetve indokolatlan kétirányú görgetés nélkül. A megértéshez szükséges kétdimenziós elemekre, például egy adattáblázatra kivételek vonatkoznak. A szűk nézet ellenőrzése ezért hasznos akkor is, ha a saját telefonod szélesebb.
Mi legyen a következő lépésed?
Menj végig a teljes jelentkezési úton. A nyitó szakasztól az űrlap sikeres visszajelzéséig nézd meg, mit lát és mit tud megtenni az érdeklődő. Írd fel a konkrét akadályokat, javítsd a legsúlyosabbat, majd próbáld ki újra ugyanabban a környezetben.
A böngészős nézetellenőrzés megmutathatja, hol esik szét az elrendezés. A telefonos használat pedig további kényelmetlenségeket hozhat elő. A kettő együtt értelmes munkarend; egyetlen előnézeti kép nem végez teljes minőségellenőrzést helyetted.
Szeretnél egy telefonon is átgondolt landing oldalt? Nézd meg, mit tartalmaz a landingoldal-készítési szolgáltatásom, majd kérj ajánlatot az oldaladon és az ajánlatodon alapuló megvalósításra.
