Webdesign I - Oldaltervezés alapelvek. I. Tartalom-elhelyezés az oldalon ALAPELVEK 1.Mindig értékes és érdekes tartalom jelenjen meg az oldalon! 2.A tartalom.

Az előadások a következő témára: "Webdesign I - Oldaltervezés alapelvek. I. Tartalom-elhelyezés az oldalon ALAPELVEK 1.Mindig értékes és érdekes tartalom jelenjen meg az oldalon! 2.A tartalom."— Előadás másolata:

1 Webdesign I - Oldaltervezés alapelvek

2 I. Tartalom-elhelyezés az oldalon ALAPELVEK 1.Mindig értékes és érdekes tartalom jelenjen meg az oldalon! 2.A tartalom töltse ki legalább az oldal felét, de jobb ha a 80%-ához közelít! 3.A navigációt a minimálisra kell csökkenteni! 4.Ne legyenek túlságosan nagy méretű, „üres” képek az oldalon! 5.A hirdetéseket jobb volna teljesen kihagyni használhatósági szempontból! 6.Tartalom-kiemelés és elhagyás elve. 7.A fehér terület szerepe. => Böngészőben való megjelenítés!

3 1. Mindig értékes és érdekes tartalom jelenjen meg az oldalon!

4 Példa: A képernyő 20 % tartalmaz csak értékes információt!

5 - 31% keret (oprsz. és böngésző)- kék - 20% értékes információ (térkép)- zöld - 23% navigáció - sárga - 10% hirdetés- rózsaszín - 16% kihasználatlan terület- fehér 800x600-as felbontású képernyő 480.000 képpontból áll: 2. A tartalom töltse ki legalább az oldal felét, de jobb ha a 80%-ához közelít!

6

7 - 16% (31% volt) keret (oprsz. és böngésző)- kék - 14% (20% volt) értékes információ (térkép)- zöld - 51% (23% volt) navigáció - sárga - 6% (10% volt) hirdetés- rózsaszín - 13% (16% volt) kihasználatlan terület- fehér 700x1024-es felbontású képernyő 716.800 képpontból áll: Példa: 2. A tartalom töltse ki legalább az oldal felét, de jobb ha a 80%-ához közelít!

8 3. A navigációt a minimálisra kell csökkenteni!

9

10 4. Ne legyenek túlságosan nagy méretű „üres” képek az oldalon!

11

12 5. A hirdetéseket jobb volna teljesen kihagyni használhatósági szempontból!

13 6. Tartalomkiemelés és elhagyás elve.

14

15 A fehér terület szerepe => Böngészőben való megjelenítés! => Tipográfiai jelentősége!

16 Milyen weboldalt készítsünk? Melyik kitételnek tegyünk eleget? 1. Minidig ugyanolyan képet mutasson a weblap! vagy 2. Weblapunk maximálisan használja ki a számára adott területet! 1. Fix szélességű oldalak 2. Alkalmazkodó szélességű oldalak Kérdés melyik állítás a fontosabb a kettő közül! Ennek megfelelően 2 típus létezik: 1. Böngészőben való megjelenés

17 1. Fix szélességű oldalak Álló A4-es lap formájához hasonlíthatóak leginkább, a lap a rajta lévő tartalommal együtt függőlegesen gördíthetőek Bármilyen képernyőfelbontásban vagy bármekkora böngészőablak méretben nézzük őket, ugyanúgy jelennek meg Grafikus megközelítés, megbízható megoldás.

18 Az index.hu designerei az oldalt 977 pixel szélességű layoutora tervezték, azaz 1024x768-as képernyőfelbontásra optimalizálták. A görgetősáv ebben a felbontásban kb. 25-30 pixel (ez böngészőprg. függő) 1024-977=47, a görgetősáv számára tehát van hely bőven. Ha valaki ezt az oldalt 1280x800-asban nézi, akkor neki egy felesleges fehér sáv jelenik meg jobb oldalt. Ha viszont valaki a 800x600-as felbontásban nézi az oldalt, akkor a piros csík előtti részt látja csak és megjelenik neki a vízszintes görgető.

19 2. Alkalmazkodó szélességű oldalak Képernyőfelbontáshoz és ablakmérethez vízszintesen alkalmazkodó weboldalak tartoznak ebbe a csoportba. Úgy is nevezzük őket, hogy flexibilis weboldalak. A vízszintesen rendelkezésére álló terület méretétől függ megjelenésük. Ezt úgy oldják meg, hogy a megjelenítendő tartalom táblázatba van helyezve és a táblázat szélessége pedig a kerethez viszonyítva százalékban van megadva. A böngészőablak méretét változtatva mindig a számára rendelkezésre álló helyet igyekszik kitölteni, mindezt úgy, hogy az összes tartalmat megjelenítse. Ennek érdekében például áttördeli a szöveget, képek pedig összébb csúsznak.

20 wiki 1280 pixeles ablakban megjelenítve

21 wiki 850 pixel széles ablakban megjelenítve