Bejegyzésünkben a ragadós fejléc kerül a főszerepbe, bemutatjuk kialakításának legfőbb szempontjait, hasznos tippeket, tanácsokat adunk hozzá.
A sticky header, azaz a ragadós fejrész manapság nagy népszerűségnek örvend “a weboldalak körében”. Miért “ragadós”? Olyan fejléc, mely az oldalt görgetve is jelen marad, mindig “kéznél van” a látogatók számára. Az oldalon való “elindulás”, görgetés hatására a “hagyományos” fejrész átvált ragadóssá, akár keskenyebb formában, kisebb méretű tartalmakkal (pl. logó, menüpontok) marad jelen mind a főoldalon, mind az aloldalakon való böngészés közben.
Azonban a sticky header nem minden esetben felhasználóbarát megoldás. Éppen ezért összegyűjtöttünk néhány hasznos tanácsot, melyek alapján úgy alakíthatjuk ki a weboldalnak ezt a fontos részét, hogy az a honlap és az oldalra érkező látogatók szempontjából is ideális legyen.
Ragadós fejlécet azért állítunk be a weboldalon, hogy ez az elem mindig jól látható legyen, az érdeklődőknek, felhasználóknak ne kelljen visszagörgetniük a honlap tetejére, ha a fejrészben található menüpontok segítségével további oldalakra szeretnének navigálni, belépnének a felhasználói fiókjukba/vásárlói kosarukba, vagy akár egy adott tartalomra keresnének a keresés funkcióval. A “ragadásnak” köszönhetően ezek a hasznos elemek (menüpontok, fiók/kosár ikon, keresés mező) mindig szem előtt lesznek, a weboldal bármely pontján azonnal használhatók.
Azonban a rosszul kialakított fejléc inkább bosszúságot okoz a látogatóknak, mintsem segítségül szolgál számukra. Bizonyos esetekben a sticky header túlságosan magas, sok tartalom kap helyet benne, ezért nagy részt vesz el, takar ki a weboldal további fontos részeiből.
A weboldal felső fix részének kialakítása előtt érdemes alaposan átgondolni azt, hogy a látogatók “dolgát” valóban megkönnyítjük-e a ragadós fejléccel?
Vegyük is sorra azokat a főbb szempontokat, melyeket érdemes figyelembe venni a ragadós fejléc kialakítása során! : )
# ne legyen elnagyolt
A ragadós fejléc létrehozásának egyik legfőbb szempontja. Nagyon fontos, hogy ne próbáljunk meg mindent belezsúfolni a fejrészbe, csak az kapjon helyet, ami valóban szükséges, aminek folyamatosan a látogató szeme előtt kell lennie – ez pedig a logó és a menüsor. A honlap témájától és funkciójától, valamint a menüpontok számától függően a fejlécben elhelyezhetünk még különféle elérhetőségeket, felhasználói fiókba/webshop esetén kosárba történő belépési lehetőséget, keresés mezőt. Azonban ne akarjunk mindent elhelyezni a fejlécben, ugyanis ezek az elemek túlságosan megnyújtanák azt, és ez bizony nem szerencsés, mivel így a “ragadás” során a fejrész túl sok információt takarna ki az adott oldalon. A ragadós fejrészben csak a logó és a menüsor maradjon meg, minden további tartalmat rögzítsünk a legfelső, keskenyebb fix fejrészben.
Gyakori hiba, hogy maga a logó óriási méretű, ezáltal a fejrész szintén túlságosan megnyúlik, kitakarva a weboldal lényegi részeit. Egy „átlagos” fejrészben sem helyezünk el túl nagy méretű logót, sticky header esetén pedig automatikusan kisebb is lesz a mérete, a menüpontokkal együtt.
Szintén sok esetben előforduló hiba a menüpontok túlzottan nagy mérete. A honlapon a menüpontok mérete nagyban függ a használt betűtípustól, azonban átlagosan kb. 16 px méretű menüpontokkal célszerű dolgozni, hogy azok jól olvashatók legyenek, felkeltsék a látogatók figyelmét. Ügyeljünk tehát, hogy ne hatalmas menüpontokkal dolgozzunk, ezzel feleslegesen megnyújtva a fejrészt.
# köszönjenek rajta vissza az arculati elemek
A fejrészt, a sticky headert is úgy kell kialakítani, hogy a honlap tartalmaival egységes legyen. Alapvető, hogy az arculati elemek (színek, betűtípusok) köszönjenek vissza benne. Ugyanakkor fontos, hogy ez az elem mégis ki tudjon tűnni az oldalon, minden esetben jól látható legyen, valamint a benne szereplő menüpontok jól olvashatók legyenek.
Sokszor előfordul, hogy a fejrész háttérszíne áttetsző, ezért a weboldalt görgetve a menüpontok nem olvashatók az oldalon elhelyezett fotók, szöveges tartalmak miatt – ez pedig zavaró lehet a látogatók számára. Éppen ezért érdemes olyan háttérszínt alkalmazni a fejrészben, amely kitűnik az egyes blokkok tartalmai felett, valamint a menüpontok olvashatóságát sem nehezíti meg.
# ne legyen ellátva túl sok effekttel
Ha a fejrész túl sok effekttel, animációval van ellátva, szintén korlátozza a weboldal tartalmainak láthatóságát, vagyis ugyancsak nem felhasználóbarát megoldás. A legcélszerűbb, ha a sticky header mentes mindenféle effekttől, vagy csak minimális animációval rendelkezik – ilyen eset az például, amikor görgetés hatására a fejrész mérete csökken, kisebb méretben lesz jelen az oldalon. Ez azt a célt szolgálja, hogy ha a fejléc viszonylag nagy méretű, és a görgetés során sok tartalmat, információt takarna ki a weboldalból, akkor kisebb méretben már nem takar le sok tartalmat, nagyobb helyet hagy a honlap tartalmainak.
+1# részben ragadós fejrész
Az adott weboldaltól függően kialakíthatunk “részben” ragadós fejlécet is. Ebben az esetben, ha a felhasználó a weboldalon lefelé görget, nincs jelen a fejléc, azonban a felfelé történő görgetés hatására megjelenik a sticky header. A legtöbb látogató a főoldal tartalmainak megtekintése után jó eséllyel a további aloldalak felé navigál, ehhez pedig vissza kell görgetniük a honlap tetejére, a menüpontokhoz. De erre a visszagörgetésre nem is lesz szükség, mert a “részben ragadós fejléc” lesz a látogató segítségére, tehát amikor a látogató elkezd felfelé görgetni, rögtön megjelenik a fejléc, melynek segítségével kényelmesen a további tartalmak, további oldalak felé navigálhat.