Ha ma valaki rátalál a vállalkozásodra, jó eséllyel telefonon nyitja meg az oldaladat. Nem az irodai monitoron, nem kényelmes széken ülve, hanem buszon, sorban állva, félig figyelve. A mobile first tervezés pont erre a helyzetre épít: nem utólag szorítja a kész oldalt kisebb képernyőre, hanem eleve onnan indul.
A különbség nem apró. Egy utólag mobilra igazított oldalon a menü összecsúszik, a gombok apróak lesznek, a fontos mondat pedig valahol a harmadik görgetés után bújik meg. Egy telefonra tervezett oldalon viszont az első képernyőn ott van, amiért az ember jött.
Mit jelent pontosan a mobile first tervezés?
Azt, hogy a tervezés a legszűkebb helyen kezdődik. Előbb megszületik a telefonos nézet, és csak utána bővül nagyobb képernyőkre. Ez fordítva van, mint ahogy a legtöbb oldal készül.
A sorrend azért számít, mert a szűk hely döntésre kényszerít. Egy 1920 pixel széles vásznon minden elfér: a három hasábos blokk, a nagy fejkép, a hat menüpont meg a lábléc négy oszlopa. Telefonon ugyanez egymás alá kerül, és hirtelen kiderül, hogy a látogatónak nyolcszor kell görgetnie az árakig.
Ha viszont a telefonnal kezdesz, kénytelen vagy eldönteni, mi a legfontosabb. Ez a kényszer teszi jobbá az oldalt — nem csak mobilon, hanem asztali gépen is.
Miért a telefon a kiindulópont
Két oka van, és mindkettő gyakorlati.
Az egyik a látogatóid szokása. A legtöbb magyar kisvállalkozás oldalán a forgalom java telefonról érkezik. Ez nem jóslat, hanem olyasmi, amit a saját Analytics-edben pár kattintással ellenőrizhetsz. Nézd meg, és valószínűleg meglepődsz, mennyire eltolódott az arány.
A másik a Google. A kereső évek óta a mobil változatot nézi elsőként, amikor eldönti, mit ér az oldalad. Vagyis ha a telefonos nézeted szegényesebb, mint az asztali, a kereső a szegényesebbet látja. Ez akkor is igaz, ha te magad mindig gépről nyitod meg.
Így tervezz telefonra először — lépésről lépésre
A folyamat nem bonyolult, csak fegyelmet kér.
1. Írd le, mit akar a látogató. Ne azt, hogy te mit akarsz elmondani. Egy fodrászatnál ez az időpontfoglalás és a nyitvatartás. Egy könyvelőnél a szolgáltatások meg a kapcsolat. Egy webshopnál a termék és az ára.
2. Rakd sorrendbe. Ami a listád elején van, az kerül az első képernyőre. A többi jöhet lejjebb. Ez a lépés fáj a legjobban, mert itt derül ki, hogy a cég huszonöt éves története nem fér az elejére.
3. Rajzold meg a telefonos nézetet. Egy sima papírlap is elég hozzá. Egy oszlop, egymás alatti blokkok, nagy gombok. Ha itt jónak tűnik, nagy képernyőn is jó lesz.
4. Csak ezután nyisd ki nagyobbra. A plusz hely nem arra való, hogy több mindent zsúfolj be. Arra való, hogy a meglévő tartalom levegősebb legyen.
Mit hagyj ki, és mit tarts meg
A leggyakoribb tévedés, hogy a mobilos oldal legyen „ugyanaz, csak kisebb”. Nem az. Vannak elemek, amik telefonon inkább zavarnak.
- A hatalmas fejkép csúszkával. Lassan tölt, és a látogató úgyis elgörgeti. Egy jó kép és egy világos mondat többet ér.
- A felugró ablak azonnal. Telefonon a fél képernyőt elfoglalja, és a bezáró ikon pont akkora, hogy ne lehessen eltalálni.
- A sokoszlopos táblázat. Oldalra görgetni senki nem szeret. Bontsd kártyákra, vagy hagyd el a kevésbé fontos oszlopokat.
Amit viszont mindenképp tarts meg: a telefonszámot kattintható formában, a címet térképre mutató linkkel, és a legfontosabb gombot fixen, kéznél.
A hüvelykujj-szabály
Telefonon az ember egy kézzel görget, és a hüvelykujjával kattint. Ez meghatározza, hova érdemes tenni a fontos gombokat: a képernyő alsó kétharmadába, ahol a hüvelykujj kényelmesen elér.
A gomb mérete sem mindegy. Ha egy link akkora, mint a szöveg körülötte, ott mellé fogsz nyúlni. Adj neki rendes felületet és elég helyet a szomszédjától. Ez az apróság többet dob a foglalásokon, mint egy új szín.
Ugyanez a betűméretre is igaz. Ami monitoron elegánsan kicsi, az telefonon olvashatatlan. Ha hunyorítanod kell, a látogatód is hunyorít — csak ő inkább visszalép.
A sebesség: a mobil oldal legnagyobb ellensége
Otthoni wifin minden gyors. A valóság viszont az, hogy a látogatód épp a városban van, gyenge térerővel. Ott derül ki, mennyit nyom az oldalad.
A legtöbb lassúság három helyről jön. A méretezetlen képek viszik a legtöbbet — egy fényképezőből kirakott fotó simán öt megabájt. Utána jönnek a betűtípusok: ha négy fontcsaládot töltesz be, mindegyik külön kérés. Végül a beépülő szkriptek, chatablak, követőkód, térkép, amiből mindegyik ad egy kis csúszást.
Jó hír, hogy ezek mind javíthatók, és a javítás látszik is. Ha érdekel a részletes lista, a betöltési sebesség javításáról külön írtunk.
Tesztelés valódi eszközön
A böngésző fejlesztői nézete hasznos, de nem mutat meg mindent. Nem érzed rajta, hogy a gomb tényleg kényelmesen elérhető-e, és nem látod, hogyan viselkedik az oldal gyenge hálózaton.
Ezért a végső próbát csináld telefonon. Nyisd meg az oldalt a sajátodon, aztán kérj meg valakit, aki még nem látta. Adj neki egy feladatot — „foglalj időpontot” vagy „keresd meg az árakat” — és nézd, hol akad meg. Két perc alatt többet tanulsz, mint egy órányi elemzésből.
Érdemes több készüléken is megnézni. Egy nagy képernyős telefonon minden szépen elfér, egy kisebb, régebbi darabon viszont máshol törik a szöveg.
Gyakori hibák, amikbe a legtöbben belefutnak
Az első, hogy a menü minden pontja bekerül a hamburger ikon mögé, beleértve a legfontosabb gombot is. Az időpontfoglalás vagy a kapcsolat maradjon kint, látható helyen.
A második, hogy a szöveg gépről íródik, és telefonon derül ki, hogy a bekezdések túl hosszúak. Mobilon egy öt soros bekezdés már falnak tűnik. Tördeld rövidebbre.
A harmadik, hogy az űrlapba tizenkét mezőt tesznek. Telefonon minden mező külön fájdalom. Kérd el a nevet, az elérhetőséget, és ha muszáj, egy rövid üzenetet. A többit úgyis megbeszélitek.
Hogyan kapcsolódik ez az egyedi tervezéshez?
A mobile first és az egyedi megjelenés nem egymás ellentéte. Egy sablon is lehet telefonbarát, csak kompromisszumokkal: azt a szerkezetet kapod, amit a sablon készítője kitalált, nem azt, ami a te látogatóidnak kell.
Ha egyedi az oldal, a sorrendet te határozod meg. Egy autószerelőnél a telefonszám kerül előre, egy tanácsadónál a bemutatkozás, egy webshopnál a termék. Ugyanaz a mobile first elv, más megvalósítással.
Arról, hogy miért éri meg egyáltalán a telefonos nézettel foglalkozni, korábban külön cikkben is írtunk — ez a mostani inkább arról szól, hogyan csináld.
Összefoglalás
A mobile first tervezés nem divatszó, hanem egy sorrend. Előbb a telefon, aztán a nagyobb képernyő. Ez a sorrend kényszerít arra, hogy eldöntsd, mi a fontos — és ettől lesz jobb az oldal minden eszközön.
Ha most készül a weboldalad, kérd meg a fejlesztőt, hogy a telefonos nézetet mutassa meg először. Ha pedig már megvan, nyisd meg a sajátodon, és próbáld végigcsinálni azt, amit egy ügyfeledtől várnál. Ami ott akad meg, az a következő feladat.
Segítünk, ha ebben elakadsz — vedd fel velünk a kapcsolatot, és átnézzük együtt a mobilos nézetet.
