Ilyen egy modern weboldal felépítése 2021-ben

Mivel a keresők az optimálisan, logikusan és egyértelműen kialakított webhely szerkezet alapján tudnak feltérképezni egy site-ot, fontos, hogy a weboldal felépítése maximálisan megfeleljen a jelenlegi technikai, tartalmi és keresőoptimalizálási elvárásoknak.

Ebben a cikkünkben bemutatjuk, hogy miként történik egy modern weboldal felépítése, mely egyben kereső- és felhasználóbarát módon jelenik meg nemcsak a látogatók, de a Google számára is.

Mit jelent a weboldal felépítése?

A weboldal felépítése egyrészt azt jelenti, hogy hogyan kapcsolódnak egymáshoz a weboldalon lévő aloldalak.

Ez alapján 2 fő típust különböztetünk meg:

Egyszintű weboldal felépítés

Ez a típus főként a nagyon egyszerű, kisebb site-okra jellemző, ahol annyira kevés tartalom van, hogy minden aloldal belefér a menübe, azaz még lenyíló menüpontok sincsenek.

Példa lehet erre egy olyan céges weboldal, ahol a menüben fent vízszintesen csak a következőket lehet látni:

  • Rólunk
  • Szolgáltatásaink
  • Kapcsolat
  • Jogi információk

Ebben az esetben nincsenek további almenük, hiszen amint rámegy a látogató az oldalra, minden lát, nincsenek további tartalmak az oldalon. Úgy is fel lehet fogni ezt a típust, mint egy sík weboldalt, hiszen nincs mélysége, ahol a további oldalak lennének.

Többszintű weboldal felépítés

Ebbe a típusba olyan webhelyek tartoznak, amelyek rengeteg aloldallal rendelkeznek. Ez azt jelenti, hogy a főmenüben további almenük és azután is további almenük és így tovább, egészen addig, ameddig logikusnak találja a webhely üzemeltetője az alkategóriák vagy almenük kialakítását.

Kiváló példa lehet erre szinte bármelyik webhely, amely a főmenün kívül almenükkel is rendelkezik, s első ránézésre nem látni át, hogy mennyi almenü található a főmenüben. Ilyenek lehetnek a webshopok is, hiszen számos főkategória és azon belül rengeteg alkategória található a menüszerkezetben. Így érdemes elképzelni a menüszerkezetét egy többszintű weboldalnak:

  • Rólunk
    • Cégtörténet
      • Kezdetek
      • Jelen
      • Jövőkép
    • Küldetésünk
    • Hitvallásunk
    • Társadalmi szerepvállalásunk
  • Szolgáltatásaink
    • Magánszemélyeknek
      • Rendelhető termékeink
        • Varrás
        • Horgolás
        • Kötés
        • Patchwork
      • Raktárról rendelhető termékek
        • Stb.
    • Kis- és nagykereskedéseknek
      • Stb.
  • Kapcsolat
    • Térkép, parkolás
    • Nyitvatartás
    • Ügyfélszolgálat
    • Írjon nekünk
  • Jogi információk
    • ÁSZF
    • Garancia
    • Visszaküldési lehetőségek
  • Szállítás
    • Futárszolgálat
    • Csomagpontok
    • Személyes átvétel

Ebből a példából is jól látszik, hogy annak ellenére, hogy itt is hasonló a főmenü szerkezete, mégis rengeteg aloldal található a webhelyen. Erre a típusú weboldal felépítésre úgy is lehet gondolni, mint egy mély weboldalra, hiszen nemcsak azt tartalmazza a webhely, amit első ránézésre látunk, hanem mélyebben is vannak aloldalak, amelyek csak akkor jelennek meg, ha lenyitjuk az egyes menüpontokat.

A weboldal felépítése másrészt azt is jelenti, hogy hogyan van kialakítva az oldal struktúrja, azaz az összes elem (szöveg, kép, videó, grafikonok, inforgráfok, stb.), amely a webhelyen látható.

Nézzük meg részletesebben, hogy milyen egy modern webhely struktúrája 2021-ben!

Milyen egy modern webhely felépítése 2021-ben?

PC-, laptop-, tablet- és mobilbarát is egyben

2021-ben az a webhely, amely nem rendelkezik reszponzív webdizájnnal, nem igazán tud versenyben maradni a konkurenciával, hiszen ma már mindenre illik felkészülni. Nem tudhatjuk pontosan, hogy hány látogató érkezik PC-ről, laptopról, tabletről vagy mobilról a webhelyünkre, emiatt mindegyik usernek pozitív felhasználói élményt kell nyújtanunk azzal, hogy elérhetővé és könnyen használhatóvá tesszük neki a webhelyünket, bármilyen készülékről is nézze a weboldalunkat.

Menüszerkezet

PC, laptop

A menüszerkezetet PC-n és laptopon tegyünk a weboldal tetejére, középre, vízszintesen. Ne komplikáljunk, ne újítsunk, mert egyszerűen ehhez vannak hozzászokva a felhasználók. Ha máshova tesszük a menüt, összezavarjuk a látogatókat, s máris nem lesz egyértelmű a weboldalunk.

