A technika fejlődésével egyre több eszköz jelent meg amin kijelző és internet van és 2018-ban a weboldal szó szinte tökéletesen egybeforrt a reszponzív kifejezéssel. Ebben a blogbejegyzésben ezt a fogalmat/témát fogjuk boncolgatni.
Mit is jelent pontosan, hogy reszponzív ?
A Wikipédia így fogalmazza:
“A reszponzív weboldal (RWD) egy olyan megközelítéssel tervezett weboldal, amelynek a célja az, hogy optimális megjelenést biztosítson – könnyű olvashatóság, egyszerű navigáció a lehető legkevesebb átméretezéssel és görgetéssel – a legkülönfélébb eszközökön (az asztali számítógép monitorjától egészen a mobiltelefonokig).”
Összegezve, ez annyit tesz számunkra, hogy minden megjelenítőn megfelelően, vagyis pontosabban az adott eszközhöz viszonyítva megfelelően fog megjelenni a weboldalunk.
Miért fontos ez?
Régebben kevés megjelenítő volt, szinte csak számítógép monitorok, ahogy bővült az olyan eszközök kínálata, amelyekről weboldalakat lehet látogatni -okos-telefonok, konzolok, tabletek, okos-televíziók, stb.-, úgy érződött, hogy egyre nagyobb szükség van egy olyan újításra, amely lehetővé teszi a weboldal kijelző mérethez való tökéletes illeszkedését, mert különben macerás a navigálás, és folyamatosan pásztázni kellett a főtartalmi részt, vagyis az általános 960pixel szélességet.
Viszonyításképp, egy Sony Xperia X8 kijelző felbontása 2010-ben (első Androidos telefonom) 320×480 pixel és csak az utóbbi években jelent meg a HD és a Full HD (vagy attól nagyobb) felbontás a telefonokon.
Hogyan működik és mire figyeljünk?
Az egész úgy működik, hogy az oldal háttere képes felvenni egy adott méretet, ezt általában egy alapszínnel vagy színátmenettel oldják meg CSS-ben (A weboldal stílusleíró lapja), folyamatos vízszintes szakaszokra bontva a weboldalt, ahol az egyes elemek méreteit nem pixelben adjuk meg hanem százalékban, vagyis hogy a kijelző hány százalékát fedje majd le az adott rész. Ez működik képeknél és minden felépítő elemnél egyaránt (szövegeknél is, de ott inkább sortörés van).
Amire fontos figyelnünk, hogy vannak olyan eszközök, ahol külön kell hozzárendelni egy eszközcsoporthoz egy kódot, de erről később… Emellett arra, hogy a felhasznált képek felbontása érje el a legalább a Full HD szélességet vagyis az 1920 pixeles felbontást teljes szélességben vagy ennek a százalékos arányát, ahány százalékát foglalja jelen esetben az 1920 pixelnek.
Változik-e valami valamilyen más kijelzőn?
Igen, vannak olyan mobil eszközök, amik érintőpanellel vannak felszerelve és mondjuk a navigáció elemit is teljes szélességű vízszintes sávok alkotják, hogy a gombok nagyobbak és könnyen “benyomhatóak” legyenek.
Kötelező-e a használata?
Nem kötelező a használata, de jelenleg lassan már ott tartunk, hogy kiszorulnak a számítógépek a böngészésből, így maradnak a mobil eszközök, ahol pedig nincs állandó fix felbontás, így sokszor hibás vagy nehezen böngészhető lesz, ha nem használjuk.
Milyen előnyei vannak?
Személyes véleményem szerint jobb a megjelenés és szinte minden eszközön ugyanúgy meglesz, mert a méretek igazodnak hozzá, sok esetben már a képeké is (svg) amellyel magasabb eszköztámogatást lehet elérni.
Az előbbiek miatt tehát összegzésként kijelenthetjük, hogy használata erősen ajánlott mindenki számára.