Útmutató grafikusoknak

Jelen útmutatót nem szentírásnak szánjuk, csak megpróbáltuk összeszedni azokat a dolgokat amikből általában probléma szokott adódni és ezért érdemes odafigyelni rá vagy amikkel egy grafikus, aki még nem dolgozott weboldalon nem biztos, hogy tisztában van.

Alapok

• pixelgrafikus alkalmazás és fájlformátum használata (javasolt: Adobe Photoshop, PSD)
• layeres PSD átadása, az összes használt betűtípussal
• grafikai fájlban guideline-ok, layer groupok, beszédes layernevek használata javasolt
• feliratok ne legyenek raszterizálva sehol sem
• layermask használata kerülendő

Layout

• lehetőség szerint web-safe font használata (rendszerfontok, Google Web Fonts, Adobe Edge Web Fonts), figyelembe véve az ékezetes fontokat
• lehetőség szerint grid system használata (960.gs, 978.gs, 1140.gs)
• lehetőség szerint framework figyelembevétele (Bootstrap, Foundation)
• a layout széle és a tartalom közti eltartás lehetőleg minden oldalon legyen egységes
• a layout elemek közti eltartás következetes alkalmazása

Oldal elemei

• lehetőleg próbáljunk egységes, letisztult, logikus felépítésre törekedeni (pl. egységes tartalom formázás, linkek stílusa egységes az egész oldalon)
• törekedni kell az elemek újrafelhasználására a sok különböző elem használata helyett
• minden olyan, elemek listáját tartalmazó oldalra, amin bármennyi elem megjelenhet, szükséges pagert (lapozó) elhelyezni
• szükséges egy olyan globális helyet bizotsíteni, ahol a felhasználónak üzeneteket lehet kiírni (pl. az egyes műveletek eredményességéről: "Az e-mail sikeresen elküldve", ...), alapvetően kétféle típusú üzenet van megjegyzés (notice) illetve hiba (error)
• nyelvi verziókból adódó különbségek figyelembevétele (pl. eltérő nyelven eltérő méretű gombok "keletkeznek")

Képek

• lehetőleg használjunk jó miőségű képeket
• többnyelvű oldal esetén a feliratos képeket minden nyelvi változathoz szükésges elkészíteni
• törekedni kell az admin által feltöltendő képek (pl. termékek képei) újrafelhasználására a sok különböző méretű kép helyett

Űrlapok

• minden űrlap elem (input), minden állapotának tervét el kell készíteni (pl. checked, selected, disabled, hover, ...)
• az űrlapokon lehetőséget kell biztosítani hibaüzeneteke megjelenítésére (globális, illetvel lokális hibákhoz egyaránt)
• űrlapok elemei lehetőleg minden űrlapon egyformák, egységesek legyenek (pl. ne legyen 2-3 féle checkbox, radio button, ...)

Rendszeremailek

• Rendszeremailek tervezésekor figyelembe kell venni az egyes levelezők HTML képességeit (Email standards project, CSS support)