Webszerkesztés

Webszerkesztési alapelvek

Bevezető

Hogyan szerkesszünk jól működő és használható weboldalakat? Mi az, amitől egy weboldal jó?

Leegyszerűsítve, szerintem egy jó weboldal szép és használható! De elsősorban használható. A szépség fontos lehet az első lépéseknél: ha tetszik a weboldal, talán megnézzük közelebbről. Ettől a ponttól viszont a használhatóság válik fontossá.

Mit jelent a használhatóság? Például a következőket:

  • könnyű kideríteni, kinek a weboldalán járunk, és hogy miről szól,
  • az oldalon egyszerű eligazodni, az információkat könnyű megtalálni,
  • minden link és funkció (pl. legördülő menü stb.) működik, nincs egy csomó félkész oldal, “feltöltés alatt”, vagy hasonló felirattal,
  • nem kívánja meg spéci programok telepítését,
  • gyorsan letöltődik,
  • a lehető legtöbb böngészőben helyesen jelenik meg,
  • a szöveg könnyen olvasható,
  • keresőbarát, azaz hatékonyan átfésülhető a keresők által,
  • akadálymentes, azaz fogyatékosok számára is hozzáférhető.

A továbbiakban minderről bővebben esik szó. Ha a teljes anyagot egyetlen oldalra szeretnéd rendezni, pl. hogy kinyomtasd, kattints az alábbi linkre:

Webszerkesztési alapelvek [teljes anyag]

Kapcsolódó anyag

Web Style Guide [Patrick J. Linch, Sarah Horton]
Alapmű a webszerkesztés alapelveiről. Ha oldalakat szerkesztesz, feltétlenül olvasd el.

Ki beszél?

Egy weboldalról ki kell derülnie, ki az oldal szerzője. Szerző alatt nyilván nem a webszerkesztőt értjük, hanem a céget, intézményt vagy személyt, akinek a honlapján járunk. Mivel sok látogató keresőkön keresztül jut el egy-egy oldalra, elvileg egy honlap bármelyik oldalára eljuthat, és egyáltalán nem biztos, hogy a honlap kezdőlapjára érkezik. Ezért a szerzőt minden egyes oldalon érdemes feltüntetni, általában az oldal fejlécében.

Miről szól?

Ez az egyik legfontosabb információ, amire egy látogató elsőként kíváncsi egy oldalon. És mivel a látogató számára az egyik legfontosabb érték az idő, ennek nagyon hamar ki kell derülnie.

Az oldal témájának vagy tartalmának összefoglalására leginkább a címsor alkalmas, mivel általában ez az oldal első sora, és tipográfiai eszközökkel (nagyobb, félkövér betűk, általában “H1” stílus) is kiemelik. A címsor pontos, tömör és informatív megfogalmazása ezért nagyon fontos, érdemes erre elegendő időt szánni.

A címsoron kívül az oldal címe (a böngészőablak fejlécében megjelenő cím) is alkalmas az oldal tartalmának közlésére, ezt azonban, éppen mivel ott jelenik meg, ahol, a látogatók többsége nem olvassa el. Fontossá válik azonban akkor, amikor a látogató elteszi az oldalt a könyvjelzői (kedvencei) közé, mivel ekkor az oldal címe lesz a könyvjelző címe. A könyvjelző címét mentéskor a látogató elvileg átírhatja, de ezt kevesen teszik meg. Válassz rövid címet, és a cím megfogalmazásakor gondolj arra, hogy a látogató ez alapján próbál majd rájönni, mit is takar a könyvjelző, sokszor több hónappal a mentés után. Neked sikerülne?

Mikor készült?

Az oldal készítésének időpontja sokszor meghatározza az oldalon közölt információ értékét, egyszerűen azért, mert számos információ idővel elavul. Gondoljunk csak egy menetrendre, vagy egy önéletrajzra. Magától értetődően közlik a dátumot egy újságon, folyóiraton vagy levélen. Miért lenne ez kevésbé fontos egy weboldalon?

Érdemes tehát minden oldalon megadnod az illető oldal készítésének dátumát, és átírni a dátumot valahányszor az oldalt frissíted. Különösen fontos megadni a frissítés időpontját hosszabb, rendszeresen frissített dokumentumok esetén, ahol a tartalom az egyes frissítések alkalmával csak kevéssé változik. Vedd figyelembe, hogy a hosszabb dokumentumokat az olvasók előszeretettel kinyomtatják. Dátum hiányában az olvasó nem tudja majd eldönteni, hogy az általa kinyomtatott verzió a legutóbbi-e.

A frissítés dátumát a láblécben szokás megadni.

Tipp: Ha egy éppen meglátogatott oldalról szeretnéd megtudni, mikor készült vagy frissült utoljára, gépeld be a böngésző címsorába a következő JavaScript parancsot:

javascript:alert(document.lastModified)

Ha ezt egy könyvjelzőként elmented, rákattintva bármely oldalról rögtön megtudhatod a frissítés dátumát.

Tipp: Weboldalak szerkesztésekor a frissítés dátumának megadását érdemes automatizálni, hogy a szerkesztéskor ne kelljen erre figyelni, és minden frissítéskor újra beírni. Két leggyakrabban használt megoldás a következő:

1) A kliensoldali megoldás során az oldal kódjában kell elhelyezned egy JavaScript kódot, például az alábbit:

<script type="text/JavaScript" language="JavaScript">
document.write("Utolsó módosítás: "
+ document.lastModified );
</script>

Ha más dátum formátumot szeretnél, ennél bonyolultabb JavaScript kódra lesz szükséged.

Ez a megoldás azonban csak akkor működik, ha be van kapcsolva a JavaScript a látogató böngészőjében.

2) A szerveroldali megoldás elegánsabb. Ha lehetőséged van PHP használatára, használhatod a getlastmod() függvényt, hogy kiírasd az adott file módosításának dátumát, pl. az alábbi kóddal:

<?php echo "Utolsó módosítás: ".date("Y-m-d", getlastmod()); ?>

Ezzel a látszólag egyértelmű megoldással azonban az a gond, hogy a getlastmod() függvény használata egyes esetekben rossz eredményt, legtöbbször az aznapi dátumot adja vissza. Teszteld le, mielőtt használnád.

