Tal�n az egyik legmeghat�roz�bb r�sze egy honlapnak a rajta haszn�lt bet�t�pus(ok), valamint ezek �sszhangja a kin�zettel, a tartalommal, a sz�nekkel �s az eg�sz lap megjelen�s�vel. Manaps�g rengeteg olyan fel�let tal�lhat� az interneten, ami lehet�s�get ad arra, hogy egy�ni bet�t�pust alkalmazzunk a k�dol�s sor�n, erre a legismertebb p�lda tal�n a Google Fonts.

M�gis, sokan belesnek abba a hib�ba, hogy �ssze nem ill� bet�t�pusokat alkalmaznak, vagy szinte minden egyes modul m�s-m�s form�ban �r�dik. Ez l�nyegesen ront az oldal min�s�g�n, teljesen mindegy mennyi id�t t�lt�tt�l a k�dol�ssal. Nem v�letlen, hogy az ismertebb oldalakon, h�rport�lokon mind�ssze 2-3 bet�t�pust alkalmaznak.

A mai nap 10 tippet hozok arra, hogyan haszn�ljunk a bet�t�pusokat az oldalunkon!

1. Kev�s bet�t�pust haszn�lj

Mint ahogy eml�tettem, az egyik leggyakoribb probl�ma az, hogy minden egyes szekci� (pl: oldalmodul c�m, k�z�pmodul c�m, linkek, f�lk�v�r, al�h�zott, d�lt, stb) m�s-m�s bet�t�pust kap. A t�l sok t�pus �s m�ret elronthatja az �sszhangot. C�lszer� 2-3 t�pus haszn�lata egy honlap elk�sz�t�se sor�n, ugyanis ekkora mennyis�gn�l kicsi az es�lye, hogy �tl�thatatlann� v�lik a sz�veg.

Ha m�gis t�bb t�pust szeretn�l haszn�lni gy�z�dj meg arr�l, hogy kieg�sz�tik egym�st, m�gis figyelemfelkelt�k (ha c�msornak haszn�lod).

 2. Haszn�lj szabv�ny bet�t�pusokat

A Google fonts seg�ts�g�vel k�nnyed�n tudjuk sz�k�teni a k�rt a bet�t�pusok k�z�tt, v�lasszuk ki a Sans Serif csal�dot. Ebben a csoportban olyan t�pusokat tal�lsz, amelyek nem tartalmaznak semmilyen d�sz�t� elemet, hosszabb sz�vegben is lehet�v� teszik a gyors �s k�nnyed olvas�st.

Term�szetesen �n is t�mogatom, hogy a c�msorokat kiemelj�k valamilyen szinten, �m ez nem mehet az �sszhang rov�s�ra. A modulc�mek r�sz�re is �rdemes olyan t�pust v�lasztani, amely valamilyen szinten kapcsol�dik az oldal tematik�j�hoz (egy rajong�i oldalra ne v�lassz k�zzel �rt sz�vegre hajaz� bet�t�pust, hiszen ott a hangs�ly a min�s�gen van, te sem olvasn�l sz�vesen egy olyan ismeretterjeszt� magazint, ahol a szabv�ny bet� mellett egy handwritten st�lus� sor is beker�l. Nem odaval�.).

3. Korl�toss�g

Szint�n egyik alapk�ve az ig�nyes oldalnak az, hogy a sorok nem l�gnak ki a modulb�l, �s nem is �rnek a modul sz�l�gi. Ez olyan, mintha egy k�nyv sz�vege eg�szen a lap sz�l�ig �rne, zavar� �s kicsi ig�nytelens�g �rz�s�t kelti az olvas�ban. A CSS form�z�s seg�ts�g�vel k�nnyed�n be tudod �ll�tani, hogy mekkora legyen a t�vols�g a modulok sz�le �s a sz�veg k�z�tt (padding: �rt�k px;).

4. Olyan karakterek v�lassz, amely j�l alkalmazkodik a form�z�shoz

A l�togat�id k�l�nb�z� felbont�s� monitorokr�l, esetleg tabletr�l vagy telefonr�l fogj�k l�togatni az oldalad, �gy neked musz�j tekintettel lenni r�juk. Telefonr�l teljesen m�s felbont�sban jelenik meg a sz�veg (gyakran az �ltalad kiv�lasztott t�pus nem is kompatibilis telefonnal, �gy lecser�li egy szabv�nyra), ez�rt olyan t�pust v�lassz, amely ha kicsiny�tik sem v�lik olvashatatlann�.

