Reszponzív webdesign

A reszponzív webdesign pár mondatban


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 reszponzív webdesign pár mondatban
Reszponzív webdesign
Author: Szabolcs Bakos

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.

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

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


Bakos Szabolcs, UI/UX Designer

Kövess Facebookon a friss bejegyzésekért

Bakos Szabolcsnak hívnak, szabadúszó UI/UX Designer vagyok, több mint 17 év webdesign tapasztalattal a hátam mögött, cégek és vállalatok számára tervezek weblapokat.



Vedd fel velem a kapcsolatot!

Amennyiben kérdésed van, legyen az egyszerű információkérés, együttműködés, vagy üzleti megkeresés, örömmel állok a rendelkezésedre.

UI/UX Design
Facebook Twitter Google+ Linkedin
Web Design