Fix szélességű design

Tíz évvel ezelőtt az ural.hu weboldalt változó szélességű design-al indítottuk el. Megjegyzem, hogy abban az időben meglepően kis képernyő felbontások voltak jellemzőek. Idővel kiderült számomra, hogy olyan erős kompromisszumot jelent változó képernyőméreteknek megfelelni, hogy igazából semmilyen felbontás mellett nem esztétikus az oldal. Ezért fix 800 pixelre váltottunk, majd minden későbbi weboldalt is fix szélességűre terveztünk már induláskor is. (Például: veteranapro.hu)

A vBulletin motor viszont „gyárilag” változó szélességű ezért tettem egy kísérletet ismét. Arra gondoltam egy ilyen fórum esetében mégiscsak az elsődleges a tartalom és csak másodlagos a design, mindenki használja csak a saját igényeinek megfelelő képernyőfelbontással. Féléve indult az oldal, de mostanra megelégeltem azt a küszködést, amit mindez jelent. Nagyon nehéz esztétikusra elkészíteni egy blogbejegyzést, de még egy igényesebb hozzászólás megformázása sem túl egyszerű úgy, hogy nem tudhatjuk milyen szélességben fogják olvasni. Nem csak a sorok hosszával van baj, szerencsére a tagok előszeretettel illesztenek videókat, fényképeket a hozzászólásokba, ezek megjelenésének sem mindegy, hogy 600, vagy 1200 pixel széles területen jelennek meg.

Maga az oldal is rondán elterül nagyobb felbontások mellett, a főoldal „esztétikus berendezése” pedig egyenesen megoldhatatlan így. Érdemes megnézni a vBulletin demo címlapját különböző méretű ablakokban. Hát nem szép. A vbSEO-t, mint céget, igényesebbnek tartom, nem lepett meg, hogy a vbSEO fóruma fix szélességű.

Na, de ennyi rizsa után nézzük mi a teendő:

A stílusváltozók közül (a Common szekcióban) a következőket kell átállítani:

doc_maxWidth: Units: px; Size: 980;

Azért, hogy ne szúrjunk ki az 1024 széles felbontással rendelkező látogatókkal, szedjük le a margókat is:

doc_margin: right: auto; left: auto;

Lényegében ennyi, én még a minimális szélességet is megemeltem, hogy minél kisebb legyen a különbség (pl mobiltelefonon):

doc_minWidth: Units: px; Size: 800;

Ezek után érdemes figyelni, és mindent kijavítani, ha így nem esztétikus. Innentől kezdve ugyanis nem mondhatjuk, hogy a látogató speciális képernyőfelbontása a probléma oka. :-)

Én például a search.css nevű sablonban kisebbre vettem a témák utolsó hozzászólásának dátumát tartalmazó doboznak a margóját:

...

.threadbit .threadlastpost dd {
            margin:0 13px 0 13px; 

...