Csokorba szedtük a weboldalak, azok felépítésével kapcsolatos leggyakrabban használt fogalmakat, meghatározásokat. Lesd meg és ismerd meg őket Te is!
A teljesség igénye nélkül – izgalmas hívószavak segítségével a honlapokhoz kapcsolódó fontosabb meghatározásokat járjuk körbe. Lesz szó (web)oldaltípusokról, oldalszerkezetekhez tartozó fogalmakról, technikai(bb) tudnivalókról, de néhány funkció definíciójáról és egyéb érdekességről is ejtünk szót.
Vegyük is sorra őket! : )
projektoldal
Olyan weboldal, mely csak bizonyos időközönként aktuális, akkor pedig leginkább a friss információk átadását szolgálja. Például fesztiválok weboldalai, időszakos rendezvények oldalai, új termék bevezetésének kampányoldala stb.
landing oldal
A landoló oldalak időszakos kampányokhoz, promóciókhoz készülnek. Erre az oldalra mindig fizetett és/vagy célzott forgalmat küldünk. Tehát a landoló oldalakra a látogatók különféle hirdetésekből (pl. Google Ads hirdetésekből, közösségi média posztból, hirdetésből, hírlevelekből) érkeznek.
Sajátosságuk, hogy egyetlen célért jönnek létre, arra vannak optimalizálva, hogy a látogató elvégezze az adott konverziót (pl. csali letöltése, hírlevél-feliratkozás, termékek megrendelése, szolgáltatások igénybevétele stb.), vagyis, hogy megnyomja azt a bizonyos „kérem!” gombot.
one page weboldal
Egyoldalas, „megnyújtott”, lineárisan végiggörgethető honlap. Nem kell sehova kattintani, elnavigálni, nincs megszakítva a „hírfolyam”, az „áramlás” élménye. Egyoldalas weboldal általában egy termék/szolgáltatás/adott projekt bemutatására, hirdetésére szolgál, azonban komplexebb témákhoz, több tartalomhoz már kevésbé alkalmas.
404-es oldal
A honlapokon felmerülő 404-es hibaüzenetet, azaz “Az oldal nem található” vagy a “404 – Page Not Found” üzenetet akkor láthatja viszont a felhasználó, ha egy link rosszul, helytelenül van megadva a weboldalon, esetleg félregépeli a keresendő oldal nevét. Ez a jelenség abban az esetben is előfordulhat, ha egy webhely tartalmának (pl. egy blogbejegyzés) URL címét (azaz webcímét) korábban elmentette a böngészője könyvjelzőjébe, viszont amikor azt ismét megnyitná, azt tapasztalja, hogy az URL cím megváltozott, vagy az adott oldal, esetleg annak felkeresett tartalma időközben már törlésre került, tehát nem található a megadott elérhetőségen. Egy kreatív, információdús 404-es oldallal a felhasználók csalódottsága akár egy kellemes élménnyé is formálható. A megnyugtatás mellett röviden és érthetően kell tájékoztatni a felhasználót a kapott hibaüzenet okáról, és abban kell útmutatást adni számára, hogy hogyan tudja elhagyni ezt az oldalt.
WordPress
A mai weboldalak elsősorban tartalomkezelő rendszereken (CMS = Content Management System) alapulnak. A tartalomkezelő
rendszerek lényege, hogy segítik, rendszerezik és vizuálissá teszik a weboldalak felépítésének folyamatát, vagyis leegyszerűsítik a honlapok készítését, hogy azokhoz ne legyen szükség sajátos technikai, programozói, webfejlesztői ismeretekre. A WordPress is egy ilyen tartalomkezelő-rendszer, ingyenes, díjmentesen használható, nyílt forráskódú weboldal-motor. Ez a legkorszerűbb, legdinamikusabban fejlődő, sokoldalú és könnyen kezelhető tartalomkezelő rendszer. Gyakran érhető el hozzá frissítés, mely növeli a honlap biztonságát és a felhasználói élményt. Továbbá sokféle ún. bővítményt, valamint segédprogramot fejlesztenek hozzá, ezeknek köszönhetően például sokféle funkciót illeszthetünk a weboldalra.
plugin
Más néven bővítmény. WordPress weboldalakon ún. bővítmények segítségével tudunk konkrét funkciókat megvalósítani, egyedi tartalmakat megjeleníteni. Szinte nincs olyan weboldal „összetevő” vagy funkció, melyet ne találnánk meg bővítmény formájában. Ilyen funkció lehet pl. űrlap, naptár, slideshow, galéria, popup ablak, stb.
domain és tárhely
Ha a domaint és a tárhelyet egy nagyon egyszerű hasonlattal szeretnénk bemutatni, akkor minden weboldalnak van „otthona”. Ez az „otthon” egyrészt a tárhely (hasonlattal élve legyen ez a “ház”), másrészt a domain (hasonlattal élve legyen ez az “utca”, a “házszám”). Leegyszerűsítve: a tárhelyen tároljuk a komplett weboldalt (annak összetevőit, fájljait és mappáit), a domain pedig az a cím, ahol, amin elérjük a weboldalt.
A domain a webszerverek beazonosítására létrehozott névtartomány.
A domaineket speciális szerverek (DNS-névszerverek) tartják számon, és internetes keresés alkalmával azonosítják, összepárosítják a hozzátartozó IP címmel. Amennyiben a domain mögött internetes tartalom, azaz weboldal van, a domainhez tartozó, tárhelyen lévő oldalt (azaz az adott domain tárhelyén lévő adatokat) a webszerver elküldi a világhálón keresztül az interneten böngésző felhasználó számítógépére és a weboldal megjelenik a monitoron.
A www (vagyis a „world wide web”) minden domainhez automatikusan hozzátartozik. Ha pl. egy szórólapon feltünteted a weboldaladat, akkor automatikusan úgy tünteted fel, hogy www.domain.com – ez a hivatalos címe, „neve” a weboldaladnak. Azonban az URL, tehát maga a webcím HTTP vagy HTTPS protokollal (információátviteli protokoll) rendelkezik: http://domain.com, tehát egyrészt magát a weboldalra való hivatkozást már így adod meg, másrészt www nélkül is elegendő begépelni a böngészőbe a domain nevet, ugyanis a legtöbb böngésző nem is igényli, hogy a „http://”, illetve a „https://” előtagot begépeljük a weboldal eléréséhez.
UI
User Interface = felhasználói felület
Az UI esetében a felhasználói felület dizájnjáról, design elemeiről beszélünk. Azon elemek dizájnjáról, melyek elősegítik a kommunikációt a felhasználó és a weboldal között. Pl. gombok, csúszkák, jelölők, szagalok stb. Ezen UI elemeknek is maximális összhangban kell lenniük az arculat/a weboldal színvilágával, stílusával, formáival. Mindemellett jól használhatónak, észrevehetőnek és egyértelműnek is kell lenniük.
UX
User Experience = felhasználói élmény
A UX, vagyis a felhasználói élmény nem más, mint azok a benyomások, melyek a felhasználót a weboldal használata közben érik. Megfelelően működik minden? Amit kattinthatónak hisz a felhasználó, az valóban kattintható is? És ha igen, oda navigál általa, ahova gondolta, hogy navigálni fog? A pozitív felhasználói élmény kincs – a felhasználó zavartalanul tud böngészni a weboldalon, könnyedén megtalálja azt, amit keres, és mindeközben nem ütközik akadályokba – a webdesigner feladata, hogy ezt a felhasználói élményt biztosítja az oldalra érkező látogató számára.
webergonómia
Szorosan kapcsolódik az UI-UX fogalompároshoz. A webergonómia leegyszerűsítve a weboldal használhatóságát jelenti. A jó honlap megragadja a látogató figyelmét, a felhasználó könnyen eligazodik az oldalakon, egyszerűen megtalálja a keresett információkat, egyértelműen tudja és érti, hogy mi mire való, egyszóval használni tudja a weboldalt.
webdesign
A webdesign a weboldal megjelenéséért felel, gondosan megtervezett látványelemek összessége, a weboldal dizájnja. A webdesign az arculatra építkezik, a webdesignban is az adott márka/vállalkozás arculati „alapanyagai”, úgymint a jellegzetes színek, betűtípusok, fotók/illusztrációk, a hozzájuk kapcsolódó stílusok-hangulatok jelennek meg. Az arculat, a design, a kiválasztott stílus az egész honlapon végigvonul. Fontos, hogy a főoldalon és az aloldalon, a gomboktól kezdve a kapcsolatfelvételi oldalon át a hírlevél- és egyéb feliratkozó űrlapokig következetesen vonultassuk végig az adott dizájnt – végeredményként arculatra szabott, egységes megjelenése legyen az egész weboldalnak.
konverzió
Egy weboldal azért készül, hogy azon a látogatók, érdeklődők konverziókat végezzenek el, vagyis például felvegyék a kapcsolatot, kitöltsék az árajánlatkérő űrlapot, feliratkozzanak a hírlevélre, termékeket rendeljenek, szolgáltatásokat vegyenek igénybe. Mindennek pedig a cég/vállalkozás/szakember számára lesz jövedelmező haszna, kézzelfogható eredménye.
reszponzivitás
Ma a felhasználók sokféle eszközön, a többség mobilon böngészi az online felületeket, így alapvető követelmény, hogy reszponzív honlapok készüljenek, azaz (közel) ugyanazt a megjelenést és élményt kapják a különböző készülékeken (asztali gépen, tableten, mobilon).
A reszponzív weboldal automatikusan igazodik az aktuális képernyő méretéhez és felbontásához, függetlenül attól, hogy a látogató mobilról, tabletről vagy éppen asztali gépről böngészi a honlapot.
hőtérkép
A hőtérképekkel (heatmap) feltérképezhetjük a honlaplátogatók viselkedését, azaz egy képet, pontosabban egy térképet, egy útvonalat kapunk arról, hogy a felhasználó figyelme honnan hova vándorol az oldalon, hogyan pásztázza azt végig, hogyan mozgatja az egeret, mire figyel fel először, mit néz sokáig, milyen elemre kattint először. Ezekből a hőtérképekből kiderül, hogy a weboldalunk mely részei kerülnek leginkább a látogató figyelmébe, milyen tartalmak, funkciók vannak jó/rossz helyen, milyen úton jut el a felhasználó a call-to-action, vagyis a cselekvésre felszólító gombig, illetve eljut-e addig, milyen úton-módon valósul meg a konverziós cél, a látogató végrehajt-e egyáltalán konverziót (pl. megrendelés, letöltés), stb. A kapott eredményekből aztán következtetéseket vonhatunk le, melyek alapján javíthatunk honlapunk felépítésén, ergonómiáján, használhatóságán, egyszóval optimalizálhatjuk, ezzel pedig jelentősen hozzájárulhatunk a konverziók számának növeléséhez.
drótváz
A drótváz vagy drótháló (wireframe) a honlap váza, szerkezeti felépítése felvázolva, a weboldal akár kézzel, akár digitálisan elkészített vizuális ábrája, előzetes „kinézete”, mely vonalvezetőként szolgál a tervezés és a kivitelezés folyamatában. A drótváz alapvetően csak vázlatos, vonalakkal megrajzolt, fekete-fehér weboldalterv. Azonban ha már rendelkezésre állnak a webdizájn számára tervezett színek, fotók, design elemek stb., akkor azok is megjeleníthetők benne, így a drótvázból egy igazán színes-szagos, élethű webdesign terv/látványterv születhet.
akciógombok
A weboldalak kulcselemei a Call To Action, azaz az akciógombok. Mivel a felhasználók sietnek, így mindenre rákattintanak, ami eléjük kerül. A CTA gombok tehát felkeltik a látogatók figyelmét, valamint cselekvésre ösztönzik őket, ezáltal pedig megtörténik például a regisztráció, a hírlevélre történő feliratkozás, az ajánlatkérés, vagyis megvalósul a konverziós cél.
felső fejrész = top bar
A felső fejrész a weboldal legfelső részén megtalálható keskeny sáv, melyben a bal és/vagy a jobb oldalon helyet kaphatnak például a vállalkozás legfontosabb elérhetőségei (e-mail cím, telefonszám, fizikai üzlet esetén pontos cím), közösségi elérhetőségek vagy éppen több menüsor esetén néhány egyéb menüpont is itt helyezhető el.
fejrész = header
A fejléc állhat egy szakaszból is, benne a logóval, a menüsorral és akár keresés mezővel, többnyelvű weboldal esetén nyelvválasztóval, webshop esetén pedig például kosár, fiókom stb. menüpontok, ikonok is elhelyezhetők benne.
A fejléc legfontosabb funkciói közé tartozik, hogy a weboldalnak „felső keretet” ad, a fő beazonosító, azaz a logó által tájékoztatja a látogatót arról, hogy kinek-minek a weboldalán jár, továbbá a menüsor által útmutatást ad a célközönség számára a weboldal tartalmairól.
sticky header
„Ragadós” fejrész – olyan fejléc, amely az oldalt görgetve is jelen marad, mindig „kéznél van” a látogató számára. Az oldalon való „elindulás”, lefelé görgetés hatására az alap fejrész átvált ragadóssá, és a fejrész tulajdonképpen alacsonyabb szerkezetben, kisebb méretű elemekkel, tartalmakkal (pl. logó, annak akár egy egyszerűbb, embléma/ikonszerű verziója, kisebb méretű menüpontok), más háttérrel (pl. kissé áttetsző, vagy éppen egyszínű) marad jelen az oldalakon való böngészés közben.
“hajtás” feletti rész, nyitó blokk
A nyitó blokkot a weboldal főoldalán találjuk, itt van szerepe, funkciója. „Nyitó blokk”-nak tekinthetjük a weboldal „hajtás” feletti részét. Ez az az egység, mely az oldal betöltődése után fogadja a látogatókat, ez az a terület, melynek minden tartalma egyben, egyszerre, azaz görgetés nélkül látható.
tartalmi rész
A weboldal tartalmi része nem más, mint az adott oldal tartalmait magában foglaló „blokk”, ezt keretezi körbe a fejrész és a lábrész, valamint, ha van, az oldalsáv. Ennek a nagy egységnek a tartalma attól függ, hogy a honlap melyik oldaláról van szó. Tehát a tartalmi rész oldalanként eltérő.
A weboldalt alkotó oldalak szöveges tartalma is változó, és természetesen sokféle funkció is jelen lehet rajtuk.
sidebar = oldalsáv
Abban az esetben, ha a honlap rendelkezik oldalsávval, akkor általában a honlap kezdőoldalán nincs jelen, a többi oldalon, vagy néhány oldalon, illetve akár csak egy aloldalon köszön vissza.
Megkülönböztethetünk bal és jobb oldalsávot. Az oldalsáv szélessége a weboldal szélességének 25-30%-át teszi ki. A bal oldalsávban többnyire a menüvel, webshop esetén termékkeresési, szűrési lehetőségekkel találkozhatnak a felhasználók. A bal oldalsáv azonban „nem esik úgy kézre”, nem kerül úgy a figyelem középpontjába – ha oldalsáv, akkor az inkább jobb oldali legyen, és abban helyezzük el a releváns tartalmakat/funkciókat. A jobb oldalsávban kerülhet rövid bemutatkozás, kereső mező, elérhetőségek, hírlevél-feliratkozási lehetőség, naptárak, hirdetések, bloghoz kapcsolódó tartalmak (pl. legutóbbi bejegyzések, stb).
lábrész = footer
A weboldal „alsó kerete, lezárása”, amely a látogatók számára is igazán fontos és praktikus blokk, hiszen sok olyan információt és funkciót tartalmaz (pl. logó, kapcsolati adatok, közösségi ikonok stb.), melyeket gyorsan elérhetnek, bárhol is böngésznek éppen a weboldalon.
alsó lábrész
Ahogyan a fejrész, úgy akár a lábrész is állhat két részből, egy magasabb felső sávból (lsd. lábrész), valamint egy alsó keskenyebb sávból, melyben már csak egy-egy információ (pl. „copyright) tartalom kap helyet.
aloldal
A többoldalas weboldal a főoldalon kívül aloldalakból áll, amelyek a főoldalt alkotó blokkokat, tartalmi egységét, azok komplexebb kidolgozását ölelhetik fel, míg egyoldalas weboldal esetén ezek a tartalmi egységek tulajdonképpen az oldalt alkotó blokkokat jelentik.
Egy aloldal alapvetően egy téma köré szerveződik, így egy-egy oldalra összpontosulnak az adott témához kapcsolódó releváns kulcsszavak, információk, tudnivalók, mely “tagolás” így értelmezhetőség, áttekinthetőség és keresőoptimalizálás tekintetében is szerencsés.
horgonyos menüpont
Az ún. horgonyos menüpont (anchor) nem egy új, külön oldalra navigál, hanem maradunk az oldalon és azon belül, annak adott tartalmához “ugrunk“, illetve a horgonyos menüpont navigálhat egy másik oldal adott tartalmához is. A lényeg tehát, hogy a horgony a fix pont (= adott oldal adott tartalmi része) és a horgonyos menüpont segítségével ehhez a fix ponthoz “ugrunk”. Ez a fajta hivatkozás nemcsak horgonyos menüpont, hanem egyéb hivatkozás esetében is működik (a hivatkozást ki kell egészíteni a horgonnyal).
hamburger menü
Mobil nézetben a keskenyebb képernyőmérethez igazodik a menüsor, ún. hamburger menüként működik, azaz lenyitható formában listázódnak ki a menüsor menüpontjai.
Google webfontok
A Google Fonts szolgáltatás mindenki számára elérhető, mely ingyenesen beszerezhető, személyes és kereskedelmi célra egyaránt felhasználható betűtípusokat kínál. Webfontokról, webre szánt betűkről van szó, melyek legfőbb előnye, hogy böngészőfüggetlenek, tehát nem kell aggódnunk, hogy egyik-másik böngészőben más, behelyettesített karakterekkel jelennek meg a szöveges tartalmak a weboldalon. További előnyük, hogy a honlapon alkalmazott betűtípusokat nem kell például sem a számítógépünkön, sem a tárhelyünkön tárolnunk.
pop-up ablak
Olyan felugró ablakok, melyek ha jól vannak megtervezve, akkor jókor és jó helyen bukkannak fel, „kihagyhatatlan” ajánlatot hirdetnek a látogatók számára. Emellett a pop-up ablakok aktuális információk (pl. átmenetileg nem kapható X termék, a szállítási idő a sok megrendelés miatt a megszokottnál valamivel több időt vesz igénybe stb.) megjelenítésére is alkalmasak.
űrlap
Nagyon sokféle típusú, valamint sokféle célt megvalósító űrlappal találkozhatunk a weboldalakon. A legegyszerűbb, néhány mezőből (pl. név, e-mail cím, telefonszám, üzenet) álló kapcsolati űrlapon keresztül az összetettebb ajánlatkérő/megrendelő/foglaló űrlapokon (pl. megjelölhető opciókkal, választási lehetőségekkel, fájlcsatolási funkcióval) át egészen a különféle (hírlevél)feliratkozó/regisztrációs és bejelentkező űrlapokig.
