Őszintén? Regényt lehetne róla írni. Viszont nem is olyan rég egy szakdolgozat vázlatához összeszedtem a leghasznosabb tudnivalókat, amit most közkinccsé tennék.

SPOILER ALERT! Angol tudás szükséges, magyar infók ritkán vannak róla…

A weblapjaim alapja tehát a Wordpress nevű weblap motorra épül. Alapvetően a Wordpress-t még mindig sokat csak blogmotornak tartják, de én azért szeretem, mert nagyon jól testre szabható, rengeteg kiegészítő van hozzá, és mindemellett az adminisztrációs felület felhasználójának is könnyen áttekinthető, szerkeszthető, szemben sok egyéb bonyolult CMS rendszerrel, mint a Drupal, Joomla stb. (Drupal mániásoktól szorri…

A Wordpress-nek a hivatalos oldala a http://wordpress.org/ Itt rengeteg leírás van, de leginkább a fejlesztőknek szól, hogy induljunk neki egy wordpress-es oldal fejlesztésének, milyen lépésekben alakítsuk ki a sablont, stb. Hasznos funkciója, hogy összegyűjti a kiegészítőket (pluginek), és nem kell sok-sok egyéb weboldal böngészésével megtalálni a legmegfelelőbbet. Van néhány wordpress szerelemes emberke Magyarországon is, akik indítottak egy magyar oldalt neki, ez a http://word-press.hu/. Itt jellemzően annyi infó nincs fent, inkább hírek, a legújabb magyar verzió letöltése, illetve a fórum funkcióját használom. Mondjuk a Codexben itt is vannak hasznos infók erről a rendszerről: http://dokumentacio.word-press.hu/ meg egy két apróság az én oldalamon is van: http://lemmikki.hu/wordpress/wordpress-a-weblap-motor/

Első lépések

A Wordpress telepítése lényegében annyi, hogy letöltöd a legfrissebb csomagot, amit kapsz, abban a wp-config.php fájlban egy-két apróságot beállítasz (http://codex.wordpress.org/Editing_wp-config.php), majd az egész mehet fel ftp-vel a kiszemelt tárhelyre. Aztán egy-két egyéb lépés ott, és az alap gép már fut is. (http://codex.wordpress.org/Installing_WordPress) Nem is ez a bonyolult része a dolognak, hanem ami ez után jön. (Első lépésekről ezek jó infók: http://codex.wordpress.org/New_To_WordPress_-_Where_to_Start)

A weblap design kialakítása Wordpress-ben

A wordpress weboldalak felépítését, arculatát a hozzá beállított sablonok adják meg. Ha megnézed a weboldalam portólióját, akkor ott nagy hányadban wp oldalak vannak, mégsem hasonlítanak egymásra. A folyamatnak ez a része szokott tartani a legtovább általában. Mindig ezzel kezdek, először megtervezem az arcát a weblapnak (ezt általában photoshopban), majd ha azt leegyeztettem a megrendelővel, akkor csinálok belőle wp sablont. Hála égnek a wp sablonkezelése nagyon programozóbarát, igazából csak html-css formában kell előállítani a photoshop tervet, aztán szétvagdosni megfelelő részekre. 4 alapvető része van, a header, a sidebar, a footer, és természetesen a törzs, amit indexnek hívunk. Bővebb infókat a technikai oldaláról a sablon építésnek itt találsz:

http://codex.wordpress.org/Stepping_Into_Templates
http://codex.wordpress.org/Theme_Development
http://net.tutsplus.com/tutorials/wordpress/how-to-create-a-wordpress-theme-from-scratch/
http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/
http://wordpress-sablon-keszites.efrud.eu/
http://codeedesign.hu/blog/category/wordpress

Kb ez az a rész, amiről tényleg regényeket lehet írni… nekem több évbe telt, míg a finom technikákat kitanultam. Persze alap tudással is el lehet boldogulni, maximum a bonyolult megoldásokkal még vársz egy kicsit.

A weboldal struktúrája

Ha kész a sablon, akkor érdemes elkezdeni az oldal struktúráját felépíteni. Ez lényegében két dologból áll: Bejegyzések (Posts) és Oldalak (Pages) szerkezetéből. A kettő között a lényeges különbség, hogy a bejegyzések amolyan hírszerűségek, egymás után írhatjuk őket, kategóriákba sorolhatjuk, címkéket adhatunk hozzájuk, általában rendszeresen frissülő tartalmakat takarnak. Az oldalak inkább a statikus részét jelentik a weblapnak.  Az oldalakat lehet egymás alá, mellé hierarchizálni, a bejegyzéseket nem, azokat leginkább a kategóriák kötik össze.

Ezek megértéséről néhány hasznos infó:
http://blogmum.com/2009/05/whats-the-difference-between-wordpress-posts-and-pages/
http://en.support.wordpress.com/post-vs-page/

Wordpress plugin-ok, bővítmények

Ha megvan a kezdő struktúra, akkor érdemes a szükséges kiegészítőket betenni. Két módon működik: vagy letöltöd, és ftp-n keresztül a kinevezett wp-content/plugins/ mappába berakod, és az adminban a bővítmények oldalon aktiválod, vagy az újabb wp verziókban már lehet az admin felületen is keresni, onnan telepíteni (ehhez megfelelő szerver jogosultságok kellenek). (http://codex.wordpress.org/Managing_Plugins)

A kiegészítőket általában nem elég aktiválni, el kell végezni a szükséges beállításokat. Ehhez általában minden bővítmény csinál magának menüpontot, vagy a Beállítások alatt, vagy sajátot, néhány extrém esetben máshol. Egyes plugineknél szükség van arra is, hogy egy működéséhez szükséges kódot elhelyezz abban az oldalban, ahol használni akarod a kimenetet, vagy a sidebar kódjában, esetleg widgetként be tudod pakolni.

Hasznos Wordpress bővítmények

http://contactform7.com/
A kapcsolat formokat, ajánlatkéréseket lehet vele kivitelezni. Használatához a megadott kódot kell elhelyezni abban az oldalban, ahol a kódot akarod látni.
Bővebb leírást a pluginről az oldalon olvashatsz.

http://alexrabe.de/wordpress-plugins/nextgen-gallery/
Galéria plugin, nagyon okos, szinte mindent tud. Sok galériát lehet létrehozni, azokat albumba rendezni, szinte határtalan a megjelenítések módja is. Ha komolyabb galériát szeretnél látni a pluginnel, akkor itt nézz szét: http://vadjutka.hu/ vagy itt http://www.aegondij.hu/

http://joelstarnes.co.uk/blog/pagemash/
Az oldalak a menüben megjelenő sorrendjét szabályozza. Alap esetben a sablonban lehet megadni, hogy milyen sorrendben listázza az oldalakat, ezt a wp beépített wp_list_pages() nevű függvénye kezeli. Itt van róla infó, mit tud: http://codex.wordpress.org/Template_Tags/wp_list_pages Sajnos egyedi sorrendet nem kezel, így ehhez kell a pagemash, azzal olyan sorrendet lehet létrehozni, amit szeretnénk. A kívánságunkat adatbázisban tárolja, és onnan szedi ki minden oldalletöltéskor.

http://projects.jesseheap.com/all-projects/wordpress-highslide-js-plugin
Ez csak a szépség kedvéért: egy speciális képmegjelenítő. A galéria pluginhez pluszba tettem hozzá, mert helyesen jeleníti meg a képeket, ha rákattint a bélyegképekre a látogató.

A weboldal tartalma

Ha megvan minden plugin, akkor igazából már csak a tartalom feltöltése van hátra. Írtam az előbb, hogy az oldal struktúrát létrehozzuk, azt még tartalom nélkül szoktam csinálni, mert így legalább addig is halad a munka, és általában a tartalom szokott lenni az utolsó, amit a megrendelő lead. Kedvenc weboldalam ilyen szempontból a http://lipsum.com, ahol állati fake szövegeket lehet generálni, és így tényleg nem kell a tartalommal törődni, csak a végén.
A tartalom feltöltése kb úgy működik, mintha egy word dokumentumba írnánk, amit a weboldalon látni szeretnénk, wysiwyg szerkesztővel. (Persze lehet html-ben is, ez akkor jó, ha aprólékosabb munkát szeretnénk végezni, és értünk a html-hez).

Legvégső állomás a tesztelés, többen kipróbálunk minden funkciót, aztán mehet élesbe :) Aztán hogy lásd is az admint: http://php.opensourcecms.com/scripts/details.php?scriptid=88

Drop Shadow – Adjunk a képnek árnyékot

A lényeg, hogy egy nagy, árnyékkal ellátott képet beteszünk háttérképnek. Mivel az IE6 nehezen kezeli az átlátszó png-t, ezért érdemes testreszabott gif-et használni. Minél nagyobb a háttérképünk, annál nagyobb képeknél lehet használni. A példában egy 1000×1000 pixeles kép is árnyékkal jelenne meg.

HTML

<img class="shadow" src="sample.jpg" alt="" />

CSS

img.shadow {
   background: url(shadow-1000x1000.gif) no-repeat right bottom;
   padding: 5px 10px 10px 5px;
}

Dupla keret

Az egyik legegyszerűbb és legelterjedtebb technika. Háttérszínt és bordert, azaz keretet adunk a képnek

HTML

<img class="double-border" src="sample.jpg" alt="" />

CSS

img.double-border {
   border: 5px solid #b4c842;
   padding: 5px; /*Belső keret mérete*/
   background: #fff; /*Belső keret színe*/
}

Vízjelezett kép

Mintha csak photoshoppal raktuk volna rá a vízjelet. Az IE6 hibájának köszönhetően nem átlátszó png-vel oldottam meg, hanem egy jpeg kép css átlátszóságával játszottam. Szerintem üt :)

HTML

<div class="transp-block">
   <img class="transparent" src="sample.jpg" alt="" />
</div>


CSS

.transp-block {
   background: #000 url(watermark.jpg) no-repeat;
   width: 420px;
   height: 177px;
}
img.transparent {
   filter:alpha(opacity=75);
   opacity:.75;
}

Kép felirattal

Áttetsző csík a kép alján, rajta a felirat – akár keresőoptimalizálás szempontból is tökéletes lehet. Egy hátránya van, hogy nem lehet tetszőleges méretű képre alkalmazni, annak előre tudni kell a méretét. De egyébként mutatós :)

