Webdizájn

A webdizájn grafikai prezentáció és tervezés az interneten megjelenő website vagy honlap, illetve más applikációk, objektumok formájában. A maga módján kifejezetten alkalmazott grafika, legalább annyira, mint egy újság, szórólap esetleg meghívó tervezése, ugyanúgy figyelembe kell venni a közeg és tartalom támasztotta követelményeket. A legelső webdizájnerek programozók és HTML-szakemberek voltak a korai 1990-es években. Jelenleg a legtöbb webdizájner rendelkezik valamely grafikai ismerettel, vagy maga is grafikus, művészeti, alkalmazott grafikai, nyomdai területen végzett. Sok webdizájner rendelkezik átfogó ismeretekkel mind az Adobe Flash, a Photoshop és az Illustrator területén, mivel egyre inkább követelmény e szakmában a multifunkcionalitás.

Története

A HTML elemeket eredetileg a dokumentum struktúrájának és tartalmának definiálására tervezték. A dokumentumok tartalmának elhelyezését, a megjelenítést teljes egészében a böngészőre bízták, anélkül, hogy járulékos formázó „tag”-eket használnának. Ez megfelelő volt abban a tudományos környezetben, amelyben először elkezdték használni a webet, hiszen a tudományos kutatók és műszaki szakemberek sokkal inkább a dokumentum tartalmában, sem mint azok megjelenési formájában voltak érdekeltek.

A web felhasználói körének kiszélesedése következtében azonban a „hétköznapi” felhasználók körében egyre nagyobb igényként jelentkezett a dokumentumok minőségi megjelenése, a dokumentum szerzője által specifikálható módon. Ezt kielégítendő a két vezető böngésző gyártó újabb és újabb, a megjelenést vezérlő formázó elemmel és jellemzővel bővítette a HTML specifikációt, amint böngészőik egy újabb változatával megjelentek.

Ezeknek az elemeknek egy része aztán a HTML szabványba is bekerült. (Bár a strukturális elemek keveredése a megjelenítéssel ellentmond a HTML eredeti célkitűzésének.)

Végül győzött az elv, hogy a HTML dokumentumoknak a tartalmat és struktúrát kell definiálni s a megjelenítés vezérlését ettől el kell különíteni.

A stíluslapok, azaz a CSS bevezetése ellenére a megjelenítést formázó elemek és jellemzők egy része kompatibilitási okból változatlan, vagy használatból kivont formában továbbra is megtalálható a szabványban.

A W3C a HTML nyelv 4.0 változatától kezdve a HTML oldalak formázására, azaz a megjelenítés, tágabb értelemben prezentáció specifikálására (a képernyőn, nyomtatásban, beszéd formájában :lásd hang és beszédszintetizátorok stb.) a stíluslapok, használatát javasolja.

Likvid kontra fix layout

A likvid tehát „folyékony” dizájn a böngésző méretétől függően nyúlik, vagy húzódik össze, míg a fix dizájn mindig megtartja a tervezésnél megadott méreteit. Mindkettőnek megvannak a maga előnyei és hátrányai.

A fix tervezésnél gondolni kell a legkisebb felbontással böngészőkre szintén, mint ahogy arra is, miként fog megjelenni a dokumentum egy tágasabb környezetben. A likvid problémája elsősorban, hogy szépen leginkább egynemű tartalom esetén lehet tervezni, illetve a tipográfia: túl széles illetve keskeny szövegek nem barátságosak a szemnek. (Zárójelben: weben a sorkizárt forma nem mindig előnyös.)

Áthidaló megoldás lehet a tartalom méretének maximalizálása.

A Flash

A flash a Macromedia Flash által kiadott szoftver; kiterjesztése: SWF. Maga az SWF formátumot tehát más szoftverek is képesek létrehozni, de csak a flash lejátszóban fut. Kezdetben vektoros rajzprogramnak indult, majd programnyelve az ActionScript segítségével a webdizájn egyik legdinamikusabb alapeszközévé vált. Ma már mind a nyelv, mind a lejátszó igen előrehaladott állapotában van (platformfüggetlen Flash player 9 és az Actionscript 1-2-és 3).

Előnyei:

• látványosan interaktív, moziszerű struktúrát, hatékony, egyben dinamikus multimédiatartalmat és alkalmazásokat hozhat vele létre a szerző (játékok, zene, film, stb.)

Hátrányai:

• ha a gépen amely a webet böngészi nincs flash lejátszó, a felhasználóhoz nem jut el az információ amit a flash tartalmaz
• éppen, mert lenyűgöző eredményeket lehet vele elérni a prezentációban, sokan érdeklődnek iránta, de ha nincsenek előzetes programozói ismeretek az Actionscript nem kimondottan átlátható programnyelvnek tűnik (az action script 3.0 már teljesen oop.)
• Maga a flash program elég drága, ha nem gondolja komolyan az ember nem érdemes megvenni!

