Az asztali gépeden teszteled az űrlapot, és tökéletesen néz ki. Teljes szélesség, két oszlop, tágas. Mobilon beküldesz egy tesztet, és azonnal tudod, hogy valami nincs rendben. A mezők aprók. A billentyűzet eltakarja az űrlap felét. Rossz mezőre koppintasz. Az egész élmény elromlottnak érződik.
A látogatóid fele mobilon van. Ha az űrlapod nem reszponzív, a beküldéseid felét elveszíted. Ez a cikk bemutatja, hogyan tervezz telefonon, tableten és asztali gépen is működő űrlapokat.
A mobilos űrlapok mások, mint az asztali gépesek
A mobilfelhasználók másképp töltik ki az űrlapokat, mint az asztali gépet használók. Asztali gépen van hely. Használhatsz többoszlopos elrendezést. Teheted a címkéket a mezők mellé. Mobilon minden képpont számít.
A mobil billentyűzetek hatalmasak. Amikor megnyílik a billentyűzet, eltakarja a képernyő felét. Az űrlap görgetődik. A felhasználó elveszíti a kontextust. Egy gomb, amely látható volt, most a billentyűzet mögé került.
Az érintési felületeknek nagyobbnak kell lenniük. A 14 x 14 pixeles kattintható terület egérrel jól működik. Az ujjnak legalább 48 x 48 pixel kell, különben a felhasználó mellényúl.
A mobilfelhasználók ingadozó hálózaton vannak. Minden extra űrlapbetöltés vagy kép időt ad hozzá. A sebesség mobilon többet számít, mint asztali gépen.
Az egyoszlopos űrlapelrendezés
A legbiztonságosabb reszponzív űrlap az egyoszlopos. Soronként egy mező, a képernyőmérettől függetlenül.
Az egyoszlopos elrendezések egyszerűek, minden képernyőn működnek, egységes élményt adnak, és nagyon kiszámíthatók. A fő hátrányuk, hogy az űrlapok asztali gépen hosszabbnak tűnnek, és több görgetést igényelnek.
A legtöbb űrlap legyen egyoszlopos. Ha az űrlapod öt mezős, az egyoszlopos asztali gépen valójában rövidebb, mint a kétoszlopos elrendezés. A felhasználó kevesebbet görget, és több kontextust lát.
Egyoszlopos elrendezéshez használd ezt: input, textarea, select { display: block; width: 100%; margin-bottom: 1rem; }. Ez minden töréspontnál függőlegesen egymás alá rakja a mezőket.
Kétoszlopos elrendezés asztali gépen, egyoszlopos mobilon
Ha ki akarod használni a vízszintes helyet nagy képernyőkön, használj rácsot ezzel: .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } és media query-t: @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }. Asztali gépen ez két oszlopot hoz létre, mobilon pedig egyre rakja egymás alá, így az elrendezés egyszerű és reszponzív marad.
Csak azokat a mezőket csoportosítsd, amelyek valóban összetartoznak. A „Vezetéknév” és a „Keresztnév” egymás mellett értelmes. Az „Utca, házszám” és az „Ország” egymás mellett nem.
Érintési felületek és ujjbarát tervezés
A mobil minimális érintési felülete 44 x 44 pixel (az egyik mobilplatform irányelvei szerint), illetve 48 x 48 pixel (a másik szerint). Törekedj legalább 44-re.
Az érintési felület méretezése vonatkozik a beviteli mezőkre, amelyeknek elég magasnak kell lenniük a könnyű koppintáshoz (40-50 pixel jó), a jelölőnégyzetekre és választógombokra, amelyek alapértelmezetten 13 x 13 pixelesek, és CSS-sel vagy JavaScripttel legalább 44 x 44 pixelesre kell növelni őket, a gombokra, amelyeknek legalább 44 x 44 pixelesnek kell lenniük kiegészítő belső térközzel, és a címkékre, amelyeknek szintén 44 x 44 pixelesnek kell lenniük, ha a for attribútummal kattinthatók. Néha a címke és a beviteli mező együtt alkotja a teljes érintési felületet.
A beviteli mezők nagyobbá és könnyebben megérinthetővé tételéhez használd ezt: input[type="text"], input[type="email"], textarea { padding: 0.75rem; font-size: 1rem; }. A belső térköz magasabbá teszi a mezőt, és javítja az érinthetőséget.
Billentyűzetkezelés
Mobilon a böngésző billentyűzete eltakarja a képernyő alsó felét. Ha az űrlapod az oldal alján van, a beküldés gomb elrejtőzik. A felhasználónak lejjebb kell görgetnie, vagy el kell tüntetnie a billentyűzetet, hogy lássa a gombot.
Tartsd az űrlapot az oldal teteje közelében. Vagy tedd a beküldés gombot felülre is, nem csak alulra. Ne rejtsd el a fontos gombokat a billentyűzet alatt.
A billentyűzet típusa is számít. E-mail mezőhöz használd a <input type="email"> elemet, hogy e-mail billentyűzetet mutasson @ billentyűvel. Telefonmezőhöz használd a <input type="tel"> elemet, hogy numerikus billentyűzetet mutasson. Számbevitelhez használd a <input type="number"> elemet, hogy számbillentyűzetet mutasson. A megfelelő beviteli típussal a böngésző automatikusan kezeli a billentyűzet kiválasztását.
Amikor a felhasználó rákoppint egy beviteli mezőre, a böngésző a látótérbe görgeti. Ez jó. A mező látható, amikor gépelni kell. De néha elgörgethet más kontextus mellett. Teszteld az űrlapot valódi telefonon, hogy lásd a viselkedést.
Címkék elhelyezése mobilon
Asztali gépen a címkék lehetnek a mező felett, mellett vagy benne. Mobilon szinte mindig a felette lévő a legjobb.
A mező feletti címke egyértelmű. A felhasználó látja a címkét, aztán a beviteli mezőt. Keskeny képernyőn a mező melletti címke vízszintes helyet pazarol. A mezőn belüli helyőrző eltűnik, amikor gépelni kezdesz.
Bevált gyakorlat: a címkéket a mezők fölé tedd. Mindig.
<label for="email">E-mail</label>
<input type="email" id="email">
Térközök és belső margók
A reszponzív űrlapoknak mobilon több térközre van szükségük, nem kevesebbre. Az ösztönöd az, hogy mindent összenyomj, hogy elférjen a képernyőn. Küzdj ez ellen az ösztön ellen.
Használj bőkezű belső térközöket és margókat: legalább 1 rem (16 pixel) a mezők között, legalább 0,75 rem (12 pixel) minden oldalon a beviteli mezők belső térközeként, és legalább 1 rem (16 pixel) minden oldalon a gombok belső térközeként. A bőkezű térközök megkönnyítik az űrlapok használatát, csökkentik a mellényúlásokat, javítják az olvashatóságot, és mobilon a levegős elrendezés értékesebb a képernyőhelynél.
Szövegméret mobilon
A beviteli mezőkben használj legalább 16 pixelt. A kisebb szöveg nagyításra vagy hunyorgásra kényszeríti a felhasználókat. A 16 pixel az alapértelmezés, és működik.
A címkék lehetnek kisebbek, körülbelül 14 pixelesek. De a beviteli mezők legalább 16 pixelesek legyenek.
Egyes böngészők automatikusan ráközelítenek, ha 16 pixelnél kisebb beviteli mezőre koppintasz, emiatt az űrlap váratlanul ugrik és nagyít. Használd az input { font-size: 16px; } szabályt, hogy elkerüld ezt a viselkedést.
Gyakori hibák a reszponzív űrlapoknál
Kétoszlopos elrendezés használata minden képernyőméreten
Az űrlapok mobilon összeszorulnak. A mezők aprók. A címkék ügyetlenül egymásra kerülnek. Kisebb töréspontoknál mindig rakd egyoszlopossá.
Túl kicsi érintési felületek
A jelölőnégyzeteknek, választógomboknak és gomboknak legalább 44 x 44 pixelesnek kell lenniük. Teszteld valódi telefonon. Ha koncentrálnod kell a megérintéséhez, túl kicsi.
Helyőrző szöveg használata egyetlen címkeként
Amikor a felhasználó gépelni kezd, a helyőrző eltűnik. Elfelejti, mire való a mező. Mindig használj megfelelő label elemet. Megtarthatod a helyőrzőt, ha akarod, de soha ne támaszkodj kizárólag rá.
Az űrlap elhelyezése egy hosszú oldal alján
A felhasználó lefelé görget egy kapcsolatfelvételi űrlaphoz, rákoppint az e-mail mezőre, és a mobil billentyűzet eltakarja az űrlapot. Nem látja, mit gépel, és nem éri el a beküldés gombot. Tedd az űrlapokat az oldal teteje közelébe, vagy gondoskodj róla, hogy a billentyűzettel együtt is elférjenek a képernyőn.
Nincs tesztelés valódi mobileszközökön
Az asztali böngésződnek van mobil nézet módja. Hasznos egy gyors ellenőrzéshez. De nem mutatja meg, hogyan működik valójában az űrlapod telefonon. Teszteld valódi eszközökön. Kérj kölcsön telefont, ha nincs egyed.
Reszponzív űrlaptechnikák
CSS Grid rugalmas elrendezésekhez
Használd ezt: .form-group { display: grid; gap: 0.5rem; } és .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }. Az auto-fit és a minmax értékek olyan elrendezést hoznak létre, amely az elérhető hely szerint áramlik, így a mezők keskeny szélességnél egymás alá kerülnek, széles szélességnél pedig egymás mellé.
Flexbox a gombelrendezésekhez
Használd ezt: .form-actions { display: flex; gap: 1rem; flex-wrap: wrap; } és .form-actions button { flex: 1; min-width: 150px; }. A gombok asztali gépen egymás mellett vannak, mobilon több sorba törnek, és mindegyik gomb kitölti a rendelkezésre álló helyet.
Media query-k konkrét töréspontokhoz
Használd ezt: @media (max-width: 480px) { label { display: block; margin-bottom: 0.5rem; } input { width: 100%; } }, hogy a 480 pixelnél kisebb képernyőkön kikényszerítsd az egyoszlopos elrendezést.
Hogyan alkalmazkodnak a WEMASY űrlapok minden képernyőmérethez
A WEMASY űrlapépítője automatikusan reszponzív űrlapokat hoz létre. Építs asztali gépen, és a mobil már meg van oldva. Az űrlapok telefonon egyoszlopossá rendeződnek. Az érintési felületek mobilra vannak méretezve. A címkék és a mezők megfelelően vannak elrendezve. Nincs szükség extra munkára.
Nézd meg, hogyan működik az űrlapok reszponzivitása a WEMASY csomagodban.