Budapest – The dark city

HTML

<div class="img-desc">
   <img src="sample.jpg" alt="" />
   <cite>Budapest - The dark city</cite>
</div>

CSS

.img-desc {
   position: relative;
   display: block;
   height:177px;
   width: 420px;
}
.img-desc cite {
   background: #111;
   filter:alpha(opacity=55);
   opacity:.55;
   color: #fff;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 400px;
   padding: 10px;
   border-top: 1px solid #999;
}

A képeket acs.com-tól loptam.

Nem akarom bő lére ereszteni a bemutatását, mert ezt egyszerűen ki kell próbálni. A weboldal teljesen díjmentesen generál egész kis korrekt jelentést arról, hogy mennyire jól van optimalizálva keresőmotorok szempontjából. Össze is hasonlíthatod a saját oldalad akár egy versenytársadéval is – rendkívül kellemes érzés, mikor magasabb számot kapsz :)

Be kell írni az oldalad címét, mint pl. lemmikki.hu, dolgozik egy kicsit, majd kiadja a véleményét. Tanúlságos.

A riportnak két fő része van: technikailag és népszerűségileg is elemzi. A technikai részben megnézi, hogy mennyire kezeled jól az oldalcímeket, a címsorokat, az alt tagokat. 

Eztán megnézi, hogy a Google vajon hogyan érzékeli az oldalt: összesen hány oldalt indexel, mi a PageRank-je, mikor indexelte utoljára, és hogy hány weboldalon van link a te oldaladra. Na ez az egyik legfontosabb tényező, rendkívüli módon befolyásolja a Google találati listájában elért helyezésed. Ha egyébként minden rendben van a házad táján, mégsem úgy talál meg a Google, ahogy szeretnéd, akkor hajrá, linképítésre fel!

A WebsiteGrader aztán megnézi, hogy van-e blog (vagy valami olyasmi) az oldaladon, és elemzi azt is. Megnézi aztán, hogy a népszerű könyvjelzőtároló oldalakon hányan linkelnek rád. A del.icio.us általában szebb találatokat mutat, mint a Digg.

A végefelé jön az egyik legjobb része, ahol elemzi, hogy szerinte mik az oldalad kulcsszavai. Na ezt nézd meg jól. Ha nem azokat hozza fel, amiket te szeretnél, akkor ideje átírni a szövegeidet. Az enyémek a blog, internet és css… hát… lehetne jobb is, más is. De a lényeget megfogja. 

És amire büszke vagyok: a lemmikki.hu 88 pontot kapott a 100-ból.

A te értékelésed mennyi lett? Kíváncsi vagyok, tényleg.

Mert nincs rá pénz, ingyen kellne, de azért jó legyen. Segítek benne, hogy lehet megoldani. Internet sajnos kell hozzá, de a szerencsésebbeknek van olyan munkahelye, ahol megoldható.

Szóval először kell egy tárhely. Ha nem szeretnénk rá pénzt szánni, akkor keressünk egy ingyen tárhely szolgáltatót, ezek közül is szerintem a legtöbb iszonyat gagyi, telenyomják popup és frame reklámmal. Nem kell ez nekünk. Ötvözzük a kellemeset a hasznossal, és regisztráljunk a Wordpress.com oldalon.

Weboldalt egyébként is az egyik legegyszerűbb és kényelmesebb Wordpress-szel építeni, itt meg már előre fel van telepítve. Kell-e ennél jobb? Kezdetnek semmiképp.

Szóval akkor regisztráljunk. Ez nem egy bonyolult dolog. Ha kész, akkor pedig készítsünk egy “blogot”. Ki lehet választani a magyar nyelvet a profilnál, de egész sok dolog még angolul fog megjelenni. Így például a Register a blog link is. Nem baj, nyomjuk meg.

Meg kell adni az oldal nevét, címét, és nyelvét. És lényegében kész is. Elkészült az oldalad, melyet a http://oldaladneve.wordpress.com/ címen tudsz megtekinteni. Az én próbaoldalam a http://ingyendemo.wordpress.com/ lett. Alapbeállításból így néz ki:

Most akkor ideje testre szabni a kinézetet. És nem feltétlenül kell a dizájnnal bajlódni. Egyszerűen keresünk valami nekünk való témát, melyet a Kinézet menüpontban találunk meg. Sajnos ide saját témát nem tölthetünk fel, de jó hír, hogy a meglévő téma css-ét módosíthatjuk. Ám ez maradjon máskorra. Én a Garland nevű témát választottam, de van itt szép kínálat, nagyjából mindenki stílusának megfelelő.

Ha megvan a nekünk tetsző kinézet, akkor már csak a tartalmat kell feltöltenünk. Két csoport közül válaszhatunk. Vannak a bejegyzések, melyek a főoldalon jelennek meg hírszerű formában, és vannak az oldalak, melyeket Page-nek nevez a Wordpress. A Page-ek különálló oldalak, az általam válaszott témában bal szélső sávban és fent jobb sarokban jelennek meg. Ide érdemes önállóan is megálló tartalmakat tenni, kapcsolat oldalt létrehozni, stb.

És nézzük az eredményt:

Nem a legtökéletesebb, de kiinduló alapnak megállja a helyét. Úgyis az lesz a fontos, ami az oldalon van, és ahogyan az fent van. A többi már csak néhány apróság kérdése…

Absolute Background Textures Archive
Az oldalon majd’ 6000 féle minta közül válogathatunk. Ne riasszon el a mennyiség, színek szerint lehet keresni, illetve vannak különféle beépített generátorok is. Egy próbát mindenképp megér, bár kicsit 90-es évek szaga van.

Amazing Textures
Itt már kevesebb minta van, de a minősége annál jobb. Vállalkozó kedvűeknek ajánlott.

Amurai Shizoo
Kellemes, modern minták. Stílusonként vannak csoportosítva és tölthetőek le. Egyetlen hátránya, hogy nincs előnézet belőlük, csak a letöltéssel láthatóak rendesen a minták.

Auto FX Software
Szép válogatás, sokfajta stílus, fotószerű megvalósítás. A letöltéshez be kell regisztrálni, mely egyébként díjmentes. És hát ilyesmikre jó a 10 perces email.

Background City
Ezen az oldalon két módon kereshetünk a hátterek között, stílus szerint csoportosítva és témaszerűen.

Bravenet
Itt is majdnem 1000 hátteret találunk. Keresni nem tudunk, de előnézeti kép van.

CG Textures
Fényképekből összeszedett válogatás, sok-sok képpel, érdekes kategóriákkal. Szintén vállalkozó kedvűeknek ajánlom.

