Weblabor

Sok helyen nem a grafikusok végzik a HTML elkészítését, emiatt szükség lehet arra, hogy olyan formában adják át a látványtervet a sitebuilderek részére, ami jó esetben szükségtelenné teszi az utólagos kommunikációt, mert minden egyértelmű benne, továbbá könnyebbé teszi a munkát, ha fél év múlva kell elővennünk az anyagot. Ehhez szeretnék segítséget nyújtani, bemutatva jó és rossz példákat (a szakmában kvázi-szabvánnyá vált Photoshopon keresztül, de az elvek természetesen más szoftverre is alkalmazhatóak), továbbá várom a nyájas olvasók további javaslatait. A felsoroltak jórésze sokak számára magától értetődő lehet, de ne felejtkezzünk el azokról, akik nemrég csöppentek bele a szakmába, és még nincs meg a megfelelő gyakorlatuk.

Nevezéktan és fájlok

Hogyan nevezzük el jól a látványterveinket? Egy volt grafikus kollegámat állítottam egyszer falhoz, hogy a szerveren miért /projektnev/projektnev_oldalnev.psd mintával mentik a fájlokat, hisz nagyfokú redundancia fedezhető fel benne. A válasz teljesen logikus volt: egyrészt azért, mert a (régebbi) Photoshopokban a korábban megnyitott fájlok listájában csak a fájlnév szerepel, és ha két munkában is fooldal.psd nevet adtunk kezdőlapunknak, akkor ha újból meg szeretnénk nyitni az egyiket, találgatunk kell, melyik volt az. Emellett akkor is hasznos, ha a projektnév szerepel a psd nevében, ha továbbküldjük bárkinek (pl. az ügyfélnek, a projektmenedzsernek stb.), akkor ő is később könnyebben be tudja azonosítani a tartalmát, miután lementette a gépére.

A nevezéktannal kapcsolatban még egy apróság van, ami bosszúságot okozhat, mégpedig az ékezetes betűk és szóközök a fájlnévben, mert sajnos minden operációs rendszerben máshogy oldották meg ezt a problémát. Még csak a XXI. században vagyunk, ezért célszerű csak az angol ábécé betűit használni, elválasztásként pedig kötőjelet vagy aláhúzást (és ez a szabály érvényes bármely, szerverre feltöltött állományra, például dokumentációra is).

A Photoshop fájlformátuma minden újabb verziónál változik, és előfordulhat, hogy a szoftver korábbi változata nem képes helyesen beolvasni a legutóbbival készített psd-inket. Szerencsére mentéskor felajánlja, hogy maximalizálja a kompatibilitást, és ha ez nem jár hátránnyal, az Edit, Preferences, File Handling ablakban a Maximize PSD and PSB File Compatibility-nél válasszuk az Always lehetőséget. Ugyanebben a dialógusablakban győződjünk meg róla, hogy az Image Previews-nál az Always Save-et adtuk-e meg, mert bár így valamennyivel nagyobb lesz a fájlunk, de egy egyszerű képnézegető programmal is meg lehet nézni, és nem kell a jóval erőforrásigényesebb Photoshop megnyitását megvárni, ha valaki át szeretné pörgetni a kapott látványterveket.

Nagyban segíti a sitebuilder munkáját, ha az alapinformációkat leírjuk egy levélben, vagy egy kis txt-ben csatoljuk a grafikák mellé. Ilyenek például a folyószövegekben használt betűtípusok, betűméretek és színek, sorok közti távolság, elemek közti távolságok, alapelvek („ez és ez a doboz minden oldal tetején jelenjen meg, nem tettem be minden psd-be”), az egyes elemek „over” állapotai stb.

Érdemes a munka kezdetekor egy könyvtárba a felhasznált extra betűtípusokat is bemásolni, hogy átadás után ne kelljen őket külön-külön keresgetni. Mielőtt elkezdünk dolgozni velük, érdemes a fontokat alaposan átnézni, hogy megvan-e bennük minden betű (nemrég találkoztam eggyel, ahol például hiányzott a 7-es karakter), valamint azt is, hogy a magyar ékezetek benne vannak-e (külföldi oldalról letöltött ingyenes betűkészletben valószínűleg nincsenek), mert ha nem, akkor a módosításokat valószínűleg magunknak kell elvégezni a megfelelő szoftver segítségével.

Rétegek

A 2003-ban megjelent Photoshop CS a mi szemszögünkből egyik legfontosabb újítása volt az egymásba ágyazható layerset-ek lehetősége, mindenkit bátorítok, hogy éljen vele. Ahogy a kész weboldalon, úgy a psd-ben is érdemes az oldalt különböző szekciókra, fejlécre, láblécre, tartalomra stb. bontani, ez a mi munkánkat is jelentősen megkönnyíti; a layerset-eknek a könnyű beazonosítás végett mindenképp adjunk nevet. Ez amiatt fontos, hogy a látványterv szétvágásakor ilyen egységenként lehessen ki-be kapcsolni a láthatóságot, mert sokszor szükség van arra, hogy egy bizonyos réteget (például egy háttérképet) könnyen meg lehessen találni, ami enélkül meglehetősen nehézkes. Ha van időnk, akár az egyes rétegeknek is adhatunk nevet, ami akkor hasznos, ha például a psd-ben lévő termékképek között kell megtalálni a nekünk megfelelőt.