Ahogy Darron Schall mondja, az FC64 Commodore C64 emulátor fejlesztője „Igazán maradandó webes alkalmazásokat készíteni nem gyerekjáték.”

Mára már elavult, és semelyik modern böngésző nem támogatja.

A frame

A frame, azaz a keretes rendszerek lehetővé tették, hogy a szerzők több keretben való megjelenítést alkalmazzanak – ezekbe a keretekbe külön weblapokat hívtak meg, amik együttes megjelenése adta ki az összefüggő tartalmat. Ezáltal bizonyos információk a képernyő egyik keretében állandóan, más információk egy másik keretében görgethető és cserélhető módon jelennek meg.

Tipikus formája volt: stabil tartalomjegyzék (például navigációs menü) plusz görgethető tartalmi felület, ami a tartalomjegyzékben szereplő tételekre kattintva aktualizálható. Ma már szinte sehol nem használják.

CSS kontra táblázatok

A táblázatok

A HTML táblázatmodellje lehetővé teszi, hogy az adatok legkülönbözőbb formáit (szövegek, előre formázott szövegek, képek, linkek, űrlapok, más táblázatok stb.) sorokba és oszlopokba rendezett cellákhoz rendeljék. Az oldal akkor táblázat alapú, ha a lap felépítését (egymásba ágyazott, többszörösen összetett) táblázatokkal oldjuk meg.

A problémák:

• a böngészők előbb a < / table > jelet olvassák be és csak aztán töltik be a tartalmat. Ez azt eredményezi, hogy míg odáig el nem jutott nem látunk az oldal tartalmából semmit.
• amennyiben nincs megfelelő DOCTYPE az elején (az úgynevezett „quirks” mód) a böngésző nem fogja helyesen értelmezni, előfordulhat, főleg ha a böngészőnk régebbi típus, hogy minden table elem megtöri az öröklődést, és többször is definiálnunk kell: például a betűtípust
• a táblázatmodell 3 szintű, a táblázat sorait reprezentáló elemekkel kezdve, amikbe a cellákat reprezentáló elemek ágyazódnak be, az adatokig, amik a cellákban vannak elhelyezve. Bonyolultabb táblázat esetén a HTML egyik legösszetettebb elemével találkozunk, amit nehézkes karbantartani, bővíteni, átlátni.

A CSS térhódításával egyre inkább elfogadott az a nézet, hogy a táblázatokat használják arra, amire „való”: tehát társított adatok összefüggő, egymáshoz viszonyított felsorolására.

A CSS

Jelenleg a legelterjedtebb és egyúttal szabványos stíluslap típus a W3C CSS típusa (Cascading Style Sheet.) Első változata CSS1 néven 1996 decemberében, a második, kibővített, több médiumot is lefedő CSS2 1998 májusában jelent meg. A CSS tulajdonképpen egy deklaratív nyelv, amely a HTML nyelv prezentációs képességeinek kibővítését szolgálja. Felhasználóbarát, könnyen olvasható és írható (de elrontani is könnyű).

A CSS-ben az elemek osztályaihoz, egyes HTML elemtípusokhoz és egyedi elemekhez különböző megjelenítési stílusokat definiálhatunk, s a konkrét jellemzőket egy messzemenően szélesebb tartományból választhatjuk, mint amit a HTML elemek jellemzőinek választéka kínál.

Társíthatunk vele különböző megjelenítési eszközökhöz különböző stílusokat is, akár egy laphoz többet. Elhelyezhetjük a dokumentum belsejében, vagy külső file-ban Ebben az esetben egy stíluslap egy egész site arculatát is meghatározhatja, ezzel sávszélesség kímélő.

Hátrányai:

• Az IE 6.0 és a Netscape 7.0 böngészők a legfőbb CSS1 és 2 tulajdonságot támogatják, de nem mindegyiket. Így fordulhatnak elő a honlap indexoldalán elhelyezett figyelmeztetések között hasonlók mint: „a legjobb látványt Firefox alatt nyújtja!” és társai. Célszerű meggyőződni a támogatottságról adott tulajdonság használata előtt.

A „vakbarát” honlap

Az extrém média által is használható honlap ma már igényesebb készítő esetén alapkövetelmény.

Ebben az esetben gondot kell fordítani arra, hogy a képi, vagy flash formában elhelyezett információ hozzáférhető legyen szövegesen is.

A CSS segítségével megadhatjuk a szándékolt médium specifikációját. Lehet akár egyetlen médiumleíró, akár vesszővel elválasztott médiumlista. Szabvány média típusok így a tapintásos braille eszközök, kis – vagy kézi eszközök, autós navigációs eszközök, nyomtatók, kivetítők, fix szélességű karaktereket használó (például TV) eszközök.