Citrus Moon Patterns
Lányok és romantikus kedvűek biztos találnak itt nekik való hátteret. Szín szerint kereshetünk. A minták többsége engem régi kanapéhuzatra emlékeztet.

ColourLovers
Korábban már írtam az oldalról. Nem is olyan rég bevezették azt a funkciót, ahogy a megadott színekből mintákat lehet varázsolni, és igen kellemes sablonjaik vannak. Innentől kezdve mindenkinek csak a fantáziája szab határt. Nyomás a Patterns -> Create szekcióba! Ajánlott.

DinPattern
A kedvencem. Nem túl sok, de annál szebb minták, kiváló minőségben. Több stílus is megtalálható.

De Web
Minőségi rozsdák, falak, fa felületek, graffitik. Egyszer ide is be kell nézni.

Everyday Icons
Flash alapú, lassan töltődő, de ötletes megoldás. Játékos hátterek, és garantált 1-2 perc szórakozás madárcsicsergéssel.

Go Media – Arsenal
Ha vízfestékszerű hátteret keresel, akkor itt megtalálhatod. Bár összesen csak négy db van, de kiindulási alapnak ez is tökéletes.

Grunge Textures
Az oldal neve nagyjából elmondja, mit találunk itt. Szintén fotógyűjteményről van szó, graffitik, falak, sírkövek(!), szemét és rozsda stílusból is válogathatunk.

Kollermedia
Sógorok oldala modern stílusban aprómintától a fotószerűig. Előnézet is van, így nem kell letöltögetni a mintákat.

Milleseicentopercento
Kimondthatatlan név, nem is túl nagy választék, de érdemes megnézni.

RepeatXY
Szintén sokat mond az oldal neve. Szép hátterek vannak, és nem csak letölteni lehet őket, hanem szerkeszteni is kedvünk szerint. Szín szerint kereshetünk.

Squidfingers
A DinPatternhez tudnám hasonlítani, csak nagyobb választékkal. A szokatlant keresőknek ajánlom.

TextureKing
Szintén beszélő név. Stock fotó szerű oldal, ahol sok fénykép jelenik meg egyszerűen kategorizálva. 337 mintával fut jelenleg.

Urban Dirty
Lázadó városiaknak, emosoknak :) Falfirkák, koszos falak, repedések és barátaik.

Vecteezy
Vektorosan rajzolt, nagyszerű minták. Zina szereti.

Hack a stíluslapon belül

Bár a legjobban használható technika az ún. Conditional Comments, ez sajnos csak a HTML fájlokban használható, a stíluslapon belül nem. Sokan szeretik tisztán tartani a HTML forrást, ílyenkor a stíluslapon belül kell elkövetnünk néhány “csalást”.


.iehackpelda1 {
background-color:#b4c842;
padding: 2px !important; /* Firefox/Safari */
padding: 10px; /* IE6 */
}
 


Itt a példa szöveg. Most nézd meg IE6-tal. Lepődj meg :)

A fenti esetben minden böngésző 2 pixelt fog tenni a szöveg köré, az IE6 pedig tizet. Tegyük az !important szót a pontosvessző elé, majd adjuk meg még egyszer ugyanazt a tagot, az már csak az IE-nek fog szólni.


.iehackpelda2 {
color:green; /* Zöld szöveg */
}
html>body .iehackpelda2 {
color:red; /* Piros szöveg, de ezt az IE6 nem látja, zöldnek mutatja */
}
 


Itt a példa szöveg. Piros. Most nézd meg IE6-tal. Zöld :)

Itt egyszerűen annyit csináltunk, hogy annak a stílusnak, amelyiket nem az IE6-nak szánjuk, elé teszünk egy olyat, hogy html>body. Pont fordított logikával, mint kellene, de ez is működik.

Hack a HTML oldalból

Ha sok olyan formázási elem van, melyet hackelni kell, mert egyszerűen sz@r az IE6 (hála égnek az IE5-tel már nem nagyon kell foglalkozni), vagy egyszerűen elegánsak szeretnénk lenni, akkor készítünk egy külön lapot az IE-nek. A HTML head részébe ültetjük be azt a részt, ami minden egyéb böngészőben a normál stíluslapot hívja meg, IE esetén pedig a neki szántat. Így:


<head>
   <title>ZINA LEMMIKKI</title>
   <link rel="stylesheet" type="text/css" href="styles.css" />
 
   <!--[if IE]>
   <link href="all_IE.css" rel="stylesheet" type="text/css" />
   <![endif]-->
 
   </title>
</head>
 


A kiemelt rész mutatja, hogy kell meghívni az IE böngészőknek szánt stíluslapot. Ha nem az összes IE böngészőben gondolkodunk, akkor lehet specializálni:

<!–[if IE 5.5]>
<![endif]–>

<!–[if IE 6]>
<![endif]–>

<!–[if IE 7]>
<![endif]–>

Kellemes IE vadászatot!

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!

10. Ha netalán tán háttérzene van az oldaladon, akkor azt legalább úgy csináld meg, hogy a látogató kikapcsolhassa azt, de JOBBAN TESZED, ha úgy csinálod meg, hogy a zene ne induljon el automatikusan. Nagyon sokan munkahelyről neteznek, és igen ciki, amikor hirtelen valami langyi zene megszólal, és a főnök bámulja kedves beosztottját, hogy mi lehet a gond. Ne okozzunk senkinek ilyen kellemetlen élményt. 

11. A szöveg alapú navigáció jobb, mint ha képekre írjuk az adott menüpont szövegét. CSS-sel már nagyon szépen meg lehet oldani a szöveg alapú navigációt is, gyorsabb is, mint ha minden menüpontnál meg kell várni, míg betölti az ún. hover képet. Persze használhatunk képeket (háttér, listakép stb.), de okosan tegyük. A dizájn inkább a tartalom jó elhelyezéséről szóljon, mint hogy telepakolgassuk képekkel az oldalt.

12. Inkább legyen egy jól struktúrált oldaltérképed, mint hogy extra bonyolult több szintű lenyíló menüket használj. Azok sosem működnek igazán jól. (Tisztelet a kivéltelnek. Nagyon ritka.) Ezek a több szintű bonyolult menük inkább azt mutatják, hogy aki kidolgozta az oldal felépítését, az nem is dolgozott vele igazán. 

13. Ha az oldaladnak szüksége van kereső funkcióra, akkor nyugodtan előről kezdheted, és visszaolvashatod az előző pontot. Az az oka. A keresők hasznosak, ez tény, és néhány oldalon igen fontos szerepet játszik, de ha egy átlag oldalon a látogató csak ezzel találja meg, amit akart, akkor az azt mutatja, hogy nem jó az oldal struktúrája. Ha logikusan van felépítve a navigáció, akkor (ha ott is van az opció, mint nálam), nem fogják használni a keresőt. Hagyjuk meg azért a lehetőséget azoknak, akik mélyen bele akarnak menni a jó sok tartalom mélyébe.

14. Mennyi idő alatt töltődik be az oldalad? Még ha gyors kábele vagy DSL-e van a látogatónak, akkor is lehet türelmetlen, mert hozzászokott a gyors betöltéshez. A kezdőoldaladat ne bonyolítsd túlságosan, ne pakold tele felesleges elemekkel, alkalmazásokkal. Azok csak növelik a betöltés idejét. 

15. Nyilvánvaló dolog, de sok (köhöm) dizájnernek mégsem: ne rejtsük el a cél felé vezető utat! Mire gondolok? A kezdőoldalon jelenjen meg minden olyan információ, amivel a látogatót el tudjuk oda juttatni, ahol neki is és nekünk is jó. Ha vannak kiemelt funkcióink, mint a hírlevélre feliratkozás, az online rendelés, a szállásfoglalás, akkor azt tegyük a látogató orra elé, hadd lássa, és érje el akár 1-2 másodpercen belül. 

16. Ha van videó is az oldaladon, attól nem kell megkérdezned a felhasználót, hogy milyen sávszélessége van, és hogy milyen formában szeretné azt letölteni/megtekinteni. Real Player, 100K, Windows Media Player, Quicktime, WMV, 300K, AVI, Kábel, DSL, Modemes? NEM KELL, KÖSZI! Adj neki Flash videót. (Igen, flash. Erre pl. tökéletes :)) Számtalan videó megosztó van már a youtubetól kezdve a neten, ahová a legtöbb formátumú fájlt fel lehet tölteni, és azt meg tudja nézni bárki. 

