Hogyan készíts weboldalt?
A weboldal
készítés manapság igen népszerű szakma, naponta tonnányi weboldal készül,
illetve tucatnyi álláshirdetés jelenik meg. Éppen ezért ebben a
sorozatban azt nézzük meg, hogyan készülnek a weboldalak, mi az amit
tudnod kell, ha weboldalakat szeretnél készíteni. Vagyis ez a sorozat szól
azoknak is, akik még teljesen kezdők a weblapok készítésében, de ezzel
szeretnének foglalkozni, illetve azoknak is, akiknek már némi sejtésük van
erről, de szeretnék elkerülni a tipikus hibákat.A sorozat
minden részénél találsz majd oktató anyagot is, amelyekkel el tudod kezdeni a
tanulást, vagy a meglévő tudásod tökéletesítheted.A weboldalak
készítése több lépcsős folyamata weboldal céljának tisztázása,
specifikációk elkészítése. A specifikációban rögzítjük hogyan nézzen ki,
hogyan működjön az adott weboldal. weboldal kinézetének
(design-jának) elkészítése, ami a webdesigner dolga. A weboldal design-ok
készítésének tökéletes eszköze a Photoshop, tehát a Photoshop magabiztos
használata elengedhetetlen a weboldal kliens oldali
kódolása, (X)HTML és CSS segítségével, ami a sitebuilder feladata. Ebben a
fázisban az a kód készül el, amit a böngésző képes megjeleníteni, tehát
az, amit lényegében weboldalnak nevezünk. Ehhez először a HTML-t majd a
CSS-t célszerű elsajátítani szükség esetén szerver oldali
programozás, ami a programozó dolga. Ez lehet PHP, ASP, vagy egyéb szerver
oldali programozási nyelv. Ez a kód a szervereken (ahol a kész weboldal
tárolódik) hajtódik végre. Szerver oldali programozásra akkor lehet szükség,
ha pl. szeretnénk regisztrációt az oldalunkra, vagy fórumot, webshopot,
dinamikus tartalmat, stb.
szükséges esetben
keresőoptimalizálás (SEO), marketing (ezek folyamatos munkát jelentenek
gyakorlatilag)A weboldal design-ok készítésével, megnézzük
milyen eszközöket, programokat lehet felhasználni a weboldal design-ok
hatékonyabb készítéséhez, milyen alapelveket érdemes betartani, mire
érdemes odafigyelni.
Mivel?
Az első és
legfontosabb gondolat, ami felmerülhet, amikor weboldal design-okat készítünk,
az, hogy mivel készítsük, milyen programmal? Számos grafikai program létezik,
ami alkalmas lehet erre:
- Adobe Fireworks ,Adobe Photoshop ,GIMP
- CorelDRAW stb.
Viszont ha
jót akarsz magadnak, akkor a Photoshop-ot használod, persze biztosan van aki
másképp látja.
Miért a
Photoshop?
A rétegeket
nem hozom fel indoknak, hiszen azt minden kicsit is jobb grafikai program
tudja, de van valami amit szerintem a Photoshop tud a legjobban, az pedig a réteg
stílusok (Layer Style). A réteg stílusokkal állíthatsz be színátmenetet,
árnyékot, körvonalat és még rengeteg más egyebet. Ráadásul mindezt úgy teheted
meg, hogy előnézetet is mutat róla a Photoshop, sőt, később ezek módosíthatóak is
könnyedén. Nyilván például színátmenetet használhatsz sok más programban is, de
mi van akkor, ha később módosítani szeretnéd? Kijelölöd újra, beállítod megint
a színátmenetet és módosítasz rajta kicsit? Nem lenne egyszerűbb, ha csak
megnyitnád az adott réteghez tartozó stílusokat és pár klikkel átállítanád?
Persze ez
csak egy része a “miért Photoshop” felsorolásnak, igazából ha használod egy
ideig majd mással próbálkozol, azonnal észreveheted, hogy miért a Photoshop a legjobb weboldal design-ok
készítésére. De GIMP is jó úton halad egyébként, a roadmap szerint a
2.8-as verzióban végre egyetlen ablak lesz, nem 4564563 , illetve megjelennek
a réteg csoportok. Ami viszont ennél fontosabb, hogy a 3.2-es verzióban ígérik
a réteg effekteket (“bevel/emboss, draw line at edges, etc”), illetve egy
későbbi verzióban a “Smart Objects” is szerepel a tervek szerint (a Phohotshop-ban ez már megtalálható egy ideje).
Szóval
egyelőre maradjunk a Photoshop-nál, bár igazából amiről írni
szeretnék, az csak kisebb részben kötődik egyetlen grafikai programhoz, inkább
általános tanácsok, de kitérek a Photoshop-ra is.
Egyetlen
kérdést kellene még tisztázni, azt, hogy angol vagy magyar nyelvű Photoshop-ot érdemes használni? Sokan rögtön a
magyar nyelvű mellett döntenek, ám véleményem szerint nem feltétlen teszik jól.
Azért gondolom, hogy az angol nyelvű a jobb, mert ha azt megtanulod használni,
akkor onnantól kezdve minden angol nyelvű leírást, tutorialt megértesz majd,
még ha magát az egész szöveget nem is érted, de követni tudod. Márpedig angol
nyelven sokkal több anyag van a Photoshop-hoz, mint magyar nyelven.
Tehát akkor
végre van egy programunk, amivel weboldal design-okat tudunk készíteni.
Az első
lépések
Amikor egy
weboldal designt készítesz, akkor fontos eldönteni már az elején, hogy mekkora
legyen, milyen széles. Persze utólag is lehet a szélességet módosítani, ám ez
gyakran nem kis munka, főleg egy összetett design esetén, így lehetőleg már az
elején célszerű eldönteni. Igazából erre szabvány nincs, egy weboldal szélessége
tetszőleges lehet. Ám ez így nem teljesen igaz, ugyanis van egy maximális
szélesség, aminél nagyobbra nem érdemes méretezni a weboldalakat. Ez jelenleg
990 pixel. Miért ennyi? Nézzük meg kicsit a manapság elterjedt felbontásokat:
Láthatod,
hogy 1024 x 768-as felbontást még mindig sokan használnak, 20%-ot nem lehet
figyelmen kívül hagyni (a látogatók ötöde). Az 1024 azért érdekes, mert ezen a
felbontáson a 990 pixel széles weboldal, plusz a jobb oldali görgetősáv még
éppen elfér, anélkül, hogy alul is görgetősáv jelenjen meg. Tehát ha 990
pixelnél szélesebb, akkor a weboldal egy része nem fér ki ezen a felbontáson,
ami megengedhetetlen.
De ettől
függetlenül sem érdemes túlméretezni a weboldalakat, főleg azokat, amelyek csak
egyetlen vagy két oszlopból állnak, különösen, ha sok a szöveges tartalom, mert
a nagyon hosszú sorok nehezen olvashatóak. Ezért kell azt is megfontolni, hogy
érdemes-e a felbontáshoz alkalmazkodó weboldalt készíteni, tehát olyat, ami ha
a felbontás 1024, akkor 1024 széles, ha a felbontás 1920, akkor 1920 széles.
Ha megvan a
felbontás, akkor célszerű a segédvonalakat használni, ez a Photoshop-ban “guide” néven található (View > New
Guide). Tehát például letehetsz egyet függőlegesen 100 pixelnél és
(990-nél maradva) 1090 pixelnél. Így a közte lévő rész 990 pixel széles lesz,
ebben a részben kell maradnod. Fontos, hogy ebben a részben legyen minden,
tehát ha van árnyéka a weboldalnak, akkor az is.
Negnézzük
milyen fontos szempontokat érdemes figyelembe venni a weboldalak készítésénél,
milyen tipikus hibákat kell elkerülni, hogy a weboldalunk jól használható
legyen.
Az első és
egyik legfontosabb szempont a szövegek olvashatósága, hiszen egy rosszul
olvasható weboldallal biztos, hogy nem fognak a látogatók kínlódni.
Nézzük
először felsorolva, hogy mire érdemes ügyelni:
- betűtípus
- betűméret
- betűszín
- szöveg mögötti háttér, kontraszt
- szöveg tagolása
- szöveg igazítása
- sorok szélessége
Betűtípus
A számítógépeden rengeteg betűtípust találsz, amelyeket használhatsz egy weboldal elkészítése során, azonban a legtöbb esetben nem érdemes egy különlegesebb betűtípust használni, mert a monitoron való olvashatóságát rontja a szövegnek. Sokan úgy gondolják (illetve kutatások szerint is), hogy kerülni kell például a talpas betűtípusok használatát, mert a monitoron nehezen olvasható. Ilyen például a Times New Roman. Helyette az olyan talp nélküli betűket kell használni, mint például az Arial. De ha megnézed, akkor láthatod, hogy az operációs rendszered, vagy például az mp4 lejátszód, vagy telefonod is talp nélküli betűket használ alapértelmezésben.
Ez mellett
arra is ügyelned kell, hogy olyan betűtípust használj, ami széles körben is
elterjedt, hiszen betűtípusokat utólag is telepíthetsz a gépedre, ám közel sem
biztos, hogy az a weboldal látogatóinál is telepítve van. Vannak persze
módszerek ennek a megoldására is, ám jelenleg még a legjobb megoldás, ha széles
körben elterjedt betűtípust használsz, például az Arialt.
A weboldal
egyes részein természetesen használhatsz más betűtípusokat is, képként
beillesztve.
Betűméret
A
betűméretről túl sokat nem lehet beszélni, legyen könnyen olvasható, a túl apró
betűk gondot okozhatnak. A fenti dobozban lévő szövegnél a betűméret már
elfogadható, annál sokkal kisebbet csak erősen indokolt esetben szabad
használni. De ugyanígy nem jó az sem, ha túl nagy betűket használunk, mert az
is rontja az olvashatóságot, vagy ha csupa nagybetűket. Természetesen indokolt
esetben helyenként alkalmazhatsz kisebb és nagyobb betűket is, de általában nem
túl jó, ha nagyobb mennyiségű nem megfelelő méretű szöveg van egy weboldalon.
Betűszín
A betűszín
szintén az olvashatóság miatt fontos, a túl halvány betűket nehezebb elolvasni.
Persze van amikor jobban néz ki, ha halványabbak a betűk, de gondolni kell a
látogatókra is, fontosabb, hogy nekik jól használható legyen az oldal, mint az,
hogy mennyire illeszkednek a design-ba a kicsit sötétebb betűk.
Szöveg
mögötti háttér, kontraszt
Ha a
betűtípus, méret és szín is rendben van, még akkor is van valami, amivel az
egészet el lehet rontani, ez pedig a szöveg és a mögötte lévő háttér rossz
kontrasztja. Vagyis a halvány háttéren halvány betűk, vagy éppen a sötét
háttéren sötét betűk. Lehet, hogy jól néznek ki, de az olvashatóságot
jelentősen rontják, így ezek elkerülendőek.
Nézzünk
néhány rossz példát:
Sötét alapon
sötét szöveg
Halvány
szöveg
Háttérképen
szöveg
Szöveg
tagolása
A szövegek
tagolása, bekezdésekre osztása fontos, hiszen egyrészt egy összefüggő szöveg
massza riasztó lehet, ha azt szeretnénk hogy elolvassa valaki, illetve úgy
általában weben kényelmetlen elolvasni egy hosszú, “véget nem érő” szöveget.
Tehát célszerű széttagolni.
Ez így nem a
legjobb
Ez így már
sokkal jobb, átláthatóbb
Szöveg
igazítása
A
weboldalakon a szöveg gyakran balra igazított, vagy sorkizárt, bár a sorkizárt
esetében megoszlanak a vélemények, hogy érdemes-e használni, vagy sem, mert
vannak vele problémák, néha nagyon széthúzottá válnak a szövegek egyes sorai.
Jobbra igazított szöveg időnként szükséges lehet, viszont a középre igazított
csak speciális esetekben alkalmazandó leginkább, hosszabb összefüggő szövegek
esetében igen zavaró tud lenni.
A közepre
igazított szöveg nem a legjobb választás
Sorok
szélessége
Elsőre talán
nem is tűnhet problémának, ám a nagyon hosszú sorokat olvasni meglehetősen
kényelmetlen. Jellemzően nem nagyon van “szabvány” a sor hosszúságra, de
érdemes tartózkodni a nagyon hosszú soroktól. Ez a cikk amit most olvasol
még kényelmesen olvasható, de ennek a 1.5x-ese szerintem már túl hosszú lenne,
nehezen olvasható, de nézd meg, kattints az alábbi képre.