Az egyes elemek „over” állapotáról se felejtkezzünk el, ha lehet, ezeket tegyük külön layerset-be, hogy egyszerre lehessen ki-be kapcsolni, mert így könnyebb megtalálni, mi az, ami változik. Sőt, érdemes rááldozni az időt, és a több állapottal rendelkező, általános elemeket (gombok, címek és társaik) egy külön psd-be menteni, mert ezzel is gyorsabban készülhet el az oldal, valamint a későbbi karbantartás is könnyebbé válik.

Arra ügyeljünk, hogy legalább az eredeti fájlban ne vonjunk össze rétegeket (a többibe bekerülhetnek képként bizonyos nem változó elemek, például a fejléc vagy a lábléc, mert így kevesebb erőforrásra lesz szüksége a Photoshopnak, és gyorsabb lesz a munka), s így nem kell a sitebuildernek azon gondolkodnia, hogyan tudja reprodukálni azt, amit mi elképzeltünk, de lehetőleg HTML elemekből, és nem képként.

Dolgozzunk pontosan és következetesen! Első munkahelyemen a frontendes kollegákba beleverték, hogy minden HTML-t úgy kell elkészíteni, ahogy a grafikus megálmodta, mert minden pixelnek megvan a maga szerepe. Ehhez viszont ügyelni kell arra, hogy ha egy doboznak öt pixeles keretet adtunk, akkor az összes látványterven ugyanannyi legyen, mert ha jön a projektmenedzser, összehasonlítja a psd-t a böngészővel, és ott eltérést talál, mert a sitebuilder a grafikához híven hét pixelt használt egy helyen, akkor jön az egymásramutogatás. Ugyanez igaz a betűméretekre és színekre is, ráadásul, ha fél év múlva elő kell szednünk egy új kérés miatt a munkát, mi sem fogunk már emlékezni, hogy melyik volt az eredeti elképzelésünk.

Tartalom és forma

A legtöbb dizájner elköveti azt a hibát, hogy amikor a tartalom különböző dobozokból áll, akkor az egymás mellett lévőket ugyanolyan magasra veszi. Ez a látványterven nagyon jól néz ki, csak sajnos átadás után azonnal borul a bili, amikor az ügyfél kétsoros címeket tölt fel, és az egyik dobozunk magasabb lesz, mint a másik. A helyzetet csak bonyolíthatja, ha az elem háttere egy szép színátmenetet és-vagy egyéb grafikát tartalmaz, ami nagyon nem jól néz ki, ha nyúlik a tartalom. Éppen emiatt fontos, mindig úgy készítsük el a grafikát, hogy gondoljunk az ilyen esetekre, hogy rögtön az elején kiderüljön, szép-e, megfelelő-e az eredeti elképzelésünk.

Vegyük figyelembe, hogy a sitebuildereknek nem kell profi módon érteniük a Photoshophoz, tudásuk sokszor kimerül a kijelölés–kivágás–beillesztés parancsokban, és ez így is van rendjén. Amikor dolgozunk, gondoljuk át, hogy az adott elképzelést ő tudja-e reprodukálni. Jó példa erre az, amikor van egy képünk, aminek van egy lekerekített vagy letört sarka, akkor ez utóbbi grafikai effektus legyen külön rétegen, hogy alatta a képet könnyen ki lehessen cserélni, és ne egyben kelljen az egészet kivágni.

Ha az oldal háttere egy ismétlődő amorf alakzat, akkor mindenképp mellékeljük a mintát, mert nincs annál szemgyilkosabb feladat, mint amikor egy ilyen képen kell megtalálni az eredeti alakzatot. A helyzetet már csak azzal fokozhatjuk, ha az oldalon alacsony a kontraszt, például fekete alapon sötét betűk, ilyenkor ne csodálkozzunk, ha édesanyánk sűrű csuklási rohamokról panaszkodik, nem csak a HTML munkálatok során, hanem az élesítes után is.

Hogyan dolgozzunk?

Befejezésként két, egymásnak valamennyire ellentmondó gondolatot szeretnék megosztani.

Joó Ádám webes tipográfiáról szóló előadásának egyik mondanivalója, hogy ismerjük meg alaposan azt a médiumot, amire tervezünk. Ez azt jelenti, hogy legyünk tisztában a webes szabványokkal, a különböző böngészők lehetőségeivel, valamint a hardverrel, amin az oldalunkat a látogatók meg fogják nézni, és ezeket a szempontokat vegyük figyelembe a látványterv készítésekor. Ha fontos a mobileszközökön való megjelenés, ahol a letöltés lassú, drága, és a feldolgozási sebesség is hagy kívánnivalót maga után, akkor a funkcionalitás valószínűleg fontosabb lesz, mint a látványos megjelenés, ha idősebbek vagy fogyatékkal élők a célcsoport, akkor ne kilenc pixeles betűtípust használjunk és így tovább.

A hatékony és jó munkához viszont fontos tisztában lenni a határokkal. Amikor egy új weboldalon kezdünk el dolgozni, nyugodtan engedjük el a fantáziánkat, felejtsük el, hogy mit tudunk a technológiáról, mire képesek a browserek, mik az aktuális divatirányzatok, és valósítsuk meg azt, amit számunkra a feladat jelent. Ha elkészültünk, menjünk oda a sitebuilderhez, és mondjuk meg neki, hogy pixelre pontosan ezt szeretnénk látni az elkészült site-on, nem érdekelnek a kifogásai. Engedményeket akkor tegyünk, ha már vért izzad, és tizedik nekifutásra sem sikerült megoldania egy problémát. A végeredmény? Mi kreatívabbak leszünk, kollegáink tapasztaltabbak, az internet pedig gazdagabb.