Információ - Webdizájn tanácsok

1. ismételhető legyen: az egységnyi mintát jobbra, balra, fel és le egymás mellé lehessen tenni,
2. minél kisebb legyen az egységnyi minta, így sokkal kisebb tud lenni az egy oldallal letöltendő adatmennyiség,
3. ha nem ismétlődő, akkor legyen pl. 2500px széles és ugyanilyen magas: ennél nagyobb méretre nem kell számítani. Oda kell figyelni azonban a háttérként használt kép méretére. Ha nagyon nagy és lassan jön le, az nem tesz jót a felhasználói élménynek.

Nem plakát

Legyen a weboldallal letöltendő dizájnelemek mérete minél kisebb. Elterjedőben van a mobilinternet használata. Bár egyre ritkább, de van akinek csak 100MB-s csomagja van, de még 1GB-s csomagnál is előjön a probléma: ha egy nyitó oldalon annyi kép van, vagy olyan mennyiségű nem leprogramozható dizájnelem, hogy a kezdőlap 10-20MB, akkor a látogatónak komoly "kárt" okozunk. A felhasználói élmény sem lesz optimális.

Elég nehéz teljeskörű leírást adni itt arról, hogy mely dizájnelemek programozhatóak le. Ha egy dizájner webdizájnnal foglalkozik, egy idő után találkozik a CSS technológiával. A CSS "nyelv" a három (HTML-XML, JS, CSS) legfontosabb kliensoldali webes fejlesztő eszköz egyike. (Azért írom, hogy kliensoldali, mert ezek a kódok futnak a látogató böngészőjében, tehát ezeket a forráskódokat tölti le a böngésző amikor megjelenít egy oldalt. A szerveroldali nyelvekből, amelyek dinamikus - tehát futásidőben összerakott oldalak esetében - előállítják elsősorban a HTML-t, sok van, amelyek mind ugyanazt csinálják (PHP, JAVA, stb.). Futásidőben összerakott oldalak elsősorban azok, amelyek mögött adatbázisban tárolt adatok vannak. Amikor a látogató behívja az oldal, a szerver elkéri az adatbázistól az éppen megjelenítendő adatokat, beilleszti egy "sablonba" és már mint HTML leküldi a böngészőnek.)

Szóval a CSS nyelv arra való, hogy meghatározzuk, hogy 

1. a strukturális elemek hová kerüljenek és
2. hogyan nézzenek ki.

 A dizájn tehát két forrásból áll össze:

1. leprogramozhatatlan grafikai elemek: képek, textúrák: ezeket a CSS-sel pozícionáljuk, ismételtetjük (pl. háttér)
2. leprogramozható grafikai elemek: CSS utasításokat használunk, amelyek a böngésző értelmez

A leprogramozható grafikai elemek sajnos böngészőnként változnak. Manapság már a három legfontosabb böngésző (Internet Explorer, Firefox, Chrome) nagyjából hasonló képességekkel rendelkezik. (A webprogramozók azért nem szeretik támogatni a már elavult böngészőket, mert régebben rendkívül sok munka volt összehozni azt, hogy a honlap mindhárom böngészőn ugyanúgy nézzen ki. Áldásként tekintünk arra a trendre, hogy a böngészők gyártói sem támogatják már a kettővel ezelőtti böngészőverzióikat. Kivétel lesz az Internet Explorer, az XP miatt, mert arra a 8-as verzió volt az utolsó ami felment, hamarosan pedig kijön már a 10-es.)

