ZINA DESIGN - webdesign ötletek, honlap tippek, weblap készítés » térköz

CSS technikák – alapbeállítás

Zina — Sun, 14 Sep 2008 14:19:31 +0000

Amikor nekiállunk megírni a CSS stíluslapunkat, az első lépés legyen, hogy nullázzuk le a böngészők különböző alapbeállításait. Ez szakszóval az ún. Global Reset, ehhez szereték most néhány fogást bemutatni.

A white space alapbeállítása

Az összes böngésző máshogy értelmezi a margin és padding alapértékket. Ezt nullázzuk le, hogy ne érjen minket meglepetés.
* { margin: 0; padding: 0; }

Egy kicsit bővebben

Ha nem akarjuk törni az agyunkat a resetelésen, akkor megfoghatjuk a jó előre elkészített nullázó css lapunkat. Ha még nincs ilyened, akkor itt van:

/* linkek aláhúzásának törlése */ :link,:visited { text-decoration:none } /* listák elől töröljük a pöttyöket és számokat */ ul,ol { list-style:none } /* az automatikus címsor méret beállítás törlése */ h1, h2, h3, h4, h5, h6, pre, code { font-size:1em; } /* töröljük az egyéb elemek köré berakott paddingot és margint is */ ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { margin:0; padding:0 } /* szedjük ki a linkelt képek köré rakott keretet */ a img,:link img,:visited img { border:none }

Természetesen ezt bővíthetjük igény szerint, de a legtöbb dizájnnál ez megfelelő kindulópont. Az ötleteket szívesen várom!

9 alapelv a jó webdizájnhoz, Térköz

Zina — Tue, 12 Aug 2008 08:20:50 +0000

Amikor az első oldalaimat csináltam, minden kis apró helyet be akartam tölteni, mert azok elvesztegetettnek tűntek. Na azt nem szabad. Pont az ellentettje az igaz. A térközök letisztultabbá teszik a dolgokat. A webdizájnban három nézőpont van, amit érdemes figyelembe venni.

Sorközök

Egy nagyobb szövegben a sorok közötti hely igen meghatározza a szöveg olvashatóságát. Ha túl kicsi a köz, akkor a szemünk a sorugrásoknál véletlenül nem a következőre ugrik, hanem kihagy egy-egy sort. Ha túl nagy a köz, akkor a két sor között elveszhet a tekintet. Természetesen itt is az arany középutat kell megtalálni. A CSS-ben a “line-height” opcióval tudjuk szabályozni a sorok közötti távolságot. Az én oldalamon eu 16px, a betűk pedig 11px nagyságúak. Én egy kicsit kevésnek találom az alap sorközt, így megemelem azt egy kicsit.

Példák:

Szűk sorköz, line-height:10px;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi elementum nibh fermentum lacus. Morbi odio. Phasellus nec purus. Fusce a massa. Etiam non felis molestie tortor consequat euismod. Curabitur quis nisi ac sem lacinia dignissim. Pellentesque eleifend. Duis quis enim. Ut vel risus. Ut suscipit ipsum quis purus. Cras id arcu. In commodo rutrum massa. Suspendisse a nisl a justo tempus tempus. Phasellus orci. Mauris tristique volutpat justo.

Default sorköz, line-height:14px;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi elementum nibh fermentum lacus. Morbi odio. Phasellus nec purus. Fusce a massa. Etiam non felis molestie tortor consequat euismod. Curabitur quis nisi ac sem lacinia dignissim. Pellentesque eleifend. Duis quis enim. Ut vel risus. Ut suscipit ipsum quis purus. Cras id arcu. In commodo rutrum massa. Suspendisse a nisl a justo tempus tempus. Phasellus orci. Mauris tristique volutpat justo.

