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

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 böngésző 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 készí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 honlap

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.

A SEO és online markeitng szerepe is igen fontos

Közösségi média beépülők, logó és szlogen a webshop számára

PC, laptop, tablet, mobil weboldallal egyszerűbb az organikus jelenlét

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.