Miért a fokozatosságot válaszd a webfejlesztésben?
A Mobile First Designt elemző sorozatunk első részében bemutattuk, milyen a mobil kijelzők felől induló tervezés.
Most azt nézzük meg, mennyire különbözik ez a módszer a klasszikus fokozatos leépítéstől. Első pillantásra nem sokban, és kit zavar, hogy milyen irányból indulunk el a design folyamattal, ha egyszer a grafika így is úgy is elkészül?
A valóság egy kicsit összetettebb
Az asztali gépek irányából indulva, teljes mértékben ki akarjuk használni az számítógép nyújtotta lehetőségeket. Felépítünk egy lenyűgöző terméket sok különféle technológia felhasználásával csak, hogy rájöjjünk, hogy ezek nagy része nem skálázódik megfelelően a kisebb, gyengébb eszközökön. Ez súlyos eltérésekhez és felhasználási problémákhoz vezethet, ami inkább egy összeeszkábált termék érzetét kelti, nem pedig egy hibátlan, polírozott termékét.
A fokozatos fejlesztés elvei szerint munkálkodva, a végeredmény egy egészen más történet. A feladatot egy impresszív és sovány kód kialakításával kezdjük. Mindent elhagyunk, ami nem létszükség a mobil megjelenéshez, létrehozva egy olyan terméket, ami kinézetre és funkcionalitásra is tökéletes.
Ennél is fontosabb, hogy így áthidalhatjuk azt a problémát, hogy a munka végén kelljen elkezdeni azon gondolkozni, hogy milyen elemeket lehet kihagyni a mobil verzióban. E helyett azon kell majd dolgozni, hogy hogyan lehet javítani a felhasználói élményen a nagyobb, gyorsabb eszközön. Szükségesek-e új vagy bővített funkciók, megfelelő e a megjelenése az oldalnak.
Tartalom és sebesség
A “mobile first” megközelítés legfontosabb szempontja a tartalom. Mobile first = első a tartalom. A csillogó-villogó képlapozók, flash animációk, egyedi menük mind kikerülnek a látókörből a munka kezdetén. Helyettük fókuszba kerül a tartalom megjelenítése, a felhasználóbarát kialakítás. Természetesen, ha szükséges, lehet hozzáadni lenyűgöző látványelemeket, de a kezdeti kód minimális.
A másik irányból közelítve (fokozatos leépítés) a betöltési folyamat a következő: minden kódot letölt a készülék, amire az asztali gépeknek szüksége van, ezután jönnek a media querry-k. Elkezdjük kiszórni a mobilra felesleges tartalmakat. Mobilnál ez azt jelenit, hogy a teljes programkódot letölti a telefon, majd kikapcsolja a megfelelő kódrészeket. A használaton kívüli elemek letöltésével és kikapcsolásával feleslegesen sok időt és energiát pazarlunk. A hosszú betöltési idő, sok várakozás rosszabb használhatóságot eredményez.
A mobile first szemlélettel a kód is úgy épül fel, hogy ha mobilról böngészünk, akkor csak azokat a kódokat kell letöltenie a felhasználónak, amire szüksége van ezzel gyorsabb böngészést biztosítunk a felhasználóinknak, és elkerüljük a felesleges várakozási időt. A további kódok letöltésére csak akkor kerül sor ha szükséges. Nagyon fontos, hogy ebben az esetben nem kell felesleges kódrészek kikapcsolásával foglalkozni, nem lesz használaton kívüli kód letöltve.
A design szemszögéből nézve, nem sokat egyszerűsödik a helyzetünk: nem lehet egy weboldal megjelenését egy egyszerű mobil verzión bemutatni az ügyfélnek, mivel ők általában az asztali verzióra kíváncsiak. Grafikát mind a mobil, mind az asztali verzióra érdemes kidolgozni. Ez a többletmunka megtérül a fejlesztési időben, hiszen a programozó már ismerni fogja a két végpontot. Tudja, hogyan változik a szerkezet, a tartalom, a funkcionalitás, és a köztes részt már megfelelően tudja alakítani.
Tapasztalatom szerint a mobile first megközelítés előnye a programozási részre „korlátozódik”. Ha az oldal grafikai kialakításán dolgozom, és arra is alkalmazni szeretném a mobile first szemléletet, akkor szinte semi jó nem sül ki belőle. A tervezés alatt inkább maradok a hagyományos úton. Elkészítem a tervet az összes kívánt funkcióval, és innen indulok el újabb körben a mobil változat kidolgozása felé. Egy céges arculatot vagy weboldalt számomra könnyebb az asztali verzióra kidolgozni. Innen a mobil változat kialakítása már elég egyszerű, a stílus készen áll, csak a felesleges tartalmak kizárása, legfontosabb tartalmak meghatározása van hátra és (szinte) kész is.
Végül is mire jó ez az egész?
Nem feltétlenül saját munkánk gyorsaságán, hatékonyságán fog változtatni ez a szemlélet (bár jó eséllyel azon is fog), hanem elsősorban az ügyfél és főleg a felhasználó fog profitálni belőle. Ezen keresztül ügyfelünk s végül mi is.
Ha már a grafikai tervezéstől kezdve ezzel a szemlélettel dolgozunk könnyebbé válhat a későbbi programozási fázis, mert már pontosan kitaláltuk a mobil funkcionalitást is. Amit nyerünk: optimalizált kódok, gyorsabb betöltési sebesség, több konverzió, hatékonyabb weboldal.
További források, érdekességek:
http://designshack.net/articles/css/mobilefirst/
http://www.mmwd.co/blog/responsive-vs-designed-mobile-vs-mobile-first
http://metamonks.com/mobile-first-vs-responsive/