17. Ha kis képeid vannak, amik lényegében linkek, akkor legalább valahová köré írd ki, hogy az hová visz. Ha a látogató csak akkor találja ki, hogy az egy link, ha felé viszi az egeret, akkor nem nagy az esélye, hogy azt gyorsan meg is találja. Csalódik egyet és megnyomja a VISSZA gombot. 

Talán most ennyi. Hirtelen felindulásból. :) Úgy összességében, ami engem legjobban idegesít, ha valaki úgy tervez és épít weboldalt, hogy meg akarja mutatni, mit tud, és beveti az összes létező technikát, amit csak ismer. Kezdve a flash, java, ajax alkalmazásoktól… Nem kell bizonyítanod minden áron. Csak akkor vesd be ezeket az eszközöket, ha az általa létrehozott vagy segített opció üzleti előnyt jelent. NEM MAGAMUTOGATÁS. Üzleti előny. Pont.

1. SOHA ne méretezd át a látogató böngésző ablakát! SOHA. Igen, tudom, hogy meg tudod csinálni, és menőnek érzed magad, hogy a te kívánságod szerint alakul a böngésző ablak mérete. De tényleg NE csináld. Ez csak a spammel teli oldalakra jellemző, ne próbáld meg követni.

2. Ha az weblap splash oldallal kezdődik, majd onnan a BELÉPÉS gombra kattinva egy új ablakban nyílik meg a tényleges oldal: VESZTETTÉL. Kezdd előről. Elveszíted a látogatók türelmét, ami egyébként sincs. Nekik információ kell. Azonnal. Nem érdekel, hogy milyen hiperszuper flash animációt tudtál csinálni a neten található tutorialokból. Egyszerűen nem értem, hogy egyes flash programozók miért gondolják úgy, hogy alkotásukat csak új ablakban lehet megmutatni, az eredetiben nem… hátha még jól le is tiltja őket a pop-up blocker.

3. Megkérdezi az oldalad a látogatót, hogy flash vagy HTML verziót szeretne-e látni? Megkérdezi, milyen sávszélessége van. Megint VESZTETTÉL. A boltod ajtajára kitennéd a táblát, hogy a csicsás vagy a lepukkant felébe szeretne-e bemenni? Vagy megkérdezed, várna-e 30 másodpercet, mielőtt bemehet? Szerintem egyértelmű a válasz.

4. Csak flash az oldalad? Akkor rúgd ki a webfejlesztőt (vagy ha te voltál az, nézz magadba, és tedd ki a portfoliódba a “Hasznontalan weblapok, amit csináltam” közé), és kezdd előről. A flash eszköz, nem cél. Szép játékokat, videókat, animációkat lehet vele csinálni, de csakis akkor vedd elő, ha tényleg kell. Legyen funkciója! És ez NEM AZT JELENTI, hogy az egész oldalt flashből kell összerakni. Nem nem. Az Adobe (aki gyártotta a Flash-t), csak flashből rakta össze a weboldalát? Szerinted mi az oka? Ők pénzt szeretnének keresni, és nem hallgatnak a dizájnereikre :D

5. Ne akard újra feltalálni a navigációt. Tedd az oldal tetejére, bal oldalra. Vagy a jobbra. De ennyi. Megtalálják, és eljutnak oda, ahová akarnak. Ha nincs a megszokott helyén, a látogatók összezavarodnak, és rögtön kattintanak a VISSZA gombra.

6. Ne keverd össze a nyomtatott és a webdizájnt. Ha a weboldalunkat nyomtatott hirdetéssé szeretnénk alakítani, az olyan, mint ha összehasonlítanánk egy autóhirdetés plakátját magával az autóversenyzéssel. Köze nincs egymáshoz. A nyomtatott hirdetésekkel, plakátokkal nem lehet árut vásárolni, nem lehet vele kommunikálni, mert az csak egy kép. Egy weboldal nem csak egy kép. Teljesen máshogy kell hozzáállni. Nem akarok több plakátot látni a neten.

7. Ha nincs elegendő tartalom, vagy egyáltalán SZÖVEG (nem, a képekbe írt betűk itt nem játszanak), vagy annak a legkisebb jele, akkor tessék kirúgni a dizájnert és felfogadni egy cikkírót! A tartalom a legfontosabb. Ismétlem, A TARTALOM A LEGFONTOSABB! A keresőoldalak sem a csilli-villi flash animációidat nézik, hanem a szöveget. Ha te nem tudsz rendesen írni, akkor kérj meg rá valakit.

8. Megnézted, hogy az oldalad hogy néz ki Firefoxban? Ma már nem csak az IE-nek áll a világ. Általában a Firefoxot használók a látogatók 30-40%-át teszik ki, de bizonyos oldalakon (pl. az enyémen) 70% felett van. Ha Firefoxban nem működik normálisan az oldalad, akkor ott valami nagyon el lett rontva a háttérben, és annak, aki azt csinálta, nem sok köze van a webszerkesztéshez. Tessék újra átgondolni!

9. Néhány apróság, amit sokan már elfelejtettek, de azért még van. Ne legyen: villogó betűk, animációk; pop-upok; jobbra-balra mozgó szövegek és felejtsd el a Frontpage-et. Meg a flash intrókat is.Ha a termékednek vagy a szolgáltatásodnak flash intróra van szüksége, akkor talán a termékkel van baj…

Egyelőre ennyi. Nem vagyok még túl ideges.

Google Képkereső

Google Képkeresője talán a legismertebb és leghasználtabb. Gyorsan keres, és több ezer találatot ad. Engem mondjuk egy kicsit zavar, hogy a képekre kattintva nem azt hozza fel nagyban, hanem a forrás oldalát, a fejlécben pedig a megtalált képet. Keresőjében ugyanakkor van lehetőség különböző szűrésekre, pl. méret szerint, fájltípus szerint (JPG, GIF, BMP, PNG) vagy akár szűkíthetjük színesre és fekete fehérre is. Új funkcióként megjelenik az arckeresés, melyet ha bejelölünk, akkor emberi arcokat fog kihozni találatként. Itt pl. azokra a nagy méretű arcképekre kerestem, melyek JPG formátumúak, fekete-fehérek (szürkeárnyalatúak), keresőszó pedig a Zina volt (én nem vagyok benne :P)

Yahoo! Image Search

A Yahoo képkeresője a Google-éhoz hasonlóan szintén a frame-es megoldást használja, mikor a találatként megjelenített képre kattintunk. Lehetőséget ad arra, hogy egy ismerősünknek elküldjük a képet emailben (Mail to Friend). Itt is van lehetőség méret, ill. szín szerinti keresésre. Kedves funkció, hogy méretből ki lehet választani a Wallpaper-t is, mellyek akkora méretű képeket hoz találatnak, mint a legtöbb monitor (bár nem tudom mikor láttam utoljára 640*480 felbontásút :)

Ask Images

Az Ask képkeresője kedvesen segít a keresésben, ahogy a szót írjuk be, különböző ajánlatokat ad nekünk. Ha megvannak a találatok, akkor javasol még néhány hasonló témakört is, ha inkább szélesebb vagy szűkebb skálán szeretnénk keresni. Egyes kereséseket kiegészít Wikipedia idézetekkel, Youtube videókkal is.

MSN Live Image Search

