Mi az a Grid-alapú webdesign?

ekkor: 2013-01-19 · Kategória: Webdesign

Gondolkozz Grid-ben!

A Grid rendszerek általános jellemzője, hogy egyfajta előre meghatározott struktúrát adnak lapunknak. Tulajdonképpen vízszintes és függőleges vonalak összessége, melyek azonban mégis nagy segítséget jelenthetnek a grafikusoknak, ha például egy design tervet készítenek.  Gyakran a grafikai tervezés és a sitebuild rész külön történik, egymástól függetlenül. Ezért is elengedhetetlen egy rendszer, ami által a munka különböző állomásai összhangban legyenek.

Mi a Grid?

A grid nem más, mint egy CSS framework. Adott időközönként, matematikailag kiszámított vízszintes és függőleges vonalak rendszere (mely a végtermékben nem szerepel, csak a tervezés folyamatánál van jelen). Ez egy digitális háló, melynek figyelembevételével történik a tervezés, ezért tulajdonképpen a lapunk egy előre meghatározott struktúrát fog felvenni. A designereknek biztosítja a keretet a munkájukhoz, hogy a “művészi káoszt” a lehető legalacsonyabb szinten tartja, ezzel is megkönnyítve a weboldal-tervvel való további munkát. Sokféle grid-rendszert ismerünk. Mielőtt választanánk egyet, mindenképpen mérlegelnünk kell, hogy a projektünkhöz mire is van szükségünk.

960 Grid példa

Mit tartalmaznak?

Ezek a rendszerek tartalmazzák az előre meghatározott struktúrában az összes lehetséges elrendezést, példákkal illusztrálva, továbbá a hozzájuk tartozó pixelpontos méreteket, CSS kódokat, PSD sablon fájlokat, előre gyártott Javascripteket, Indesign, Corel Draw, Fireworks, Flash, Illustrator, Gimp sablonokat és még sorolhatnám. Valamelyik motorhoz tartozik CSS generátor, vagy akár pluginok Photoshophoz, melyekkel actionokat használva ledaraboltathatjuk az egész design-t, mindössze pár kattintással. Megéri hozzájuk érteni, hiszen rengeteg időt és energiát spórolhatnak meg nekünk.

Hogyan válasszam ki a megfelelő Grid-rendszert?

A kiválasztás előtt mindenképp érdemes mérlegelni a  készülő weboldal várható látogatóinak alapvető tulajdonságait. Meg kell nézni, hogy mekkora lesz a várható felbontás (mire legyen optimalizálva a lap), milyen eszközökről fognak érkezni (például mobil, tablet) stb… Magyarországon jelenleg a látogatók igen magas hányada, több mint 40% használ 1024x768px-es felbontást, amit mindenképp érdemes figyelembe venni (témakörtől függetlenül). Ezért próbáljuk a vízszintes elrendezés méretét 960px-ben maximalizálni, ha egy fix-szélességű oldalt építünk. Sok designer erőlteti a a 970-980px szélességű lapokat, viszont szerencsétlen módon a fent említett felbontásnál már megjelenik a vízszintes “navigációs csúszka”, ami könnyen tönkreteheti a felhasználói élményt.

Nem árt továbbá figyelembe venni, hogy lapunkat bővíteni szeretnénk-e a jövőben, például egy responsive kialakítással (vagy már alapból a tervekben szerepeltetni). Ha igen, akkor mindenképp érdemes körülnézni a grid-rendszerek háza táján, melyik mit is kínál.

Természetesen nem bonyolult egyedi gridet sem létrehozni, hiszen bárki ki tudja számolni ezeket az alapvető értékeket. Ha viszont a másik oldalról nézzük a dolgot, minek találjunk ki ilyet, ha már sokan megtették előttünk és teljesen ingyen hozzáférhetőek a neten.

Pár példa ingyen használható Grid alapú rendszerekre

960 Grid System

960 Grid System

Ez az egyik legelterjedtebb rendszer, rengeteg weboldal született már ennek az elrendezésnek köszönhetően. Alapja a 960px-eles alapfelbontás és eredetileg kettő elrendezésben áll rendelkezésre: van egy 12 oszlopos és egy 16 oszlopos rács is. Pár éve már a rendelkezésre áll, azonban az utóbbi időkben megint felkapottá vált, hiszen a responsive webdesign új kihívást jelent a grafikusok számára. Vége azoknak az időknek, amikor a PSD már csak egy fix-szélességű méretben készül el. Mostantól gondolni kell a többi felbontásra is. Legyen az akár extra nagy, vagy extra kicsi, a weboldalaknak igazodni kell a modern igényekhez és erre nagyon jó eszköz a 960.gs.

