ZINA DESIGN - webdesign ötletek, honlap tippek, weblap készítés » optimalizálás

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, Használhatóság

Zina — Fri, 22 Aug 2008 11:35:42 +0000

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.

8 tipp a bounce rate csökkentésére

Zina — Thu, 14 Feb 2008 14:47:33 +0000

A bounce rate a weblap statisztikákban a visszafordulások arányát jelzi, azaz mennyien hagyták el az oldalt azután, hogy megnyitották. A magas visszafordulási arány azt jelzi, hogy a nyitóoldalt át kell alakítani, vagy testre kell szabni ahhoz az adott hirdetéshez, amely rámutat. Ha alacsony a visszafordulási arány, az azt jelzi, hogy a tartalom különösen érdekes a látogatók számára.

Ha magas a visszafordulási arányunk, ideje, hogy átalakítsuk az oldalunkat. Szerencsére vannak bevált taktikák, amivel csökkenthetjük a rátát. Ezekkel egyrészt az egyszeri látogatókat törzsolvasóvá tehetjük, másrészt – ha hirdetések megjelenítésére adnánk a fejünket – többet is fog érni az oldalunk.

Tehát itt a 8 módszer, hogy csökkentsük le a visszafordulások arányát:

Egyszerűsítsük le a kezdőoldalt, csak a leglényegesebb információk legyenek itt.
Az új látogatók nem érdeklődnek még annyira az oldalunk iránt. A lehető leggyorsabban meg kell mutatnunk nekik az oldal lényegét. A felesleges funkciók, elemek elvonják a figyelmét arról, amit mi szeretnénk nekik mutatni. Tegyük rendezetté, egyszerűvé a kezdőoldalt, úgy, hogy az új látogató figyelme egyből arra irányuljon, hogy mi mit akarunk neki (el)adni.
Emeljük ki a legjobb írásunkat/ajánlatunkat a kezdőlapon.
Bár lehet sok kiváló írásunk, az új látogatóknak fel sem fog tűnni, egybecsúszik az egész, és unalmas lesz. Az új látogatók mindenből a legjobat akarják. Nagyon könnyen kielégíthetjük eme igényüket, ha csinálunk egy listát a legnépszerűbb cikkeninkről (mondjuk az oldalsáv tetején), vagy a főoldal tetején kiemeljük a legjobbat.
Tegyük ki a kategóriák/témák listáját.
Nem csak a navigációt könnyíti meg, de ezzel könnyen áttekinthető, hogy miről is szól az oldalunk. Ha egy új látogató meglátja ezt a listát, nagyon könnyen kiválaszthatják azt a témát, ami igazán érdekli őket. Kb. 10 témakör elegendő is, elég sok ahhoz, hogy szembetűnő legyen, de nem is túl hosszú ahhoz, hogy elvesszen benne, és feladja a keresgélést.
Hosszú írásokhoz használjuk annak kivonatát.
Ugye igen idegesítő, mikor hosszan kell görgetni az oldalt, mert annnnnyi szöveg van rajta? Az új látogatókank sem fog tetszeni. Ha túl hosszúak az írások, akkor annak csak a rövid kivonatát jelenítsük meg, így nem lesz túl sok a tartalom egy helyen, és nem döntenek úgy látogatóink, hogy inkább másik oldalt néznek meg.

A Wordpress-ben két megoldás is van erre: az egyik az ún. “more” tag használata, mely nálam pl. úgy jelenik meg “Muszáj tovább olvasnom »” linkként jelenik meg, oda szúrható be, ahová akarjuk, és az utána levő szöveg már csak a linkre kattintás után jelenik meg. A másik mód, hogy használjuk a Megjegyzés kivonat ill. Post excerpt mezőt, ahová beírhatunk kedvünk szerint a cikk szövegétől eltérő leírást is, vagy képet is csatolhatunk hozzá.
Mutassunk kapcsolódó anyagokat.
Új látogatónk megnézte egyik írásunkat. És akkor hogy tovább? Sokszor mennek vissza. Adjunk nekik további szemezgetnivalókat, pár linket a hasonló témakörökből. Legyenek a bejegyzés alján, ha végére ér, egyből mehessen tovább. A linkeket beszúrhatjuk sajátkezúleg, vagy választhatunk (írhatunk) valamilyen scriptet hozzá, Wordpress esetéb pl. népszerű a Contextual Related Posts plug-in.
A főoldalra mutató link legyen könnyen megtalálható helyen.
Ha látogatónk keresőből talált ránk, és nem a főoldalra, hanem az egyik aloldalunkra mutató linkken jött hozzánk, akkor nagy valósíznűséggel látni szeretné a főoldalunkat is. A főoldalra mutató link legyen jól látható, könnyen megtalálható helyen, pl. bal felső sarok vagy a fejlécben lévő kép. Ha ezt nem találják meg könnyen, elveszíthetik a türelmüket, és rákattintanak a “Vissza” gombra.
A bemutatkozó oldal legyen könnyen megtalálható.
Az első látogatók igen fontosnak tarthatják, hogy megtalálják leírva, hogy miről is szól a weblapunk. A leggyakrabban akkor hagyják el a lapunkat, ha nem tudják pontosan, mi is az, amivel találkoztak. A bemutatkozó oldal (About) legyen könnyen megtalálható, és írja le egyértelműen, tömören a weblapunk lényegét.
Legyen jelmondatunk vagy egy tömör leírásunk a főoldalon is.
Egy rövid mondat az oldalról igen sokat segíthet az új látogatónak már az első pillantásra, segít neki megtudni, miről szól a weblapunk és mit ajánl nekik. Egy jól eltalált jelmondat inkább arra ösztönzi a látogatót, hogy tovább kíváncsiskodjon, kevesebb az esélye, hogy egyszerűen tovább megy.

