Egyéb

Minden amit a one page weboldalakról tudnod kell

A one page és a hagyományos weboldal között választani mindig nehéz kérdés. Vajon elegendő tartalmam lesz minden menüpontba? Érdemes aloldalakra bontani a tartalmat vagy inkább jobb az egészet egy oldalra rakni? Melyik fog jobb helyezéseket elérni a Google-ban? Az egész weboldal sikere szempontjából kulcsfontosságú kérdések ezek és bizony elsőre nem könnyű dönteni. Mivel mindkét megoldásnak megvannak az előnyei és hátrányai, illetve vannak olyan területek, ahol kimondottan az egyik, míg más területeken a másik megoldás javasolt, ezért ebben a cikkben megpróbáltam minden hasznos tudnivalót összeszedni annak érdekében, hogy az olvasás végére tisztább képed legyen a választást illetően.

A one page és a hagyományos weboldal között választani mindig nehéz kérdés. Vajon elegendő tartalmam lesz minden menüpontba? Érdemes aloldalakra bontani a tartalmat vagy inkább jobb az egészet egy oldalra rakni? Melyik fog jobb helyezéseket elérni a Google-ban? Az egész weboldal sikere szempontjából kulcsfontosságú kérdések ezek és bizony elsőre nem könnyű dönteni.

Mivel mindkét megoldásnak megvannak az előnyei és hátrányai, illetve vannak olyan területek, ahol kimondottan az egyik, míg más területeken a másik megoldás javasolt, ezért ebben a cikkben megpróbáltam minden hasznos tudnivalót összeszedni annak érdekében, hogy az olvasás végére tisztább képed legyen a választást illetően.

Egyoldalas (one page) design

Az utóbbi évek egyik meghatározó trendje a webdesign-ban. A lényege, hogy a teljes weboldal tartalom egy oldalra kerül, nincsenek klasszikus aloldalak. Ha van menüsor, akkor az csak az oldalon meghatározott tartalmakra történő ugrást biztosítják.

Előnyei:

  • Magasabb konverzió. Megfelelő design, szerkezet és szövegezés mellett magasabb konverzió érhető el, mert a látogató „nem vész el” az aloldalak között, a CTA folyamatosan fókuszban marad. Nem véletlen, hogy a landing page-eknek is ezt használják.
  • Egyszerűbb navigáció. A látogató navigációja csak az oldalon való görgetést jelenti. Gyakorlatilag nem tud eltévedni.
  • Egyszerűbb tervezés és karbantartás. Nem kell aloldalakat tervezni, csak egy nyitólapot, amely bár hosszabb lehet, de mégis egyszerűbb.

Hátrányai:

  • Nehezebben SEOzható. A Google szereti, ha a tartalmak külön aloldalakra vannak bontva és egyedi URL-el rendelkeznek. Itt ez nem megoldható.
  • Korlátozott tartalom mennyiség. Hosszabb szövegek, tartalmak elhelyezésére nem alkalmas. Muszáj mindent tömören kifejteni, mert nem lehet a látogatót túl hosszú görgetésre kényszeríteni.
  • Szűk fókusz. A one page oldalak jellemzően egy témára fókuszálnak, a struktúra nem teszi lehetővé egymástól független területek (szolgáltatások, termékek, cikkek) bővebb kibontását.

Milyen esetekben praktikus az egyoldalas design használata?

  • Portfolió oldalak. Ideális a személyes portfolió bemutatására, legyenek azok termékek, szolgáltatások vagy referenciák.
  • Landing page-ek. Ahogy korábban is írtam a magasabb konverzió miatt ideális landing page-ek készítésére az egyoldalas design.
  • Események. Konferenciák vagy bármilyen más dátumhoz, időponthoz kötődő események meghirdetésére, a program bemutatására és egy jelentkezési űrlap megjelenítésére.

Hagyományos, több oldalas design

A hagyományos, több oldalas design még mindig túlsúlyban van, ez az a típus, amivel az ember az esetek többségében találkozik, mikor weboldalakat látogat meg. A tartalom mennyiségétől függően a nyitólap mellett több aloldal is van, amelyek elsősorban a főmenüből érhetők el.

Előnyei:

  • Skálázhatóság. Csak a design szabhat határt annak, hogy hány aloldallal bővíted oldalad.
  • SEO. Ideális az egyes tartalmak önálló seozására. Mivel az összetartozó tartalmak egy oldalon vannak egyedi URL alatt, ezért külön-külön seozhatók és külön tudsz linket is építeni rájuk.
  • Egyszerű használat. Ha jól van megtervezve a navigáció és konzekvens, akkor a tartalmak között a látogató egyszerűen tud lépkedni.

