Reszponzív webdesign. Lassan már a csapból is ez folyik a design szférában. Miről is van szó? Mi is ez pontosan? Lássuk hát.

A webdesign eddig arról szólt, hogy volt a weblapoknak egy optimális mérete, az adott monitorok optimális felbontásához alakítva, ami az évek során a monitorok felbontásának növekedésével szinkronban nőt.

Igen ám, de közben megjelentek az okostelefonok (Iphone és társai) a táblagépek (Ipad és társai), és az internet böngészővel rendelkező kütyük (MP3 lejátszók, multimédiás TV-k, stb). Természetesen az összes felsorolt eszköznek más felbontással érkezett.

Mi tett az aki szerette volna, hogy mobileszközökön is böngészhető legyen értelmesen a weboldala? Csináltatott külön weboldalt mobilra optimalizálva, ha sok pénze volt akkor csináltatott tabletre is egyet. Egyszerűen kalkulálható, hogy ez semmiképpen sem volt hatékony, sem anyagilag sem a belefektetett munka szempontjából.

Itt jön a képbe a reszponzív webdesign (responsive webdesign), ami gyakorlatilag arról szól, hogy a weblapunk minden eszközön megfelelően jelenik meg, megfelelően olvasható. Gyakorlatilag a webdesigner-nek 3 vagy több nézetet kell terveznie a weblapon található elemek csökkentésével, növelésével, eltüntetésével trükközve, a különböző képernyő méretekre optimalizálva.

Technikailag négy kulcs eleme van a reszponzív webdesign-nak:

  1. Rugalmas layout (liquid):

A weblap kulcsfontosságú strukturális elemeinek mindenképpen rugalmas méretezésűeknek kell lenniük, hogy a különböző képernyő méreteken tudjon csökkeni, vagy nőni a méretük.

  1. Rugalmas méretarányos képek:

Természetesen a képeknek is rugalmasnak kell lenniük a különböző képernyő méretek miatt.

  1. CSS media query:

Gyakorlatilag az új technológia lényege. A CSS media query segítségével ismerhető meg a weblap látogatója által használt készülékek képernyőjének mérete (és még egy csomó minden más is), amik alapján módosítható a weblap megjelenése, mindez javascript használata nélkül.

  1. Javascript:

Amennyiben igény van rá, hogy a régebbi böngészőkben is működjön a reszponzív weblap, akkor szükség lesz a javascriptre, tehát végülis nem tudjuk megkerülni.

Nagy vonalakban ennyi. Én már a kezdetek óta elkezdtem a technológia használatát (lásd weblapom), melyben nagy segítségemre volt Ethan Marcotte: Responsive Web design című könyve.

Forrás: www.newconcept.hu (Szabolcs Bakos cíkke)