Bakos Szabolcs UI/UX Designer portfóliója

A reszponzív webdesign pár mondatban

Reszponzív webdesign. A csapból is ez folyik a nyugati design szférában. Miről is van szó mi is ez pontosan?

Hálóterv készítés a Google Docs-al
A responsive web design: Még mindig kevesen váltottak!
A reszponzív webdesign pár mondatban
Szerző: Bakos Szabolcs
Reszponzív webdesign. 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 volt 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 felbontással érkezett.

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űen kalkulálható, 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 reszponzív webdesign (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 reszponzív webdesign-nak (responsive web design):

  1. 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.

  2. 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.

  3. 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.

  4. Javascript:

    Amennyiben a régebbi böngészőkben is akarjuk a reszponzív 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 rég 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. Akit érdekel a téma az alábbi linkeken megrendelheti a könyvet, illetve a második linkre kattintva tanulmányozhatja a legmenőbb reszponzív webdesign-al készült weblapokat is.

Kapcsolódó linkek:
Dolgozzunk együtt!

Amennyiben konkrét webdesign projekttel szeretnél megkeresni, vagy szeretnél velem együttműködni, kérlek vedd fel velem a kapcsolatot. Dolgozzunk együtt egy sikeres projekten!