Webdesigner leszel s katona, vadakat terelő juhász… 1

brainÚjra és újra szembesülök azzal, hogy itthon még mindig mennyire gyerekcipőben jár ez az egész internet ipar. Nem csak a felhasználói oldalról hanem azok oldaláról is akiknek ennek a szakmának a professzionális oldalát kellene képviselnie. Az egyik sokszor visszatérő probléma, hogy a webdesigner nem nőtte ki magát még mint külön szakma, hanem a designerek futnak neki webes megjelenések összeállításának. Az eredmény általában változó mértékben borzalmas.

Miután az elmúlt időszakban több különböző alkalommal is eltöltöttem némi időt az ilyen eseteken való morgolódással végül úgy döntöttem, hogy szeretnék itt egy rövid összefoglalót adni azok részére akiknek van designban szerzett tapasztalatuk és szeretnének átevezni a web tengerére.

Mivel a designerek többnyire a nyomtatott médiák részére dolgoznak (szórólapok, újságok, stb) külön ki fogok térni azokra a pontokra amelyek teljesen másképpen viselkednek ha egy weblapról van szó. Ahhoz, hogy egy designer a weben életképes eredményt tudjon produkálni figyelembe kell vennie pár örök érvényű szabályt.

Papír vs monitor

A webes tipográfiáról szóló sorozatban (1., 2., 3. rész) már összegyűjtöttem jó néhány jellemzőt, lássuk itt az egyik alapvető fontosságút.

A nyomtatott média és a monitor között az alábbi lényeges különbségek vannak:

Jellemző Papír Web
méretek fix nem fix
szín fix nem fix
betűtípus fix nem fix
elhelyezések fix nem fix

A fenti sorozatban kitértem ezek hatásaira, most itt szeretnék kiemelni pár olyan részletet amiről akkor nem írtam.

Mi van a nyúlon túl?

Az elmúlt évben elém került webdesign tervek esetében 10-ből 10-szer ez volt az első kérdésem. Lássunk egy konkrét példát. Nézzük meg az alábbi design tervet.
A nyúlon túl
Mivel egy weblap mérete biztosan nem lesz fixen akkora a böngésző ablakán belül mint amennyire fix ezen a design terven, az első kérdésem általában így hangzik: Mi van a design mögötti területen ha a böngésző ablak nagyobbra van állítva mint amekkora maga a design? Azaz, ha pl a design 990 pixel széles (ami egy általánosan használható szám egy 1024*768-ra optimalizált weblap esetében), akkor mit lát az akinek a böngésző ablaka ennél nagyobb?

Konkrétabban először is balra vagy középre van igazítva a teljes lap? Másodszor folytatódik-e mondjuk a középre igazítós esetben a fejléc, szürke és zöld csíkja, valamint a lábléc szürke csíkja jobb és bal irányba a böngészőablak széléig? Ha nem folytatódik akkor mi van ott? Egyszerűen le van vágva, vagy van ott valami keret? Ha van ott egy keret akkor milyen színű a kereten kívüli rész?

Ez egy tipikus hiba amit a designerek elkövetnek, mivel szokatlan számukra, hogy a papírral ellentétben itt a hordozó média mérte nem fix. A fenti kérdéseket a designernek meg kell tudnia válaszolnia és jobban jár ha már a design elkészítése közben gondol ezekre.

Tulajdonképpen mire optimalizálunk?

Bevallom az első kérdésemmel már valójában ki is ütöttem ezt, de sajnos az emlegetett 10 elém kerülő weblap tervből 5-nél már előttem fekszik egy kész terv mire felmerül ez a kérdés.

Nyomtatott médiában korántsem vagyok járatos, de gondolom azért ott is fontos, hogy mondjuk egy kiadvány A4-es vagy B5-ös méretben készül. Legalábbis úgy gondolom, hogy mielőtt készítenének egy címlap tervet előtte csak megkérdezik, hogy mekkora legyen.

