Ön átad egy grafikus tervet a designernek és azt mondja, hogy készítsen belőle egy élő és működő weboldalt. Mi történik aztán? Hogyan vázolja fel neki, hogy milyen megközelítést alkalmazzon, milyen technikákat használjon és milyen módon jusson el az utolsó oldalig? Ebben az előadásban Eric Meyer végigvezet minket az általa használt döntéshozó folyamaton, melynek során ő egy darabokban lévő listából kiindulva megbirkózik egy új design elkészítésével. Elmondja, miként elemezi a követelményeket, határozza meg a kérdéseket, melyekre fontos megtudnia a válaszokat, milyen kompromisszumokat köt és megtudhatjuk a döntései mögött álló okokat is. (-a szerk.)

„Az én feladatom a design során általában, hogy a kézhez kapott listából egy élő, úgyis mondjuk, hogy lélegző weboldalt hozzak létre. Régebben sokat dolgoztam csoport tagjaként, ahol nem feltétlenül a konkrét design munkát láttam el. Aztán később a saját weboldalaimat is készítettem. Amit most itt el fogok mondani, az nem az egyedüli legjobb megoldás a design-ra, hanem az én megoldásom. Mertnem létezik olyan a design-ban, hogy megfelelő megoldás vagy technológia.

Nézzünk például mindjárt egy főoldalt. Tele van photoshop file-okkal, layer-ekkel stb.
Az első dolog, amit mindig teszek, amikor ránézek egy oldalra, hogy megpróbálom eltávolítani a szöveget, mert az mindig csak összezavar engem. Tehát leveszem a szöveg layer-t.
Utána kezdem el vizsgálni a többi layer-t, a vonalakat, melyek elválasztják az elemeket egymástól. Így kapom meg a vizuális struktúráját egy oldalnak.

Az internet alapjában véve dobozos stílusú, ha abból a szempontból nézzük, hogy miként kerülnek összeállításra az egyes oldalak, ezért eltávolítom azokat a dobozokat is melyek az egyes elemeket körülveszik.

Ez tehát a módja, ahogy én elkezdem rendezni a dolgokat egy design munka elején. Amit itt teszek, az arra jó, hogy megtudjam, milyen módon van csoportosítva az adott tartalom.

A második fontos dolog. Ha már megvannak a konkrét dobozok, kezdje el beléjük tölteni az ötleteket. Sokan kérdezik ezen a ponton, hogy fog majd kinézni a design? Engem ennél a lépésnél abszolút nem érdekel. Ebben a fázisban a legfontosabb dolog: megfelelő módon kerüljön kialakításra a struktúra, valamint csoportosításra az egyes elemek. Itt egyáltalán nem számít még, hogy flash lesz-e a végeredmény vagy bármi más.

Amit ennél a lépésnél teszek, hogy elnevezem az egyes dobozokat. Megadom, hogy egyáltalán mik is azok és mi lesz a szerepük. Például: itt lesz a navigáció, ide kerül a főcím, itt lesz a szöveg, ide kerül egy ajánlat és amoda egy másik. Ebben a szakaszban a dolgok értelmét fogjuk meg és nem a kinézetét. (Erre a feladatra tökéletesen megfelel pl. a Microsoft Visio program, mely az Office Professional operációs rendszer része. - a szerk.) Amikor az ötletek a helyükön vannak, a következő lépésem, hogy arról gondolkozom, miként osztályozhatnám megfelelően az egyes elemeket.

Van például 3 hasábom. Kérdés, hogy melyik milyen stílust kapjon, melyik legyen a leghangsúlyosabb stb. A hasábok önmagukban nem megjeleníthető elemek egy weboldalon. Fontos, hogy a megjelenítés során, hogy fognak majd kinézni egymás mellett, hogy kapcsolódnak össze egymással stb.

A webdesign ettől a ponttól kezdve, már része a művészetnek. Függetlenül attól, hogy valaki flash-t, HTML-t, vagy CSS-t használ.

Azonban ebben a fázisban nagyon sok kérdés felmerül. Mely tartalmi rész legyen rögzítve, melyik lehet változó szélességű, melyik legyen átlátszó vagy kiemelt stb. – amit éppen Ön szeretne. Melyek azok a részek, melyeket muszáj fixálni?

Sehol máshol nincs annyi tisztáznivaló, mint ebben a szakaszban.

