Ma m\u00e1r minden v\u00e1llalkoz\u00e1snak sz\u00fcks\u00e9ge van weboldalra. Sokan akadnak k\u00f6z\u00f6tt\u00fck olyanok, akik maguk v\u00e1gnak bele a weboldaluk elk\u00e9sz\u00edt\u00e9s\u00e9be<\/a>. A megfelel\u0151 eszk\u00f6z\u00f6kkel \u00e9s k\u00e9pess\u00e9gekkel ak\u00e1r n\u00e9h\u00e1ny napon bel\u00fcl elk\u00e9sz\u00fclhet a weboldal, de ha nem vagy j\u00e1ratos a weboldalk\u00e9sz\u00edt\u00e9sben, komoly hib\u00e1kat k\u00f6vethetsz el. Elmondjuk, mire figyelj!<\/strong><\/p>\n Az els\u0151 dolog az, hogy a megfelel\u0151 technol\u00f3gi\u00e1t kell kiv\u00e1lasztanod a weboldal elk\u00e9sz\u00edt\u00e9s\u00e9re. Egy olyan sablont \u00e9s megold\u00e1st kell tal\u00e1lnod, mely kell\u0151en rugalmas annak \u00e9rdek\u00e9ben, hogy maxim\u00e1lisan a saj\u00e1t ig\u00e9nyeidre szabd a t\u00e9m\u00e1t. Ez azt jelenti, hogy minden elem\u00e9t k\u00e9pes legy\u00e9l \u00fagy alak\u00edtani, hogy az \u00f6sszhangban legyen a c\u00e9ged image-\u00e9vel \u00e9s el\u0151seg\u00edtse a konverzi\u00f3kat. Ha valahol akad\u00e1lyokba \u00fctk\u00f6z\u00f6l, kompromisszumokat kell k\u00f6tn\u00f6d, akkor az a rendszer nem megfelel\u0151 a c\u00e9ljaid sz\u00e1m\u00e1ra, \u00e9s minimum egy \u00faj sablont kell keresned.<\/p>\n Ha \u00fagy \u00e9rzed, hogy megtal\u00e1ltad a megfelel\u0151 technol\u00f3gi\u00e1t \u00e9s t\u00e9m\u00e1t, akkor m\u00e9g mindig ott a gond, hogy senki sem sz\u00fcletett azzal a k\u00e9pess\u00e9ggel, hogy els\u0151re (vagy ak\u00e1r m\u00e1sodikra) t\u00f6k\u00e9letes weboldalakat faragjon. A weboldalk\u00e9sz\u00edt\u00e9shez kell a tud\u00e1s \u00e9s a tapasztalat. Ha ezek h\u00edj\u00e1n vagy, akkor k\u00f6nnyen elk\u00f6vetkezhetsz nagyon egyszer\u0171 hib\u00e1kat is. L\u00e1ssunk ezek k\u00f6z\u00fcl n\u00e9h\u00e1nyat!<\/p>\n Minden weboldalnak van valamilyen c\u00e9lja. Ak\u00e1r egy kis, c\u00e9ges weboldalt hozol l\u00e9tre, ak\u00e1r egy web\u00e1ruh\u00e1zat, ak\u00e1r egy blogot, ennek valamilyen oka. Ezt az okot \u00e9rdemes vil\u00e1gosan megfogalmazni a magad sz\u00e1m\u00e1ra, mert sokat seg\u00edt a weboldalad kialak\u00edt\u00e1s\u00e1n\u00e1l. \u00cdrd le teh\u00e1t a c\u00e9lokat, amiket a weboldaladdal el szeretn\u00e9l \u00e9rni.<\/p>\n P\u00e9ld\u00e1ul azt, hogy \u00faj \u00fcgyfeleket akarsz vele szerezni az online t\u00e9rben, vagy el\u0151sz\u00f6r egy k\u00f6z\u00f6ss\u00e9get akarsz \u00e9p\u00edteni egy term\u00e9k vagy szolg\u00e1ltat\u00e1s k\u00f6r\u00e9. Vagy egy blogot akarsz \u00edrni, ami p\u00e9nzt termel a sz\u00e1modra hirdet\u00e9sekb\u0151l \u00e9s term\u00e9kmegjelen\u00edt\u00e9sekb\u0151l.<\/p>\n Itt azonban ne \u00e1llj meg, minden egyes aloldalad eset\u00e9ben fogalmazd meg azt a c\u00e9lt, ami\u00e9rt az adott aloldalt elk\u00e9sz\u00edted. Annak ugyanis nincs \u00e9rtelme, hogy minden aloldalad ugyanazt a c\u00e9lt szolg\u00e1lja. Teh\u00e1t p\u00e9ld\u00e1ul egy web\u00e1ruh\u00e1z term\u00e9koldalainak az a c\u00e9lja, hogy vev\u0151ket szerezzenek, ugyanakkor m\u00e1s oldalak bizalmat \u00e9p\u00edtenek, m\u00edg megint m\u00e1s oldalak e-mail feliratkoz\u00f3kat gy\u0171jtenek. \u00c9s ezek mind egy nagy c\u00e9lnak vannak al\u00e1rendelve.<\/p>\n M\u00e9g mindig sokan vannak olyanok, akik le\u00fclnek az asztali g\u00e9p\u00fck, laptopjuk el\u00e9, \u00e9s a weboldalt arra a fel\u00fcletre tervezik meg, ami el\u0151tt \u00fclnek, teljesen elfeledkezve a mobilos megjelen\u00e9sr\u0151l. Pedig a felhaszn\u00e1l\u00f3k ma m\u00e1r t\u00f6bb id\u0151t t\u00f6ltenek a neten mobilon, mint asztali g\u00e9pen. Ha egy olyan weboldalt k\u00e9sz\u00edtesz, mely csak asztali g\u00e9pen m\u0171k\u00f6dik j\u00f3l, akkor nagyon sok konverzi\u00f3r\u00f3l le kell mondanod.<\/p>\n Teh\u00e1t, amikor sablont v\u00e1lasztasz a weboldaladhoz, akkor figyelj arra, hogy az reszponz\u00edv legyen. A reszponz\u00edv weboldalak<\/a> minden eszk\u00f6z\u00f6n megfelel\u0151 \u00e9lm\u00e9ny k\u00e9pesek ny\u00fajtani a l\u00e1togat\u00f3knak. Els\u0151sorban az\u00e1ltal, hogy az adott eszk\u00f6z kijelz\u0151m\u00e9ret\u00e9nek megfelel\u0151en rendezik el a weboldal-elemeket.<\/p>\n Egy reszponz\u00edv template sok gondot levesz a v\u00e1lladr\u00f3l, arra azonban ilyenkor is figyelned kell, hogy az \u00e1ltalad elk\u00e9pzelt weboldal-elemek minden kijelz\u0151m\u00e9retn\u00e9l \u00e9rtelmezhet\u0151 \u00e9s \u00e9lvezhet\u0151 megjelen\u00e9s\u00fcek legyenek. Ez\u00e9rt, amikor k\u00e9sz\u00fcl, illetve amikor elk\u00e9sz\u00fcl a design, tesztelned kell k\u00fcl\u00f6nb\u00f6z\u0151 kijelz\u0151m\u00e9retekn\u00e9l, hogy megfelel\u0151-e az eredm\u00e9ny, vagy pedig valahol, valamit m\u00f3dos\u00edtani kellene. F\u0151leg arra figyelj, hogy a sz\u00f6vegek j\u00f3l olvashat\u00f3k, a linkek \u00e9s a gombok k\u00f6nnyen kattinthat\u00f3k \u00e9s a k\u00e9pek \u00e9s \u00e9rtelmezhet\u0151k-e mobilon.<\/p>\n Egy sablon haszn\u00e1lata<\/a> az\u00e9rt j\u00f3, mert a munka egy jelent\u0151s r\u00e9sze m\u00e1r el van v\u00e9gezve. A rossz oldala pedig az, hogy tal\u00e1lsz m\u00e9g t\u00f6bb sz\u00e1z olyan weboldalt, mely ugyanazt a template-et haszn\u00e1lja. Ez\u00e9rt kell olyan sablont v\u00e1lasztanod, mely rugalmas, \u00e9s minden elem\u00e9ben szem\u00e9lyre szabhat\u00f3. \u00c9s \u00e9lned is kell ezzel a lehet\u0151s\u00e9ggel annak \u00e9rdek\u00e9ben, hogy min\u00e9l egyedibb legyen a weboldalad.<\/p>\n Teh\u00e1t figyelj a sz\u00ednekre, v\u00e1ltoztasd meg az elrendez\u00e9st, haszn\u00e1lj eredeti k\u00e9peket \u00e9s vide\u00f3kat! \u00c9s term\u00e9szetesen a sz\u00f6veget se m\u00e1sold egy m\u00e1sik oldalr\u00f3l. \u00cdgy lehets\u00e9ges az, hogy mik\u00f6zben valaki m\u00e1s designj\u00e1b\u00f3l indulsz ki, a v\u00e9g\u00e9n m\u00e9gis \u00fagy tekinthetsz a weboldalra, mint a saj\u00e1todra.<\/p>\n Ez lehet, hogy zavarba ejt\u0151 az el\u0151z\u0151 pontot figyelembe v\u00e9ve, m\u00e9gis fontos, hogy ne magadnak, hanem a c\u00e9lk\u00f6z\u00f6ns\u00e9gednek tervezz! M\u00e1rpedig szinte biztos, hogy nem Te vagy a saj\u00e1t c\u00e9lcsoportod. Nem ugyanaz a tud\u00e1sod, a hozz\u00e1\u00e1ll\u00e1sod, a helyzeted, mint azok\u00e9, akikhez sz\u00f3lni szeretn\u00e9l a weboldaladdal. \u00cdgy felesleges \u00e9s hib\u00e1s megk\u00f6zel\u00edt\u00e9s, ha azt veszed figyelembe, hogy neked mi tetszik \u00e9s neked mire lenne sz\u00fcks\u00e9ged a weboldalon.<\/p>\n Teh\u00e1t nem olyan weboldalt kell k\u00e9sz\u00edtened, ami szerinted j\u00f3l n\u00e9z ki. Olyan weboldalra van sz\u00fcks\u00e9ged, ami a l\u00e1togat\u00f3idnak, illetve a c\u00e9lk\u00f6z\u00f6ns\u00e9gednek tetszeni fog. Ez\u00e9rt m\u00e9g a weboldalk\u00e9sz\u00edt\u00e9s el\u0151tt \u00e1t kell gondolnod, hogy ki is a c\u00e9lk\u00f6z\u00f6ns\u00e9ged, \u00e9s mit szeretne l\u00e1tni. Van valami k\u00f6z\u00f6s jellemz\u0151j\u00fck? Ha ezt vil\u00e1gosan meghat\u00e1rozod, akkor sokkal nagyobb es\u00e9llyel tudsz olyan weboldalt k\u00e9sz\u00edteni, ami vonz\u00f3 is lesz sz\u00e1mukra.<\/p>\n A weboldaladon k\u00f6nnyen meg kell tal\u00e1lniuk a felhaszn\u00e1l\u00f3knak azt, amit keresnek. Ennek \u00e9rdek\u00e9ben pr\u00f3b\u00e1ld \u00fagy elrendezni az inform\u00e1ci\u00f3kat, ahogy azt megszokt\u00e1k. K\u00f6nnyebb dolgod van, ha kicsi a weboldalad, de ha egy rak\u00e1s aloldalt kell elrendezned, akkor m\u00e1r jobban oda kell figyelned az inform\u00e1ci\u00f3s architekt\u00fara kialak\u00edt\u00e1s\u00e1ra<\/a>. Gondold \u00e1t, hogy a weboldaladra \u00e9rkez\u0151k els\u0151sorban mit keresnek, \u00e9s \u00fagy rendezd el az elemeket, hogy ezeket egyb\u0151l megtal\u00e1lj\u00e1k.<\/p>\n Minden aloldalon vannak fontosabb \u00e9s kev\u00e9sb\u00e9 fontos r\u00e9szek. Azokat az elemeket, amiket mindenk\u00e9ppen szeretn\u00e9l megmutatni a l\u00e1togat\u00f3knak egy-egy aloldalon, helyezd el annak fels\u0151 r\u00e9sz\u00e9re. A kev\u00e9sb\u00e9 fontos inform\u00e1ci\u00f3kat pedig lejjebb.<\/p>\n Ennek oka, hogy hab\u00e1r ma m\u00e1r nagyobb kedvvel g\u00f6rgetnek az emberek lefel\u00e9 a weboldalakon, mint n\u00e9h\u00e1ny \u00e9ve, az\u00e9rt a legt\u00f6bb id\u0151t m\u00e9g mindig a \u201chajt\u00e1s felett\u201d t\u00f6ltik. A figyelm\u00fcket teh\u00e1t itt kell megragadni.<\/p>\n Egy weboldal minden aloldal\u00e1nak \u00e9s elem\u00e9nek azonos st\u00edlus\u00fanak kell lennie. Ez jelzi ugyanis a felhaszn\u00e1l\u00f3knak, hogy m\u00e9g mindig egy adott weboldalon j\u00e1rnak. Teh\u00e1t, ha r\u00e1kattintanak egy linkre, de ugyanazokat a sz\u00edneket, bet\u0171ket l\u00e1tj\u00e1k az oldalon, akkor tudj\u00e1k, hogy nem t\u00e9vedtek \u00e1t egy m\u00e1sik weboldalra.<\/p>\n Ha viszont egy linkre kattintva azt l\u00e1tj\u00e1k, hogy megv\u00e1ltozott a h\u00e1tt\u00e9r, m\u00e1sok a sz\u00ednek, a form\u00e1k, a bet\u0171t\u00edpusok \u00e9s -m\u00e9retek, elt\u00e9r\u0151 a men\u00fc, akkor azt felt\u00e9telezik, hogy m\u00e1r egy m\u00e1sik weboldalon j\u00e1rnak. Annak \u00e9rdek\u00e9ben, hogy ezt elker\u00fcld, t\u00f6rekedj maxim\u00e1lis k\u00f6vetkezetess\u00e9gre a vizu\u00e1lis design kialak\u00edt\u00e1s\u00e1n\u00e1l.<\/p>\n Ennek a t\u00e9m\u00e1nak m\u00e1r szentelt\u00fcnk egy k\u00fcl\u00f6n fejezetet a fot\u00f3kkal foglalkoz\u00f3 bejegyz\u00e9s\u00fcnkben<\/a>, \u00fagyhogy \u00e9rdemes \u00e1tolvasni. A stockfot\u00f3k nem \u00e9lb\u0151l elvetend\u0151k, b\u00e1r ha teheted, mindenk\u00e9ppen eredeti k\u00e9peket haszn\u00e1lj. Ugyanakkor, ha r\u00e1k\u00e9nyszer\u00fclsz a stockfot\u00f3k haszn\u00e1lat\u00e1ra, akkor pr\u00f3b\u00e1lj eredetibb, \u00e9letszer\u0171bb darabokat v\u00e1logatni k\u00f6z\u00fcl\u00fck, lehet\u0151leg olyanokat, melyek nem szerepelnek m\u00e9g t\u00f6bb sz\u00e1z m\u00e1sik weboldalon. \u00c9s azt\u00e1n tervezd meg, hogy mik\u00e9nt fogod ezeket fokozatosan lecser\u00e9lni egyedi fot\u00f3kra.<\/p>\n A weboldalad sz\u00f6vege a legfontosabb elem a konverzi\u00f3kat tekintve. Ha nem ford\u00edtasz r\u00e1 kell\u0151 figyelmet, \u00e9s odavetsz valami \u00e1ltal\u00e1nos sz\u00f6veges tartalmat a felhaszn\u00e1l\u00f3id el\u00e9, akkor ne v\u00e1rd, hogy meg fogod gy\u0151zni \u0151ket. A sz\u00f6veg elk\u00e9sz\u00edt\u00e9s\u00e9re id\u0151t kell szak\u00edtanod. Olyan tartalomra van sz\u00fcks\u00e9ged, ami cselekv\u00e9sre k\u00e9szteti \u0151ket. Els\u0151sorban arra kell f\u00f3kusz\u00e1lnod, hogy mire lehet sz\u00fcks\u00e9g\u00fck, milyen probl\u00e9m\u00e1ikat akarj\u00e1k megoldani, mert neked erre kell megold\u00e1st k\u00edn\u00e1lnod. \u00c9s nem pedig magadr\u00f3l, a c\u00e9gedr\u0151l vagy a term\u00e9keidr\u0151l besz\u00e9lned.<\/p>\n Emellett persze m\u00e9g sz\u00e1mtalan t\u00e9nyez\u0151 fontos a sz\u00f6vegekn\u00e9l, \u00edgy az egyszer\u0171 \u00e9s vil\u00e1gos megfogalmaz\u00e1sok, a CTA-k ereje, a megfelel\u0151 helyes\u00edr\u00e1s, a sz\u00f6veg form\u00e1z\u00e1sa. Ut\u00f3bbi kapcs\u00e1n \u00e9rdemes tudni, hogy a felhaszn\u00e1l\u00f3k ink\u00e1bb csak \u00e1tfutj\u00e1k a weboldalakat, \u00edgy olyan jelz\u00e9seket kell adni nekik, melyek a kulcsfontoss\u00e1g\u00fa r\u00e9szekn\u00e9l magukra vonj\u00e1k a figyelm\u00fcket. Kell a megfelel\u0151 strukt\u00fara, a c\u00edmek, alc\u00edmek rendszere, a felsorol\u00e1sok, a strat\u00e9giai pontokra elhelyezett, meger\u0151s\u00edt\u0151 k\u00e9pek, kiemel\u00e9sek, stb. \u00c9s persze nem \u00e1rt a SEO-szempontokat is figyelembe venni. Ami nem azt jelenti ma m\u00e1r, hogy valamilyen \u00e1ltalad elk\u00e9pzelt kulcssz\u00f3t min\u00e9l t\u00f6bbsz\u00f6r beleer\u0151ltetsz a sz\u00f6vegbe, vagy m\u00e9g enn\u00e9l is rosszabb esetben azon k\u00edv\u00fcl.<\/p>\n Ennek a t\u00e9m\u00e1nak is szentelt\u00fcnk m\u00e1r egy \u00f6n\u00e1ll\u00f3 bejegyz\u00e9st<\/a>, mert hogy a whitespace nem \u00fcres t\u00e9r, amit ki kell t\u00f6lteni, hanem designelem, aminek nagyon komoly funkci\u00f3ja van, \u00edgy gondosan kell adagolni. A whitespace vezeti a felhaszn\u00e1l\u00f3k tekintet\u00e9t, felh\u00edvja figyelm\u00fcket a fontos dolgokra, mik\u00f6zben meghat\u00e1rozza a weboldal megjelen\u00e9s\u00e9t, \u00f6sszk\u00e9p\u00e9t is. R\u00e1ad\u00e1sul a whitespace minden egyes weboldalelem k\u00f6z\u00f6tt megtal\u00e1lhat\u00f3 (k\u00e9pek, gombok, c\u00edmek, sorok, bet\u0171k, stb.), \u00e9s egy\u00e1ltal\u00e1n nem mindegy, hogy mikor, mekkora.<\/p>\n Hab\u00e1r a sz\u00f6veg\u00edr\u00e1sn\u00e1l m\u00e1r eml\u00edtett\u00fck a SEO-t, ezen t\u00fal is sok olyan t\u00e9nyez\u0151 van egy weboldalon, mely meghat\u00e1rozza annak keres\u0151optimaliz\u00e1lts\u00e1g\u00e1t. A c\u00edmeken \u00e9s a sz\u00f6vegt\u00f6rzs\u00f6n k\u00edv\u00fcl figyelj az URL-ekre, a meta c\u00edmsorokra, le\u00edr\u00e1sokra, a k\u00e9pek alt textj\u00e9re, f\u00e1jlnev\u00e9re, a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyre, a bels\u0151 linkrendszer fel\u00e9p\u00edt\u00e9s\u00e9re, a weboldal sebess\u00e9g\u00e9re, stb. Hossz\u00fa lenne mindent felsorolni, itt van seg\u00edts\u00e9g\u00fcl egy bejegyz\u00e9s\u00fcnk<\/a>, amiben r\u00e9szletezz\u00fck.<\/p>\n Egy weboldal att\u00f3l lesz egyedi \u00e9s megjegyezthet\u0151, ha van benne valami eredeti. Olyan karaktert kell neki adnod, ami \u00e1ltal eml\u00e9kezni fognak r\u00e1 a l\u00e1togat\u00f3k. Pr\u00f3b\u00e1ld teh\u00e1t belecsemp\u00e9szni a saj\u00e1t l\u00e1t\u00e1sm\u00f3dodat. Ez megjelenhet az eredeti sz\u00ednekben, a k\u00e9pekben, az egyedi megfogalmaz\u00e1sokban. Ugyanakkor ne ess a l\u00f3 t\u00faloldal\u00e1ra, \u00e9s igyekezz professzion\u00e1lis maradni.<\/p>\n Ez az, amire \u00e1ltal\u00e1ban nem marad sem id\u0151, sem p\u00e9nz, mert ha k\u00e9sz a weboldal, az ker\u00fclj\u00f6n min\u00e9l el\u0151bb a k\u00f6z\u00f6ns\u00e9g el\u00e9. Pedig tesztek n\u00e9lk\u00fcl nem fogod tudni, hogy optim\u00e1lis-e a weboldalad megjelen\u00e9se \u00e9s fel\u00e9p\u00edt\u00e9se a c\u00e9lk\u00f6z\u00f6ns\u00e9ged sz\u00e1m\u00e1ra, fogalmad sem lesz r\u00f3la, hogy tudj\u00e1k-e haszn\u00e1lni, vagy bele\u00fctk\u00f6znek olyan akad\u00e1lyokba, melyek elt\u00e1ntor\u00edtj\u00e1k \u0151ket a konverzi\u00f3t\u00f3l.<\/p>\n1. Pontos c\u00e9lok n\u00e9lk\u00fcl ne kezdj bele!<\/h3>\n
2. Na csak a desktop megjelen\u00e9sre figyelj!<\/h3>\n
3. Ne hanyagold el a szem\u00e9lyre szab\u00e1st!<\/h3>\n
4. Ne magadnak tervezd!<\/h3>\n
5. Figyelj a tartalmak elrendez\u00e9s\u00e9re!<\/h3>\n
6. Figyelj az oldal hierarchi\u00e1j\u00e1ra!<\/h3>\n
7. Maradjon k\u00f6vetkezetes a vizu\u00e1lis design!<\/h3>\n
8. Ink\u00e1bb ne haszn\u00e1lj stockfot\u00f3kat!<\/h3>\n
9. Nem figyelsz el\u00e9gg\u00e9 a sz\u00f6vegre!<\/h3>\n
10. Ne feledkezz meg a whitespace-r\u0151l!<\/h3>\n
11. A SEO-ra is figyelned kell!<\/h3>\n
12. Tedd egyediv\u00e9!<\/h3>\n
13. V\u00e9g\u00fcl, tesztelj!<\/h3>\n