Ehhez képest 50%-ban úgy kapok design terveket, hogy ez a kérdés fel sem merült. Aztán belenézek a weblap látogatási statisztikáiba és kiderül, hogy 70% 1024*768-ot használ. Ennél kisebbet elhanyagolhatóan kevesen. Azaz ez lesz a méret amire optimalizálni kell. Persze egy designerrel nehéz elhitetni, hogy vannak még emberek akik olyan gépekkel interneteznek amelyeknek nem 3500*2800 a felbontása, de bizony vannak ilyenek. Így a sok munkaórába kerülő design a maga 1200 pixel szélességével mehet a süllyesztőbe vagy az átalakítóba, mivel a felhasználók többségének vízszintesen is scrolloznia kell ahhoz, hogy ezt a méretet lássa.

Az átalakítás fájdalmas. Nem férnek el úgy a dolgok ahogy szerettük volna, zsúfolt lesz a design és végül majdnem annyi időbe kerül átalakítani mint egy újat csinálni a meglévő hangulattal.

Hogy a mekkora legyen? kérdést miért nem teszi fel sok designer mielőtt nekiül a munkának azt nem értem, remélem egyszer majd valaki elmondja.

Milliméterek és pixelek

A következő probléma a közös nyelv megtalálása szokott lenni. Mi monitor bámuló majmok pixelekről beszélünk. Ezzel szemben a designerek milliméterekben gondolkoznak. A monitoron pedig tetszik vagy nem nincsenek milliméterek. Egy 800*600-as felbontáson a bekezdés címe alatt 13 milliméter hely lesz, 1024*768-as felbontásnál meg 10 milliméter. Pixelben viszont mindkettő mondjuk 25px, mivelhogy a pixel egy relatív mértékegység. Attól függ… És ezzel az attól függel még találkozunk párszor.

Egy A4-es lap az akkora amekkora. Nem tudjuk átállítani sem a méretét sem a felbontását. De egy monitor nem ilyen. Így ha közös nyelvet akarunk beszélni akkor beszélj pixelben, a miliknek itt nincs értelme.

Azok a fránya betűtípusok

A következő mindig visszatérő problémakör a betűké. Amióta létezik nyomtatás léteznek különböző betűtípusok. A betűk formája kifejez hangulatokat, stílust és okosan használva őket sokat kihozhatunk a szövegből. Külön tudomány a tipográfia amely a betűk formája mellett azok elhelyezésével foglalkozik. Egy designer eszköztárában a különböző betűtípusok legalább olyan fontosak mint egy festőében a színek.

Ehhez képest jelenleg technikailag nem biztosítható egy weblap betűinek megjelenítése egy tetszőleges betűtípussal. Praktikusan nincs biztonságos betűtípus, csak 3 betűtípus család: serif, sans-serif és monotype.

A monotype nem alkalmas olvasásra szánt szövegek megjelenítésére, leginkább programkódok megjelenítésére használják, így marad a serif és a sans-serif. Nem túl nagy választék.

Ennek oka, hogy a weblap látogatói sokféle rendszert használhatnak és a böngésző azokat a betűtípusokat fogja tudni csak megjeleníteni ami az adott rendszeren telepítve van. Ha megszámoljuk, hogy melyek azok a betűtípusok amelyek biztosan telepítve vannak Windowsra, Mac OSX-re, Linuxra, Solarisra, vagy éppen egy mobiltelefonra, akkor eredményül kevesebb mint 1-et kapunk.

Ezért amennyiben ragaszkodunk valamilyen spéci betűtípus használatához, akkor azt nem tudjuk szövegként megjeleníteni, hanem csak képként. Ez azt jelenti, hogy készítenünk kell egy jpg/png fájlt amiben benne van a felirat.