Irodabútort a bútorboltból

Zina — Tue, 04 Dec 2007 15:27:24 +0000

Az oldalt az az aszalos.lap.hu gyűjteményben találtam, ahol számos olyan weboldal van, melyre szót vesztegetni sem érdemes, annyira szánalmasak. Nem is rendeltem tőlük semmit, annak ellenére, hogy lehet, jó és olcsó munkát végeznek. Ez a weboldal nem is tudom hogy került a gyűjteménybe, hiszen nem gyártanak, hanem csak árulnak, azok közül is csak irodabútort. De mindegy, nézzük.

SILVER OFFICE | oldal megtekintése >>

Haladnának a korral, csak épp nem a megfelelő lépésben. Nézzük meg, miként javíthatunk, ha hasonlóan 10 éve készített weblapunk van.

Splash oldal. Ilyet mi ne tegyünk. Felesleges. Nézd meg a fogalomtárban. Katt a linkre.

(Aki most vetne rám egy követ, hogy én is csináltam ilyet a cegleditermal.hu-n, annak elmondanám, hogy nem akartam, de az megrendelő nagyon kérte, itt a nyelvek és a három teljesen különálló aloldal közül lehet választani.)

Belépéskor a Cégbemutató oldalra ugrik automatikusan az oldal. Megint egy rossz döntés, úgysem olvassa el senki. Én megerőltettem magam, és találtam benne féligmeddig hasznos mondatot, kiemelném a lényeget:

Az Irodabútor kinálantunkat irodai görgősszék, bőr fotel, tárgyaló szék, fogas, ülőgarnitura, szemetes, és egyébb kiegészítő széles palletáját találja meg cégünknél. Irodai görgősszék, fotel, tárgyaló széknél közel 50 féle kárpitválasztási lehetőség van. Irodai székeinkhez székszervíz hátérel rendelkezünk, igy az elromlott szék alkatrészeket akár azonnal is cseréljük pl: (gázlift, görgők).

A helyesírási hibákat most hagyjuk, a gond itt az, hogy egy szép hoszzú szövegben EL VAN REJTVE a lényeg. Ezeket ki kell emelni, mert csak úgy látják meg a leendő kliensek, így meg igencsak könnyű elsiklani felettük.

A kezdőoldalnak a Termékeinknek kellene lennie, csak mondjuk nem ilyen formában. Mert most mit látunk: 4 kék ovális pöttyöt. Az irodai székekre kattintva még több jön fel. Áááá! A kék pöttyök nem fogják meg a figyelmem! Képek kellenek a termékekről!!!

Amikor végre tényleg elérünk a termékekig, akkor végre megkapunk, amit akarunk. Képeket és árakat. Ugyan túl nagyok a képek, és nem lehet rájuk kattintani a további részletekről érdeklődve, mindenképp pozitív, hogy van illusztráció, a grafikus megpróbálta megoldani, hogy azok beleolvadjanak a kék háttérbe, és VAN ÁR! Miért örülök ennek ennyire? Sok hasonló weboldalon nincs. Én meg potn azért nézek szét a neten, hogy utánanézzek, mit, hol és mennyiért tudok beszerezni. Ahol nincs ár, az már engem nem is érdekel. Szerintem nem vagyok egyedül.

Lehetne az egészet jobban webáruházasítani. Ha nem is tudjuk kivitelezni a netes megrendelést (bár nem bonyolult, és vannak rá ingyenes megoldások), akkor is jobban mutat, átláthatóbb, igényesebb.

Akció menü – ezzel kellene kezdeni az egészet. Szépen előtérbe helyezni, hogy igen, itt az alkalom, ezt a terméket most ilyen kedvező feltételekkel kapja meg! Ne dugjuk el. Legyen ez, amit meglát először a látogató! Ne neki kelljen keresgélnie!

Összességében azt látom, hogy az oldal készítője próbálkozik olyan megoldásokkal, melyek hasznosak lehetnek, de a hatékonyság igencsak a béka feneke alatt van. Megérdemelne az oldal egy szép, új, modern dizájnt, elfelejtve ezt a kilencvenes évek közepén divatos kinézetet. Használnia kellene azokat a vevőcsalogató és megtartó technikákat, melyeket fent említettem, és elfelejteni az elavult splash oldalt, a bemutatkozás központba helyezését, elfeledkezve a vevő igényeiről. MODERNIZÁLÁS. Ez az, ami igencsak ráférne.