Hátrányai:

  • Karbantartás, frissítés. Sok aloldal esetében több feladat van a karbantartással és frissítéssel. A régebbi tartalmak könnyen „eltűnhetnek” szem elől és elavulhatnak.
  • Alacsonyabb konverzió. Több dolog is elterelheti a látogató figyelmét a konverzióról, ezért alacsonyabb lehet, mint az egyoldalas design-ok esetében.
  • Navigációs kihívások. Minél több aloldal van, annál nehezebb olyan menüt csinálni, ami mobilon is könnyű navigációt tesz lehetővé.

Milyen esetekben praktikus a több oldalas design használata?

A több oldalas design szinte minden iparág és téma esetében jó választás lehet. Kivéve talán olyankor, mikor nagyon kis mennyiségű tartalmat kell az oldalon megjeleníteni. De kimondottan jó választás az alábbi esetekben:

  • Céges weboldalak. Bemutatkozás, szolgáltatások megjelenítése, kapcsolat, GYIK … stb. A klasszikus céges weboldalakra ideális.
  • E-business oldalak. Termék kategóriák és termékek megjelenítése, vásárlás.
  • Blogok. SEO szempontból és olvashatóság szempontjából is fontos, hogy minden blog cikk külön oldalon, külön URL-en legyen.

6 népszerű one page weboldal sablon

Ötleteket szeretnél meríteni one page oldalad megtervezéséhez? Íme 6 népszerű sablon, amelyek jól bemutatják, hogy mit lehet kihozni ebből a design-ból:

  1. SCRN
  2. Jarvis
  3. Me
  4. Skrollex
  5. Patti
  6. Newave

Tippek a one page oldal megtervezéséhez

A one page oldalra feltöltendő információ megtervezése kritikus a siker szempontjából. Ne a design-ból indul ki ha lehetséges, hanem először a tartalmat tervezd meg. Ehhez néhány ötlet:

  • Döntsd el a korábban felsorolt egyoldalas design előnyök és hátrányok alapján, hogy valóban egyoldalas lesz-e céljaidnak megfelelő.
  • Bontsd a tartalmat részekre. A feltöltendő információt csoportosítsd témák alapján és utána határozd meg ezen témák hierarchiáját, sorrendjét. Oszd el őket úgy, hogy lehetőség szerint hasonló mennyiségű tartalom legyen minden témához.
  • Tervezd meg, hogy a CTA vagyis a cselekvésre ösztönzés hol és milyen formában fog megjelenni az oldalon. Javasolt egyszer a hajtás feletti részben és egyszer valahol az oldal középső vagy alsó részén is megjeleníteni.
  • Az oldal tartalom alapján döntsd el, hogy szükség lesz-e navigációra és ha igen, akkor milyen pontokhoz rendelsz menüpontokat. Lehetőség szerint maximum 5-7 elem legyen a főmenüben.
  • A sok görgetés oldására tervezz be parallax effekteket, amelyek 3D hatásukkal látványosabbá is teszik az oldalt.

A one page oldal optimalizálása

Annak érdekében, hogy a legtöbbet hozd ki a one page oldaladból, gondold át az alábbi teljesítmény növelő tippeket:

  • Mérd meg a kész oldal betöltődési sebességét és ügyelj arra, hogy ez az érték ne legyen 3 másodpercnél hosszabb, mert 4-5 másodperc esetén már sok látogatót veszítesz.
  • Stock fotók helyett használj egyedi, profi saját képeket.
  • A képekhez ne felejts el megadni az ALT szövegeket.
  • Alkalmazz videókat, ami látványosabbá és könnyebben befogadhatóvá teszi az információt.
  • Ne felejtsd ki az analitikai méréseket az oldalból, amely a látogatottság mellett hasznos információkkal szolgál az oldal további javításához.
The following two tabs change content below.

Tusnádi István

18 éve foglalkozom weboldalak tervezésével és fejlesztésével, ez idő alatt több száz kis-, közepes-, és nagyvállalat weboldalának elkészülésénél voltam jelen. Az utóbbi időben elsősorban a felhasználói élmény alapú tervezés és kivitelezés foglalkoztat.

Latest posts by Tusnádi István (see all)