A végső döntés nagyban függ a használhatóságtól, ezért nem könnyű dűlőre jutni.

Van olyan megoldás amit minden projektünkhöz ugyanúgy alkalmazhatunk?

Akármelyiket választhatjuk, ha jól átgondoljuk az oldal koncepcióját, és ehhez mérten alakítjuk ki a design-t, akkor a megfelelő szerkezet kiválasztásával kihasználhatjuk annak előnyeit, s végeredményként egy sikeres weboldalt adhatunk ki a kezünkből.

Ez a cikk az eltérő oldalszerkezetek előnyeit és hátrányait hivatott bemutatni. Bármelyikkel készíthetünk sikeres weblapot, de mindig szem előtt kell tartanunk a használhatóságot.

Nagy látogatottságú oldalaknál fontos, hogy figyelembe vegyük a látogatók közötti különbségeket:

- képernyőfelbontás

- választott böngésző

- hozzáadott eszköztárak a böngészőn belül

- operációs rendszer

Mivel nem létezik egységes szabvány a weboldalak szerkezetét illetően, fontos megismerkednünk az alkalmazható technikákkal.

1. Különbség a fix és a rugalmas szerkezet között

Habár a designerek és fejlesztők többsége a fix szerkezetet támogatja, s a "folyékony" rétegekkel felépített oldalakat alapszintűnek tartja, nézzük meg közelebbről mindkettőt a tisztánlátás végett.

Fix rétegek

Fix oldalszerkezetnél van egy "keret", amely tartalmazza a többi elemet. A keretnek előre meghatározott szélessége van, s a benne lévő elemek is fix szélességgel rendelkeznek. A dolog lényege, hogy a keret és annak tartalma mindvégig fix szélességű marad, s helyzetük sem változik.

A képen jól látszik, hogy az elemek egytől-egyig fix mérettel rendelkeznek, s a keret 960px széles, ami a modern webdesign általános keretméretének számít.

Rugalmas rétegek

A rugalmas vagy folyékony szerkezetnél az elemek relatív szélességgel vannak ellátva, melyet százalékban mérünk. Ennél a megoldásnál az elemek szélessége képernyőfelbontás
alapján kerül autómatikusan beállításra.

2. Fix (Fixed) szerkezet

Sok designer kedvence a fix szerkezet, mert azt könnyebb elkészíteni és tartósabbnak tűnik társainál. Ők az "amit a fejlesztő lát, azt lássa a látogató is" irányzatot képviselik.

Előnyei:

- könnyebb elkészíteni az adott méretek miatt

- nincs szükség minimum magasság (min-height) és minimum szélesség (min-width) használatára, melyeket nem minden böngésző támogat

- ha a manapság minimálisnak számító 800X600-as képernyőfelbontásra optimális az oldal megjelenése, akkor a nagyobb felbontásnál sem lesz probléma vele

Hátrányai:

- a hibás szerkezet azt eredményezheti, hogy sok feleslegesen üres hely marad az oldalon, amely rontja a használhatóságot.

- kisebb felbontásnál az oldal "kilóghat oldalra", ezért horizontális gördítősávot kapcsolhat be a böngésző

Néhány példa:

960px vagy 760px?

A legtöbb designer 760px, illetve 960px széles kerettel dolgozik. A 960px-es keret jól működik 1024X768-as vagy nagyobb felbontás esetén, ezért a látogatók nagyrészénél hibátlanul jelenik meg az oldal.

A 760px-es méretet azok használják, akik figyelemmel vannak a látogatók 10%-ra is, akik kisebb felbontást használnak.

Az alábbi grafikon jól szemlélteti az internetezők által használt képernyőfelbontást:

Mindig középen a keret

Amikor fix szerkezettel dolgozunk, fontos, hogy mindig helyezzük középre a keretet az egyensúly megtartása végett. Én a margók automatizálásával szoktam ezt megtenni.

3. Rugalmas szerkezet

A designerek általában nem használnak rugalmas szerkezetet annak hátrányai miatt, de kétségtelenül vannak olyan helyzetek amikor hasznos ez a módszer. Vegyük sorra a jó és rossz tulajdonságait:

Pozitívumok:

- felhasználóbarát, hiszen a látogató böngészési tulajdonságaihoz igazodik az oldal

