Hogyan épül fel egy weboldal?
Egy weboldalt megtervezni és létrehozni olyan, mint egy puzzle-t összerakni. Lehetséges, hogy két darab szerkezetileg illik egymáshoz, de a kép egyik felén az eget, a másik felén egy darab földet találsz, így mégsem ez lesz a jó megoldás. A legtöbben a kerettel kezdik a kirakást, mert egyrészt ez a megszokott, másrészt ezáltal kapnak egy fix kiindulópontot. Sokan az eget, a fákat, a vizet vagy egyéb nagy, homogén felületet hagyják a végére. A honlap esetében is megvannak a könnyebb részek, megvannak a kiindulópontok és néha hiába tűnik úgy, egyszerűen nem passzolnak össze a blokkok. És legalább olyan jó érzés mindkét esetben, amikor összeáll az egész kép és a szétszórt darabkák kerek egészet alkotnak.
Kezdjük a kerettel!
Nevezhetjük akár a száraz technikai alapoknak. Elsőként adjunk nevet a gyereknek, azaz foglaljuk le a domain-t. Egyszerűnek tűnhet, de rövidnek, könnyen megjegyezhetőnek kell lennie, és hasznos, ha mond is valamit a tevékenységről. Ellenőrizni szükséges azt is, hogy nem foglalt-e már az adott cím. A domain mellé tárhelyet is kell vásárolni. Anyagilag jobban megéri, ha ez a két dolog egy csomagban kerül beszerzésre. Muszáj dönteni arról is, hogy milyen tartalomkezelő rendszert (CMS) szeretnénk használni vagy megbízunk egy fejlesztő céget, aki teljesen nulláról épít weboldalt az egyedi elképzeléseink szerint. Meglehetősen széles a kínálat a CMS piacon, kezdve a jobb technikai érzéket kívánó Joomla és Drupal rendszertől, a legelterjedtebb WordPressen át a szinte önkiszolgáló rendszerekig, mint például a Wix vagy Squarespace. Ha a cél az, hogy a lehető leggyorsabban legyen egy működő webáruházunk, akkor remek megoldás lehet a Shopify vagy a magyar fejlesztésű Shoprenter.
A keret, az ég és a minták
Böngészés közben, amikor megnyitunk egy honlapot, akkor számítunk rá, hogy meglátjuk a bal felső sarokban a logót és/vagy márkanevet (mivel a legtöbb esetben ez itt található), majd mellette egy menüsort, amit áttekintve képbe kerülhetünk a tartalommal kapcsolatban. Itt sokszor találkozhatunk Termékek/Szolgáltatások menüponttal, Rólunk/Bemutatkozással, Blog és Kapcsolat/Elérhetőség menüpontokkal. Általában ezekből áll össze egy általános bemutatkozó oldal. Ha landing oldalban gondolkozunk, akkor külön aloldalak létrehozására sem lesz szükség, mert a fenti információk mind egy oldalon, lefelé görgetve lesznek megtalálhatóak. Webáruház esetén pedig összetettebb a menüsor, tartalmazhat kategóriákat és információkat a megrendelésről, szállításról, akciókról, egyéb tudnivalókról.
Szintén elmaradhatatlan része a legtöbb weboldalnak a lábléc, ami állhat akár 2-3 blokkból. Itt kap helyet a szerzői jogi jelzés (copyright), a vállalkozás elérhetősége, a menütérkép, illetve a kötelező jogi elemek. Javasolt jogásszal egyeztetni egy weboldal elindítása előtt, mert több olyan adatszolgáltatási, adatvédelmi és jogi követelmény lehet, aminek tevékenységtől függően meg kell felelni. Ilyenek például a cookie szabályzat, a weboldalon használt sütikről, az adatvédelmi szabályzat, impresszum vagy webáruház esetén az általános szerződési feltételek és szállítási információk.
A legizgalmasabb darabok
Ha elkészült a keret és van elképzelésünk arról, hogy milyen blokkokból áll a teljes kép (vagy weboldal), akkor jöhet a számomra legizgalmasabb folyamat. Tartalommal feltölteni az elkészült vázat. Első lépésként (ha még eddig nem készült el), az arculati elemeket kell meghatározni. Mi legyen a logó? Milyen színvilágot szeretnék használni, mik lesznek a konkrét színei a weboldalnak? Mi legyen a címek, alcímek, törzsszöveg betűtípusa?
Ezután érkezhet a szöveges tartalom, ami megfelelő hosszúságú (se túl rövid, se túl hosszú), releváns, informatív és a célcsoportodat szólítja meg, az ő hangjukon szól. Muszáj kiemelnem a helyesírás fontosságát is, mert alapnak tűnhet, de sajnos sok esetben lehet elütésekkel és durva hibákkal is találkozni, ami számomra a hitelességet kérdőjelezi meg egy vállalkozás esetében.
Ha elképzelünk egy weboldalt, amin csak szöveg van, nem biztos, hogy sokáig elidőznénk rajta, ezért illusztráljuk a mondandónkat, és tesszük színesebbé a szöveget képekkel. Több forrásból is használhatunk fotókat vagy ábrákat, de fontos, hogy ezek jogtiszták legyenek. A legigényesebb, ha saját képanyagból dolgozunk, egy webáruháznál követelmény is, hogy legyenek saját fotók a termékekről. Előfordulhat, hogy találunk megfelelő illusztrációt ingyenes oldalakon, de valószínűbb, hogy fizetős stock oldalon találunk rá az igazira. Ha igazán kreatívak szeretnénk lenni, akkor nem áll meg a folyamat egy letöltött stock fotónál, hanem szerkeszthetjük, módosíthatjuk és keverhetjük is egymással őket. Technikailag a méretre kell odafigyelni, több szempontból is ideális, ha webp formátumba konvertáljuk és így töltjük fel a weboldalra a kész képeket.
És végül…a képkeret
Sok veszély leselkedhet az elkészült puzzle képre, mint például egy szemtelen macska, egy kíváncsi kisgyerek vagy egy óvatlan szellőztetés. Így nem feledkezhetünk meg a biztonságról, csakúgy, mint az elkészült honlapunk esetén sem. A kész rendszerek esetében (például Shoprenter, Wix), vannak beépített biztonsági funkciók, így nem kell a felhasználóknak sokat foglalkozni vele. Minden esetben érdemes ugyanakkor alaposan utánajárni, hogy milyen támadások érhetik a weboldalt és gondoskodni ennek megelőzéséről. A Webartery blogján van egy remek összefoglaló arról, hogy a WordPress rendszer esetén mit lehet tenni a biztonságért, ezt ide kattintva tudod elolvasni.
Természetesen a fentiek kiindulási pontként szolgálnak, hiszen ahány honlap annyi szerkezet és design. Feldobhatjuk videóval, zenével a weboldalunkat, ha szolgáltatást értékesítünk, akkor elkerülhetetlen referencia anyagok, korábbi munkák feltöltése. Színesíthetjük a tartalmat ügyfélvéleményekkel, közösségi média blokkal, karrier oldallal, hírlevél feliratkozással, ingyenes letölthető anyagokkal és olyan újdonságokkal, amiket még sehol nem láttunk. Csakúgy, mint a puzzle esetében, a cikkben megmutattam hogyan teszünk össze egy pár darabból álló képet, de tudjuk, hogy léteznek 100, 1000 és több ezer darabból álló képek is.
További cikkek
Hipster stílus a webdesignban
Eszedbe jutna a honlapod vagy márkád megtervezésekor, hogy hipster stílusban készüljön? Összegyűjtöttem az irányzat jellemzőit és sok-sok letölthető anyagot!