Mielőtt egy elrendezést gyakorlatban megvalósítanátok, számos alapvető dolog tisztázandó. Először is el kell dönteni az elrendezés típusát. Alapvetően három lehetőség adódik.
• Rögzített
• Rugalmas
• Rugalmas
A CSS lehetővé teszi a rögzített vagy rugalmas dimenziójú elrendezéseket. A rögzített elrendezéseknél általában pixelekben megadott méretekkel dolgoznak. A rugalmas elrendezések viszont százalékos értékeken alapulnak. Mindkét elrendezési változatnak megvannak az előnyei és hátrányai.
A rögzített elrendezéseket általában akkor használják, amikor a grafikák meghatározóak az elrendezés számára. (Bár itt is vannak kivételek azáltal, hogy CSS-háttérgrafikákat használnak). Ha az elemek pixelre pontos pozícionálása számít az elrendezéseknél, akkor általában a rögzített pozícionálásnál maradnak. Ebben az elrendezési formában általában legalább az elrendezés szélességét fix pixelmennyiségre állítják be. Ez a szélesség általában bizonyos képernyőfelbontásokra irányul.
A rugalmas elrendezések más szemmel nézve. Itt nincs megadott fix szélesség. Az elrendezés itt a böngészőablak szélességétől függ.
Ilyen elrendezéseknél például a szélességet százalékos értékekben adják meg. Ha a felhasználó megváltoztatja a böngészőablak méretét, akkor az elrendezés mérete is változik.
A modern CSS tulajdonságoknak köszönhetően létezik még egy másik elrendezési variáns, a responsive elrendezés. Itt az elrendezés úgy változik, hogy például egy okostelefonon teljesen másképp jelenik meg, mint egy asztali számítógépen. Itt a PSD-Tutorials.de oldalon például egy ilyen elrendezéssel dolgoztak. Ha egy látogató az oldalt normál böngészőablakméretben nézi, akkor a következő kép adódik.
De ha a böngészőablakot összehúzzuk, valójában megváltozik a weboldalon lévő elemek elrendezése.
A variánsok előnyei és hátrányai
Mielőtt elkezdenétek egy elrendezést megvalósítani, fontolóra kell vennetek, hogy melyik említett elrendezési formát akarjátok használni. Gyorsan megmutatom nektek, hogy rögzített elrendezéseknél milyen előnyök és hátrányok vannak.
• Design sablonokat itt biztonságosan lehet megvalósítani.
• Ha a standard felbontásokat követik, alig lesznek problémák a weboldal megjelenítésével.
• Az elrendezések könnyen érthetők. (Ez az előny természetesen hasznos, ha webfejlesztőként egy ügyfélnek el kell magyaráznod egy elrendezést).
A rögzített elrendezéseknek azonban vannak hátrányai is.
• A szilárd méretek miatt nem rugalmasak, tehát például nem alkalmazkodnak nagyon kicsi vagy nagy kijelzőkhöz sem. Gyakran sok helyet pazarolnak.
• A hozzáférhetőséggel kapcsolatban bizonyos korlátozásokkal járnak.
A rugalmas elrendezéseknek is vannak előnyei és hátrányai. Először az előnyökre.
• Az elrendezések automatikusan igazodnak a böngésző ablakméretéhez.
• A látogatók így nagy hatást gyakorolhatnak a weboldal megjelenésére.
Ezenfelül itt is vannak hátrányok.
• Az eredményeket fejlesztőként nehezen lehetséges ellenőrizni. Az elrendezési útmutatásokat tehát csak korlátozottan lehet megvalósítani.
• Az oldaltartalmakat bonyolult módon kellene módosítani.
Egy további elrendezési forma a rögzített és rugalmas elrendezések közötti köztes út. Ezek a rugalmas elrendezések. Az emlegző jellemzője az em mértékegység. (Mostanában egyre népszerűbbé válik a rem is. A rem az emmel ellentétben mindig a gyökér-elemre támaszkodik, nem mint az em az őselemre).
Ezen elrendezéseknél a szélesség és magasság rugalmas. Az oldal tervezése arányosan skálázódik a böngészőablak méretéhez. Ez a tervezési forma bizonyosan a legbonyolultabb, amikor a gyakorlati megvalósításról van szó. Ennek az az oka, hogy előre nagyon pontosan tudni kell, hogyan változnak az elemek egy változó böngészőablak esetén. Az elastikus elrendezéseket főleg olyan weboldalakon alkalmazzák, ahol sok fénykép és videó található.
A rugalmas elrendezések előnyei:
• A rendelkezésre álló hely optimálisan hasznosul.
• A tartalmak mindig arányosan nagyítva jelennek meg.
Azonban a rugalmas elrendezéseknek természetesen vannak hátrányai is.
• Az elrendezések tervezése nagyon összetett.
• Az megvalósítás semmiképp sem egyszerű.
A választás nehézsége
Ezért dönteni kell, melyik említett variánsokat kívánjátok használni. Ha még teljesen az HTML/CSS fejlődés kezdetén álltok, akkor először egy rögzített elrendezést ajánlok nektek. Akik már előrehaladott ismeretekkel rendelkeznek a webfejlesztés területén, azoknak érdemes responsív elrendezésekkel dolgozniuk. Így bárhol megnyitják a weboldalt, minden eszközön tökéletesen jelenik meg.