Szép felülettel mutatkozik be, a találatokat stílusosan jeleníti meg. Van ún. Scratchpad funkciója, ahová a kedvenc találatainkat be tudjuk húzni. Szem előtt vannak a keresési opciók finomítására alkalmas lehetőségek, mint a méret (itt a desktop a legjobb, a saját képernyőnk felbontásához keres , a tájolás, a szín. Kereshetünk a fotók és az illusztrációk között külön is. Itt is van beépített arckereső, ha híres emberre keresünk, akkor megjeleníti a lehetőséget, hogy hasonló emberek képeit is megnézhessük. Talán a legjobban témába illő képeket találja meg. És fontos, nem rejti el a találatokat, ha rákattintok egy képre, ott maradnak bal oldalon.

Picsearch

A PicSearch ezt mondja magáról, hogy több, mint 2 milliárd képet indexál. A találtatokat a Google keresőjéhez hasonlatosan frame-ként mutatja meg az eredeti forrás oldallal együtt. Néha igen érdekes találatokat ad ki. Beállításai közt van egy opció az animációk keresésére, maximum ezzel tűnik ki az oldal.

Exalead Image Search Engine

Az oldalon módosíthatjuk a hátteret fehérre vagy feketére. Kereshetünk kicsi és közepes méterű képeket, szintén van arcszűrő, egész jól vizsgázott egy kutyafajta nevére keresve. Itt is van lehetőség a fekete-fehér képek keresésére. Itt van link közvetlenül a képre, nem csak a weboldalra, ahonnan jön.

Flickr

Nem klasszikus képkereső, hanem drága embertársaink által feltöltött képeket találhatjuk itt. Mivel sokan szeretnék megmutatni magukat és tehetségüket a világnak, ezért találhatunk itt jó képeket. Fontos tudni, hogy sok kép copyright-os. A keresési találatokat nézhetjük részletezve vagy kis indexképeken. A keresést rendezhetjük a keresőszóhot legjobban illeszkedő sorrendben, a legújabbak és a legérdekesebbek szerint rendezve.

Photobucket

A Flickr mintájára készült magánképeket tartalmazó közösségi oldal, itt is sok szép képet találhatunk. Akár mi is feltölthetjük ide képeinket, amit a weblapunkon használni szeretnénk, és innen belinkelhetjük az oldalunkra, így a nagy képeknél sok tárhelyet megspórolhatunk.

Getty Images

Igen jó minőségű képeket találhatunk itt, amelyeket más kereső nem indexál. Magazinokban, újságokban látott szép képeket szedhetünk le innen. Regisztráció után ingyenesen lementhetőek egyes képek, de ha kell nagyobban, van lehetőség őket megvenni. Kereshetünk itt is fekvő és álló képeket.

Figyelem!
A képkeresők ugyan segítenek megtalálni az általunk áhított képet, de figyeljünk arra, mire használhatjuk fel. Ha copyrighttal védett, vagy magán felhasználású képről van szó, akkor nem kezelhetjük sajátként.

A következetes felépítés profizmusra vall. A következetlenség hasonló, mint a helyesírási hibák egy esszében. A minőség rovására mennek. Teljesen mindegy, hogy melyik stílust, milyen dizájnt választottunk, ha szem előtt tartjuk ezt az elvet, ott leszünk a szeren. Még ha nem is olyan jó a dizájn. Legalább legyen következetes :)

Az elv betartásának legegyszerűbb módja, ha a tervezés korai szakaszában kitalálunk valamit, és ahhoz végig tartjuk magunkat. Egy nagyobb oldal összerakása közben persze változhat néhány elem, de ilyenkor is érdemes visszamenni az elejére, és azokat hozzáigazítani az időközben megváltoztatott oldalakhoz, hogy a lehető legtökéletesebben egyezzenek.

Sokat segíthet ebben a folyamatban, ha a CSS stíluslapunkban már az elején rögzítünk néhány alap elemet, pl. a

vagy

tagokat. Mivel ezeknek nincs külön neve, így a hosszú folyamat során sem lesz nehéz előkeresni őket és hozzá igazítani a többit.

]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-9/feed/ 3 http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-8/ http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-8/#comments Tue, 26 Aug 2008 06:30:38 +0000 Zina http://lemmikki.hu/?p=216 Az élesség igen fontos kelléke a szép webdizájnnak. És hogy mik teszik élessé a képet? A pixelek.

A CSS-ben minden pixel a helyén lesz, tökéletes helyen. Ami miatt aggódni kell, az már inkább a Photoshop és az abból kijövő képelemek. Hogy a lehető legélesebb maradjon a dizájn, az alábbi szempontok a legfontosabbak:

• Az alakzatok széleit nézd meg közelről, így látod, mennyire illeszkednek a pixelek széléhez. Ha kicsit el vannak mosódva, akkor azt kézileg kell javítani. Értendő ez az alakzatok mellett még a vonalakra és dobozokra is.
• Figyelj arra, hogy a szöveg, amit a Photoshoppal készítesz, az a megfelelő “simító” eljárással készült-e. Értem ez alatt a szöveg beállítások alatt kiválasztható “None“, “Sharp“, “Crisp“, “Strong” és “Smooth” opciókat. Ezek különböző mértékben simítják a szöveget a háttérhez. Kicsi ill. halványabb betűknél pl. a legoptimálisabb a “Sharp”, azaz éles eljárás.
• Figyelj a kontrasztra, főleg az éleknél, ott a lehető legmagasabb legyen.
• Jól jöhet, ha a szegélyeknél egy kicsit feljebb nyomod a kontrasztot.

]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-8/feed/ 0 http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-7/ http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-7/#comments Mon, 25 Aug 2008 06:00:44 +0000 Zina http://lemmikki.hu/?p=199 Csakúgy, mint a nyomtatott formában, a webes megjelenésben is igen fontos, hogy a dolgok szépen rendezettek legyenek. Persze nem azt mondom, hogy legyen minden egy vonalban, de igenis legyenek a dolgok következetesen elhelyezve az oldalon. A szépen beigazított dizájn rendezettséget és kezelhetőséget tükröz.

Ha lehet, akkor készíts egy rácsos hálót (Photoshopban igen egyszerűen ezek behúzgálhatók), és építsd ahhoz a többi elemet. Angolul tudóknak találtam néhány jó forrást a témában.

• Designing With Grid-Based Approach – itt nagyon jó példák vannak, illetve a folyamat is szemléltetve.
• Design By Grid – ők pedig egy egész weboldalt szántak a rácshoz épített dizájnnak.

]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-7/feed/ 0 http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-6/ http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-6/#comments Fri, 22 Aug 2008 11:35:42 +0000 Zina http://lemmikki.hu/?p=166 A webdizájn nem csak a szép képekről szól. Annyi információ van, és annyi kommunikáció zajlik egy-egy weboldalon (jobb esetben), amire figyelni kell. Dizájnerként ezt kell elősegíteni.

Kövessük a sztenderdeket

Az emberek elvárnak dolgokat, és jó, ha nem mondunk nekik ellen. Legjobb példa: az aláhúzott szövegről mit gondolunk? Hogy az egy link. Ha nem link, akkor zavart okozhat. Nem követendő példa. Persze itt is vannak szabályok, amiket áthághatunk, de az oldal legnagyobb része csinálja azt, amit várnak tőle a látogatók!

Gondoljunk bele, mit fog csinálni a látogató

Mikor elkészítjük a dizájnt, készítsünk egy teszt oldalt, mielőtt belefognánk a nagy munkába. A kipróbálás során előjönnek azok az apróságok, amik egyébként igen sokat számítanak. Példa: ha olyan funkciónk van, ami nem azt csinálja, amit általában a hasonlóak szoktak, az akár a visszájára is fordulhat. Biztos nem kevesünknél fordult elő az is, hogy rutinszerűen rányomtunk az OK gombra, és csak utána fogtuk fel, hogy a kérdés az volt: “Biztosan ki akar lépni?”

A felhasználói funkciók fontossága

Mit fog csinálni a felhasználó, amikor az oldalunkra jön? Csináljunk erről egy listát, hogy mik lehetnek a lehetséges utak, amit végigjár, vagy éppen mi az, ami miatt ezen végigmegy. Ez a lista igen sokat fog segíteni nekünk, mert megadja a kezdőoldalunkra leginkább illő felhívásokat, pl. Vásárolj most!, Nézd meg hogyan készül! stb. És most itt legyen ott a fejekben: a webdizájn eszköz. A felhasználónak is. És ők nem szeretik, ha nem megy valami azonnal.

]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-6/feed/ 0 http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-5/ http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-5/#comments Thu, 14 Aug 2008 19:00:36 +0000 Zina http://lemmikki.hu/?p=149 A szöveg a dizájn egyik legáltalánosabb eleme, feltűnik mindenhol, így nagy gondot kell rá fordítani. Az alábbi jótanácsokat érdemes megfontolni ezzel kapcsolatban:

Betűtípus

A különböző betűtípusok más és más dizájnhoz illenek. Egyesek modernek, míg mások retrósak. Fontos, hogy a legodaillőbb fontot találjuk meg a dizájnhoz. Ami furcsának tűnhet a webes világban: általában a talpas (serif) betűket jobb és kényelmesebb olvasni. A weben pedig pont a talpatlan, azaz sans-serif betűk a jobbak. A képernyő tulajdonságai miatt.

Betűméret

Nem is olyan régen trendi volt a pici betűkkel írt szöveg. Manapság azért már egyre többen ismerik fel, hogy a szöveget nem nézni kellene a látogatónak, hanem olvasni. Az ún. web 2.0 egyik legnagyobb divatja a nagy betű. Ami fontos: olvasható nagyságú legyen a szöveg, de maradjon meg a címsorok kiemelése nagyobb betűvel.

Sorköz

