Responsive webdesign pár mondatban 1
Responsive webdesign. Mostanában a csapból is ez folyik a nyugati 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 van a weblapoknak egy optimális mérete, az adott monitorok optimális felbontásához méretezve, 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 a felbontása.
Mi tesz jelenleg aki szeretné hogy mobileszközökön is böngészhető legyen értelmesen a weboldala? Csináltat külön weboldalt mobilra optimalizálva, ha sok pénze van akkor csináltat tabletre is egyet. Egyszerű ki kalkulálni, hogy ez semmiképpen sem hatékony, sem anyagilag sem a belefektetett munka szempontjából. Mit lehet akkor tenni?
Itt jön a képbe ez az új megoldás a responsive webdesign, ami gyakorlatilag arról szól, hogy egy weblapunk van ami 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 responsive webdesign-nak:
- Rugalmas layout (liquid):
A weblap kulcsfontosságú struktúrá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
- 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
- CCS media query:
Gyakorlatilag az új technológia lényege. A CCS media query segítségével tudhatjuk meg a weblap látogatója által használt készülék képernyőjének méretét (és még egy csomó minden mást is), amik alapján módosíthatjuk a weblapunk megjelenését, mindezt javascript használata nélkül
- Javascript:
Amennyiben a régebbi böngészőkben is akarjuk a responsive webdesign előnyeit használni, akkor szükség lesz a javascriptre, tehát végülis nem tudjuk megkerülni
Nagy vonalakban ennyi. Én már elkezdtem a technológia tanulmányozását, melyben nagy segítségemre van Ethan Marcotte: Responsive Web design című könyve. Akit érdekel a téma az alábbi linkeken megrendelheti a könyvet, illetve a második linkre kattintva tanulmányozhatja a legmenőbb responsive webdesign-al készült weblapokat is.
2011 October 18
Köszi a cikket, nagyon hasznos volt. Erről a technikáról még nem hallottam, de sok mindent egyszerűbbé tehet az alkalmazása. Mindig tanul az ember. :-)
Helló
Ez Bakos Szabolcs szabadúszó webdesigner porfólió blogja. Ha kiváncsi vagy rá itt többet megtudhatsz róla vagy akár a portfóliójába is belenézhetsz. Amennyiben design, webdesign munkád lenne számára, vagy tanácsadásra van szükséged, nyugodtan vedd fel vele a kapcsolatot.