Fix elrendezés

Likvid elrendezés

Adaptív elrendezés

Reszponzív elrendezés

Fix, Likvid, Adaptív és Reszponzív elrendezések prezentálása

A jobb felső sarokban található listából kérjük válassza ki azt az elrendezést, amilyenre váltani szeretné a jelenlegit. Az itt látható demo oldal felépítése a választott elrendezésnek megfelelően meg fog változni.

A különböző elrendezések teszteléséhez méretezze át a böngészőjének ablakát. Ahogy csökkenti az ablak szélességét, úgy figyelhető meg, hogyan vislekedik a tartalom az egyes elrendezések mellett.

Egy hasábos Két hasábos Három hasábos

Adaptív elrendezés

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.

Likvid elrendezés

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.

Reszponzív elrendezés

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.

Fix elrendezés

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.

Cím

2024.03.29

Bejegyzés rövid leírás, introja, amit kiemelünk a részletes tartalom előtt.

A bejegyzés tartalma, akár hosszabb, terjedelmesebb szövegezéssel. Az ilyen tartalmakat nem célszerű túl hosszú sorokban megjeleníteni, tipográfiailag nem ajánlott.

Link

Cím

2024.03.29

Bejegyzés rövid leírás, introja, amit kiemelünk a részletes tartalom előtt.

A bejegyzés tartalma, akár hosszabb, terjedelmesebb szövegezéssel. Az ilyen tartalmakat nem célszerű túl hosszú sorokban megjeleníteni, tipográfiailag nem ajánlott.

Link

Cím

2024.03.29

Bejegyzés rövid leírás, introja, amit kiemelünk a részletes tartalom előtt.

A bejegyzés tartalma, akár hosszabb, terjedelmesebb szövegezéssel. Az ilyen tartalmakat nem célszerű túl hosszú sorokban megjeleníteni, tipográfiailag nem ajánlott.

Link

Cím

2024.03.29

Bejegyzés rövid leírás, introja, amit kiemelünk a részletes tartalom előtt.

A bejegyzés tartalma, akár hosszabb, terjedelmesebb szövegezéssel. Az ilyen tartalmakat nem célszerű túl hosszú sorokban megjeleníteni, tipográfiailag nem ajánlott.

Link

Cím

2024.03.29

Bejegyzés rövid leírás, introja, amit kiemelünk a részletes tartalom előtt.

A bejegyzés tartalma, akár hosszabb, terjedelmesebb szövegezéssel. Az ilyen tartalmakat nem célszerű túl hosszú sorokban megjeleníteni, tipográfiailag nem ajánlott.

Link