Webdesign: milyen gridet használjunk?

Igazából minél többet foglalkoztam ezzel a témával az elmúlt években, annál kevésbé vagyok biztos abban, hogy adott projektekhez milyen gridelést érdemes választani. Ugyanakkor komoly ember rendszerben gondolkodik. Rendszerben építkezik. És rendszerben módosít az építményén. A grid mindennek az alapja. A site logikai sémája.

Az utóbbi években a reszponzívdizájn-igények miatt... vagyhát nevezzük nevén a gyereket: az egyre többféle fizikai méretű és felbontású készülék elterjedése miatt egyre fontosabbá vált, hogy mielőtt nekikezdenénk egy-egy site megrajzolásához és felépítéséhez, megválasszuk a megfelelő, minden igényünket kielégítő rácsot.

Az alapiskola szerint ameddig az 1024x768-as felbontású kijelzők aránya nem esik be 10 százalék alá, addig a legokosabb dolog az amúgy nagyon egyszerű 20x20x20 pixeles gondolkodást feltételező 960-as gridelés

Itt egy kicsit keresztbebasz, hogy például az IAB nagyszerű "szetnderdjei" között olyan hirdetésméreteket találunk, mint például a 300x250 vagy a 970x415. 

Mindamellett szerintem az egyik legkényelmesebb, az agyat leginkább logikus gondolkodásra szoktató grid a 960-as. 

A finomabb lelkűek szerint csak az aranymetszést kifejezetten támogató 970-es gridelés lehet üdvözítő. Itt 12 oszlop esetén 70 pixeles oszlopszélességgel, és 10 pixeles távolságokkal kell operálnunk:

grid.png

Vannak újabb iskolák is. Míg a 960-as gridelésnél az 5 pixel az alapegység (hiszen a 20-as sávokat maximum 5 pixelig tudjuk visszabontani a gridben), addig a 978.gs esetében ez a baseline 6 pixel. A 978-as gridelés azzal kecsegtet, hogy a smartmobil és retina világban is el fogunk tudni boldogulni vele. 

Viszont itt egy 12 oszlopos gridnél 54 pixeles hasábokkal és 30-as távolságokkal kell dolgozni, ami - hát hogy is mondjam - nem annyira kellemes a szemnek és az agynak. Ugyanakkor - lévén az oszloptávolság itt 30px, a 960-as 20 és a goldengrides 10 helyett - szellősebben tudunk dizájnolni. 

Aztán van egy negyedik, újabb iskola is. Az 1140-re gridelés. Ebben az esetben alapnak az 1280-as felbontást vesszük, majd innen százalékolunk vissza a kisebb felbontások felé. Például az 1024-hez. Itt az tud problémát okozni, hogy 1024 alatt szörnyszülött méretekkel kell dolgoznunk. Sőt, mégcsak pixelpontos sem lesz az arányítás ezen a felbontáson. Ugyanakkor az kétségtelen, hogy ebbe az irányba tartunk. A baseline lassan áttevődik az 1280 px-es szélesség felé. Lejjebb és feljebb pedig százalékolunk. Pixel meets em...

A kérdésem tehát egyszerű: ki mire esküszik, milyen prókat és kontrákat tapasztaltatok eddig a fenti 4, vagy akár más gridelések kapcsán? És mivel dolgoztok most a legszívesebben?

Címkék: layout 960 webdesign gridelés 960.gs 978.gs reszponzív responsive design
2012.08.28. 10:50. írta: hírbehozó

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Szupi poszt! Eddig ilyennel nem is foglalkoztam de sokat agyaltam, köszi!
Az általad említett 4. kategóriába esik a Foundation is:
foundation.zurb.com 1000px a max szélesség, de ez könnyen felülírható, mert mindent %-osan számol.

Ez annyival több, hogy kapsz egy twitter bootstrap szerű CSS frameworkot is az alap stílusokhoz. Érdemes futni vele egy kört.
Egy ideje már gondolkozunk mi is a rendszer "szélesítésén". Felhasználóink között most már szinte kizárólag 16:9-es monitorok vannak, többnyire 1280+ felbontással. 1024px már csak 1.89%-a a látogatásoknak.

Mi eddig a frameless-t találtuk meg, de még nincs eldöntve semmi. CSSGrid is jónak látszik.

framelessgrid.com/
@Leskó Norbert: jó nektek.

Betekintésem van néhány általános célú portál analitikájába, 15-20% között van az 1024x768-as felbontás... :\
én személy szerint a 960 grid-et preferálom adapt.js-el (adapt.960.gs/) ... így megoldható a különböző felbontások problémája