Ide tartozik m�g, ha bet�form�z�st v�gzel ezeken a sz�vegeken, szint�n legyen olvashat� �s ne zavar� a megjelen�s. A Google fonts erre remek lehet�s�get ad, ha r�kattintasz a bet�t�pus nev�re egy olyan lapra navig�l, ahol megn�zheted k�l�nb�z� form�z�sok mellett hogy n�z ki a bet�.

5. Haszn�lt k�nnyen �rtelmezhet� bet�t�pust

Sok olyan bet�t�pus van, amely megk�nny�ti a sz�veg olvashat�s�g�t. Erre a legjobb p�lda a nagy I bet� �s a kis l bet� k�z�tti hasonl�s�g. B�r nem hiszem, hogy ez egy j�l fel�p�tett k�dol�s� kin�zetn�l probl�ma lehet, ugyanis kicsi r� az es�ly, hogy az ember egy bet� helyett m�sikat olvas (�gy nem is �rtelmes a sz�) (�s tudom, hogy vannak olyanok, akik olvas�si neh�zs�gekkel k�zdenek, most nem r�juk gondolok). De, az el�bb eml�tett p�ld�k mellett hasonl�s�g jelenhet meg a r �s a v, valamint az n, �s az m bet�n�l is, ami t�nyleg zavar� lehet.

Ide tartozik m�g, hogy b�r a Google Fonts-ot haszn�ljuk nagy szeretettel, nem minden bet�t�pus k�pes arra, hogy a magyar ABC-ben tal�lhat� �sszes bet�t megjelen�tse. A leggyakoribb neh�zs�gek az �,�,�,�,�,� bet�kkel ad�dik, de erre is van egy szuper tipp. Ha a bet�t�pus kiv�laszt�s sor�n r�m�sz a „Customize” r�szre, ott (ha szerencs�d van) ki tudod v�lasztani a „Latin Extended” kis n�gyzetet, ez a b�v�t�s pedig tartalmazza a magyar ABC �sszes bet�j�t.

6. A nagybet�s sz�vegek

Szerintem a nagybet�s sz�vegeket c�lszer� c�mek, alc�mek, men�pontok �s n�h�ny fontosabb kiemel�sn�l haszn�lni, de �sszef�gg� sz�veget nem �rdemes ilyen st�lusban meg�rni. Egy kutat�s m�r bebizony�totta, hogy a nagybet�s sz�veg olvas�sa sokkal t�bb energi�t vesz ig�nybe, mint a kisbet�s sz�veg olvas�sa, ez pedig okot adhat arra, hogy a l�togat� ne j�jj�n vissza az oldalunkra.

7. A sorok k�zti t�vols�g

A k�dol�sban a k�t sor k�z�tti eltol�d�st line-height-nek nevezz�k. Ez az �rt�k azt mutatja meg, hogy h�ny pixeles r�s legyen k�t sor k�z�tt. Ha ez az �rt�k kicsi, a sz�veg �sszeolvad, k�nnyen olyann� v�lhat, mint egy soha v�get nem �r� mondat, �s els� r�n�z�sre m�g visszatasz�t� is lehet egy ilyen megjelen�s� sz�veg. Viszont, az sem j�, ha a sorok k�zti eltol�s magas, �gy els� r�n�z�sre egy p�r mondatos bekezd�s egy f�l oldalas sz�vegnek is t�nhet, amit lehet nem mindenki fog elolvasni. Azt mondj�k, hogy a j� sort�vols�g 1-2 px-el nagyobb, mint maga a bet�m�ret. Teh�t, ha a font-site: 10px;, akkor a line-height: 12 px;.

8. Sz�nek, kontraszt, olvashat�s�g

Szint�n egy alappill�r, hogy hi�ba v�lasztasz megfelel� bet�t�pust, hi�ba �ll�tasz be minden �rt�ket, ha egy olyan h�tt�rsz�nt vagy sz�nt adsz a sz�vegnek, ami olvashatatlann� teszi azt. �n ezt els�k�nt egy k�z�piskol�s prezent�ci�s feladat sor�n hallottam, �s �szint�n, nem gondoltam, hogy ezt el kell mondani. De m�gis, voltak olyanok, akik a feh�r h�tt�re vil�gos sz�n� bet�ket haszn�ltak, �s a fekete h�tt�rre s�t�tk�kkel �rtak. Nem sz�p, nem n�z ki j�l, olvashatatlan. Lehet j�tszani a modulok h�tter�vel, de egy vil�gos h�tt�rhez �rtelemszer�en s�t�t legyen a bet�sz�n, �s ford�tva is. Itt teljesen �rv�nyes az az �ll�t�s, hogy: ha neked zavar�, a l�togat�nak is az lesz.