CSS2-ben a voice-family tulajdonságot például csak a hang alakú (auralis) ügyfélágensek számára vezették be.

A szép honlap és a működő honlap

Egy hatékony weboldal dizájnját úgy kell megtervezi és megvalósítani, hogy egyensúlyban legyen a HTML-formátumú szövegek és a grafikák aránya. A személyes, illetve a portfólió oldalakon kívül a honlapnak elsősorban a látogató igényeit kell kielégítenie. Egy oldal lehet alul-, de a másik végletbe esve (pl. túl sok grafikai elem) túldizájnolt is. Olyan szempontokat kell figyelembe venni, mint az átláthatóság, a jó navigáció, sok szöveges tartalom esetén az olvashatóság, az online marketinget figyelembe véve pedig ide sorolható a márkázás, a közvetlen értékesítés, a fogyasztók megtartása, bizalom, és egyszerű kommunikáció. Az oldalnak továbbá mind megjelenésében, mind tartalmilag hitelesnek kell lennie.

A leggyakoribb webdizájnhibák

Hogy egy dizájn minden szempontból sikeres legyen, az ügyfél, a dizájner és a felhasználó jó érzéssel távozzon a honlapról, elsősorban a célját kell, hogy teljesítse. Más és más kritériumok merülnek fel egy céges site tervezésénél és egy online galéria esetében, de vannak apró hibák, amik közös jellemzők a webes megjelenítésnél.

Túl sok reklám

A honlap alapvető rendeltetése, hogy az oldalak tartalomjegyzékét megmutassa, az érdeklődést felkeltse, és esetleg más hasonló témájú honlapok felé irányítsa a látogatót. A honlap azonban mégsem tárgymutató és nem egy gigantikus hirdetőfal. A reklám eszköze, hogy magára irányítja a figyelmet, és sok banner, reklámcsík stb. esetén maga a tartalom vész el, főleg ha minden egyformán hangsúlyos. Megjegyzendő, hogy általában animációkkal szokták ezt a hangsúlyozást megoldani, mert a mozgás a periférikus látására erős hatással van és bevonzza a tekintetet. Ez hosszú távon zavaró lehet, a felhasználó nem kapja meg az olvasáshoz, befogadáshoz szükséges nyugalmat.

A betűk

A szövegnek olvashatónak kell lennie. Zavaró a túl kicsi, és a szövegtestben a túl nagy betűméret. Különleges betűtípusokat több szempontból sem éri meg font-ként alkalmazni, megeshet, hogy nem lesz képes a kliens gépe megjeleníteni és a fejlécen, stb. kívül zavaró is lehet, gyengíti a professzionalitás élményét.

Flash intró

A célja az lenne, hogy látványos klip segítségével felkeltsük a látogató kíváncsiságát, aki ezáltal beljebb lép és több időt is tölt a honlapon. Ezzel szemben tapasztalat, hogy kevesen nézik végig, időrablásnak tekintik főleg ha gyengén van elkészítve. Leginkább a filmes és más látványos vizuális témával foglalkozó oldalakon hasznos. Ajánlott mindig ellátni a következő két funkcióval: a „skip”- tehát a mozi átugrásának lehetősége, amivel rögtön a belső tartalomra kerül és a hang lekapcsolása. A keresőoptimalizálásnál szintén gondot okozhat, hogy az intro oldalak nem tartalmaznak kulcsszavakat, hanem általában csak egy linket, néha egy kereszthivatkozást.

Külső hivatkozások

A HTML egyik legfontosabb sajátossága, hogy a dokumentumokat nem lineáris módon az elejétől a végéig kell elolvasni, hanem a szerzők csoportosíthatják, egymáshoz rendelhetik a dokumentumokat, amelyben kapcsolatot definiálhat az egyes dokumentumokon belül és között. Célszerű a honlapról külső tartalomra mutató linkek eltérő jelzéssel történő megvalósítása, a fő és almenük jól látható hierarchikus rendezése.

Ugyanígy hibának számítanak a törött linkek, amelyek nem vezetnek sehová, az általuk célzott tartalom már elmozdult, vagy megszűnt. Jelölni kell az E-mail kapcsolattartást szolgáló linkeket is.

A kereső optimalizálás

Talán mind közül a legnagyobb hiba, amit a dizájnerek ill. a szerzők/tulajdonosok gyakran elkövetnek az, hogy a kereső gépekre történő optimalizálásra csak utólag gondolnak. Itt különösen problémát jelenthet a flash tartalom, főleg ha a honlap egésze flash alapú.

Szakirodalom

• Leiszter Attila (szerk.): Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) ISBN 978-963-2795-78-2

További információk

• W3C – World Wide Web Consortium
• A minimalista webdesign alapjai