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.