9. Ker�ld az oda nem ill� sz�neket

Ha m�r kiv�lasztottad a design alapsz�neit (ez �ltal�ban 3 max 4), m�g v�letlen�l se akarj m�s sz�neket belecsemp�szni a bet�form�z�s sor�n. Lehet j�tszani s�t�tebb-vil�gosabb �rnyalatokkal, de egy m�r k�sz kin�zetet nem kell m�g jobban „feldobni” egy sokadik sz�nnel, ami egyed�l csak pl: a f�lk�v�r bet�n�l jelenik meg. A neten szerencs�re rengeteg sz�nkombin�l� oldal tal�lhat�, ahol kedvedre lehet vari�lni a sz�neket, de m�gis �sszhangban maradnak.

10. V�ltozatos bet�m�ret, figyelemfelkelt�s

Nem egy olyan oldalt l�ttam m�r, ahol azzal pr�b�lj�k felkelteni a l�togat� figyelm�t, hogy egy-egy sort nagyobb bet�m�rettel �rnak, esetleg valami idi�ta keretet is tesznek egy sornak. B�r ezt legink�bb a (szerintem) nem j�l diz�jnolt, valamint nagyon eladni akar� oldalak alkalmazz�k, de szem�lyes blogokon �s rajong�i oldalakon is l�ttam m�r hasonl�t. Ha szeretn�d, hogy iratkozzanak fel a h�rleveledre, esetleg t�lts�k le valamelyik �ltalad tervezett kis kit�lthet� valamit, vagy hogy regisztr�ljanak az oldaladra, akkor a tartalommal akard megfogni �ket, ne pedig a k�p�kbe tolni.

Rem�lem valamennyire hasznosnak tal�lt�tok ezt a kis �sszefoglal�t, �s van benne olyan tipp, amin m�g nem gondolkoztatok el.:) Annakidej�n t�bb webdesign t�m�j� k�lf�ldi oldalt olvastam, �gy a java r�sz�t �n is csak onn�t ismertem meg. Mindenesetre, n�h�ny apr�s�ggal m�g szebb� �s eszt�tikusabb� lehet tenni egy weblapot. �rdemes pr�b�lkozni.:)

Mit sz�lsz hozz�?

Bloggerk�nt tal�n a legnehezebb dolog nem a kezdet, hanem a folytat�s. K�zel 5 �vnyi blogol�s van a h�tam m�g�tt, �s b�r a mai napig neh�zs�gekbe �tk�z�m (legink�bb motiv�ci� ter�n), l�nyeg�ben akt�v blogol�ssal telt ez az 5 �v. Ezalatt az id� alatt rengeteg tr�kk�m �s tippem lett arra, hogyan is tartsam fel a saj�t lelkesed�sem a blogl�ssal kapcsolatban. Ezeket szeretn�m most megosztani veletek.

1. Megfelel� platform kiv�laszt�sa

Nem egy oldalon l�ttam m�r �sszehasonl�t� bejegyz�st, �gy nem is szeretn�m nagyon felt�pni a r�gi sebeket. Bloggereknek (�rtelemszer�en) a legk�zenfekv�bb d�nt�s a blogger lenne, �m n�lam m�gsem siker�lt el�rnie azt az �tt�r�st, amire sz�m�tottam. Nem egyszer pr�b�lkoztam m�r a t�rhelyv�lt�ssal, �m a blogger sablonjai el�g semmilyenek, �s mivel nem vagyok otthon a blogger k�dolol�s�ban, ez�rt �n is (mint szinte minden bloggeres felhaszn�l�) k�lf�ldi designgy�rt� oldalakr�l v�lasztottam volna kin�zetet. Ezzel nincs semmi baj, de ha megnyitok n�h�ny blogot, ugyanazok a kin�zetek, sz�nek �s sablonok jelennek meg, teljesen elveszett az egyedis�g. Persze vannak egyedi kin�zetgy�rt�k, b�r m�r el�g neh�z bloggeren valami egyedit tal�lni.