Mivel itt sok hely van, nyugodtan lehet a menüszerkezetünk többszintű, azaz használhatunk a további menüpontokhoz lenyíló menüszerkezetet. Ez egy bevett szokás, mely könnyen átláthatóvá és navigálhatóvá teszi a weboldalunkat mind a látogatók, mind a keresők számára.

Tablet, mobil

A menünek itt egyszerűen nincs hely. Helyette a jól ismert három vízszintes vonal piktogramot (hamburger ikon) érdemes használni. Itt se újítsunk, s ne használjunk más piktogramot, mert ez is egy általánosan bevett szokás, melyet megszoktak már a felhasználók.

A lenyíló menüszerkezetnek itt nincs hely, így azt érdemes tenni ilyenkor, amelyet a legtöbb mobilbarát weboldal is csinál: amennyiben van a menüpontnak almenüje, azt jelezzük a szöveg jobb oldalán egy kis lefelé mutató nyíllal, amelyet ha megérint a felhasználó, megjelennek a további almenük. Ezt akárhány szintig el lehet játszani, de azért igyekezzünk ne túlbonyolítani a menüt.

Bejelentkezés / Regisztráció / Fiókom / Keresés

PC, laptop

Továbbra is érdemes kihasználni a helyet ebben az esetben, így ezeket a további menüpontokat érdemes elkülönítve, a képernyő jobb felső sarkába tenni. Itt sem érdemes újítani, mert ez is bevett szokás már, amihez hozzászoktak már a látogatók.

Tablet, mobil

Továbbra is hely szűkében vagyunk ebben az esetben, így ezeket a menüpontokat érdemes a hamburger ikonnal jelölt menü aljára vagy tetejére tenni. Gyakorlatilag minden, ami a navigációval vagy a menüpontokkal összefüggésbe hozható, azt tartalmaznia kell a hamburger ikon mögött lévő menünek.

Szöveges + képes / videós blokkok

PC, laptop

Itt rengeteg hely van, így nyugodtan megjeleníthetünk egyszerre 4 blokkot egymás mellé, hiszen jól látható marad a kép vagy videó, illetve olvasható marad a szöveg is.

Tablet

Tablet esetében már inkább csak 3 blokkot használjunk, hogy elegendő hely maradjon a szövegnek is.

Mobil

Mobilon inkább már csak egy blokkot jelenítsünk meg, hiszen gyakran így is le kell rövidíteni a szöveget, hogy megmaradjon a kép / videó + szöveges blokk értelme.

Közösségi média beépülők, logó és szlogen

PC, laptop, tablet, mobil

Mivel apró kis ikonokról van szó, így elég hely van arra minden képernyő típuson, hogy alul, a láblécben szerepeljenek a közösségi média ikonok, majd pedig a logó és esetleg a szlogen. Lehetőleg tegyük őket középre, vízszintesen a lábléc legaljára.

Színséma, mely tökéletesen passzol az iparághoz

Érdemes használni a Google által is előszeretettel használt Material Dizájn alapelveit, hiszen itt a különféle főszínhez tökéletesen passzoló árnyalatokat társít össze a rendszer, melynek eredményeképp az egész oldal tökéletes harmóniát alkot.

Ne készítsünk lila barkácsoldalt – helyette használjunk barnás, bézs árnyalatokat -, ahogyan ne legyen rózsaszín egy természetvédelemmel foglalkozó oldal se – helyette a zöld árnyalataival játszunk.

Kérjünk fel egy profi dizájnert, aki tudja, hogy milyen iparágakhoz, milyen színsémákat érdemes használni. Ő segíthet a vállalat logójának megtervezésében is.

Figyeljünk a képek és videók minőségére

Ha nincs profi fotósunk, vásároljunk az interneten profi képeket vagy videókat néhány dollárért. Egy profi média megjelenítése óriásit tud dobni a weboldal kinézetén, hiszen nem egy rossz világítással vagy rettenetes hangfelvétellel készített videót osztunk így meg a látogatókkal, hanem profi illusztrációink lesznek.

Konklúzió

Egy modern weboldal felépítése 2021-ben egyaránt múlik a logikus struktúrán, a felhasználóbarát kialakításon, illetve a megnyerő dizájnon is. Úgy érdemes megtervezni egy weboldalt, mintha a 100 éves nagymamánknak készítenénk. Ha ő el tudna rajta igazodni, akkor a mai modern felhasználóknak is gyerekjáték lesz az oldal használata.

Könnyed tartalom

Általános és populáris témák, blog és SEO optimalizált cikkek


Weboldal tartalom

Komplex, teljes weboldal szöveg, egymásra épülő aloldalakkal


Marketing és PR tartalom

Kifejezetten marketing és reklám céllal írt, SEO optimalizált cikkek


Szakmai tartalom

Nyelvezetében és tartalmában szakmailag helytálló cikkek


[adln-quotes limit=3]