Jobb megoldás lehet a filemtime() függvény használata, pl. az alábbi kóddal, amely annak a file-nak a frissítési dátumát adja vissza, amelynek a kódjába beszúrod:

<?php
setlocale(LC_TIME, "C");
$ft = filemtime( <i>FILE</i>);
$modified = strftime ("%Y-%m-%d", $ft);
echo "Utolsó frissítés: $modified";
?>

A dátum formátuma (a fenti példákban Y-m-d = év-hónap-nap) a date() függvény ismeretében tetszőlegesen módosítható.

Navigáció

Hol vagyok?

A látogató böngészéskor sokszor a honlap egy belső oldalára érkezik (általában egy keresőből, vagy egy másik oldalról odavezető link nyomán), és joggal szeretné tudni, hol is jár éppen a honlap szerkezetén vagy hierarchiáján belül. Összetettebb szerkezetű honlapok esetén ezért nagy segítséget jelent, és sokkal áttekinthetőbbé teszi a honlapot, ha az egyes oldalakon megadjuk az illető oldal helyzetét (pl. Kezdőlap > Szolgáltatások > Kölcsönzés > Szerszámok), oly módon, hogy az egyes szintekhez tartozó nevekről linkek segítségével a megfelelő oldalra is átugorhassunk.

Egy egyszerűbb szerkezetű honlap esetén ennek nincs értelme. Ilyen esetben egy minden oldalon megjelenő menü elegendően megkönnyíti a navigálást, főleg, ha az éppen aktív menüpont másképp néz ki (pl. más a háttérszíne). Itt is érdemes azonban minden oldalon elhelyezni egy-egy linket a kezdőlapra. Mind a menüt mind a kezdőlapra mutató linket érdemes megbízható módon az oldal ugyanazon helyén elhelyezni.

Oldaltérkép (site map)

Az oldaltérkép tulajdonképpen a honlap tartalomjegyzéke, amelyet egy külön oldalon szokás megadni. Természetesen ennek csak összetettebb, sok oldalból álló honlapok esetén van értelme, akkor viszont nagyban segítheti a tájékozódást. Gondoljunk csak arra, hogy ha egy adott informácót keresünk, egy könyvben is a tartalomjegyzékhez fordulunk.

Az oldaltérképnek nem kell minden oldalt tartalmaznia, sokkal fontosabb szempont az áttekinthetőség. Fontos továbbá, hogy az oldaltérkép mindegyik linkje működjön: ezért az oldaltérképet mindig frissíteni és a linkek működését ellenőrizni kell, valahányszor a honlap szerkezete megváltozik. Az oldaltérképre mutató link legyen ott minden oldalon, lehetőleg ugyanazon a (jól látható) helyen.

Legördülő menük

A legördülő menük összetettebb szerkezetű honlapok esetén igen hasznosak lehetnek azért, mert a látogató egyetlen kattintással eljuthat a honlap egy hierarchiában mélyebben fekvő oldalára is. A menü ugyanakkor egyfajta oldaltérkép funkciót is ellát, amelyen keresztül a honlap szerkezete is áttekinthető. Érdemes jelölni, hogy mely menü-pontokból nyílik újabb almenü.