M�sik ismertebb t�rhely a G-Port�l, amely b�r k�zel egy �vig fejleszt�sek n�lk�l maradt, �gy l�tszik visszat�r az �let a rendszerbe (aminek nagyon �r�l�k!:). Itt a k�dol�s seg�ts�g�vel t�nyleg b�rmit el lehet k�sz�teni, a hat�r a csillagos �g, �s nem igen tal�lni 2 egyforma oldalt. Se tartalomra, se megjelen�sre.

Term�szetesen jelen van m�g a flaunt.nu, amely ingyenesen rajong�i oldalakat enged�lyez (pl szem�lyes blog eset�n ott marad a v�g�n a flaunt.nu (ami nem baj, elv gportal.hu is ott van)), valamint a wordpress. Ut�bbihoz el�g neh�z ingyenes �s egyedi sablont tal�lni, b�r fizet�s�kb�l Dun�t lehetne rekeszteni.

Mindenkinek saj�t sz�ve-joga, hogy szeretne-e p�nzt �ldozni saj�t domainra, kin�zetre, rekl�mmentes�t�sre. Ha az egyszer�s�gn�l szeretn�nk maradni, �s nem szeretn�nk p�nzt �lni a szerkeszt�sbe, �rdemes �gy kiv�lasztani a t�rhelyet.

2. A megfelel� kin�zet

M�r az els� posztban eml�tettem, hogy milyen neh�z megtal�lni a megfelel� kin�zetet. Fontos, hogy a honlap megjelen�se ig�nyes �s figyelemfelkelt� legyen, hiszen ez az, amir�l a legt�bb l�togat� megjegyzi a lapot. �n p�ld�ul nem tudok belemer�lni egy blog olvas�s�ba, legyen b�rmennyire is �rdekes, ha a megjelen�se ig�nytelen, a sz�nek ki�getik a retin�m, vagy �ppen annyira unalmas m�r, hiszen a 100. ilyen kin�zetet l�tom a mai nap.

Mindegyik eml�tett platformra rengeteg design-al foglalkoz� oldal tal�lhat� (k�z�l�k p�rat tal�ltok oldalt a partnerek r�sz alatt), valamint a m�r nem akt�v oldalak is el�rhet�ek maradtak (t�bb�-kev�sb�).

A megfelel� kin�zet nem csak a l�togat�k figyelm�nek felkelt�se �s megtart�sa miatt fontos, a szerkeszt� sz�m�ra is �pp ugyanolyan jelent�s�ggel b�r. �n p�ld�ul �ri�si lelkesed�ssel k�sz�tek egy �j kin�zetet a blogra, amit v�ltoz� ideig (hetekig, h�napokig) fenthagyok, azt�n, mikor m�r unalmass� v�lik k�vetkezik el�r�l a m�velet. B�r sorrendileg az a fontosabb, hogy a szerkeszt�nek tetszen a kin�zet, ut�na k�vetkeznek a l�togat�k, �rdemes �gy dolgozni, hogy mindk�t f�lnek megfeleljem a megjelen�s. Hi�ba vagy te egy met�lrajong�, ha teljes s�t�ts�gbe burkolod az oldalad lemondhatsz azokr�l a l�togat�kr�l, akik lehet szint�gy szeretik a met�l zen�t, de a szem�ket b�ntja a s�t�t sz�n�ssze�ll�t�s.

3. Tematika

Soha nem voltam annak a h�ve, hogy oldalunkat bekorl�tozzuk bizonyos hat�rok k�z�. Szerintem egy t�rt�netes oldalon is elf�rnek szem�lyes bejegyz�sek (nyilv�n valamilyen kategoriz�l�s alapj�n), ahogyan egy beauty blogra is elf�r egy �lm�nybesz�mol�. M�gis, �rdemes valamennyire megtal�lni a f� t�mak�rt, melyben �rni szeretn�nk. �n p�ld�ul szem�lyes blogot vezetek, melyhez m�r egy k�l�n kis blogr�ssz� n�te ki mag�t az utaz�ssal kapcsolatos bejegyz�sek sorozata. Dienah �s Ao szinte m�r mesterien tal�lja meg az egyens�lyt a grafikai bejegyz�sek �s a szem�lyes tartalm� bejegyz�sek k�z�tt.