Vegyük például, hogy itt egy hasáb és mondjuk logot akarunk elhelyezni benne.
Itt le kell tisztáznunk, hogy ez az elem lehet-e rugalmasan változtatható szélességű, vagy fixálni kell a méretét. Ekkor felmerül azonban az új kérdés, hogy ha a logo mellé szöveg kerül be, akkor sokkal célszerűbb egy rugalmas, változtatható szélességű elemet elhelyezni. Dönteni kell. Ha fixáljuk az elem szélességét, akkor a szöveg sokkal kevésbé kap szerepet az image-hez viszonyítva. De létezik egy másik megoldás: ha az image mellé helyezzük el a szöveget. Döntés kérdése, hogy melyiket alkalmazzuk.

Elsőként tehát azt kell eldönteni, hogy mely elemeket muszáj fixálni és melyek maradhatnak rugalmasan változtatható méretűek.

Vegyünk egy másik példát. Vajon, milyen mértékben kell foglalkoznunk a szövegírási szakértelemmel? Tudják, amikor a felhasználó elkezdi szabadon változtatni a betűméreteket. Előre számítunk-e arra, hogy egy ponton túl a design összeomlik, amikor a felhasználó a szöveg és főcím méreteket kedve szerint túl nagy vagy kicsi méretűre változtatja, mert nem definiáltuk le előre, hogy mit lehet és mit nem?
Akkor is összeomolhat a kép, ha nincs elég szöveg és túl sok az image hozzá képest.

Az image-ek általában dekorációs célt szolgálnak és alapvetően nem sok szerepet kapnak a valódi tartalomban. A legtöbbször háttérként használatosak. De van olyan image is, ami az előtérben szerepel, nyilván, mert hangsúlyosnak kell maradnia. Így ő biztos nem kerülhet a háttérbe.

Elmondok erre egy példát. Egy tartalmi funkciójú image akár linkként is szolgálhat és klikkelhető. Ilyen például ha a logora klikkel valaki és visszajut a főoldalra. Ez egy tartalommal bíró image. De egy vállalat elnökének képe a weboldalon nem szükségképpen tartalom és általában nem is klikkelhető. Minden esetben meg kell határoznunk tehát előre az egyes elemek funkcióját.

Hogy állunk a böngészőkkel?

A böngészők mindig bekorlátozzák azt, hogy mit tehetünk. Nagyon sokszor őrült dolgok jönnek elő egy-egy böngészőben, holott a másikban tökéletesen működnek.
Hányan aggódnak Önök közül például amiatt, hogy miként néznek ki a dolgok a Netscape-ben?
Senki?
Explorer 5.0? 5.5? 6?

Amikor az ügyfél megkérdezi, hogy fog kinézni az Explorerben az oldal, azt mondom, hogy nem érdekel.
Miért? Mert az én statisztikáimban a fent említett összes böngésző együttesen nézve a 2. helyen szerepel. A Firefox pedig az elsőn. Egyedül. De ez én statisztikám, ezért nem érdekel engem az Explorer. Én is meglepődtem, amikor a statisztikák nézegetése során rájöttem erre.

(A fenti vélemény igazolására szolgál az alábbi kimutatás is, miszerint az Internet-marketing.hu látogatóinak több mint 20%-a Firefox böngészőt használ, valamint, hogy a fent nevezett böngészőt használók száma napról napra emelkedik hazánkban. - a szerk.)

Milyen kérdések merülnek fel a design munka során?

Térjünk vissza az alapokhoz. Itt van egy honlapterv, rajta a dobozokkal. Egy webdesignernek muszáj tudnia, hogy viselkednek majd együtt a dobozok az interneten. Melyik hasáb lehet fix és melyik változtatható szélességű? Össze kell tudni számolnia, mi mekkora méretű lesz majd élesben, hogy mi fér el pontosan egy oldalon, bármelyik böngészővel nézzük is.

Végeredményként igazából mindenki egyet akar, egy konkrét megjelenésű, élő weboldalt.

A tervezés során kell, hogy legyen egy lista a weboldalon megjelenítendő elemekről. Például a főoldalon Ön majd egy aktuális cikket szeretne megjeleníteni és egy kis bemutatót egy másik anyagból. Vagy a főoldalon szeretne 4 cikk bemutatót közölni, melyek közül 3-ból adott oldalakra lehet eljutni. Legalább ilyen szinten, muszáj, hogy meglegyen a lista, mielőtt elkezdődik a kivitelezés.

