CSS liquid design vagy any-size design
Melyik az ajánlott technika az olyan webdesign kialakítására, ami jól néz ki akármilyen felbontásban és fontméretben?
Most ebben a témában kerestem sokat, de még nem találtam pontos választ.
Többféle felépítéssel is találkoztam, nem tudom eldönteni, melyik lehet a legjobb választás.
1. Van ez a Weblabor-féle kialakítás, amikor 800×600-ra van optimalizálva az oldal, nagyobb felbontásban pedig a böngészőablak közepére kerül az oldal. Ha növeljük a fontméretet, akkor a betűk a helyükön maradnak, nem mennek át a szomszéd konténerbe. A fontméret növeléskor nem változik a teljes oldal szélessége. Ilyen az Index vagy a BBC kialakítása is, ezzel nekem az a bajom, hogy nagyobb felbontásban csomó üres terület marad a böngészőben, nem azért használok nagy felbontást, hogy kicsi területem legyen.
2. A Yahoo oldalán ha elkezdem növelni a betűméretet (Firefoxban látszik ez inkább, mert ott jó nagy betűket lehet csinálni), akkor az egész oldal szerkezete, a szélessége is nőni fog a fontmérettel együtt, mintha az egészet zoomolnám. Ez akkor van, ha mindenhol em vagy % a mértékegység, nem pedig px. Itt van egy ugyanilyen viselkedésű CSS layout: One true layout
Zoom layout
3. Aztán van olyan elrendezés, ahol az oldal olyan széles, amekorra a böngészőablak, (width: 100%) és a fontméret növelésekor a szövegek szépen bennmaradnak a saját konténerükben. Ez hasonló mint az első pontban leírt, csak itt feljes szélességű az oldal. Itt van példa: One true layout demo, ha %-ban van megadva az oszlopszélesség
Vagy Google kereső és GMail is ilyen, a tartalom a teljes ablakot elfoglalja.
Szóval a fentiek közül vagy más módon melyikkel ajánlott felbontástól és fontmérettől függetlenül jól kinéző weboldalt készíteni? Jó leírásokat, tippeket tudtok-e a témában?
■ Most ebben a témában kerestem sokat, de még nem találtam pontos választ.
Többféle felépítéssel is találkoztam, nem tudom eldönteni, melyik lehet a legjobb választás.
1. Van ez a Weblabor-féle kialakítás, amikor 800×600-ra van optimalizálva az oldal, nagyobb felbontásban pedig a böngészőablak közepére kerül az oldal. Ha növeljük a fontméretet, akkor a betűk a helyükön maradnak, nem mennek át a szomszéd konténerbe. A fontméret növeléskor nem változik a teljes oldal szélessége. Ilyen az Index vagy a BBC kialakítása is, ezzel nekem az a bajom, hogy nagyobb felbontásban csomó üres terület marad a böngészőben, nem azért használok nagy felbontást, hogy kicsi területem legyen.
2. A Yahoo oldalán ha elkezdem növelni a betűméretet (Firefoxban látszik ez inkább, mert ott jó nagy betűket lehet csinálni), akkor az egész oldal szerkezete, a szélessége is nőni fog a fontmérettel együtt, mintha az egészet zoomolnám. Ez akkor van, ha mindenhol em vagy % a mértékegység, nem pedig px. Itt van egy ugyanilyen viselkedésű CSS layout: One true layout
Zoom layout
3. Aztán van olyan elrendezés, ahol az oldal olyan széles, amekorra a böngészőablak, (width: 100%) és a fontméret növelésekor a szövegek szépen bennmaradnak a saját konténerükben. Ez hasonló mint az első pontban leírt, csak itt feljes szélességű az oldal. Itt van példa: One true layout demo, ha %-ban van megadva az oszlopszélesség
Vagy Google kereső és GMail is ilyen, a tartalom a teljes ablakot elfoglalja.
Szóval a fentiek közül vagy más módon melyikkel ajánlott felbontástól és fontmérettől függetlenül jól kinéző weboldalt készíteni? Jó leírásokat, tippeket tudtok-e a témában?
Egyensúly
Ha már lekerekített sarkokra van szükség, akkor limitálva vagy, még akkor is, ha sliding doors technikát használsz. Ennek mondjuk köze van ahhoz is, hogy a böngészőkben néhány trükkösebb CSS tulajdonság implementálása még igencsak kezdetleges.
Az IE7 megjelenésével viszont lehetőség nyílt egy újfajta dizájnra, ugyanis az már támogatja a max-width tulajdonságot. Nem teszteltem, de állítólag így van. Szóval tudsz félig dinamikus dizájnt csinálni.
Hogy mit használsz, az végső soron a Te döntésed. Amióta a saját oldalamat dinamikus méretűre csináltam, rájöttem, hogy igazából egy csomó szabadságot ad a látogatónak, mert arra méretezi az oldalt, amire akarja. Persze, ez néha nem előnyös.
Ha "webkettes" tendenciákat követsz, akkor úgyis nagyobb betűméretet használsz, ami pedig egy flow layoutnál sem jelenti azt, hogy olvashatatlan lesz a szöveg nagy képernyőkön...
Azt hiszem, nem voltam túl nagy segítség a döntésben. Talán a közhely felel meg a legjobban az esetnek:
Szal sok sikert. ;)
(Igen, nem tudok aludni, hogy ilyen elmebeted időpontban még itt vagyok. :P)
Szerintem
Úgyhogy ezért szerintem nem kell olyan layoutot csinálni mint a Yahoo, vagy ez, mert ezt el lehet érni a teljes oldal nagyításával is, nemsokára Firefoxban is.
Hanem inkább az a jobb, ahol csak a szövegméret nagyításakor nem az egész elrendezés, hanem csak a szöveg nő, de közben nem lép ki a tartalmazó divekből. Erre példa: Már fent is linkeltem.
Mert ennél a megoldásnál lehet zoomolni az egész oldalt, aki úgy szereti, hogy mindent nagyít, de lehet csak a szöveget is, aki meg azt szereti jobban. Yahoonál nincs meg ez a választás.
Meg az is jobb szerintem, ha az oldal teljes szélességű, mint a Google, nem pedig olyan, mint a BBC oldala, hogy 1280×1024-ben van oldalt egy csomó üres rész.
Vagy hogyan van ez? :) Erről nem tudtok valahol írást?