A mobile-first szemlélet előnyei és hátrányai

Régebben, ha nem figyeltünk rá, könnyen megtörtént, hogy mire végeztünk a számítógépes böngészőkre tervezett felhasználói felület kialakításával, addigra a telefonokon megjelenő részek teljesen szétestek, egymásra csúsztak, használhatatlanná váltak.
Az elmúlt évtizedben lezaljott digitális forradalom fő mozgatórugója volt az okos eszközök, azon belül is leginkább a telefonok elterjedése.
Mivel 2010 környékén az okostelefon piac egy nagyon nagy lökést kapott a ma ismert modern mobilos operációs rendszerek elterjedésével, így egyre többen kezdték mobilos böngészőben használni az internetet, mára pedig a teljes webes forgalom több mint 54 százaléka ezeknek az eszközöknek köszönhető. Azaz, több okostelefon felhasználó van már az interneten, mint számítógép felhasználó.
Ezt tovább gyorsítja az, hogy egyre olcsóbban lehet egyre erősebb hardvert kapni, illetve az egységnyi pénzmennyiségre jutó adatforgalom és annak sebessége dinamikusan növekszik.
És persze nem csak az eszközök piaci részesedése, hanem az általuk eltöltött idő is növekszik, sokkal több digitális tartalmat fogyasztanak jelenleg mint a korábbi években.
Így hát egyértelmű az igény a jól használható mobiltelefonokra optimalizált webes felületekre.

Miért jó ez egyáltalán?

Azt gondolhatnánk, hogy teljesen mindegy, hogy a web dizájn melyik végén fogjuk meg a dolgot, mert úgyis meg kell írni mindkét felületet, időben és költségben ugyanannyi lesz a végeredmény.
Nos, ez szerencsénkre nem így van, mivel sok esetben kialakítható úgy a mobil felület, hogy az egyes komponensek felnagyítva is jól néznek ki, csak egy-egy kisebb változtatást igényelnek, például a belső elrendezésben. Ezen kívül sokkal egyszerűbb egy egységes dizájnt kialakítani, ha a mobil oldalon kezdjük, hiszen biztosan elfér minden elem a nagyobb kijelzőkön, míg a nagyobbtól a kisebb felé haladva ebben nem lehetünk teljesen biztosak.
Ez az egyszerűség a reszponzív web design alapjainak elterjedésével valósult meg. Ennek a segítségével mondhatjuk meg a böngészőnek, hogy adott kijelzőméreten hogyan jelenjen meg a tartalmunk. Minden projekt elkezdése során érdemes meghatároznunk a töréspontokat, amikhez a későbbiekben tudunk igazodni. Ezt általában a piacon lévő eszközök képernyőjének szélessége alapján tesszük meg. Az egyik legnépszerűbb meghatározás (amit például a Bootstrap is használ) a következő:

• xs: 0-575px - Telefonos álló nézet esetén
• sm : 576-767px - Fektetett nézet telefon esetén
• md: 768-991px - Tablet nézet
• lg: 992-1199px - Kisméretű asztali nézet
• xl: 1200-1399px - Közepes méretű asztali nézet
• xxl: 1400px felett - Nagyméretű asztali nézet

Találkozhatunk mobile-first keretrendszerekkel, melyek megkönnyítik ennek a szemléletmódnak a megszokását és használatát. Ilyen például a Bootstrap vagy a TailwindCSS, melyek olyan classokat tartalmaznak, amiken belül a meghatározott stílusok figyelembe veszik a kijelző méretét, akár töréspontok, akár arányok, akár elrendezés szempontjából.

Mi az a fat-finger-error?

Az egész onnan indul ki, hogy az ujjaink általában nagyobbak egy egér kurzornál. Ez azt eredményezi, hogy a kurzorra (azaz monitoros nézetre) optimalizált felületeken megjelenő, kisebb gombokat (vagy általánosan bármilyen elemet) gyakran nem tudjuk értelmetlenül nagy zoomolások és félrekattintások (misclick) nélkül megnyomni. Így értelemszerűen sokkal nehezebben használható egy UI, így ennek a problémának a megoldása is fontos feladat volt, amikor a mobile-first szemlélet létrejött.

Jó, de mik a mobile-first hátrányai?

Ez nehezen megfogható, nincs igazi, egyértelmű hátránya. Talán annyi elmondható róla, hogy attól, aki eddig nem használta, egy szemléletmód váltást igényel, ami persze idő és energiabefektetéssel jár.