Tág sorköz, line-height:26px;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi elementum nibh fermentum lacus. Morbi odio. Phasellus nec purus. Fusce a massa. Etiam non felis molestie tortor consequat euismod. Curabitur quis nisi ac sem lacinia dignissim. Pellentesque eleifend. Duis quis enim. Ut vel risus. Ut suscipit ipsum quis purus. Cras id arcu. In commodo rutrum massa. Suspendisse a nisl a justo tempus tempus. Phasellus orci. Mauris tristique volutpat justo.

Padding, azaz távolságadás

Ezt a távolságadás dolgot most én találtam ki, ugorjunk is tovább róla. Nem olyan szép szó, aki tud jobbat, szóljon. De hogy mi is ez? A szöveget nem szabad más elemhez hozzáérinteni. Pl.: ne érjen hozzá a képekhez, a táblázat keretéhez, vagy bármi máshoz. A padding erre használatos, térközöket teremtünk vele elemek között. A padding használata szinte kötelező (igen, lehetnek kivételek, de ezt inkább hagyjuk most). A szöveg és többi elem közé mindig tegyünk közt, mert így szépen, egyszerűen lesz olvasható az írás.

Példák:

Padding nélkül

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi elementum nibh fermentum lacus. Morbi odio. Phasellus nec purus. Fusce a massa. Etiam non felis molestie tortor consequat euismod. Curabitur quis nisi ac sem lacinia dignissim. Pellentesque eleifend. Duis quis enim. Ut vel risus. Ut suscipit ipsum quis purus. Cras id arcu. In commodo rutrum massa. Suspendisse a nisl a justo tempus tempus. Phasellus orci. Mauris tristique volutpat justo.

Padding térközzel, kicist kellemesebben

White space, azaz fehér tér

Első és legfontosabb: a white space nem feltétlenül kell, hogy fehér legyen. A kifejezést az üres helyek megnevezésére használják az informatikában, így a szövegszerkesztésben és a programozásban is. A white space-t használjuk, hogy egyensúlyt adjon, arányos és kontrasztos legyen az oldalunk. Ha sokat használunk belőle, akkor az eleganciát sugall.

A white space egyik legjobb tanulásának módja, ha megfogunk egy magazint. Van benne egy pár reklám. Figyeljük meg ezeket. A drága órák és autók gyártóinak reklámjaiban igen sok a fehér tér…

13 dolog, ami kell a honlapodhoz

Zina — Wed, 28 Nov 2007 15:16:10 +0000

Bármilyen weboldal elkészítéséhez csak úgy fogjunk hozzá, hogy előtte készítünk egy részletes tervet. Ebben a tervben le kell írnunk, hogy milyen rendszer szerint épüljön fel a tartalom, amit feltöltünk, milyen hierarchiával kerüljön fel, illetve a nagyon fontos látvénytervet is ekkor készítjük el, mely sokat módosulhat egészen a végső verzióig, de érdemes már ekkor is jó néhány szempontot figyelembe venni.

Itt lennének összegyűjtve.