Blueprint

Blueprint

A 960.gs egyik elődje és egyben konkurenciája. Gyakorlatilag ugyanazokért a funkciókért érdemes használni, mint a fent említett vetélytársát. Kicsit komplexebb a gridje, mivel négyzetrács formájában is funkcionál, míg a 960 grid inkább a függőleges vonalakat részesíti előnyben, ezzel is hagyva egy kis teret a designereknek. Azt azért meg kell említeni, hogy a sitebuilding gyakran áthúzza a webdesignerek terveit, főleg, ha a különféle boxokat nem logikus úton haladva méretezik. Ebben nagy segítség lehet a vízszintes háló, hiszen itt könnyebben tudjuk mérni a boxok magasságát is. Még letisztultabb terv készíthető vele. Persze kérdés, kinek mi a cél…

978 Grid System

978 Grid System

Ez a rendszer a 960.gs-el ellentétben az 5px-es alaptávolságokkal szemben a “korszakalkotó” 6px-es távot használja, ezért az elrendezés kicsit változik. Tökéletes lehet fix-pontokat használó responsive design kialakításához is, van egy nagyon jól használható szemléltető oldala, melynél megnézhetjük a különféle felbontásokon ajánlott elrendezést. Nagyon jó a support és persze ez is teljesen ingyenes.

Profound Grid

Profound Grid

Egy nagyszerű, kifejezetten responsive-webdesignhoz tervezett grid. Ezzel teljes mértékben megvalósítható minden modern elképzelés. Természetesen van fluid, és fix elrendezés is. Nagyon látványos honalpokat lehet ezekkel a módszerekkel létrehozni. SCSS-t használ a rendszer és az állításuk szerint minden böngészőn 100%-ig hibamentesen működik.

Grid generátorok

Természetesen az előre gyártott Grid rendszereket már továbbgondolták és a legújabb trendek már túlmutatnak ezeken. A teljesen egyedi igények megszülték az Online Grid Generátorokat, amellyel megtervezhetjük egyedi és saját Grid rendszerünket. Saját távolságokkal és saját töréspontokkal dolgozhatunk és természetesen azonnal letölthetjük a teljes css frameworkot.

Gridpak

Gridpak

Szintén tökéletes (real-time) megoldás egy responsive design kialakításához. Kiválasztjuk az oszlopok számát, a távolságot és a grid szélességét. Hozzáadjuk a töréspontokat és kész is az egyedi gridünk. Egy designernek nem is kell több. A sitebuildernek pedig elküldjük a használható css-t. Milyen egyszerűen hangzik nem igaz?

Grid System Generator

Grid System Generator

Egyszerűnek tűnő oldal, de annál több található a motorháztető alatt. Az Online Grid Generátorok koronázatlan királya, hiszen ők még egy lépéssel továbbmentek. A legelterjedtebb Grid rendszereket vették alapul és ezekből a már meglévő (teljesen működőképes és a végletekig tesztelt) hálókból tudjuk létrehozni sajátunkat. Ha készen vagyunk a számításokkal, akkor nincs más dolgunk mint letölteni az elkészült állományt és elkezdeni a munkát. Továbbá itt felülnézetből láthatjuk a Gridek közötti különbségeket és így megtörténhet, hogy amire vágyunk már régen megszületett… Ilyenkor érdemes ellátogatni a szülő oldalra, hiszen ott komplexebb letölthető állományt kapunk kézhez.

Összegzés

A Grid rendszereknek tehát számos előnye van, amit részleteztem a cikkben. Az oldalakat a teljesség igénye nélkül szedtem össze, valójában az igények változóak, ahogy maguk a rendszerek is különböznek. Az a tény azonban vitathatatlan, hogy megéri őket használni, legyen az ember akár grafikus, webdesigner, vagy épp sitebuilder. A design-trendek átformálódásával (pl a responsive webdesign elterjedésével) lassan elengedhetetlen lesz a gridek használata a legalapvetőbb weblapoknál is.