Korábban megtárgyaltuk már, de legyen itt még egyszer: a sorok közötti távolság erősen befolyásolja annak olvashatóságát, és figyelni kell, hogy a szöveg és a körülötte lévő objektumok között is legyen elegendő hely. A betűk közötti távolság webes szempontból kevésbé fontos, persze annak ritkításával helyes címsorokat generálhatunk.

Sorok hossza

Erre nincs szabály, de köztudott, hogy minél rövidebbek a sorok, annál gyorsabban olvasható. A hosszú sorokon elveszhet a szem, fárasztóbb. Érdemes keskenyebb oszlopokban gondolkodni (mint pl. a napilapokban is van).

Szín

Én szeretem, ha a szöveg nem fehér alapon fekete, kicsit lejjebb veszem a kontrasztot. Túlzásba természetesen itt sem szabad esni.

Bekezdések

Én szeretem nagyon a sorkizárt szöveget, szép egységet alkot. Persze ott a hátrány, hogy a szóközöket esetenként csúnyán elnyújtja. Okosabbaknak (és kevésbé elvetemülteknek) inkább a balra zárt szöveget javaslom a kellemesebb olvashatóság végett.

]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-5/feed/ 0 http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-4/ http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-4/#comments Thu, 14 Aug 2008 06:30:31 +0000 Zina http://lemmikki.hu/?p=58 Mióta a a dizájnerek áttértek a CSS-sel való építkezésre, hála égnek, kicsit könnyebb lett az élet. Ennek ellenére vannak dolgok, amit figyelembe kell venni még akkor, amikor az oldalt a Photoshopban építgetjük.

Például:

Meg lehet-e csinálni?

Kiválasztottunk egy nagyon szép betűtípust, de vajon közte van-e a HTML-ben használtak közt? Mindenki látni fogja-e azt a típust? Még a leggyakoribbaknál is az alábbi módon érdemes a betűtípust megadni:

 
body {font-family: Verdana, Arial, Sans-Serif;}
 


Ha van Verdana betű a gépén, azzal fog látszani. Ha nem, akkor Arial-lal. Ha netalántán az sincsen, akkor az alapértelmezett Sans-Serif típussal fog megjelenni.

Figyelni kell arra is, hogy bár gyönyörűnek tűnhet az 1100px széles dizájn, az viszonylag sok látogatóknál kilóg a képből, és vízszintesen is görgetniük kell majd a képernyőt. Fontos tudni, mit tudunk megcsinálni és mit nem.

Mi történik, ha a böngésző ablakot átméretezik?

Ismétlődő hátterünk lesz? Hogyan fognak azok működni? Középre van igazítva vagy balra?

Vágjunk-e bele technikailag bonyolult dolgokba?

Még a CSS-ben is adódnak nehézségek, pl. a pozícionálás, ott is leginkább a függőleges igazítás. Nehézkes, bonyolult, így jobb azt kihagyni.

Az apró változtatások megkönnyíthetik az építő munkánkat?

Ha egy objektumot különböző helyekre téve próbálkozunk annak elhelyezésével, gondoljunk arra is, hogy azt később hogy kell majd lekódolnunk a CSS-ben. Pl.: Ha egyes elemek keresztezik egymást, már egy fokkal nehezebb dolgunk lesz. Meg kell találni az egyensúlyt a szép dizájn és a kódolás között. Erre is gondoljunk, amikor elhelyezzünk a Photoshopban az elemeket.

Hogyan egyszerűsítsük meg a dolgunkat, különösen a nagy oldalaknál?

Régebben az oldalaimhoz még én is csináltam kép alapú gombokat. Ha például volt egy letöltés gomb, akkor csináltam neki egy kis ikont, és azt szúrtam be a megfelelő helyekre. Mostanában, ha már ilyesmiről van szó, akkor CSS-ben elkészítem a gombot, aztán onnantól kezdve nem is foglalkozom vele. Lehet, nem olyan rugalmas így csinálni, de nem kis időt meg lehet vele spórolni.


.letoltes {
   background: url(images/download.png) no-repeat left;
   width:50px;
   height:50px;
   display:block;
}
 
<a class="letoltes" href="trapt.mp3"></a>
 


]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-4/feed/ 1 http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-3/ http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-3/#comments Tue, 12 Aug 2008 22:00:21 +0000 Zina http://lemmikki.hu/?p=43 Szerintem az egyik legrosszabb élmény, ha épp netezek, ha nem tudom, merre menjek tovább, avagy azt sem tudom, merre járok. Ez a téma pedig az egyik legelemibb: minden dizájnernek tisztában kell lennie vele. Néha sajnos még mindig megjelennek olyan lapok, amelyet fel lehet hozni rossz példának. Nem bonyolult pedig: csupán két szempontot kellene szem előtt tartani:

Navigáció – Hogyan menjünk tovább?

Néhány köztudott szabály: a gombok úgy legyenek elhelyezve, hogy azt akkor is egyszerűen megtalálja a látogató, ha éppen az oldal alján nézelődik – tegyük az oldal teteje környékére, mert ott könnyű megtalálni. Ha már gombokról beszélünk: nézzenek is ki gombnak, a szövegek legyenek egyértelműek. Ha elolvasom a gomb szövegét, tudjam egyből, hová fogok jutni.
Másik nagyon fontos: HASZNÁLHATÓ legyen! A kedvenceim a legördülő menük, ahol még ráadásul van hat almenü… mire eljutok a cél linkig, lehet hatszor újra kell próbálnom, mert ha leszaladok véletlenül a menüről, az visszazáródik… Ha már ilyen menünk van, akkor úgy kell megcsinálni, hogy ne tűnjön el, és megváltoztatni a színét annak, amelyik felett vagyok.

Eligazítás – Hol vagyok?

Több módja is van, hogy tudassuk a látogatóval, hol is van éppen. Látszódjon esetleg a fejlécből, hová érkeztem, vagy az összetettebb oldalaknál érdemes “breadcrumb”-ot csinálni, alcímeket létrehozni, avagy hasznos lehet egy oldaltérkép is, ha emberünk mégis csak eltévedne.

]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-3/feed/ 0 http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-2/ http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-2/#comments Tue, 12 Aug 2008 08:20:50 +0000 Zina http://lemmikki.hu/?p=41 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

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.

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…

]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-2/feed/ 3 http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-1/ http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-1/#comments Mon, 11 Aug 2008 18:08:25 +0000 Zina http://lemmikki.hu/9-alapelv-a-jo-webdizajnhoz-part-1/ Vezessük a szemet…

A webdizájn az információról szól. Egyszerű navigáció kell, ami végigvezeti a látogató szemét az oldalon.

Ha megnézzük a legtöbb weboldalt, az első dolog, amit meglátunk, az a logo. Általában a bal felső sarokba teszik, mert tanulmányok szerint az az első hely, amit megnéznek a látogatók. Szép példa, kövessük, mert így egyből tudni lehet, hová is látogatott az emberünk.

Menjünk tovább. Lépésről lépésre vezessük a szemet. Pl.: A logóról menjen a szeme a jelmondatra, ami pedig egy szép kép mellett van (ami megadja az oldalunk személyigését is akár), majd térjen át a tartalomra, a megjelenített szövegre, és legyen ott helyben, de kevesebb hangsúllyal a navigáció (oldalsávban, vízszintes navbar-ban).

Hogy mit lát a felhasználó, az már a dizájner dolga.

És mik az eszközök mindehhez?

• Pozicionálás – Hogy hová tesszük a tartalmat, nagyban befolyásolja, hogy a látogató azt milyen sorrendben nézi meg.
• Szín – Erősebb (feltűnőbb) színekkel írt félkövér betűkkel nagyban befolyásolhatjuk, hogy látogatónk hová nézzen.
• Kontraszt - Ha valami elüt a többitől, egyértelmű, hogy arra előbb irányul emberünk figyelme
• Méret – Nagyobb dolgokat egyszerűbb észrevenni (természetesen addig, amíg nem minden nagy)
• Dizájn elemek – képzelj csak el egy jó nagy nyilat, ami valahová mutat. Szerinted milyen hamar irányul oda a figyelem?

]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-1/feed/ 0 http://lemmikki.hu/design/szinkavalkad/ http://lemmikki.hu/design/szinkavalkad/#comments Thu, 10 Jul 2008 10:49:09 +0000 Zina http://lemmikki.hu/szinkavalkad/ Igen, volt egy nagy szünet. Remélem, ezennel ennek vége. Épp lakásvásárlás, lakberendezés, költözködés közepén vagyok, és ezeddig minden gondolatomat az foglalta le, hogy és mint fogom kicsinosítani a lakást. Tervezgetem a színeket, a formákat… épp ebből jött az ötlet, hogy ezt kivetítsük a webtervezésre is.