Címsor – Látod az ablak tetején lévő sávot? És mit látsz ott? Itt az oldal nevének mindenképp meg kell jelennie, és nem kevésbé hasznos, ha még ide beírod azt a néhány kulcsszót, ami az oldalad tartalmát mutatja be. Nem csak a felhasználóknak egyszerűbb az oldal keresése, de a Google is jobban szeretni fogja. Akár 50-80 karaktert is írhatsz ide.
Leírás – A weblap esszenciája, melyben röviden, kb. 250 karakterben leírjuk, miről szól az oldalunk. Ezt a meta tagek közt tüntessük fel, illetve akkor is jól jön, ha épp be szeretnénk regisztrálni az oldalunkat különböző helyekre (pl. link lapok, közösségi oldalak stb.) Ez a szöveg megjelenik akkor is, ha a Google ránk talá, a weboldal címe alatt.
Kulcsszavak – Ez is a Google-nek kell, hogy jobban behatárolhassa az oldalunkat. Ne tegyük azonban metatagbe, mert az már rég nem érdekli a keresőt, hanem használjuk őket gyakran a weboldalon, címsorokban, akár olyan címkefelhőként (tag), mint ami nekem megjelenik az oldal alján. Vigyázzunk azonban arra, hogy csak a tartalomhoz illő szavakat válasszuk: ha pl. kiválasztunk egy népszerű szót, melynek köze nincs hozzánk, akkor ezt a keresők is érzékelik (a látogatók hamar visszatérnek a keresőoldalra, mert nem találták meg, amit kerestek), akkor ezt hamar azt okozhatja, hogy a Google kivesz minket a rendszeréből…
Navigáció – Nálad keresni kell a menüpontokat? NEM jó! Legyen olyan a navigálás az oldalon, hogy szinte etesse magát, tudja bárki, hogy adott tartalmat hol keressen. Legyen logikus, egyszerű és jellegzetes. Senki sem akarja azért elveszíteni a látogatóit, mert megunják a kattintgatást, mielőtt megkapják, amit szeretnének!
Térközök – Sok betű egy helyen nem jó. Különítsd el a tartalmat egymástól elegendő nagyságú térközökkel, hogy a látogató szeme legalább erre az időre megpihenhessen. Tehetünk nagyobb teret a képek köré (margin) is.
Tartalom – Igen, ez a legfontosabb része, ezt nagyon nem ronthatjuk el. Legalább egy jó bekezdésnyi (kb. 250 szó) tartalmas szöveget el kell helyeznünk az oldalon. Korábban már írtam róla: a látogatók sietnek, gyorsan kell nekik a szükséges infó. Adjuk meg neki, lehetőleg kis, könnyen olvasható adagokban, címmel, listával tagolva.
Friss információ – Mikor frissítetted utoljára az oldalad? A legkevesebb, amit megtehetsz, hogy egy olyan részt kialakítasz, melyben új híreket és egyéb infókat megjeleníthetsz, ezen felül a többi tartalmat is célszerű naprakészen tartani, a képeket időnként lecserélni.
Helyesírás ellenőrzés – Ugye nem felejtetted el? Nyugodtan szánj időt, hogy még egyszer átnézd: nincs-e elütés, nyelvtanilag helyes-e, amit írtál. Sok kellemetlenséget elkerülhetsz vele.
Képek – A mondás szerint is: egy kép felér ezer szóval… Egy jól elhelyezett kép vagy más grafikus elem feldobja, tagolja és hangulatossá teszi az oldalt. Sok stock photo oldal is van a neten (a kedvencem az istockphoto.com, innen igen olcsón szerezhetünk színvonalas és gyönyörű képeket, és sok ingyenes oldal is van. Ja, és ne feledd, a képek leírását sem!
Linkek – A látogatók szeretik érezni, hogy törődsz velük. Ha olyan linkeket teszel fel oldaladra, mely segítik az ő munkáját, szórakozását, stb., értékelni fogják. Ha kapsz visszalinket, az pedig a Google keresésben is segít, minél több link mutat rád, annál népszerűbb vagy, és annál feljebb kerülsz a listában.
Cselekvésre való felhívás, azaz call-to-action – Amire gondolok: a látogató töltsön ki egy űrlapot, iratkozzon fel egy hírlevélre, töltsön le valamit, rendeljen meg valamit. Már a kezdőoldalon meg kell jelenítenünk ezt a felhívást, hogy könnyen észrevehető legyen, és jobban búzdítson. Igazából mindegy, hogy eladni akarunk valamit, vagy csak nagyobb olvasótábort szerezni, ez igen fontos.
Copyright – Ami kipattan az agyadból, és felteszel a weboldaldra, az a TIÉD. Sokan ezt meg is értik, és úgy kezelik, de másokat egyszerűen nem érdekel. Védd meg tőlük az alkotásod.
Elérhetőség – Mert ugye hogyan bizniszelhetnél, ha nem tudják veled felvenni a kapcsolatot?

Forrás: Essential Keystrokes