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á?