Maradjunk a színeknél. Első lépésben.

Color by COLOURlovers

Ugye amikor elkezdünk tervezgetni, igen fontos tényező, hogy milyen színekből építsük fel. Lehet, hogy van már egy konkrét kiválasztott, de mellé nem mindig elég a fehér (#ffffff) vagy a fekete (#000000). Úgyhogy ilyenkor inspiráció kell. Én innen szerzem: http://www.colourlovers.com/palettes/top

Miért jó? Mert sok emberke helyetted megalkotott szép színharmóniákat, különböző hangulatokban. Elegendő csak szétnézned, és biztos megtalálod, amelyik hozzád illik, avagy a tervezendő weblaphoz.

A Hue Options lenyíló menüben kiválaszhatsz pl. egy-egy fő színt, mely aztán százával hozza az eredményeket. Javaslom, hogy a rikító színeket kerüld, a szemnek jobbat tesz, ha a lágyabb árnyalatok jelennek meg a képernyőn. Ez a keresés itt az optimális, hexadecimális kódra nem érdemes keresni, mert nem túl sok az esélye, hogy pont az szerepel egy-egy palettán…

Hány színt használj a palettákról? Ahogy jól esik. Én általában szeretem 3 színre korlátozni, mert nem okoz zsúfoltságot. Jelen oldalamon is van szürke, és két féle zöld.

Egyre figyelj: használhatsz nem csak harmonizáló, hanem ún. komplementer színeket is, de ezeket soha ne tedd egymásra! Gondolj csak arra, hogy zöld hátteren milyen piros betűt olvasni… Ha ez elütő színeid közül egy erős, akkor a másik legyen halványabb, ne keverd pl. az élenk lilát élénk sárgával. De ezt nagyjából érezni lehet. Ha nem fáj a szemed, mikor ránézel, az már jónak számít. :)

]]> http://lemmikki.hu/design/szinkavalkad/feed/ 6 http://lemmikki.hu/kezdoknek/bongeszesi-elmeny-mire-figyeljunk/ http://lemmikki.hu/kezdoknek/bongeszesi-elmeny-mire-figyeljunk/#comments Sun, 09 Dec 2007 12:43:45 +0000 Zina http://lemmikki.hu/alapok/a-bongeszesi-elmenyt-befolyasolo-tenyezok/ Nem tudjuk, honnan jöttek

Persze statisztikából utólag megtudhatjuk, előre nem tudjuk, milyen úton érkezett el hozzánk, hogy direkte minket akart látni, avagy egy keresőből.

Tegyük tisztába, miről is szól az oldal: legyen minden oldalon elegendő információ ahhoz, hogy tudja, miről szól az oldal, pontosan hol is van az oldalon belül, mit talál az adott oldalon, hogyan juthat tovább, és hogy szeretheti meg azt, amit akar.

Internet kapcsolat sebessége

Igen, még mindig vannak lassú internet kapcsolatok! Bár a modem egyre kihal, de terjedőben van a mobilos internet, ami 3G nélkül lehet akár 0,5 KB/másodperc. Ott vannak még a munkahelyről netezők, ahol általában azért rendesen be van lassulva a forgalom a sok felhasználó miatt. Igen, gondoljunk rájuk is, mert megérdemlik. Mindig a lehető legalacsonyabban tartsuk az oldal méretét.

• Ne pakoljunk fel felesleges képeket, a fontos kép elemeket optimalizáljuk (pl háttérkép: legyen kicsi, ismétlődő, ne egy nagy másfél megás kép). A lehető legtöbb helyen használjunk szöveget a képek helyett (pl menük)
• Használjunk css fájlokat, amit az alap oldalból hívjunk meg, így annak mérete alacsony marad, a css-t pedig ha már egyszer betöltötte, többször nem kell, és így még gyorsabb lesz
• A html-t ne bonyolítsuk, maradjunk egyszerűek.

Betűtípusok variálása

Nem mindegyik számítógépen van feltelepítve ugyanaz a betűtípus. A MAC és PC felhasználóknál ez pl. teljesen más. A PC felhasználóknál megjelenő Verdana, ami egyébként népszerű webes betűtípus, nincs a MAC gépeken. Egyes fontok, melyekről azt gondoljuk, hogy elterjedtek, ott vannak mindenhol mégsincsenek.

A probléma úgy orvosolható, hogy nem a betűtípusra építjük a dizájnt. Válasszunk egyszerű sans serif betűt és ennyi. A css fájlban ezt az alábbi módon jelenítsük meg (pl.)

font-family:verdana,helvetica,arial,sans-serif;

Ennek a lényege: ha van Verdana típus, akkor azzal jelenik meg. Ha nincs, akkor a Helveticat (alap MAC sans serif font) keresi. Ha az sincs, akkor az Arialt (alap PC sans serif font). Ha az sincs, akkor az alapértelmezettként beállított sans serif fontot. Ezzel elkerülhetjük a legtöbb kellemetlenséget.

Más betűtípusokat leginkább csak akkor használjunk, ha a gyors olvashatóság nem fontos, pl. serif típusokat használhatunk nagybetűvel kiemelt címsorokban, vagy egységnyi szélességű betűket, pl. courier kódok leírása esetében. Normál esetben mindenképp maradjunk a talp nélküli betűknél, és a kreativitásunkat adjuk ki magunkban valahol máshol.

HTML/CSS/JavaScript/Flash

Nem mindegyik böngésző támogatja a legújabb HTML és CSS verziókat. Egyes gépeken nem fut a flash (nem tudják telepíteni, vagy nem telepíthetik), aztán van egy olyan geek csoport is, akik a JavaScriptet kikapcsolják, mert csak.

Csak olyan elemeket használjunk, melyekről bizonyosan tudjuk, hogy célcsoportunk rendelkezik vele, használja. Rendszeresen ellenőrizzük a statisztikánkat, és ha azt látjuk, hogy látogatóink jelentős része (10% körüli) nem tudja elérni adott technikálat, akkor alakítsuk át az oldalt, hiszen ők is legalább olyan fontosak, mint a többiek. Céltalanul soha ne használjuk ezeket a technikákat. Sőt ezek nem célok, hanem eszközök. Ha meg tudjuk ezek nélkül valósítani célunkat, csak azért ne használjuk, hogy megmutassuk, milyen menők vagyunk. Tényleg.

Hozzáférhetőség

• A szövegekre betűket használjunk, ne képeket (ahol lehet). A CSS-sel egyszerűen alkalmazhatunk szép megoldásokat a hátterekre, gombokra stb., és az ún. mouseover effektek kialakítására is alkalmas.
• Használjuk a szöveges részeknél a betűméret változtatásának lehetőségét. A gyengénlátóknak jól jöhet, ha nem tudják elolvasni az alapból kicsire beállított betűméretet.
• Használjuk az alt attribútumokat a képek esetében, röviden, tömören, odaillően. Ha bármilyen okból nem jelenne meg a kép, akkor is tudják, mi van ott.

Forrás: Webdesign from Scratch

]]> http://lemmikki.hu/kezdoknek/bongeszesi-elmeny-mire-figyeljunk/feed/ 0 http://lemmikki.hu/kezdoknek/a-tartalom/ http://lemmikki.hu/kezdoknek/a-tartalom/#comments Tue, 04 Dec 2007 13:51:16 +0000 Zina http://lemmikki.hu/alapok/a-tartalom/ A dizájn célja, hogy megkönnyítse a kommunikációt. Az első lépés pedig nem más, mint kitalálni, hogy milyen üzenetet akarunk eljuttatni a látogatóinkhoz.

Pont ezért nem is ajánlom, hogy az előtt készítsük el az oldal dizájnját, mielőtt nem tervezzük meg alaposan, hogy az oldal miről és hogyan fog szólni. Egy jó dizájn megfelelő struktúrát ad a párbeszédhez az oldal gazdája és látogatója között.

Sajnos sok dizájner azt gondolja, hogy az ő feladata csak a kinézet megtervezése, a tartalom már az ügyfél gondja, azt majd később hozzáadjuk, megvagdossuk, hogy beleilleszkedjen az oldalba, és kész. Ez a dizájner legnagyobb hibája. Igenis figyelni kell arra, hogy kiemeljük a tartalmat, mert az a siker kulcsa, nem a kinézet.

