Mit jelentenek a "mobile first" és a “reszponzív webdesign” kifejezések?

Írásainkat olyan, az informatika iránt érdeklődőknek szánjuk, akik egyelőre még szinte semmit vagy csak nagyon keveset tudnak az IT, weboldal készítés, internet, hálózatok, programozás, stb. világáról. Az általunk használt szavak, kifejezések és magyarázatok a nem szakmabelieknek szólnak. Cserébe közérthetően szeretnénk bemutatni az informatika különböző területeit és fogalmait.

Mi az a "mobile first" elv?

A "mobile first" elv egy olyan tervezési megközelítés, amely a weboldalak, alkalmazások és egyéb digitális termékek tervezésekor és létrehozásakor a mobileszközök sajátosságait és korlátait helyezi előtérbe. Ez azt jelenti, hogy a legkisebb képernyőméretre tervezünk, majd fokozatosan adaptáljuk a tervet az egyre nagyobb képernyők számára ahelyett, hogy mindezt fordítva tennénk. A cél annak biztosítása, hogy az alapvető funkciók és tartalom az eszközök és képernyőméretek széles skáláján elérhető és jól használható legyen, magas felhasználói élményt (UX) adva.

Miért fontos ez a megközelítés?

Az okostelefonok terjedésével az elmúlt években megfordult a tendencia: ma már többen interneteznek mobilkészülékről, mint asztali számítógépről, laptopról. Napjainkban kb. 60% a mobilon internetezők aránya és ez a szám feltételezhetően emelkedni fog, így teljesen érthető a "mobile first" elv létjogosultsága. Sőt, ne feledjük, hogy vannak olyan területek, ahol a tervezett weboldal vagy webes alkalmazás várható célközönsége - pl. az életkor vagy a téma miatt - kifejezetten erősen mobilhasználó, itt nem is kérdés, hogy a tervezésnél kis képernyőben kell gondolkodni.

Mit jelent a “reszponzív webdesign” (RWD) kifejezés?

Az angol “responsive” szó “igazodó” értelmében értendő ebben a kifejezésben. A reszponzív webdesign a webdesign olyan megközelítése, amelynek célja, hogy a weboldalak és webalkalmazások a különböző eszközökön és képernyőméreteken is jól nézzenek ki és működjenek. Ez vonatkozik okostelefonokra, táblagépekre, laptopokra és asztali számítógépekre egyaránt.

A koncepció lényege az, hogy a designnak alkalmazkodnia kell a felhasználó eszközéhez és képernyőméretéhez, nem pedig fordítva. Ezt “rugalmasan” működő “rácsszerkezet” (angolul “grid system”), képek és CSS lekérések ("SS media queries") kombinációjával érik el.

Mi teszi lehetővé az igazodást?

A grid egy olyan elrendezési rendszer, amely relatív egységeket, például százalékokat használ, nem pedig fix egységeket, például pixeleket. Ez lehetővé teszi, hogy az elrendezés egy adott helyzetben automatikusan és rugalmasan alkalmazkodjon a képernyő méretéhez. Például egy asztali számítógépen három-oszlopos elrendezés egy okostelefonon egyoszlopos elrendezéssé válik.

A képek szintén fontos szerepet játszanak az RWD-ben. A CSS használatával a képek automatikusan a képernyő méretéhez vagy egy adott területhez méretezhetők. Emellett gyakori megoldás, hogy a képeket kisebb képernyőkön kisebb változatokkal helyettesítjük a betöltési idő és a felhasználó sávszélességével való spórolás érdekében. (Ha érdekel a téma, érdemes megnézned Reszponzív képek "problémája" c. írásunkat is.) 

A CSS segítségével különböző stílusok alkalmazhatók a különböző eszközökre és képernyőméretekre. Lehetővé teszik a fejlesztő számára, hogy ellenőrizze a képernyőméretet, és ennek megfelelően különböző CSS stílusokat alkalmazzon. Így például kisebb képernyőkön megváltoztatható a betűméret az olvashatóság javítása érdekében.

Előnyök

Az RWD egyik fő előnye, hogy lehetővé teszi a fejlesztők számára, hogy egy weboldal vagy webes alkalmazás egyetlen, minden eszközön jól működő változatát hozzák létre. Így nem kell a webhely különböző eszközökre külön verziókat készíteni, ami időigényes és költséges lehet.

Az RWD a felhasználói élményt is javítja. A felhasználó eszközéhez alkalmazkodva az RWD biztosítja, hogy a tartalom a képernyő méretétől függetlenül könnyen olvasható és navigálható legyen.

Összefoglalva

A "reszponzív webdesign" egy olyan tervezési és fejlesztési módszer, amely biztosítja, hogy a weboldal vagy webes alkalmazás minden eszközön jól nézzen ki és jól működjön.

A “mobile first” elv pedig ahogy a neve is sugallja, azt célozza, hogy egy weboldalt vagy webes alkalmazást először mobilra tervezzünk meg.

***

Ha szívesen olvasnál még IT írásokat, informatika témájú cikkeink listáját erre a linkre kattintva tekintheted meg.
Ha pedig tanulásba fognál és képzések érdekelnek, ajánljuk figyelmedbe februárban induló képzéseinket:
Webfejlesztő
Webszerkesztés alapjai
Junior frontend fejlesztő
Junior Java backend fejlesztő
Junior szoftvertesztelő
Junior rendszerüzemeltető