Ez egyrészt kényelmetlen, másrészt nehézkes, harmadrészt pedig keresőoptimalizálás szempontból nem éppen ideális. Nem beszélve akkor még az akadálymentesítési szempontokról. Léteznek ugyan a problémára megoldások, mint a sIFR vagy a szerver oldali kép generálás, de egyik sem igazán elegáns megoldás.

Ezért a webdesign esetében az általános szövegekre, címekre, menü elemekre ne használjunk spéci betűket, azaz nagyjából Arial, Helvetica, Verdana, Tahoma – de már többet is mondtam mint ami biztos.
A logoban, vagy más frekventált helyen használhatunk mást is, de akkor azt képként kell megtennünk.

Egy átlag weblapon a betűtípus definíció valahogy így fog kinézni:

font-family: 'Lucida Grande','Luxi Sans',Geneva,Arial,Verdana,sans-serif;

A böngésző azt fogja csinálni, hogy elindul az elejéről és megnézi, hoyg az első betű telepítve van-e. Ha igen azzal rendereli le az oldalt, ha nem akkor próbálkozik a következővel míg a sor végére nem ér. Ezért a design terv elkészítésénél mindenképpen érdemes a többi esélyes betűtípussal is megnézni a látványt. A betűtípusok felsorolásánál – mondjuk ezt más úgyis egy CSS szaki fogja megcsinálni – a bizonytalanabb betűktől haladunk a biztosak felé. Esetünkben a Lucida Grande egy Mac OSX-es betűtípus, aki Macintosht használ neki azzal jelenik meg a weblap. A WIn, Lin és egyéb usereket pedig a felsorolt betűk közül azzal fogják az oldalt kapni ami a listában előrébb van és telepítve van nekik. Végül ha egyik sincs telepítve nekik akkor az utolsó definíció szerint a rendszer alapértelmezett sans-serif családba tartozó betűtípusával kapják meg az oldalt.

A fenti példában a cikkek címei ránézésre valami spéci betűvel készültek, szóval fel lehet készülni, hogy a böngészőben nem teljesen így fognak megjelenni.

6 thoughts on “Webdesigner leszel s katona, vadakat terelő juhász… 1

  1. Ha nagy leszek web-desiner leszek.
    Van egy másik eset, amikor a profi web-designer átmegy alkotóba, mert tudja hogy nem ő rakja össze a grafikát. Így olyan megoldásokba fut bele, hogy öröm összerakni, és persze tökre azt szeretné látni amit a Photoshop-ban (fontok, elrendezés, szövegek, színek).

  2. A fent említett szakmát kiadványszerkesztőnek hívják, ezért nincsenek a fogalmak még köszönő viszonyban sem egymással. A DTP-s kollégákat sokszor “kényszerítik” webes tervezésre, pedig annyira természetes élőhelyük, mint az állatkert a pingvineknek. Én is nehezen mozgok a nyomdai cuccok között – ezért már nem is vállalok offline-t. Ez egy sokszor 5 in 1 kezelik egyben a különböző szakmákat – légy grafikus, kiadványos, webes, 3d-s, és flashguru egyben – aminek sajnos ez az eredménye…

  3. A “fejlesztési osztályunk” agyára tudok menni, mikor kérdik, hogy hány centis kép kellene, én erre mondom, hogy 50*50px… Ha meg elfelejtem külön mondani, hogy pontosan mekkora kell és helyette csak megmutatom neten, hogy hova kell, tuti cm-ben csinálják és rossz lesz…

    Mondjuk ők kiadványszerkesztésre lettek felvéve, úgyhogy annyira nem gáz, de megy ám a küzdelem rendesen… 🙂

  4. Tisztelt Cím!

    Mivel ezen az oldalon sok kompetens információ taláható a webdesigner szakmáról, így szeretnék néhány magán jellegű szakmai kérdést feltenni az oldal létrehozójának, de úgy, hogy az ne legyen nyilvánosan olvasható.

    Van erre valamilyen lehetőség?

    A választ előre is köszönöm. Üdvözlettel: Pál Valentina

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.