�gy gondolom, ha saj�t magad bizonyos keretek k�z� szor�tod be, �rtasz a motiv�ci�nak. Ha kital�lod, hogy te egy receptekkel foglalkoz� oldalt szeretn�l ind�tani, �s g�rcs�sen akarsz ragaszkodni hozz�, akkor hi�ba van egy nagyon izgalmas koncert�lm�nyed vagy ak�r egy komoly probl�m�d, amir�l b�r besz�lni nem szeretn�l senkinek, ki�rn�d magadb�l, nem fogod, hiszen „�n egy receptes blogot vezetek”. Nem. A te oldalad, a te d�nt�sed, hogy mit osztasz meg. Nyilv�n valamilyen rendszerez�sre szorul ha teljesen k�l�n�ll� posztokat �rsz, de ez a legkevesebb.

4. Ne szabj magadnak hat�rid�ket!

Nincs rosszabb, mint egy neh�z nap ut�n azon agyalni, hogy „basszus, m�ra kell �rnom egy bejegyz�st, mert csak”, azt�n se kedved, se id�d, se energi�d. Valamint, �gy teljesen elveszik az a kis izgalom, amit akkor �rzel, amikor t�rt�nik valami nagyon �rdekes, �s �rzed, hogy hazamegyek, meg�rom. N�lam az el�z� blogon a napi 1 poszt m�k�d�tt, �s ne tudj�tok meg milyen neh�z volt el�re �rni ny�ron a bejegyz�seket, amikor rengeteget dolgoztam �s nyaraltunk is. M�r r�j�ttem, hogy a kevesebb n�ha t�bb, b�r az sem j�, ha az ember �tesik a l� t�loldal�ra, �s havonta oszt meg egy bejegyz�st. Ezzel a hozz��ll�ssal sok l�togat�t lehet elvesz�teni, ami el�g kellemetlen lehet, felt�ve, ha az a c�lod, hogy a t�rt�neteiddel el�rj embereket. Ink�bb ig�nyes, min�s�gi vagy izgalmas tartalmat ossz meg, minthogy �sszecsapott, musz�jb�l meg�rt posztok lepj�k el az oldalad �s takarj�k el a val�di tartalmat.

5. K�z�ss�g

Blogos/honlapszerkeszt�s kereteken bel�l is lehet k�z�ss�get ki�p�teni. M�ghozz� �gy, hogy nem is kell ismerned a m�sikat. Nekem nagyon j�l esik, amikor nem csak azt l�tom, hogy n� a sz�ml�l�, hanem ha l�tok egy kommentet vagy egy �zenet a chat-ben. Kicsit olyan, mintha az illet� t�nyleg foglalkozna a dologgal, �s egy apr�cska visszajelz�s sokat tud dobni a motiv�ci�n. �n azt vallom, hogy ha szeretn�m, hogy n�lam legyenek megjegyz�sek, nekem is �rni kell. �ltal�ban hetente 1-2 alkalommal v�gig n�zem a cser�im oldalait (ez a minimum, ha m�r valamilyen kapcsolatban �ll egym�ssal a k�t oldal), �s igyekszem hagyni valamilyen nyomot, hogy „igen, itt j�rtam, �s �rdekesnek tal�lom a bejegyz�st, figyeled r�d, �rt�kelem, amit csin�lsz”. B�rmilyen r�vidke megjegyz�s sokat jelent, �s nekem nem egy olyan „netes bar�tom” lett az elm�lt �vek alatt, akikkel b�r soha nem tal�lkoztam, a blogok alapj�n m�gis �gy �rzem, hogy ismerem �ket. �s rem�lem �k is �gy gondolj�k. A kommentelget�sen k�v�l megannyi lehet�s�g van m�g, vend�gbejegyz�s �r�s, k�z�s bejegyz�s, k�z�s tag, ezzel tudj�tok seg�teni a m�sik blogj�nak hirdet�s�t mindenf�le neheztel�s n�lk�l. A k�z�ss�g ereje rendk�v�l fontos, �n p�ld�ul nem tudn�k �gy dolgozni, ha semmilyen visszajelz�st nem kapn�k a munk�immal kapcsolatban.

Valamint, a G-port�l �jj��led�s�vel kapcsolatban rem�lem hamarosan j�t�kok, versenyek �s k�z�ss�gkov�csol� programok is v�rnak r�nk!:)

Rem�lem hasznosnak tal�lt�tok ezt a kis bejegyz�st, melyben legink�bb a saj�t tapasztalataim osztottam meg veletek. Nagyon k�v�ncsi vagyok, hogy Ti hogyan tartj�tok fenn a kezdeti lelkesed�st, hogyan tal�lj�tok meg a motiv�ci�t a mindennapok alatt?:)

 

Mit sz�lsz hozz�?