Fix, Likvid, Adaptív és Reszponzív weboldalak

Több ügyfelünktől érkezett már olyan igény, hogy alakítsuk át meglévő weboldalukat "teljes oldalszélességűre" vagy hogy az - a legújabb trendeknek megfelelően - mobileszközökről is élvezhető legyen. Mivel leginkább a webes szakemberek ismerik a weboldalak felépítése mögötti lehetőségeket, így ezzel az irománnyal szeretnénk egy kicsit világosítani a képet.

Amikor egy weboldal tervezése során a struktúra meghatározásához jutunk, alapvetően négy féle technológia közül választhatunk: ezek a fix, likvid (folyékony), reszponzív és adaptív megoldások.
és hogy mit is tudnak ezek a technológiák? Nézzük sorban!
 

1. Fix weboldalak

A fix weboldalaknál egy előre meghatározott szélességben (pl. 1000 pixel) szerepeltetjük az oldal teljes tartalmát. A böngésző ablakát ezeknél az oldalaknál akármekkorára növeljük vagy csökkentjük, a weboldal szélessége, és ezzel együtt a struktúrája ugyanakkora marad.
Ennek a megoldásnak nagy előnye, hogy minden felbontáson ugyanúgy néz ki az adott weboldal (tehát mind a grafikai elemek, mind a tipográfia abban a formában marad, ahogy a tervezők azt megálmodták), és nem kell azon aggódni, hogy egy extrém felbontáson szétesnek az elemek.
Hátránya viszont, hogy olyan készülékeken, amelyekbe nem fér bele a weboldalunk (mobiltelefonok, kisebb tabletek), a tartalom folyamatos nagyítására és kicsinyítésére van szükség, amely kényelmetlen lehet.

2. Likvid (vagy folyékony) weboldalak

A likvid weboldalaknál a szélességet nem fixáljuk, hanem egy százalékos értéket adunk meg neki (pl. 100%), így a tartalmak mindig a képernyő egyik szélétől a másik széléig helyezkednek el. Ahogy a folyadék, úgy a weboldal szövegei és fotói kitöltik a rendelkezésre álló teret (innen a neve). Ha csökkenteni kezdjük a böngésző szélességét, akkor az egyes oszlopok szélessége folyamatosan csökken, és velük együtt a bennük található tartalmaknak is egyre kevesebb hely jut, így átrendeződnek.
A megoldás előnyének tekinthető, hogy a weboldal széltől szélig ér egy nagyobb, széles vásznú kijelzőn is, viszont az előnye mellett ez a hátránya is: mivel az oszlopok szélessége nagyon megnőhet, a szöveges tartalmaknál hosszú sorok alakulnak ki, amely nagyban rontja az olvashatóságot (a szemünk nehezebben találja meg a következő sort). Emellett a technológia hátránya, hogy az egyes tartalmi elemek elhelyezkedésére csak kicsi ráhatásunk van, így a weboldalunk míg egy bizonyos felbontáson jól mutat, addig egy kisebb vagy nagyobb kijelzőn olyan formában rendeződik át, ami már nem ad esztétikus képet.

3. Adaptív weboldalak

Az adaptív weboldalak már egy komoly előrelépést jelentenek a fix és likvid weboldalakhoz képest. Ennél a technológiánál különböző elrendezéseket (layout-okat) készítünk a különböző felbontásokhoz és ezeket összekapcsoljuk. Tehát a weboldal adaptálódni fog ahhoz a felbontáshoz (vagy eszközhöz), ahonnan azt megnyitják. Az első mérföldkő például a desktop verzió, amely 3 hasábban prezentálja a tartalmakat. Ha viszont egy bizonyos szélesség alá megyünk, akkor már a második elrendezésünk jelenik meg, amely 2 hasábos, és a 900px alatti szélességekre van optimalizálva. Ha tovább csökken a böngészőnk szélessége (tegyük fel, hogy mobiltelefonról nézzük a weboldalt), akkor már nem 2 vagy 3 hasábban fognak megjelenni a tartalmak, hanem az egész oldal átalakul 1 hasábossá.
Ennek a módszernek a legnagyobb előnye, hogy a weboldalunk igazodik az egyes felbontásokhoz, hátránya viszont, hogy a struktúrát annyiféleképpen meg kell tervezni és le kell programozni, ahány mérföldkőre fel akarunk készülni. Mivel ez egy elég munkaigényes feladat, növeli a weboldal elkészítésének az idejét, illetve annak elkészítési költségét.

4. Reszponzív weboldalak

A legújabb, és napjainkban leggyakrabban használt technológia a reszponzivitás. A felsorolt 4 megoldás közül a legnépszerűbb is. A reszponzív weboldalak hasonlóan működnek, mint az adaptív weboldalak, viszont a reszponzív megoldások már nem csak mérföldköveket ismernek, hanem átmeneteket is.
Tehát itt a weboldal már nem csak egy bizonyos szélességnél alakul át, hanem a böngészőnk csökkentésével együtt az folyamatosan változik: mind a hasábok szélessége, mind a szövegek mérete, mind a fotók, grafikai elemek. Ez többek között azért jó, mert egy profin optimalizált reszponzív weboldalt bármilyen felbontás alól és eszközről nézzük is, mindig élvezhető felülettel, megfelelő betűmérettel, az ujjunkkal is könnyen eltalálható gombokkal fogjuk szembetalálni magunkat.
A reszponzív weboldalak előnyei és hátrányai megegyeznek az adaptív megoldásokéval.

Ahhoz, hogy a fenti 4 megoldás könnyebben elképzelhető legyen, készítettünk egy demó oldalt, ahol ezeket szimuláltuk le. A megtekintéshez kattintson ide.

Zárszóként érdemes még megemlíteni, hogy az irány és a trendek egyértelműen a reszponzív weboldalak felé mennek, mivel a jövőben nagy számú internetezésre képes eszközre kell felkészülni, amelyeknek felbontásai is nagyban eltérnek majd egymástól (gondoljunk csak az ultraHD kijelzőkre vagy akár egy high-end hűtő érintőkijelzős felületére). Ezt az igényt pedig jelen állás szerint a reszponzív technológia elégíti ki a legteljesebben. Ezért ha a weboldala még a fix vagy likvid technológiával készült, akkor lassan érdemes elgondolkoznia abban, hogy a weboldalát reszponzívvá alakíttassa vagy egy teljesen új, már ezekkel az alapokkal rendelkező weboldalt készíttessen.