Az egyik gond a legördülő menükkel általában az, hogy a felhasználók türelmetlenek, és sokszor nem várják meg, amíg legördül egy-egy menü. Ezért érdemes a honlapot úgy megszerkeszteni, hogy a látogatók a legördülő menük használata nélkül, csupán a weboldalak linkjei segítségével is ugyanolyan könnyen elérjék bármelyik oldalt (pl. http://biofizika.aok.pte.hu). Kicsit redundáns, de hasznos, többek között azért, mert a legördülő menürendszerek általában nem akadálymentesek.

Ahány látogató, annyi környezet

Szerkesztéskor, mikor a saját gépünkön leellenőrizzük a készülő oldalt, hajlamosak vagyunk azt hinni, hogy a látogatók is ugyanazt látják majd, amit mi. Ennek sajnos épp az ellenkezője igaz. Látogatóról látogatóra változik a böngésző típusa és verziója, a böngésző beállításai (pl. JavaScript elérhetősége), az operációs rendszer, a képernyő típusa, felbontása, az internetkapcsolat sebessége stb.

Hogy hogyan működik az oldalad különböző körülmények között, csak úgy tudhatod meg, ha kipróbálod. Igyekezz ezért lehetőleg minél több gépen, minél változatosabb körülmények között megnézni és használni az oldalt! Telepíts a gépedre minél több böngészőt, és mindegyiken próbálj ki több beállítást (képek, stíluslapok, JavaScript be és kikapcsolása, képernyőfelbontás megváltoztatása). Ha lehet, töltsd le az oldalt modemes internetkapcsolaton keresztül. Ezen felül ha “idegen” helyeken jársz, nézd meg az oldalt az ottani gépen.

Melyik böngésző számára készüljön?

A probléma itt abból adódik, hogy nagyon sok böngésző létezik, amelyek ugyanazt a weboldalt nagyon sokféleképpen jelenítik meg. Egyes böngészőkben egy-egy oldal teljesen használhatatlanná válhat. Ezért amikor weboldalt szerkesztesz, el kell döntened, mely böngészőket támogatod. Mindegyiket nyilván lehetetlen.

A döntéskor azzal kell számolnod, hogy ha valamelyik böngészőn a honlapod nem működik megfelelően, az illető látogatókat elveszítheted. Amatőr dolog egyetlen böngészőre fejleszteni, és odaírni az oldalra: “Ajánlott böngésző: Internet Explorer 6.0”, vagy “Netscape 6-ra optimalizálva”. Ezzel rá akarod venni a látogatót, hogy a kedvenc, megszokott böngészője helyett egy másikat használjon, adott esetben előbb töltse le és telepítse, ha még nem rendelkezik vele. Gondolod, hogy megteszi a weboldalad kedvéért? Ha meg is teszi, gondolod, hogy kellemes élményekkel távozik az oldaladról?

Hogyan válasszuk ki a támogatott böngészőket?

Egybevéve, hogy hányféle böngésző hányféle verziója létezik (pillants rá a listára az evolt.org oldalon), a lehetőségek száma több, mint tízezer! Ennek ellenére, a látogatók döntő többsége tucatnál kevesebb böngészőt használ. Ha ezeket támogatod, az oldalad valószínűleg eljut a látogatók több, mint 99%-ához. A legelterjedtebb böngészők: az Internet Explorer (a 6.0 mellett sajnos az 5.5 és 5.0 verziók), a Mozilla Firefox, az Opera, a Netscape, valamint a MacOS X beépített böngészője, a Safari. Ha tehát weboldalt szerkesztesz, el kell döntened, hogy mely böngészőket támogatod, és tesztelned kell az oldalt mindegyikben. Ez néha nem egyszerű, pl. az Internet Explorer régi verziói esetén, de megoldható.

A fentiek mellett fontos kiemelni a szöveges böngészőket (pl. Lynx), amelyek nagyon fontosak az akadálymentesség és a kereső-optimalizálás szempontjából. Ezek ugyanis gyakorlatilag azt mutatják, amit egy vak felhasználó felolvasószoftvere vagy a Google lát az oldalból.

Tipp: Hogy megnézd, hogy néz ki egy oldal Lynx-ben, telepítheted a Lynx-et Windows alá, vagy használhatod a Lynx Viewer weboldalt.

Tipp: Az alábbi weboldalon megnézheted, hogy néz ki az oldalad a Safari böngészőben:
BrowsrCamp

Mit jelent a “támogatás”?

Nos, nem azt jelenti, hogy az összes böngészőn és környezetben, mindenki pontosan ugyanazt kell, hogy lássa. Ugyanazt a rádióadást is lehet professzionális Hi-Fi-n vagy zsebrádión hallgatni. Ezen felül a támogatás nem jelent igen/nem választást. A támogatásnak is vannak szintjei. A legelterjedtebb böngészők teljes támogatása mellett biztosíthatsz részleges támogatást az elavultabb böngészők számára (pl. Netscape 4.x). A részleges támogatásnak a tartalom átadását kell előnyben részesítenie, nem pedig a megjelenését. Így pl. átadható az oldal szövege és képei nyers formában, formázás nélkül. Ez a web szabványok alapján szerkesztett weboldalak esetén, ahol a tartalom és forma szétválik, egyszerűen megoldható.

Böngészők használati aránya

Fejlesztéskor nyilván jó volna tudni, hogy az egyes böngészőket milyen arányban használják. Erre azonban – érdekes módon – nincs megbízható statisztika. Az első oldal, amit a Google erre a kérdésre kidob, a W3C Schools Browser statistics oldala. Ez azonban, mint az összes többi, valószínűleg nem mérvadó. Minden egyes honlap látogatói közössége ugyanis más és más (fenti oldalt pl. főleg a számítástechnika iránt érdeklődők látogatják), és ennek megfelelően nagymértékben változhat az általuk használt böngészők megoszlása is. A saját oldalad szempontjából igazán megbízható ezért csak a saját oldalad statisztikája lehet. Ilyen statisztikát egyes tárhely-szolgáltatók automatikusan biztosítanak, de léteznek ingyenes külső, vagy a tárhelyre telepíthető statisztikai programok.

Kapcsolódó anyagok

Graded Browser Support
Nate Koechley kiváló cikke arról, hogy mit jelent a támogatás, és hogyan alkalmazhatók fokozatok a böngészők támogatásában

TheCounter.com
Valószínűleg az egyik legjobb becslés a böngésző-használati arányokra. A statisztika a TheCounter szolgáltatását igénybe vevő oldalak, és így valószínűleg sokféle és nagyszámú (januárban több, mint 250 millió) látogató adatait összegzi.

Browser statistics
Az egyes böngészők használatának aránya a W3C Shcools szerint

Browse Happy
Böngéssz vídáman, avagy miért érdemes lecserélned az Internet Explorert

Letöltési méret

Ez alatt az oldal kilobyte-ban megadott méretét értem. A méret a letöltési sebességgel együtt meghatározza, hogy mennyi idő alatt töltődik be egy oldal. Bár a szélessávú internet egyre elterjedtebb, még nagyon sokan használnak modemes kapcsolatot. Az oldal méretét nyilván a legkisebb használt sebességhez illik igazítani, ezért hacsak lehet, ellenőrizd az oldalad betöltődését modemes hozzáféréssel is, és igyekezz elfogadható értékre leszorítani a letöltési időt.

Bár a pontos értékeket illetően eltérőek a vélemények, bizonyos, hogy a látogató nem fog sokat várni az oldal betötődésére. Az, hogy mennyit vár, nyilván az általa használt kapcsolat sávszélességétől függ: egy gyors internethez szokott látogató max. néhány másodpercet vár, míg egy modemet használó látogató – mivel tisztában van a kapcsolat korlátaival – nyugodtan vár(hat) akár fél percet is.

Folyamatos betöltődés

Érdemes az oldalt úgy megszerkeszteni, hogy a letöltés ideje alatt az oldal elemei folyamatosan jelenjenek meg, így pl. amíg a képek betöltődése befejeződik, a látogató már olvasgathatja a szöveget. A táblázatok használata az oldal vázának kialakítására ebből a szempontból kifejezetten ellenjavallott, mivel egy táblázat tartalma csak a táblázat teljes tartalmának betöltődése után jelenik meg. A látogató ekkor sokáig semmit sem lát (általában ez idő alatt ott is hagyja az oldalt), aztán a teljes tartalom hirtelen megjelenik.

Képek

Azt mondják, egy kép ezer szóval felér. Sajnos ez a méretére is igaz. Az oldalak letöltési méretét leginkább a képek határozzák meg, ezért nagyon fontos, hogy ne terheljük meg az oldalakat túl sok képpel, illetve a szükséges képeket optimalizált, a kívánt minőséget minél kisebb méretben megvalósító változatban használjuk. Mivel minden egyes képfile egy külön HTTP kérést kíván a szerver felé, sok kicsi kép akkor is jelentősen lassíthatja a letöltést, ha azok összmérete viszonylag kicsiny. Érdemes ezért a navigációs elemeket képek helyett inkább CSS segítségével formázott szöveggel megoldani. Talán a leghatékonyabb és legrugalmasabb, szép képeket adó megoldás az Adobe Photoshop “Save for Web…” funkciója, de a gif vagy jpg formátumok mentése terén jó eredmények érhetők el ingyenes képkezelőkkel (pl. IrfanView ). Gif képek esetén érdemes az Interlaced változatot használni: ez esetben a kép nem soronként, hanem előbb egy kisebb felbontású változatban töltődik be, majd egyre nagyobb felbontással, míg végül betöldődik a teljes kép.

Az oldal méretei

Milyen széles és milyen magas legyen az oldal? Kövesse-e és hogyan a felhasználók különböző képernyőfelbontását?

Szélesség

Az oldalszélesség szempontjából két megoldás lehetséges: a fix illetve a rugalmas (folyékony, angolban fluid vagy liquid).

A fix megoldás esetén a szélességnek a legkisebb használt képernyőszélességhez kell alkalmazkodnia. Mivel 640×480 pixeles képernyőfelbontást már szinte senki sem használ, legkisebbnek a 800×600-as felbontást tekinthetjük. A fix oldalszélességet ezért érdemes kb. 760 pixelnek választani, 40 pixelt meghagyva az ablak kerete illetve a gördítősáv számára. A megoldás hátránya, hogy nagyobb felbontás esetén kihasználatlan sávok maradnak a képernyőn. Ha már így alakul, érdemes az üres területet egyformán elosztani a jobb és bal oldalon, ellenkező esetben az oldal tartalma kiszorul a képernyő bal oldalára, ami furcsán néz ki.

A rugalmas megoldás esetén az oldal mindig olyan szélességre nyúlik ki, mint a képernyő, illetve a böngészőablak. Ennek az a hátránya, hogy a képernyő szövege is vele nyúlik, nehezen olvasható hosszú sorokat eredményezve (ld. Olvasható szöveg). Ez feloldható lehet pl. a szöveg két oszlopba rendezésével.

Magasság

Ami az oldal magasságát, azaz függőleges méretét illeti, egy dolgot kell szem előtt tartani: a látogató nem szeret görgetni, és sokszor egyáltalán nem is fog. Ezért ahelyett, hogy egy hosszabb szöveget egy oldalon helyeznénk el, érdemes azt több oldalra szétbontani, hogy kevesebbet kelljen görgetni.

Ha az oldal függőleges mérete mégis nagyobb az ablak magasságánál, három dolgot érdemes megtenni:

  • Az igazán fontos tartalmi részt helyezzük az oldal tetejére, úgy, hogy betöltődéskor görgetés nélkül is látható legyen. Ilyen szempontból egy magas fejléc kifejezetten káros, mivel kiszorítja az oldal tartalmát az ablakból.
  • Ha lehet, helyezzünk el az oldal tetején egy tartalomjegyzék-szerű listát, amelynek linkjeiről közvetlenül a szöveg egyes alfejezeteire lehet ugrani.
  • Minden, kb. az ablak magasságának megfelelő szövegrész után helyezzünk el egy “vissza az oldal tetejére” linket. Az utóbbi két megoldással könnyebben lehet majd navigálni a szövegen belül.

Több oldalon megfigyelhető, hogy a láblécben újra megjelenik az oldalhoz tartozó navigációs menü. Ez azért hasznos, mert mire a látogató a láblécig görget egy oldalt, a fejlécben található navigációs menü már nem látszik, így anélkül léphet más oldalra, hogy vissza kellene görgetnie az oldalt.

Kapcsolódó anyag

Water vs. Stone – The reality of Fluid layouts
Érvek és ellenérvek a fix és a rugalmas design kapcsán

Olvasható szöveg

Milyen betűtípust, betűméretet, kiemelést, mekkora margót és sorközt, milyen szöveg-igazítás használjunk, és hogyan biztosítsuk a kontrasztot ahhoz, hogy az oldal szövege könnyen olvasható legyen?

Betűtípus

Válassz olyan betűtípust, amely biztosan elérhető a felhasználók gépén, ellenkező esetben a böngésző az alapértelmezett betűtípussal jeleníti meg az oldalt. Mivel a Windows és MacOS operációs rendszerek alatti betűkészletek eltérnek, érdemes a betűtípus megadásakor több lehetőséget felsorolnod, a lista végén pedig a típus általános nevét is megadni (serif (talpas) vagy sans-serif (talp nélküli)), például: Arial, Helvetica, sans-serif.

Képernyőről olvasni sokkal nehezebb és fárasztóbb, mint papírról, főleg a sokkal kisebb felbontás miatt. A könyvek és folyóiratok 1200 dpi vagy nagyobb felbontásával szemben a képernyő felbontása ritkán haladja meg a 85 dpi-t. Sokszor azok a betűtípusok, amelyek papíron jól olvashatók, nem olvashatók képernyőn, és fordítva. Egyes betűtípusokat kifejezetten a képernyőn való olvasáshoz terveztek (pl. Georgia, Verdana), ezek képe nyomtatásban túl masszív. Ma már nem kell kompromisszumot kötnünk, a stíluslapok media="screen" illetve media="print" attribútuma segítségével használhatunk más és más betűtípust a képernyőn illetve a nyomtatásban történő megjelenítéshez.

Többen érvelnek amellett, hogy a sans-serif (talp nélküli) betűtípusok olvashatóbbak a képernyőn, mások szerint a serif (talpas) típusúak a megfelelőbbek. Valójában inkább mondhatjuk, hogy ez a helyzettől (pl. nagyban a betűmérettől) függ, és ki-ki maga is eldöntheti, hogy az adott környezetben mi a megfelelőbb. Egyszerűen meg kell nézni, hogy mutat. Ugyanazon az oldalon különféle betűtípusokat egyszerre is használhatunk (pl. sans-serif-et a címsorok, serif-et a szöveg számára), kettőnél több típus használata azonban zavaró lehet.

Betűméret

Betűméretet érdemes a betűtípushoz választani, mivel e kettő együtt határozza meg az olvashatóságot. Bár a betűk méretét többféle mértékegységben (px, pt, em, %) is megadhatjuk, a W3C azt ajánlja, hogy a betűméretet “em”-ben adjuk meg, lévén ez relatív egység, így alkalmazkodik a felhasználói környezethez, és arányosan nagyítható.

A felhasználók számára lehetővé kell tenni, hogy a betűméretet megváltoztassák. Ezt a funkciót a böngészők eleve biztosítják, ezért mondhatnánk, hogy bármilyen betűméretet használhatunk, a felhasználó majd úgyis megváltoztatja, ha akarja. Sajnos azonban a legtöbb felhasználó nem is tud erről a lehetőségről, vagy nem használja, így érdemes az eredeti betűméretet átgondoltan úgy megválasztani, hogy az a legtöbb felhasználó számára eleve jól használható legyen. Ha értelmét látjuk, alternatív stíluslapok segítségével magán az oldalon mi is lehetővé tehetjük a betűméretek növelését/csökkentését.

Kerüljük el a pixelben megadott betűméretet, mivel ezt Internet Explorerben nem lehet növelni vagy csökkenteni, illetve egyáltalán nincs értelme pontban (pt) megadni a betűméretet, mivel ezt az egységet a nyomtatott média számára találták ki.

Kiemelés

Egy egyhangú szövegblokkokból álló oldal hamar elrettenti a látogatókat. A fontosabb szövegrészek, szavak kiemelése tájékozódási pontokat jelenthet a látogatók számára. Kiemelést azonban csak ritkán használjunk: ha sok mindent kiemelünk, elvész a hatékonyság.

Értelmes szabály, hogy kiemeléskor egyszerre csak egy tulajdonságot változtassunk meg (pl. félkövér vagy dőlt szöveg, betűméret, szín). Ne legyen pl. a kiemelt szöveg piros, félkövér (bold) és csupa nagybetűs! Egy apró változtatás szinte mindig elegendő.

A félkövér (bold) tulajdonság talán a legjobb kiemelési eszköz.

Dőlt betűvel finomabban emelhetők ki hangsúlyos vagy idegen szavak illetve szövegrészletek, pl. idézetek. Ne írjunk azonban hosszabb szövegeket dőlt betűvel, mivel a dőlt szöveget a képernyőn nehezebb olvasni.

Kerüljük el az aláhúzással történő kiemelést. A weboldalakon az aláhúzás egyezményesen a linkek jele, ezen felül az aláhúzásról a nyomdai szakma is úgy tartja, hogy nem elegáns és csúnya.

Ugyanígy, a színes szöveg is linkekre utalhat. Hasznos lehet azonban címsorok kiemelésekor, főleg ha sötétebb, az oldal hátterével jó kontrasztot adó színt használunk, amely távol áll a standard link-színektől.

A NAGYBETŰS SZÖVEG egyike a leggyakrabban használt és legkevésbé hatékony kiemelési eljárásoknak. A nagybetűs szöveg monoton magassága miatt nehezen olvasható. Ezen felül a blog-okban és fórumokban kialakult egyezmények szerint a nagybetűs szöveg kiabálásnak felel meg.

Egy finom de hatékony kiemelési módszer a behúzás. Nyilván szövegrészek esetén alkalmazható: igen jól használható listák, idézetek vagy példa-szövegblokkok (pl. kódrészletek) kiemelésére.

Margók, sorközök

Érdemes nagyvonalúan bánnunk a sorközökkel és a margókkal (azaz a szövegblokkok körüli szabad hellyel). Ezzel jelentősen javíthatjuk a szöveg olvashatóságát és az oldal áttekinthetőségét, ráadásul az oldal látványa szellősebb és kellemesebb lesz.

Szöveg-igazítás

A balra igazított szöveg olvashatósági szempontból valószínűleg a legjobb választás. A nyugati emberek olvasáskor mindig a bal oldali sor-eleji viszonyítási pontokhoz térnek vissza, ezért a középre vagy jobbra igazított szöveg nehezen olvasható, mivel a sorok kezdőpontjának helyzete sorról sorra változik. A sorkizárt (justified) szöveg is jó megoldás lehet, mivel azonban ekkor a böngésző az egyes sorokon belül a szóközt növeli meg a kívánt mértékben, ez (főleg rövidebb soroknál) egymástól csúnyán eltávolodó szavakat eredményez. A balra igazított szöveggel semmi gond nincs, a sorok jobb oldalon változó szélessége egy kis változatosságot is jelenthet az oldal látványában.

Kontraszt

Az olvashatóság és áttekinthetőség alapja a kontraszt: az a képesség, hogy az adott elemet a környezetétől meg tudjuk különböztetni. Ezért javítja pl. az olvashatóságot a megnövelt sorköz: mert így a sorok elválnak egymástól, és a szöveg nem tűnik fel egyetlen szükre tömbként. Ezért fontos az is, hogy a háttér megválasztásakor kerüljük az olyan színeket vagy háttérképeket, amelyeknek akár csak egy részén a szöveg beleolvad a háttérbe.

Nyomtatás

Mivel a képernyőn egy szöveg sokkal nehezebben olvasható, sokan kinyomtatják és papíron olvassák a weboldalakat. Nyomtatáskor azonban az oldal számos elemét nem szeretnénk viszontlátni: fölösleges papír és festékpazarlás kinyomtatni a navigációs elemeket, a fejlécet, a láblécet.

Ezért – főleg a hosszabb szöveget tartalmazó oldalakhoz – érdemes nyomtatható verziót is biztosítani. A nyomtatható verzióban nem kell hogy szerepeljen a teljes fejléc, a menü, és az oldal egyéb, a nyomtatott verzió szempontjából lényegtelennek ítélt elemei (nézd meg pl. ennek az oldalnak a nyomtatási képét). Ezen felül érdemes olyan betűtípust és méretet választani, amelyet kényelmes olvasni. Nyomtatásban pl. olvashatóbbak a talpas (serif, pl. Times New Roman) betűtípusok.

Nyomtatható verzió: hogyan?

A nyomtatható verzió megoldható úgy is, hogy egy másképpen formázott második oldalt készítünk, sokkal frappánsabb azonban a CSS használata. Ekkor ugyanahhoz az oldalhoz egy második stíluslapot rendelünk, amely csak a nyomtatott verzióra vonatkozik. Ebben megadhatunk más betűtípust és méretet, illetve kikapcsolhatjuk az általunk kiválasztott elemek megjelenítését. Az alábbi anyagokból bővebben tájékozódhatsz.

Kapcsolódó anyagok

CSS lépésről-lépésre: nyomtatás
Cikk a nyomtatási stíluslapokról a Weblabor portálon

CSS Design: Going to Print
Hogyan szerkesszünk nyomtatási stíluslapot (Eric Meyer cikke az A List Apart honlapon)

Print Different
A nyomtatási stíluslapok alapjairól

Linkek

Legyen egyértelmű, melyik szöveg link és melyik nem az. Ezt azért fontos leírni, mert ma már csak ritkán jelzi a kék szín és az aláhúzás a linkeket, így a látogatónak gyakran próbálkoznia kell, hogy megtudja, egy adott szó link-e vagy sem. A linket sajnos sokszor csak az jelzi, hogy az egérkurzor nyílről kéz alakra vált.

Segítsünk ezért a látogatóknak azzal, hogy a linkeket egyértelműen jelezzük szín, aláhúzás, háttérszín vagy más kiemelés segítségével. Ezen felül kellemes és érdekes hatású lehet, ha az egérkurzort a linkre húzva annak valamely tulajdonsága megváltozik. Ez CSS segítségével (hover tulajdonság) egyszerűen megoldható. A linkek hagyományos jelzése miatt érdemes elkerülni szövegrészeknek kék színnel vagy aláhúzással történő kiemelését, ha azok nem linkek, mivel a látogatók megpróbálnak majd ráklikkelni, és csalódni fognak.

Ugyancsak emiatt ne legyenek az oldalon halott linkek, azaz olyanok, amelyek nemlétező oldalakra vezetnek. Ezt érdemes ellenőrizni (pl. egy interneten is elérhető link-ellenőrzővel: W3C Link Checker), hogy megkíméljük a látogatókat a bosszúságtól. Egy jól működő oldal megbízhatóságot sugall.

Ne legyenek a honlapon zsákutca-oldalak, azaz olyan oldalak, ahova vezet link, de ahonnan nem vezet vissza link a honlap többi oldalára. Ezek azért veszélyesek, mert lehetséges, hogy a látogató (pl. egy keresőből) közvetlenül egy ilyen oldalra érkezik, és ilyenkor nem lesz képes onnan a honlap többi részére eljutni.

Új böngészőablakok megnyitása

Új böngészőablakok megnyitása kerülendő. Mivel minden böngésző tartalmaz egy “Link megnyitása új ablakban” funkciót, illik hagynunk, hogy a látogatónk döntse el, mit is akar kezdeni a böngészőjével. Ha több linket is új ablakban nyittatunk meg, a képernyő előbb-utóbb tele lesz böngészőablakokkal, amelyeket minduntalan be kell zárni, a felhasználó már nem tudja, melyik is volt az eredeti, általában véletlenül azt is bezárja, a fennmaradó ablakokból pedig a “vissza” gombbal már nem talál vissza az eredeti lapra.

Hogy a felugró (popup) ablakok mennyire zavaróak lehetnek, mi sem jelzi jobban, mint hogy a legújabb böngészőkben beépített funkció a felugró ablakok blokkolása. Ennek persze leginkább a reklám-ablakok esetén van értelme, és lehetnek esetek, amikor valamilyen információt valóban érdemes egy újabb ablakban megjeleníteni. Irányelv lehet például, hogy a honlapon belüli oldalakat ugyanabban az ablakban, a külső oldalakat pedig új ablakban nyitjuk meg. Ha szükségét érezzük, a honlapon belüli oldalakat is megnyithatjuk új ablakban, ilyenkor érdemes a felnyíló ablakban egy az ablak bezárására alkalmas gombot vagy linket elhelyezni.

Általános alapelvként azonban tartsuk be azt a szabályt, hogy lehetőleg ne nyissunk új ablakokat, csak ha arra valóban szükség van.

E-mail címek és SPAM

Sokszor hasznos és szükséges e-mail címek (például a webmester elérhetőségének) elhelyezése egy oldalon. A kéretlen reklámlevelek (SPAM) egyre nagyobb veszélye miatt azonban ezzel nagyon óvatosan kell bánni. A SPAM ellen mindmáig nincs hatékony védelem. A SPAM-szűrővel ellátott levelező-programok már csak tüneti kezelést nyújtanak, és még így is jelentős energiabefektetést kívánnak a felhasználótól.

A legjobb megoldás tehát a megelőzés. Éppen ezért nagyon fontos, hogy e-mail címeket csak valóban szükséges esetben helyezzünk el egy weboldalon, és akkor is kódolt formában! A SPAM jelentős része ugyanis úgy talál meg bennünket, hogy e-mail cím gyűjtő programok (SPAM-robotok) a weboldalakat végigjárva kiolvassák az oldal kódjából az e-mail címeket. Az e-mail címek kódolása esetén az oldal html kódja nem tartalmazza az e-mail címet, csak egy (általában JavaScript) programkódot, amely az oldal betöltődésekor állítja elő az e-mail címet. Nyilvánvaló hátránya ennek a megoldásnak, hogy aki kikapcsolt JavaScript-tel böngész, nem látja az e-mail címeket.

Az általam kipróbált kódolási eljárások közül én a következőt találtam a legjobbnak: Automatic Enkoderform

Fontos tudni, hogy a kódolás sem jelent biztos védelmet, valószínűleg mivel a robotokat is fejlesztik. Mindenesetre meg kell tenni, amit lehet.

Visszajelzés

Biztosítsunk a látogatóknak lehetőséget a visszajelzésre (feedback). Megadhatjuk például a láblécben az oldal tulajdonosa vagy a webmester elérhetőségét, tipikusan e-mail címét. Sokkal jobb megoldás lehet azonban egy üzenetküldő űrlap használata, részben mivel kevesebb energiát kíván a látogatótól (egy internetkávézóban ülő felhasználó nem biztos, hogy veszi a fáradságot, hogy a kedvünkért belépjen a webes postafiókjába), részben pedig mivel nem kell e-mail címeket megadnunk (ld. E-mail címek és SPAM-veszély).

Ne számítsunk azonban arra, hogy sok visszajelzést kapunk. A látogatók eredendően lusták, mint ahogy látogatói szerepben általában mi is azok vagyunk (elnézést a kivételektől). Nem valószínű, hogy egy nem működő linket e-mailben bejelentenek nekünk, sokkal inkább hogy emiatt otthagyják az oldalunkat.

Éppen ezért minden visszajelzést nagyra kell értékelni, meg kell köszönni, és gyorsan és pontosan meg kell válaszolni. Ez egyrészt megbízhatóságot sugall, másrészt élővé és személyesebbé teszi az oldalt azzal, hogy megmutatja a háttérben álló embereket.

Extra technológiák

Az extra technológiák alatt egyéb programokat, böngészőmodulokat és bővítményeket értek (JavaScript, PDF, Flash, stb.). Lehetőleg minél kevesebbet használjunk belőlük. Egyszerűen azért, mert amennyiben a felhasználó nem rendelkezik a szükséges programmal/modullal (plug-in-nel), vagy az ki van kapcsolva, és nem tudja vagy akarja bekapcsolni, nem fogja látni az oldal megfelelő részét. Ezek után pedig – hacsak nem szorul rá valóban az adott tartalomra – valószínűleg más oldalra navigál.

A JavaScript általában a böngészők része, és a felhasználók általában nem kapcsolják ki, néhány százalékuknál azonban nem elérhető. A PDF formátum lassan univerzálissá válik, mégsem feltételezhetjük, hogy minden felhasználó hozzáfér. A Flash – mivel ezt is kinek-kinek magának kell telepítenie – szintén nem biztos, hogy nagyon elterjedt.

Ha mégis extra technológiák használata mellett döntünk, a legjobb amit tehetünk, hogy az általunk közölt tartalmat hagyományos (HTML) formában is elérhetővé tesszük. Ezen felül fontos, hogy a lehető legjobban kiszolgáljuk a felhasználót. Ideális esetben készítsünk olyan oldalt, amely érzékeli, ha a felhasználó nem rendelkezik a megfelelő eszközzel, és rögtön felajánlja annak telepítését. Ha az automatikus érzékelés nem is oldható meg, mindenképpen helyezzünk el egy linket, ahonnan a látogató letöltheti a szükséges segédprogramot (lehetőleg ne csak angol, hanem magyar nyelven is), és ha lehet, írjunk hozzá megfelelő telepítési utasítást, amit bárki megért.

Oldalszerkezet

Le a táblázatokkal!

Korábban a weboldalak szerkezetének, vázának kialakításához (fejléc, tartalom, oldalsáv, lábléc) táblázatokat használtak. A mai, CSS-re épülő technológiák segítségével azonban ugyanez sokkal hatékonyabban és rugalmasabban megoldható.

A táblázatok tehát elavult és nehézkes módját jelentik egy oldal kialakításának. Miért?

  • A táblázatok használata áttekinthetetlenné teszi az oldal kódját, ugyanakkor fölöslegesen megnöveli a kód méretét. CSS segítségével az oldal vázának kódja áttekinthetőbb és rövidebb.
  • A táblázatok esetén a táblázat, tehát az oldal tartalma csak akkor jelenik meg, ha a teljes tartalom betöltődött. Egy CSS segítségével (“div” blokkokkal) kialakított oldal esetén a tartalom folyamatosan, a betöltéssel egyidőben megjelenik, és a már megjelent elemek a továbbiak betöltődése közben már olvashatók.
  • A táblázatok átalakítása, átméretezése sokkal körülményesebb. CSS segítségével az oldalt felépítő blokkok méreteit és tulajdonságait (háttér, pozíció, margó, keret, stb.) egy külső stílusfile-ban egyszerűen módosíthatjuk, anélkül, hogy a HTML file-okhoz hozzá kellene nyúlni.
  • Mivel a táblázatokkal pontos pozicionálás nem oldható meg, a táblázatokkal sokszor együttjár a távtartó (spacer) szereppel alkalmazott képek használata. A táblázatokhoz hasonlóan ezek használata is mellőzendő.

A táblázatok létjogosultsága természetesen megmarad olyan esetekben, amikor táblázatos formában kell adatokat megadni.

Ne használj frame-eket

A frame-ek (keretek) alkalmazása általában nem javasolt, mivel megnehezíti egy oldal használatát: a böngészők általában nem képesek a teljes oldalt, hanem csak a kereteket betöltő, ún. frameset oldalt menteni, és ugyanez igaz az oldalt tároló könyvjelzőre is.

A frame-ek használata ugyanakkor az akadálymentesség szempontjából is helytelen, valamint egyes esetekben programozással kapcsolatos nehézségeket is jelent. Ráadásul a keretek “elzárják” az oldal tartalmát a keresőrobotoktól.

Tartalom és forma szétválasztása

A modern (szabványos!) weboldalakon a tartalom és a forma szétválik. Egy HTML vagy XHTML file tartalmazza az oldalon szereplő szöveget, a képek referenciáit stb. A HTML kód azonban ideális esetben nem tartalmaz formázási információt (mint pl. betűtípus, betűméret, sorköz, háttérszín stb.). Az összes stíluselemet egy külső stílusfile (CSS file) tárolja, a HTML file pedig csak egy erre a file-ra mutató linket tartalmaz. Így egyetlen külső file tartalmazhatja egy honlapon belül az összes weboldalhoz tartozó stílusinformációt.

A módszer előnyei a következők:

  • Sokkal egyszerűbb, hatékonyabb és rugalmasabb az oldalak karbantartása vagy módosítása. A címsor betűméretének megváltoztatása pl. csak egy szám átírását jelenti a CSS file-ban, a HTML file-okhoz hozzá sem kell nyúlni. Csupán a CSS file szerkesztésével az adott oldalnak teljesen más megjelenés adható. Érdekes példája az ebben rejlő lehetőségeknek a “CSS Zen kert” című oldal, amely egyetlen adott HTML file számtalan lehetséges arculatát mutatja be (magyar oldal, angol oldal).
  • A teljes kód mérete jóval kisebb, mivel az eddig a HTML file-okon belül tárolt stílusinformáció egyetlen stílusfile-ba tömörül. A CSS file-t a böngésző csak egyszer tölti le, és számos HTML dokumentum ugyanazt a stílusfile-t használja.
  • Különböző stílusfile-ok segítségével más megjelenés rendelhető az oldal nyomtatott, vetített, vagy pl. kéziszámítógépen (PDA, palmtop) megjelenített változatához.

Fontos, hogy a design ne hordozzon információt. Ennek megfelelően egy oldal használható kell, hogy maradjon akkor is, ha minden stíluselemet eltávolítunk (azaz a CSS-t kikapcsoljuk).

A fentieket szemléltetendő megnézheted ennek az oldalnak a stílusok nélküli változatát: Tartalom és forma szétválasztása formázás nélkül

Web szabványok

Ha kedvenc CD-det elviszed a barátodhoz, biztosan tudod, hogy az ő CD-lejátszója is le fogja játszani. Ennek az a szabvány a biztosítéka, amely a CD-lejátszók működését szabályozza. Ha a frissen készült weboldaladat próbálod meg a barátod gépén, netalán internet-képes mobilján megnézni, már korántsem biztos, hogy olvasható lesz. Pedig a web esetében is léteznek szabványok.

A web szabványok (web standards) a Világháló Konzorcium (W3C) ajánlásai arra nézve, hogyan kell felépülniük a weboldalaknak ahhoz, hogy a lehető legszélesebb körben hozzáférhetőek legyenek, bármilyen eszközt használjon is valaki. A web szabványok olyanok, mint egy helyesírási vagy nyelvtani szabálygyűjtemény, amely megmondja, hogyan kell helyesen HTML és CSS dokumentumokat írni. A szabványok egyik alapelve a tartalom és forma (HTML és CSS) szétválasztása.

A szabványos weboldalak az alábbiak számára hozzáférhetőek:

  • a modern böngészők számára (ld. a listát az oldal alján),
  • az elavult böngészők számára (pl. Netscape 4.0). Ez esetben a megfelelő módszer a formázási információk elrejtése ezen böngészők elől. Ekkor a böngésző a “pucér” HTML dokumentumot jeleníti meg, amelyben azonban a tartalom teljes mértékben hozzáférhető. Hogy lásd, amit a Netscape 4.0 mutat az oldalból ilyen esetben, kattints a Tartalom és forma szétválasztása oldal alján lévő linkre,
  • a jövőbeni böngészők számára,
  • kis-képernyős eszközök (pl. PDA-k, internet-képes mobiltelefonok) számára,
  • gyengénlátók számára, akik könnyedén válthatnak nagyobb kontrasztú szövegre és nagyobb betűméretre,
  • vakok felolvasószoftverei számára (a szabványos oldalak magukban hordozzák az akadálymentességet)
  • a keresők (!) számára, mivel a szabványos oldalak hatékonyabban indexelhetők és jobb helyezést érnek el a keresőkben,
  • nyomtatók számára, mivel a stíluslapok segítségével nyomtatáskor elhagyhatók az oldal ilyen szempontból lényegtelen részei, a szöveg pedig átformázható papíron olvasható méretre és betűtípusra.

A szabványok alkalmazása ezen kívül az alábbi előnyökkel jár:

  • a szabványos oldalak mérete kisebb, tehát gyorsabban letöltődnek és kisebb sávszélességet foglalnak le,
  • a kód áttekinthetőbb, karbantartása egyszerűbb, gyorsabb és hatékonyabb.

Ahhoz, hogy mindez működjön, a webszerkesztőknek szabványos oldalakat kellene készíteniük, a böngésző-gyártóknak pedig a szabványos oldalakat megfeleően megjelenítő böngészőket.

Sajnos, nyilvánvaló előnyeik ellenére a szabványokat nemcsak a hobbi-webszerkesztők, de legtöbbször a legnagyobb cégek sem használják. Légy tehát igényes és ha weboldalt készítesz, készíts szabványos oldalakat! Ehhez először meg kell tanulnod az XHTML és a CSS használatát, amelyhez segítséget az a Linkajánlóban találsz.

Ami a másik oldalt, a böngészőket illeti, itt már jobb a helyzet. A legnépszerűbb böngészők legújabb verziói már támogatják a szabványokat. Felhasználóként annyit tehetsz, hogy – ha régebbi, nem szabvány-követő böngészőt használsz -, frissíts a legújabb verzióra. Az alábbi böngészők támogatják a web szabványokat:

Kapcsolódó anyagok

Az ide tartozó anyagokat a Linkajánlóban találod: Web szabványok

Akadálymentesség

Az akadálymentesség (accessibility) azt jelenti, hogy az oldal csökkent képességűek (ez esetben főleg vakok és gyengénlátók) számára is hozzáférhető.

Gyengénlátók esetén a legfőbb akadály a betűk kis mérete, ezért fontos, hogy a weboldalon a betűk mérete növelhető legyen. A böngészők ezt általában lehetővé is teszik, kivéve a pixelben megadott betűméretek esetén az Internet Explorert. Érdemes ezért a betűk méretét em vagy százalék egységekben megadni, a betűk mérete ekkor IE-ben is változtatható lesz.

Vakok esetén a szöveg csak felolvasószoftveren keresztül, a képek pedig csak azok alt (alternative text) attribútumán keresztül hozzáférhetők. A képek esetén ezért mindenképpen meg kell adni az alt attribútumot, amelynek az a szerepe, hogy megjelenjen a kép helyett, ha a kép nem jelenik meg (mert a képfile nem elérhető, vagy mert a felhasználó kikapcsolta a képek megjelenítését). Ha a kép szöveget tartalmaz, illik azt az alt mezőbe beírni. Fontos tudni, hogy az alt mező szövege helyettesíteni hivatott a képet, nem pedig leírást adni róla. A kép leírását, címét a title mezőbe kell beírni. Szabványos böngészőkben a title mező szövege akkor jelenik meg, ha a felhasználó az egérmutatót a kép fölé viszi. title tulajdonság hiányában Internet Explorerben sajnos ez esetben az alt mező szövege jelenik meg, ami sokszor zavaró, mivel eltakarhatja a kép egy részét. Ezért, ha valaki ezt el szeretné kerülni, de szabványos oldalt szeretne készíteni, kénytelen egy üres alt mezőt megadni (alt="").

Az oldal tartalma a forráskód szerinti sorrendben, és formázás nélkül is értelmezhető kell hogy legyen. Ez más szóval azt jelenti, hogy egy CSS segítségével formázott oldal kikapcsolt CSS mellett is használható.

Egy akadálymentes oldal a keresők számára is sokkal hozzáférhetőbb, mivel a keresők tulajdonképpen olyanok, mint egy nem látó ember: csak az oldal szövegét látják.

Kapcsolódó anyagok

Az ide tartozó anyagokat a Linkajánlóban találod: Akadálymentesség

Get Firefox