Egy másik példa. Itt van egy cikk aloldal. Ez nagyon hasonlít a főoldalra, leszámítva, hogy a főoldalon egy másodlagos hasáb is megtalálható a fő hasáb mellett. A cikk aloldalon egyetlen hasáb tölti ki a helyet, így sokkal szélesebb lesz, tehát nagyobb hely lesz rajta a tartalomnak. Ugyanis a weboldal szélessége minden esetben ugyanaz marad és az aloldalon, rengeteg hely maradna az oldal széléig, ha nem lenne szélesebbre véve az itteni hasáb mérete, a főoldalon megtalálható fő hasábéhoz képest.

A fenti példa miatt kezdtem el kiértékeléseket (összegzéseket) készíteni a designról. Hány hasábot lehet használni egy oldalon, milyen nagyságúakat, melyikeket érdemes fixálni, hogy lehet ezen az oldalon flasht használni stb. Érdemes egy ilyen összegzést mindenkinek készítenie, aki a webdesign-ban tevékenykedik. Nagyon megkönnyíti a munkát.

Amikor megkérdezi az ügyfél, hogy van-e olyan része az oldalnak, ami mindig adott és fix marad, akkor azt tudom mondani: Igen, ez a hasáb a fix elem, ilyen méretű és ezt nyugodtan használhatja a legfontosabb dolgokra – például a mindenkori ajánlat megjelenítésére.

Sokszor használok 4 hasábos technikát az oldalakon, hasáb elválasztókat alkalmazva, de előfordul a táblázatok használata is. Technológiai szempontból a táblázatokkal mindent meg lehet oldani. A 4 hasábos technika általában akkor alkalmazható, ha adott egy fix honlapterv.

Másrészt mielőtt eldöntjük, hogy milyen technikát használunk, azt is át kell gondolnunk, hogy kiknek készül az oldal?
Lássuk csak. Ha szétesett egy főoldal, ami táblázattal készült, mi fog történni? Lehet, hogy használhatatlan lesz?
Egyéb sok más oka is van, amiért a táblázatok használata nem túl jó döntés. Hmmm… A táblázattal készült oldalon design szempontból nem fog pontosan úgy mutatni a weboldal, mint ahogy a terven látszott. Az sem utolsó szempont, hogy általában nem is tetszik senkinek.
Ráadásul, ha nem táblázatos formában készül az oldal, akkor még aggódnia sem kell, hogy egyszer majd szétesik. Ezért ajánlom sokkal inkább a 4 oszlopos technikát. De ez csak az én megközelítésem.

Még egyszer összegezve a design munka lépései:

• Elkezdem az alkotórészekkel, a dobozokkal. A szöveg, a főcím, a logo stb – listát írok az elemekről, ötletekről.
• Ezután belerakom a dobozokba az egyes ötleteket, majd osztályozom a dobozokat. Aztán meghatározom a tartalom sorrendjét, hogy mi következik először.
• Ha például, középen van egy hasáb, ahova tartalom kerül és ez lesz a leghangsúlyosabb az oldalon, azt nagyon fontos már előre tudni, mert az apróságok utólagos változtatása sokkal kevesebb időt és költséget emészt fel, mint a legfontosabb részek desing-jának megváltoztatása.
• Legyen előre megtervezve, hogy mely tartalmak fognak változni és melyek maradnak fixen. Határozza meg előre lesz-e háttér, ha lesz milyen lesz, milyen szélesek és magasak lesznek az oszlopok. Lesznek-e átlátszó felületek, elválasztók, ha például jól el akarja különíteni a háttértől a hasábokat.
• Azt is fontos végiggondolni, ki lesz a közönség. Tapasztalt felhasználók vagy az internettel csak most ismerkedők?
• Ami nagyon fontos, hogy határozza meg a szöveg stílusát előre. Főként, hogyha hátteret is használ. Néhány betűtípus minden böngészőben működik, míg másokat nem tud megjeleníteni például a Firefox. Fontos, hogy ez előre le legyen tesztelve.

Ha az összes fenti lépést mind megtettük, akkor mondhatjuk, hogy OK az oldal?

Egy weboldal soha nem lesz ok :)
A Webdesing nem az abszolút számok világa. Sokan ragaszkodnak hozzá, hogy egy oldalnak flexibilisnek kell lennie. Igen, például könnyen fixálható az oldal szélessége, ha egy fotógalériát szándékozunk megjeleníteni.

A lényeg azonban mindig az, hogy az arányok megmaradjanak és a szöveg olvasható legyen. Arra, hogy mikor lesz tényleg OK egy oldal, sajnos nem tudok érdemleges választ adni.
Ez már a webdesign - művészet része….”