- a legtöbb üres hely egységesen jelenik meg a különböző böngészőkben

- ha jól építjük fel a szerkezetet, kizárhatjuk a horizontális gördítősáv megjelenését

Negatívumok:

- a designer kevésbé "uralhatja" az oldalt, éppen azért, mert a látogató beállításaihoz igazodik az

- a képek és videók minősége és élvezhetősége csökkenhet a méretbeli változások miatt

- nagy felbontásnál az üres helyek zavaróan megnőhetnek

Nézzünk egypár példát:

Nézdd meg, hogy különböző felbontások alatt hogy változnak az oldalak arányai.

5. Rugalmas (Fluid) szerkezet használat közben

Van néhány probléma, amellyel szembe kerülhetünk ezen technika használata közben. Nézzük, hogy hidalhatjuk át ezeket:

Használjunk egyszerű design-t

Letisztult és egyszerű design esetén sokkal könnyebb átlátható és hatékony kódot készíteni hozzá, amely egyben a különböző böngészők közötti kompatibilitás-problémakat is segít áthidalni.

Min-width és max-width

Két css tulajdonság, a min-width (minimum szélesség) és a max-width (maximum szélesség) alkalmazása hivatott a túl kicsi felbontás okozta problémák kiküszöbölésére.

Ha szeretnél részletes leírást, itt megtalálod:

- W3C Schools - Min-width

- W3C Schools - Max-width

Sajnos a legtöbb Internet Explorer verzió nem támogatja ezeket a tulajdonságokat. Létezik más megoldás erre az esetre, ami majd egy későbbi cikk témája lehet, most nem szeretnék kitérni rá.

6. Vegyes (Elastic) szerkezet

Ez a harmadik lehetőség weboldalunk szerkezetének kialakítására. A vegyes szerkezet egyesíti magában a rugalmas és a fix típust. A dolog lényege az "em" értékkel való méretezésben rejlik. Nézzük mi az az "em":

A pixel egy fix érték, amely minden környezetben megőrzi méretét, ezzel szemben az "em" egy relatív mértékegység, mely a látogató képernyőfelbontásához igazodik.

A vegyes szerkezet előnyei:

- ha jól kódolunk, akkor a leginkább felhasználóbarát megoldás lehet, hiszen felbontástól függetlenül dolgozhatunk a relatív méretezésnek köszönhetően

- kiváló megoldás azoknak a designereknek, akik szeretik egyszerre alkalmazni a rugalmas és fix szerkezetet, mert ebben megtalálhatók a másik két módszer előnyei

Negatívumok:

- ha rosszul kódolunk, akkor hatalmas problémákba ütközhetünk, amik miatt az oldal elriaszthatja a látogatókat

- ez a legnehezebben elkészíthető szerkezet, nagy odafigyelést, gyakorlatot és hozzáértést igényel

- a szokásos probléma: Internet Explorer esetében több hibát is hackelnünk kell

Példák

Melyik mellett döntsek?

A döntés leginkább a weboldal jellegétől, funkcionalitásától, stílusától függ. Mérlegelni kell a bemutatott technikák előnyeit és hátrányait mielőtt választanánk.

Például egy portfóliónál fontos a képek minőségének megőrzése, vagyis a nagyobb kontrol a megjelenés felett, ezért érdemes fix szerkezettel dolgozni.

Azok a designerek, akik a 100%-os kompatibilitásra hajtanak, inkább válasszák a rugalmas szerkezetet. Leginkább a nagy látogatottságú oldalak esetében figyelhető meg a rugalmas szerkezet, ahol különféle böngészőket és képernyőfelbontásokat kell követnie a tervezőnek.

Ha nem tudunk dönteni, és úgy érezzük mindkettőre szükségünk lenne, akkor ott a vegyes megoldás.

Használjuk a rugalmas és fix szerkezetet együtt, de "em" mértékegységet alkalmazzunk a fontok és a keret méretezésére. Jellemző a többi elemre megadott százalékos méret. Valójában a relatív méretezés (százalék és "em" együtt) adja a vegyes (elastic) elnevezését a módszernek.

A cikk magyar változata a Smashing Magazine kizárólagos engedélyével készült. Az eredeti változatot megtalálod itt:
Fixed vs. Fluid vs. Elastic Layout: What's The Right One For You?