A feladatunk: elősegíteni az oldal hatékonyságát – ehhez pedig meg kell értenünk, meg kell terveznünk, a látogatók hogyan értik meg, hogyan érik el legegyszerűbben a tartalmat.

A tervezést kezdjük egy jól felépített vázzal. Írjunk egy listát, hogy az oldal miről is fog szólni, és ha ez megvan, akkor rangsoroljuk ezeket a szempontokat. Akár le is rajzolhatjuk, hogy milyen kommunikációs pontokat szeretnénk megjeleníteni.

Ha valaki talál jó példákat, szívesen várom. Negatív és pozitív oldalról is :)

Forrás: Webdesign from Scratch

]]> http://lemmikki.hu/kezdoknek/a-tartalom/feed/ 0 http://lemmikki.hu/kezdoknek/13-dolog-ami-kell-a-honlapodhoz/ http://lemmikki.hu/kezdoknek/13-dolog-ami-kell-a-honlapodhoz/#comments Wed, 28 Nov 2007 15:16:10 +0000 Zina http://lemmikki.hu/alapok/12/ 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.

1. 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.
2. 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.
3. 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…
4. 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!
5. 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.
6. 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.
7. 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.
8. 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.
9. 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!
10. 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.
11. 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.
12. 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.
13. Elérhetőség – Mert ugye hogyan bizniszelhetnél, ha nem tudják veled felvenni a kapcsolatot?

Forrás: Essential Keystrokes

]]> http://lemmikki.hu/kezdoknek/13-dolog-ami-kell-a-honlapodhoz/feed/ 3 http://lemmikki.hu/kezdoknek/a-dizajn-felepitese-az-atfutas-elmelete/ http://lemmikki.hu/kezdoknek/a-dizajn-felepitese-az-atfutas-elmelete/#comments Fri, 23 Nov 2007 20:04:09 +0000 Zina http://lemmikki.hu/uncategorized/a-dizajn-felepitese-az-atfutas-elmelete/ A látogatók nem nézik huzamosabb ideig a monitort. Egyszerűen nem esik jól. A kis felbontás miatt nem elég élesek a képek, feliratok, ráadásul a legtöbb monitor 75 Hz-en működik, ami szintén irritálja a szemet. Ennek megfelelően senki nem szeret hosszabb szövegeket olvasni a számítógépén. Fárasztó. Aki azonban már egy ideje használ számítógépet, hozzászoktatja a szemét:

• csak átfutják a szöveget ahelyett, hogy elolvasnák,
• gyors döntéseket hoznak,
• türelmetlenek,

és ezekkel a technikákkal tökéletesen kímélik a szemüket.

Na így kell nekünk is gondolkodni, mikor elkészíthük a weboldalunkat! Kicsi rá az esély, hogy el fogják olvasni, amit oda írtunk. Főleg ha szép nagy, hosszú szövegről van szó. Na akkor elvesztünk. És elveszítettük az érdeklődőket is.

Arra kell építenünk, hogy átláthatóan szerkesszünk. Arra gondolok, hogy a kezdőlapon ne egy hosszú köszöntővel kezdjük, mert az egyébként sem érdekel senkit. Legy ez a figyelemfelhívás helye. Tegyünk ki sok linket, hogy továbbmehessen arra, ami érdekli. Emeljük ki vastag, nagy, esetleg színes betűvel azt, ami a lényeg (pl. címsorok, linkek, a szövegek esszenciája). És legyenek képek. Jól tagolják a szöveget, szépek, és ha jól választjuk ki a képeket, azok is adnak arculatot az oldalunknak.

Ha már fel kell tennünk egy hosszabb írást, azt mindenképpen tagoljuk. Legyenek a bekezdések között nagy terek, legalább 10px-esek. Az sem árt, ha a sorok magasságát is megnöveljük, ezzel szellősebbnek is tűnik. Szintén szúrjunk képeket sok betű közé, hogy ezzel még egy kicsit megtörjük a monotonitást, és fenntartsuk az érdeklődést.

Ha nagyon hosszúra írást helyezünk fel, akkor még egy pár cselre szükségünk lesz. Miért? Nem tudom ki nem ijed meg attól, ha a jobb oldalon a böngésző csúszkája hirtelen összezsugorodik fél centire… :) Én biztos. Maximum akkora a csúszka, mint a hüvelykujjunk (kb az oldal harmada). Így nem is kell 10 oldalra tennünk a tartalmat, de még kényelmesen görgethető fáradság nélkül.

Szóval:

• Csel #1. Bontsuk szét aloldalakra. A szöveg alatt (esetleg felett is) legyenek a további oldalak linkjei, a navigációs linkek.
• Csel #2. Nyomtatási lehetőség! Ha érdekli emberünket a tanulmány, vagy novella (vagy bármi), akkor azt el akarja olvasni tényleg, nem csak átfutni. Hadd nyomtassa ki, vigye haza, vagy be az ágyba. Tudjuk, a papír annyira nem utálja a szemet, mint a monitor.

Mik tehát a legfontosabb tényezők?

1. Könnyen megtalálja, amit keres. Hogy mit keres? Az igencsak függ attól, hogy milyen weblapról beszélünk, de az oldal céljának egyértelmű meghatározásával ez már könnyen megy.
2. Ezt legkönnyebben kiemeléssel tudjuk megtenni.
3. NEM KELL MINDENT kiemelni, mert az ugyanolyan rossz, mintha nem használnánk a kielelést, legyen egyensúlyban: “a kevesebb több”.
4. Figyeljünk a kontrasztra – hangsúlyos, de nem maximális kontraszt kell: kb 70-80%-os legyen színektől függően.
5. Tagoljuk a hosszabb szövegeket.

Kérdés valaki? :)

Forrás: Webdesign from Scratch

]]> http://lemmikki.hu/kezdoknek/a-dizajn-felepitese-az-atfutas-elmelete/feed/ 2 http://lemmikki.hu/kezdoknek/sajat-domain-regisztralasa/ http://lemmikki.hu/kezdoknek/sajat-domain-regisztralasa/#comments Thu, 11 Oct 2007 12:59:07 +0000 Zina http://lemmikki.hu/uncategorized/sajat-domain-regisztralasa/ Ha már weblapot szeretnénk, akkor tényleg adjuk meg a módját, és IGEN KÖNYÖRGÖM egy SAJÁT domainünk legyen!!!! Ki veszi komolyan az oldalt, ha freeweben, extrán, cjb-n, myip-n van… SENKI! Tényleg nem kerül sokba egy saját www.ennevem.hu cím.

Kezdjük azzal, hogy megkeressük az áhított címet, az alábbi link a hazai központi domain oldalra mutat. Saját domaint akarok!!!

Természetesen választhatunk .eu, .com,. net., .org vagy bármi más végződésből, ám a speciálisabban jellemzően valamennyivel drágábbak is.

FONTOS! Ha regisztrálunk egy domaint, mondjuk 2 évre 5000 Ft-ért, az nem jelenti azt, hogy már tehetjük is fel a címre az oldalunkat, mert ezek mögött nincs még tárhely, azt mindenképp szerezni kell mögé. Ennek folyamatát korábbi cikkemben már kiveséztem.

A regisztráció kb 2 hetet vesz igénybe, akár tárhellyel, akár tárhely nélkül kérjük, tehát erre mindenképp figyelemmel kell tekinteni a weblapkészítés szempontjából.

A jó domainnév választása kulcsfontosságú. Találkoztam már olyan weboldallal, melynek köze nem volt a nevéhez. A név talán népszerűvé teheti az oldalt, de ha nem azt kapja a látogató, amire vár, akkor ott akkora lesz a csalódás, hogy vissza sem tér… SOHA. Ez meg ugye nekünk nem kell. Legszebb példa, csak erős idegzetűeknek: www.modernbutor.hu

Ha egy konkrét szogláltatásról van szó, akkor sem általános nevet válasszunk (akkor sem, ha szabad a cím), mert igen nehéz megfelelni egy általános szónak. Csak tegyünk fel: te mit szólnál ahhoz, ha mondjuk meglátogatnád a wellnesshetvegek.hu weblapot, és megtalálnád ott egy baja megyei kisváros kozmetikájának oldalát?? Legyen inkább a neve hajniwellness.hu például. Tökéletesen lefedi azt, amiről szól, sőt, egy kicsit fel is turbózza. Fontos: csak egy kicsit. Ne akarjunk nagy részt a tortából, mert nem kapunk. Legalábbis így biztos nem.

]]> http://lemmikki.hu/kezdoknek/sajat-domain-regisztralasa/feed/ 0