1. Szegély - border: pontozott, szaggatott, folytonos, dupla vonal
2. Árnyék (IE9 nem támogatja)
3. Lekerekített szegély szélek (IE9 nem támogatja)
4. Színátmenetek (IE9 nem támogatja)
5. Átlátszóság
6. Háttér: háttérszín, képbeszúrás, kép ismétlése vízszintesen függőlegesen, háttérkép pozícionálása
7. Színek: (hexa kódolt RGB, pl.: #ffffff = fehér), fontok, hátterek, szegélyek
8. Betűtípus: (ezzel kapcsolatban lásd még: "Szövegekt szövegként" c. fejezet

Hol, milyen méretben jelenjen meg?

1. Javasoljuk az oldal középre rendezését. Ezzel kapcsolatban egyre inkább nem oszlanak meg a vélemények. Széles monitorok vannak, középen ül a látogató a monitor előtt, ne kelljen elfordítani a fejét.
2. Javasoljuk, hogy az oldal 1024 pixel széles böngészőablakra legyen tervezve. Ez azt jelenti, hogy a dizájnt 980px szélesre kell tervezni! (Görgetősáv, ablakkeret, stb. miatt.). Egyelőre ez a legelterjedtebb felbontás.
3. Javasoljuk, hogy a böngészőablak mérete ne legyen hatással a tartalmi részre (a 980px széles részre). Erről megoszlanak a vélemények. A mienk is... :) Olyan weboldalak esetében, ahol a felhasználói élményt nem növeli az, hogy kihasználhatja a kijelző teljes szélességét, ott nincs rá szükség. Ellenjavalt, mert a dizájnt sokkal nehezebb egyben tartani. Mi elsősorban webes alkalmazások esetében javasoljuk. Például a mi weboldal adminisztrációs rendszerünk vagy a Groware Business Portal kis- és középvállalati vállalatirányítási rendszerünk akkora böngészőablakot használ ki, amekkorát kap. Így ügyfeleink pl. a honlap egyes oldalainak szerkesztésekor vagy egy sok oszlopból álló jelentés tanulmányozásakor nem érzik magukat beszorítva egy feleslegesen szűk részre. Weboldalak, webáruházak esetében tehát nem javasoljuk az automatikus átméreteződést. Mindazonáltal határozott igény esetén természetesen elfogadjuk ügyfelünk szempontjait!

Tipográfia és "a szöveg legyen szöveg"

A fejlett böngészők lehetővé teszik, hogy a látogató bármilyen, a honlapon használt betűtípust meg tudjon jeleníteni. Ez még egyel kevesebb okot ad arra, hogy ha valami szöveg az oldalon, az ne szövegként, hanem képként jelenjen meg. Kerüljük a szöveg képbe illesztését! Két okból:

1. A keresők várhatóan nem tudják indexelni, vagyis a képként mentett szöveg számukra nem szöveg, hanem kép, amit tartalmilag nem értelmeznek szövegként. Tehát a képként megjelenő szavak a keresőmotor számára nem léteznek.
2. Helytakarékosság: összehasonlíthatatlanul kisebb helyet foglal (kevesebb adatátvitellel jár), ha a szöveget szövegként küldjük.

Ha az alapoktól (arial, tahoma, helvetica) eltérő fontokat használsz, mellékeld őket is! Két formátumban: TTF, EOT. CSS3 képes böngészők (mindegyik fejlett böngésző támogatja már többé kevésbé ezt a szabványt), e két formátumot megadva biztos, hogy meg fogják tudni jeleníteni. Az EOT típus létrehozásához érdemes pl ezt használni: http://www.fontsquirrel.com/fontface/generator.

Ezzel a témával kapcsolatban itt találtok egy remek összefoglalót: http://randsco.com/index.php/2009/07/04/p680

Nagyszerű eszköz a Google Webfonts: http://www.google.com/webfonts

A dizájnba esetenként célszerű elhelyezni összefüggő, hosszabb szöveget, amely megmutatja, hogy ez hogy fog kinézni. Ilyenkor általánosan bevett szokás, hogy a "Lorem ipsum" kezdetű halandzsa szöveget használják (eredetileg állítólag nem halandzsa, de a generátorok az egészet összekuszálják). Ez azért jó, mert a szavak hossza, a mondatok tagolása, a bekezdések hossza stb. nagyon hasonlít egy normál, valós tartalmú szövegre. Léteznek "lorem ipsum generátorok", amelyekkel tetszőleges hosszúságú ilyen, "tartalom helye" jellegű szöveg készíthető: http://hu.lipsum.com/

Favikon

A favikon jelenik meg a címsorban a weboldal címe előtt, a könyvjelzők között, a könyvjelző neve előtt, a böngésző címsorában. Szép, jól segíti az oldal egyedi azonosítását, kell.

Mi 32x32 pixel nagyságú, áttetsző hátterű, PNG állományt szoktunk kérni.

Nagyobb projektek esetében a grafikus munkáját megelőzi az önálló strukturális dizájn: a felhasználói felület, a navigáció, a működés (logika) megtervezése. Mi így szervezzük az ilyen jellegű projektjeinket: Honlapfejlesztés folyamata, Webáruházkészítés folyamata